Controle somente com ícone

O Silktide procura botões e links rotulados apenas por um ícone — como um X de fechar, um menu hambúrguer ou uma lupa de pesquisa — sem um nome de texto associado para pessoas que não conseguem ver o ícone.

<!-- Problema: nada anuncia o que este botão faz -->
<button><svg>…</svg></button>

<!-- Correção: dê um nome ao controle -->
<button aria-label="Open menu"><svg>…</svg></button>

Por que isso é importante

Usuários que enxergam entendem o que um botão com ícone faz com base em sua forma e no contexto. Usuários de não têm um recurso equivalente: sem um , o software anuncia um “button” ou “link” sem nome, ou lê códigos restantes, como o nome da classe CSS de um ícone. Todo controle somente com ícone sem um nome é um controle que esses usuários precisam ativar às cegas ou ignorar completamente — e geralmente são os controles mais importantes da página: menus, pesquisa, fechar e próximo.

Como corrigir

Adicione um rótulo que descreva o que o controle faz, não a aparência do ícone: aria-label="Search", e não aria-label="Magnifying glass".
Se o mesmo texto já existir como texto visível nas proximidades, aponte para ele com aria-labelledby em vez de duplicá-lo.
Se o ícone for um <img>, fornecer um texto alt significativo também dará um nome ao controle.
Se o controle não fizer nada útil e existir apenas para decoração, torne-o não interativo em vez de dar um nome a ele.

Como o Silktide faz a verificação

Encontre os botões, links e controles de divulgação visíveis em cada página, incluindo elementos com role="button" ou role="link".
Ignore qualquer controle que já tenha um nome: texto visível com 2 ou mais caracteres, um aria-label, um aria-labelledby ou um atributo title.
Verifique se os controles restantes contêm um ícone: um SVG incorporado, uma imagem com texto alt vazio ou texto desenhado em uma fonte de ícones reconhecida.
Informe os controles que exibem um ícone, mas não têm nome.

Solução de problemas

O controle está rotulado de outra forma

O Silktide considera aria-label, aria-labelledby, title, texto visível e texto alt de imagens. Se o controle tiver um nome por meio de um mecanismo que não esteja entre esses — o que é raro — verifique com um leitor de tela se o nome é realmente anunciado e o resultado se for o caso.

O ícone é decorativo e aparece ao lado de um texto

Controles com texto visível significativo não são identificados, mesmo quando há um ícone ao lado do texto. Se um controle foi identificado, seu texto não alcançou 2 caracteres significativos — um texto com um único glifo, como “×”, não conta como rótulo.