Boas práticas

Botões sem nome acessível: a falha n.º 1 dos scanners

Os botões de ícone sem nome acessível (lupa, carrinho, cruz, menu hambúrguer) são a falha mais detetada pelas análises de acessibilidade. Para um utilizador de leitor de ecrã, ouve apenas «botão» sem contexto. Descubra as quatro técnicas para os corrigir.

Números, metodologia e condições de reutilização: ver os dados citáveis →

La resposta curta

Um botão de ícone SVG ou imagem sem o atributo aria-label, aria-labelledby ou texto visível permanece invisível para um leitor de ecrã. O utilizador ouve apenas «botão». Para corrigir: adicione aria-label para uma etiqueta curta, utilize texto visível se o espaço o permitir, ou aria-labelledby para ligar a um texto existente. Verifique com F12: o separador Accessibility deve mostrar o nome do botão.

Porque é que este defeito é crítico

Os botões sem nome acessível figuram entre as violações das WCAG mais frequentes nos Estados Unidos, segundo dados públicos de empresas de conformidade. A regra do W3C dedicada («Image button has non-empty accessible name») aplica-se em todo o lado: uma lupa de pesquisa, um carrinho de compras, uma cruz de fecho, um chevron de carrossel, um ícone de rede social, todos exigem um nome audível.

Este artigo baseia-se no estudo Inclaria 2026: entre os 55 sites de comércio eletrónico franceses analisados, 94,5 % apresentam pelo menos uma não conformidade crítica ou grave. Os botões de ícone mal nomeados figuram no topo das ocorrências detetadas, muitas vezes em várias páginas do mesmo site.

O que ouve um utilizador de leitor de ecrã

Coloque-se no lugar de alguém que navega sem ver o ecrã. Quando chega a um botão de pesquisa sem nome acessível, o seu leitor de ecrã anuncia simplesmente «Botão», e para. Nenhum contexto, nenhuma indicação da ação. Tem de sair do leitor de ecrã, abrir o inspetor do navegador ou recorrer a documentação externa para perceber do que se trata.

Mesmo cenário com um carrinho de compras apresentado como um ícone SVG isolado, uma cruz para fechar um modal ou setas para navegar num carrossel. Cada botão mudo cria uma zona de incerteza para o utilizador. Num site com 15 ou 20 botões-ícone mal identificados, a fricção acumula-se rapidamente: alguns utilizadores desistem.

As quatro técnicas para nomear um botão

1. Texto visível com visibilidade oculta (sr-only)

Adicione um elemento span com a classe sr-only contendo o rótulo. Invisível no ecrã, audível para os leitores de ecrã.

Código

Botão contendo um ícone SVG de lupa e um elemento span com a classe « sr-only » com o texto « Pesquisar ».

Vantagem: o texto também está no DOM, sendo tecnicamente acessível por um motor de busca. Desvantagem: pressupõe uma classe CSS sr-only definida na sua folha de estilo.

2. aria-label

Atributo direto no botão: aria-label=« Pesquisar ». Curto, fácil e não afeta o DOM visual.

Vantagem: minimalista, rápido de adicionar. Desvantagem: ausente do texto visível, portanto invisível para copiar-colar e para o SEO de texto.

3. aria-labelledby

Liga o botão a outro elemento textual do DOM através de um identificador: aria-labelledby=« search-label ». Ideal quando já existe um texto relevante na página.

Vantagem: faz referência a conteúdo real, rastreável. Desvantagem: requer que o texto de origem exista e tenha um id único.

4. Atributo alt em input type=image

Se utilizar um input do tipo imagem com a origem « search.png » e o texto alternativo « Pesquisar », o atributo alt serve diretamente como nome acessível.

Vantagem: semântica nativa. Desvantagem: solução obsoleta em HTML moderno, raramente recomendada.

Quando utilizar cada uma? Matriz de decisão

Armadilhas comuns

O atributo title não é suficiente

