Posso combinar aria-label e aria-coveredby?

Question

Eu pesquisei e não encontrei nenhuma informação se posso combinar o aria-labele aria-describedbypara um elemento e se isso causaria confusão para alguém que usa um leitor de tela.

Eu tenho uma lista de muitos itens e cada item tem um titlee, ao lado do título, está um ícone de PDF para baixar um pdf do item, como este:

<ul>
    <li>
        <div id="item-{{item.id}}">{{item.title}}</div>
        <button class="icon-pdf"></button>
    </li>
</ul>

Gostaria de saber se posso fazer algo assim e se ainda faria sentido para o usuário e se os leitores de tela lidariam com este cenário:

<ul>
    <li>
        <div id="item-{{item.id}}">{{item.title}}</div>
        <button class="icon-pdf" 
                aria-label="Download PDF button" 
                aria-describedby="item-{{item.id}}">
        </button>
    </li>
</ul>

Talvez seja melhor converter o buttonem um link e apenas usar um titleatributo como este?

<a href="javascript:void(0);//Download PDF"  
   class="icon-pdf"
   title="Download PDF"
   aria-describedby="item-{{item.id}}">
</a>

Answer 1

Resposta curta

Não há necessidade de adicionar as informações extras que você está tentando adicionar se você usar um hiperlink e práticas recomendadas de adicionar tipo e tamanho de arquivo entre colchetes (oh e idioma se o seu site for multilíngue).

Resposta longa

Para responder à pergunta original, sim, você pode usar aria-labele aria-describedbyjunto. Eles servem a propósitos diferentes.

aria-labelserve para fornecer um nome utilizável para um controle, ele substitui qualquer informação derivada semanticamente (ou seja, texto do botão).

aria-describedbyé usado para fornecer informações adicionais para controles personalizados, etc. Ele também pode ser usado para fornecer dicas para usuários de leitores de tela. Também esta resposta que dei contém informações sobre suporte paraaria-describedby etc.

Se você usá-los juntos, você obterá a aria-labelleitura primeiro e, em seguida, obterá a aria-describedbyinformação lida depois.

Exemplo rápido de aria-labele aria-describedbyjuntos

<button aria-label="read first" aria-describedby="extra-info">Not Read Out</button>
<div class="visually-hidden" id="extra-info">This would be read second</div>

No exemplo acima, seria lido "ler primeiro, isso seria lido depois", observe que o texto do botão original "Não lido" foi completamente sobrescrito.

Seu caso de uso realmente não precisa disso

Com tudo o que foi dito acima, aqui estão algumas sugestões para o seu caso de uso, pois não há necessidade real de WAI-ARIA aqui: -

1. Mesmo que um documento esteja sendo baixado na mesma página, você deve usar um hiperlink. O principal motivo para isso é quando o JavaScript falha em sua página (ou para aqueles que ainda navegam na Internet sem JavaScript), ocorre um fallback para que o documento fique acessível. Além disso, isso ajuda com SEO se você quiser que o documento seja indexado etc. (Eu sei, atrevo-me a mencionar SEO no Stack Overflow!). Finalmente, é semanticamente correto, é um arquivo vinculado e é para isso que servem os hiperlinks.

2. Se a informação for útil para usuários de leitores de tela, provavelmente também será útil para outras pessoas, ou seja, aqueles com deficiências cognitivas. No entanto, neste caso de uso, seria melhor que o controle que executa a ação contenha todas as informações relevantes.

3. Geralmente (se o seu design puder ser ajustado para permitir isso), é uma boa ideia incluir o tipo e o tamanho do arquivo como informações adicionais entre colchetes ao lado de qualquer download.

4. Não use o titleatributo, não é um atributo muito acessível e é inútil para a maioria dos usuários de leitores de tela, pois não será anunciado. (Também é inútil para qualquer usuário de teclado, etc.)

5. WAI-ARIA é útil para informações suplementares, a regra geral é que um controle deve funcionar sem ela e WAI-ARIA é para realce progressivo.

Juntando tudo

Você notará no exemplo a seguir que removi completamente a necessidade das informações extras "Baixar PDF".

Como um hiperlink é semanticamente correto e o fato de afirmarmos que é um PDF entre colchetes (mais o tamanho do arquivo), não há necessidade de dizer às pessoas que isso fará o download do PDF, elas já sabem disso!

Fiz dois exemplos diferentes para você, um com o tipo e o tamanho do arquivo visíveis e outro com eles visíveis apenas para usuários de leitores de tela.

Eu adicionei comentários ao primeiro exemplo para explicar bits. Qualquer dúvida é só perguntar!

body {
  font-family: Century Gothic;
  background: #272727;
}

.btn {
  float: left;
  width: 25%;
  height: 30px;
  padding: 1px 0px;
  min-width: 200px;
  margin: 2% .8%;
  overflow: hidden;
  background: #527EBF;
}
.btn:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  background: #666;
}
.btn a {
  text-decoration: none;
}
.btn img {
  width: 22px;
  margin: 0 5px;
  transition: all .5s ease;
  position: relative;
  left: 0;
  transform: scale(0.7);
}
.btn .container span.text {
  font-size: 12px;
  color: #fff;
  position: relative;
  left: -3px;
  top: -8px;
  transition: all .45s ease-in-out;
}


.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<div class="btn">
    <a href="link-to-pdf.pdf"> <!--obviously if you want to intercept this with an event listener in JS then do so but leave the URL for fallback-->
      <div class="container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/267px-PDF_file_icon.svg.png" aria-hidden="true"/> <!-- hide the icon from screen readers with `aria-hidden`, preferably use a **inline** SVG instead of external image to save an uneeded request. -->
        <span class="text">Item Name (PDF, 21MB)</span> <!-- added the file type and size as this is useful information for people, made it visible to all. If yourdesign won't allow for this then hide it as per second example -->
      </div>
    </a>
  </div>
  
  
  
  <div class="btn">
    <a href="link-to-pdf.pdf">
      <div class="container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/267px-PDF_file_icon.svg.png" aria-hidden="true"/>
        <span class="text">Item Name Hidden file size info <span class="visually-hidden">(PDF, 21MB)</span></span>
      </div>
    </a>
  </div>