Acessibilidade

Acessibilidade não é um extra. Não é um bônus que você adiciona no final do projeto quando sobra tempo. É a base. Se sua interface não funciona para quem usa leitor de tela, quem navega por teclado ou quem tem daltonismo, ela não funciona. Ponto.

O mito do usuário médio

Não existe usuário médio. Existe uma faixa de habilidades que muda dependendo do contexto:

• Uma pessoa com visão perfeita pode ter dificuldade em tela sob sol forte
• Uma pessoa sem limitação motora pode estar segurando o celular com uma mão no transporte público

Acessibilidade melhora a experiência para todo mundo, não só para quem tem deficiência declarada.

WCAG

As Web Content Accessibility Guidelines são o padrão. Os quatro princípios (POUR) resumem tudo:

• Perceptível: a informação não pode ser invisível para qualquer sentido
• Operável: a interface funciona com qualquer método de entrada
• Compreensível: o conteúdo e a operação são claros
• Robusto: funciona com tecnologias assistivas atuais e futuras

O nível AA é o mínimo aceitável. AAA é ideal mas nem sempre viável. Foque em AA primeiro.

Semântica HTML

A forma mais eficiente de fazer acessibilidade é usar o HTML certo:

• Button para ações
• Link para navegação
• Heading para títulos na ordem correta

Quando você usa div para tudo, precisa reconstruir com JavaScript o que o HTML já faz de graça.

/* Errado: div que age como botão */
<div class="btn" onclick="submitForm()">Enviar</div>

/* Certo: button nativo */
<button type="button" onclick="submitForm()">Enviar</button>

O button nativo já tem foco por teclado, role de botão, ativa com Enter e Space, e é anunciado corretamente por leitores de tela. O div precisa de tudo isso implementado manualmente.

ARIA

ARIA existe para quando o HTML não é suficiente. Tabs, modais, menus dropdown, autocomplete. Mas existem duas regras:

• Primeira regra: não use ARIA se o HTML nativo resolve
• Segunda regra: se usar ARIA, teste com leitor de tela. Atributos ARIA sem comportamento correspondente são pior que nada

A decisão

Neste guia, cada componente usa HTML semântico como base. Quando precisamos de comportamento complexo (como o drawer mobile), usamos Radix UI porque já vem com ARIA, foco trap e announce construídos. Não reinventamos acessibilidade.