Um botão que só mostra um desenho precisa de nome acessível que descreva sua ação. Prefira texto visível; se o desenho for o único conteúdo, use aria-label ou aria-labelledby. Use elemento button nativo e deixe o ícone interno decorativo.
Exemplo com SVG
<button type="button" aria-label="Fechar aviso">
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
<path d="M5 5l14 14M19 5L5 19"></path>
</svg>
</button>O nome programático é “Fechar aviso”. Se houver texto visível, como “Fechar”, mantenha esse rótulo no nome acessível; não o substitua por outro que não contenha o texto visível. Quando o texto interno já nomeia o botão, remova aria-label redundante.
Escolha a técnica
- Texto visível: primeira opção; facilita o reconhecimento e evita nomes fora de sincronia.
- aria-label: quando só há ícone e a ação é clara, como “Pesquisar” ou “Fechar diálogo”. Nomeie a ação, não a aparência (“lupa”).
- aria-labelledby: quando existe texto visível apropriado em outro elemento, referencie o id em vez de duplicar o rótulo.
- SVG: marque como decorativo com aria-hidden=“true” e focusable=“false” para não repetir o nome.
Não use title como única forma de nome. Se o botão alterna estado, nome e estado são coisas distintas: atualize aria-expanded quando expande conteúdo e associe o painel com aria-controls.
Verifique
Navegue por Tab; confirme foco visível e ativação por Enter e Espaço. Inspecione a árvore acessível: papel botão, nome útil e estado correto. Teste leitor de tela e botões repetidos (por exemplo, “Remover produto X”). Se existe texto visível, confira que ele aparece integralmente no nome, inclusive para usuários de voz.
Fontes: padrão de botão WAI-ARIA, nomes e descrições acessíveis e técnica ARIA14. Veja o núcleo institucionais.