Nome discernível

Problema

Links e botões obtêm seus nomes acessíveis a partir do seu conteúdo de texto. Várias vezes usamos recursos visuais em nossos sites que estão presentes dentro de links, como ícones, que não provem informações textuais sobre o que representam. Isso dificulta a acessibilidade ao seu site, uma vez que leitores de tela não o conteúdo que aquele elemento representa.

Recomendações

Em caso no qual o conteúdo do link ou botão não conseguirá prover um nome discernível a ele, use o atributo aria-label para prover uma informação sobre o que aquele link representa, ajudando os leitores de tela e aumentando a acessibilidade do seu site.

Exemplo link antes

<a href="link">
    <img src="link-para-imagem-carrinho.png" />
</a>

Exemplo link depois

<a href="link" aria-label="Carrinho de compras">
    <img src="link-para-imagem-carrinho.png" />
</a>

Exemplo botão antes

<button></button>

Exemplo botão depois

<button class="cart-icon" aria-label="Comprar"></button>