Leitores de tela e a primeira regra do ARIA

A primeira regra do ARIA é evitá-lo: se um elemento HTML nativo já faz o trabalho, como o button, use-o em vez de acrescentar uma função a uma div.

Com o que um leitor de tela trabalha

Um leitor de tela não lê pixels. O navegador constrói, a partir do HTML, uma árvore de acessibilidade, uma cópia simplificada da página em que cada elemento de interesse tem uma função (botão, link, título, caixa de seleção), um nome (o texto que o identifica) e às vezes um estado (marcado, expandido, desativado). O leitor de tela lê essa árvore em voz alta ou a envia para um display braile. O critério de sucesso 4.1.2 Nome, Função, Valor da WCAG 2.2, de nível A, pede que todo controle da página exponha essas três coisas.

Os usuários raramente ouvem uma página de cima a baixo. Os leitores de tela embutidos nos principais sistemas operacionais, e os gratuitos que se podem instalar, deixam a pessoa abrir uma lista de títulos, links ou pontos de referência, pular para o próximo campo de formulário ou ler uma linha de cada vez. É por isso que as unidades anteriores importam tanto: títulos de verdade, campos rotulados, botões que são botões e texto alternativo alimentam diretamente essa árvore. O atributo lang no elemento html também importa. O critério 3.1.1 Linguagem da Página o pede, e os leitores de tela o usam para escolher a voz e a pronúncia certas.

O que o ARIA acrescenta

WAI-ARIA (Accessible Rich Internet Applications) é um conjunto de atributos que mudam o que entra na árvore de acessibilidade: role define a função, atributos como aria-label definem o nome, e outros como aria-checked ou aria-expanded definem o estado. O ARIA muda só o que é anunciado. Ele não faz um elemento receber foco, não acrescenta comportamento de teclado e não muda a aparência. O Guia de Práticas de Autoria ARIA do W3C diz isso num título: "Nenhum ARIA é melhor que um ARIA ruim". Um ARIA errado conta a quem usa leitor de tela algo falso sobre a página.

As regras de uso do ARIA

O documento do W3C Using ARIA traz regras curtas que são citadas em todo lugar (ele foi marcado como rascunho descontinuado em fevereiro de 2026, mas as regras em si não mudaram). Regra 1: se você pode usar um elemento ou atributo HTML nativo que já tenha embutidos o significado e o comportamento de que precisa, use-o, em vez de reaproveitar outro elemento com ARIA. Regra 2: não mude a semântica nativa a menos que seja mesmo necessário. Regra 3: todo controle ARIA interativo precisa poder ser usado pelo teclado. Regra 4: não ponha role="presentation" nem aria-hidden="true" num elemento que pode receber foco, senão alguns usuários vão cair em "nada".

Onde o ARIA ajuda é em tapar buracos que o HTML não cobre. Um botão que contém só um ícone não tem texto, então não tem nome; aria-label="Close" dá um nome a ele. Um ícone SVG ao lado de um texto visível é decoração, e aria-hidden="true" no svg o mantém fora da árvore. Esses são os dois atributos de que a maioria dos iniciantes precisa. Para widgets inteiros, como abas ou menus, siga o padrão correspondente do Guia de Práticas de Autoria em vez de inventar um.