A primeira regra: nenhum ARIA é melhor do que um ARIA incorreto

ARIA é um conjunto de atributos HTML que informa às tecnologias assistivas o que um elemento é e faz quando a marcação, sozinha, não consegue dizer isso.

Eis o ponto importante: ARIA só altera o que é anunciado. Ela nunca adiciona cliques, foco ou suporte ao teclado por conta própria.

A primeira regra oficial é: se um elemento HTML nativo puder fazer o trabalho, use-o em vez de recriá-lo com ARIA.

Um botão real pode receber foco, é acionado com Enter e Espaço e anuncia sua função gratuitamente. Você não precisa escrever nada disso.

Uma função incorreta mente ativamente para os usuários. ARIA incorreta é pior do que nenhuma ARIA em termos de danos: ela pode ocultar conteúdo ou descrevê-lo de forma errada.

ARIA substitui a semântica nativa. Adicione role=presentation a um título e os leitores de tela deixarão de tratá-lo como título.

ARIA fornece exatamente três tipos de informação: uma função (o que o elemento é), estados e propriedades. Esse é o conjunto completo de recursos.

Definir aria-hidden em um elemento o oculta dos leitores de tela, mas ele continua totalmente visível na tela. As duas camadas são independentes.

Use ARIA quando nenhum elemento nativo for adequado, como em uma tablist ou em um controle deslizante personalizado. Depois, use-a com precisão e faça testes.

Se precisar criar um componente personalizado, ARIA e JavaScript trabalham juntos. ARIA dá o nome, e JS fornece a lógica de foco e do teclado.

A melhor página acessível geralmente usa pouquíssima ARIA. HTML semântico primeiro; use ARIA apenas para preencher as lacunas restantes.

Você aprendeu que ARIA descreve, mas nunca define o comportamento. Prefira HTML nativo, adicione ARIA apenas para preencher lacunas reais e faça testes sempre. 🎯