Os erros comuns no uso de ARIA (Accessible Rich Internet Applications) geralmente decorrem de tentativas
de
adicionar acessibilidade a componentes complexos sem usar as práticas recomendadas de HTML.
Aqui estão os principais erros, com base em diretrizes de desenvolvimento web:
Violação da "Primeira Regra do ARIA"
O erro mais frequente é usar ARIA quando existe um elemento HTML nativo que já resolve o problema.
- O erro: Criar um botão usando div ou span com role="button" e tabindex="0".
- A correção: Use a tag button. Elementos nativos já possuem suporte a teclado (Enter/Espaço) e
foco automático.
Uso de aria-hidden="true" em elementos focáveis
Muitos desenvolvedores ocultam elementos visualmente, mas esquecem de tirá-los da ordem de tabulação.
- O erro: Usar aria-hidden="true" em um elemento que ainda pode receber foco por teclado, o que confunde usuários de leitores de tela.
- A correção: Se o elemento não deve ser lido, ele não deve ser focável. Use tabindex="-1" ou remova o elemento do DOM.
Falta de suporte a teclado (Keyboard Support)
Atribuir um papel (role) ARIA não adiciona comportamento funcional.
- O erro: Adicionar role="button" a um elemento div e não permitir que ele seja ativado pela tecla Enter ou Barra de Espaço.
- A correção: Ao usar ARIA, você é responsável por gerenciar todo o comportamento via JavaScript.
Rótulos genéricos ou ausentes (aria-label)
Usar aria-label de forma vaga, como "clique aqui", "botão", ou "link", não dá contexto ao usuário.
- O erro: Botões de ícones sem texto descritivo.
- A correção: O aria-label deve ser descritivo: aria-label="Fechar janela" ou aria-label="Enviar formulário".
Uso indevido de aria-live
O aria-live avisa o usuário sobre mudanças na tela, mas seu uso excessivo é intrusivo.
- O erro: Usar aria-live="assertive" (que interrompe o leitor de tela) para mensagens não críticas, como atualizações de conteúdo secundário.
- A correção: Use aria-live="polite" para notificações gerais e aria-live="assertive" apenas para mensagens de erro urgentes.
Relações quebradas com aria-labelledby
aria-labelledby aponta para outro elemento para dar um nome ao componente.
- O erro: O id referenciado no aria-labelledby não existe no DOM, ou o elemento referenciado está escondido.
Uso de tabindex maior que zero
- O erro: Usar tabindex="1", tabindex="2", etc. Isso quebra a ordem de tabulação natural da página.
- A correção: Use apenas tabindex="0" (para colocar na ordem) ou tabindex="-1" (para remover da ordem).