O que é
Muitos botões em sites modernos usam apenas um ícone, sem texto visível — uma lupa para a pesquisa, um ícone de menu hambúrguer, um X para fechar uma janela. Um visitante vidente reconhece estes ícones instantaneamente pela familiaridade e pelo contexto, mas um leitor de ecrã não tem nada para ler em voz alta a não ser que o botão também tenha texto acessível associado nos bastidores, normalmente através de um atributo aria-label (por exemplo, aria-label="Pesquisar"), que não é mostrado visualmente mas é anunciado a um leitor de ecrã.
Sem isso, um leitor de ecrã anuncia apenas a palavra genérica "botão", sem mais informação nenhuma, sem qualquer indicação do que aconteceria ao premi-lo.
Por que importa
Um ícone que é visualmente óbvio para uma pessoa vidente não transmite nenhuma informação por si só a quem não o consegue ver — o ícone em si não tem significado inerente sem visão, só o conceito que representa é que tem, e esse conceito precisa de ser comunicado de outra forma a um utilizador de leitor de ecrã. Uma página cheia de botões só com ícone, cada um anunciado apenas como "botão, botão, botão", deixa um utilizador de leitor de ecrã sem forma de saber o que cada um faz, a não ser adivinhando e premindo-os para descobrir.
Este é um problema comum e fácil de não notar, precisamente porque os botões só com ícone são um padrão de design habitual e visualmente limpo — a lacuna de acessibilidade só se torna evidente ao testar de facto com um leitor de ecrã, em vez de apenas olhar para a página.
Como corrigir
- Identifica todos os botões do teu site que usam apenas um ícone, sem rótulo de texto visível.
- Adiciona um atributo
aria-labelque descreva a ação do botão em poucas palavras, por exemploaria-label="Fechar menu"ouaria-label="Pesquisar". - Sempre que possível, considera acrescentar também um pequeno rótulo de texto visível junto ao ícone — isto ajuda também os visitantes videntes e reduz a dependência de memorizar o significado dos ícones.
- Se usares um criador de sites, verifica se os botões de ícone gerados pela plataforma já incluem rótulos acessíveis por predefinição — alguns incluem, outros exigem que preenchas manualmente um campo como "nome acessível" ou "texto para leitor de ecrã".
- Testa com um leitor de ecrã gratuito (NVDA, VoiceOver), navegando até cada botão de ícone com Tab e confirmando que é anunciada uma ação clara e específica, e não apenas "botão".