Muitos programadores acreditam, erradamente, que o atributo title=«Pesquisar» num botão é suficiente para o nomear. Na realidade, o title é um atributo de dica ao passar o rato (tooltip), não um nome acessível. Os leitores de ecrã ignoram-no, exceto em casos muito limitados. Não conte com ele.

aria-label em língua estrangeira

Se o seu conteúdo mistura línguas, atenção: o aria-label utiliza sempre a língua da página. Um aria-label=«Search» num site em francês será lido em francês pelo leitor de ecrã. Prefira texto visível ou assegure-se de que o aria-label respeita a língua local.

A armadilha 2.5.3: «Label in Name»

Uma armadilha subtil: se um botão tiver texto visível (ex. «OK»), o seu aria-label deve começar por esse mesmo texto ou contê-lo. Um botão que exibe «OK» com aria-label=«Validar» cria uma incoerência que os utilizadores de comando por voz («clique em OK») não conseguem acionar. Alinhe o nome acessível com o texto visível.

SVG sem role apropriado

Um SVG sozinho é apenas uma imagem. Coloque-o sempre dentro de um elemento semântico (button, a) ou adicione role=«button». Sem isso, o leitor de ecrã pode ignorá-lo ou anunciá-lo como uma imagem.

Como verificar em dois minutos

Abra a sua página em qualquer navegador moderno (Chrome, Firefox, Safari).

• Prima F12 (ou clique com o botão direito do rato e selecione Inspecionar).
• Localize o botão com ícone no HTML.
• Abra o separador Accessibility (Chrome, Edge, Firefox).
• Consulte o campo Accessible Name: deve apresentar um texto claro (ex. «Pesquisar», «Carrinho»). Se estiver vazio ou indicar «button», falta um nome.

Alternativamente: navegue com o teclado (Tab) até ao botão e teste com um leitor de ecrã gratuito.

Teste com teclado e leitor de ecrã

No Windows, o NVDA (gratuito, open source) é fiável. No Mac, o VoiceOver está pré-instalado (Cmd+F5). Percorra o seu site: cada botão com ícone deve anunciar o seu nome claramente. Se ouvir apenas «botão», corrija.

Casos concretos: lupa, cesto, cruz, setas

Loupe de recherche

Um botão com aria-label=« Pesquisar » contendo um ícone SVG é a abordagem padrão. Curto, claro. Se utilizar texto oculto: use um botão contendo o ícone SVG e um elemento span com a classe « sr-only » com o texto « Pesquisar ».

Panier d'achat

Prefira aria-label=« Cesto » ou aria-label=« Ver cesto (2 artigos) ». Um número de artigos pode enriquecer o contexto sem sobrecarregar o anúncio.

Croix de fermeture

Um botão com aria-label=« Fechar » contendo um ícone SVG de cruz é clássico. Um texto simples, sem jargão.

Chevrons de carrousel

Botões com aria-label=« Item seguinte » e aria-label=« Item anterior » guiam o utilizador. Evite os genéricos como « Seguinte » ou « Anterior » sozinhos; especifique: « Slide anterior do carrossel ».

Icônes sociales

Uma ligação com aria-label=« Seguir-nos no X (Twitter) » ou um botão com aria-label=« Partilhar no LinkedIn » torna explícita a rede alvo.

Intégration dans votre démarche de conformité

Os botões sem nome acessível são o defeito número um detetado pelos scans automatizados. Se iniciar uma auditoria de acessibilidade no seu site, esta violação aparecerá quase certamente, muitas vezes com dezenas de ocorrências.

A boa notícia: é fácil e rápido de corrigir. Assim que compreender o padrão, pode auditar a sua base de código, corrigir os botões ícone em poucas horas e medir o impacto: uma parte significativa da sua pontuação de acessibilidade melhora imediatamente.

Uma estratégia eficaz: inicie um scan automatizado (Inclaria, aXe, WAVE), ordene os resultados por gravidade e comece pelos botões sem nome acessível. Só isto remove uma parte significativa das não conformidades críticas em muitos sites. Depois, avance para os testes manuais e os defeitos estruturais (navegação por teclado, ordem das tabulações, contrastes).