Acessibilidade na prática: o básico que todo site deveria ter

Já falei aqui sobre evitar escrever HTML demais e sobre usar tag semântica em vez de div pra tudo, e uma das razões que passou batido naquele post é justamente acessibilidade. É um assunto que costuma ficar pra depois, tratado como "polimento final", quando na real é uma questão de quem consegue ou não usar o que você construiu.

Não é só sobre leitor de tela

O erro mais comum é pensar em acessibilidade como um assunto exclusivo de pessoa cega usando leitor de tela. Isso é uma parte real e importante, mas está longe de ser tudo. Tem gente que navega só com teclado, sem usar o mouse. Tem gente com baixa visão que depende de bom contraste de cor. Tem gente com alguma limitação motora que precisa de área de clique maior. Cada um desses casos é resolvido com um cuidado técnico específico, e a maioria deles nem é complicada de aplicar.

HTML semântico é o primeiro passo

Antes de qualquer atributo especial, a base de tudo é usar a tag certa pra cada coisa. Um botão é <button>, não uma <div> com onClick. Um link é <a>, não um <span> estilizado pra parecer clicável.

<!-- ruim: leitor de tela não sabe que isso é clicável -->
<div onclick="enviar()">Enviar</div>
 
<!-- bom: navegável por teclado e identificado pelo leitor de tela -->
<button onclick="enviar()">Enviar</button>

Um <button> nativo já vem com foco de teclado, ativação pelo Enter e pelo Espaço, e é anunciado como "botão" por qualquer leitor de tela, tudo isso de graça, sem escrever uma linha a mais. Recriar esse comportamento numa <div> do zero é trabalho extra pra chegar num resultado pior.

Todo <img> precisa de alt

Isso é básico, mas ainda aparece esquecido com frequência. O atributo alt é o que o leitor de tela lê no lugar da imagem, então precisa descrever o que importa ali:

<img src="grafico-vendas.png" alt="Gráfico mostrando aumento de 30% nas vendas em março" />

Se a imagem é só decorativa e não carrega informação nenhuma, o alt vazio (alt="") é o certo, porque avisa o leitor de tela pra pular ela em vez de ler o nome do arquivo em voz alta.

Contraste de cor importa mais do que parece

Texto cinza claro em fundo branco pode ficar bonito numa tela grande de monitor, mas fica ilegível pra quem tem baixa visão, ou até pra qualquer pessoa usando o celular sob luz de sol forte. O padrão WCAG pede uma razão de contraste mínima de 4.5:1 entre texto e fundo pra texto normal.

Não precisa calcular isso de cabeça, ferramentas como o Lighthouse (que já mencionei aqui num post sobre performance) apontam automaticamente qualquer combinação de cor com contraste insuficiente na aba de acessibilidade.

Foco de teclado visível

Tenta navegar num site usando só a tecla Tab, sem tocar no mouse. Em muitos sites, o indicador de qual elemento está selecionado simplesmente some, porque alguém escreveu isso em algum CSS global:

/* nunca faça isso sem colocar algo no lugar */
*:focus {
  outline: none;
}

Tirar o outline sem substituir por outra indicação visual deixa qualquer pessoa que navega por teclado completamente perdida, sem saber onde está na página. Se o visual padrão não combina com o design, a solução é trocar por um estilo de foco customizado, nunca remover sem colocar nada no lugar:

button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

ARIA: só quando o HTML nativo não resolve

Atributos ARIA (aria-label, aria-hidden, role) existem pra descrever elementos que o HTML puro não descreve bem sozinho, geralmente em componentes customizados, tipo um menu suspenso feito do zero.

<button aria-label="Fechar modal" aria-expanded="false">
  <svg><!-- ícone de X, sem texto --></svg>
</button>

Aqui, o botão só tem um ícone visualmente, sem texto nenhum. Sem o aria-label, um leitor de tela não teria o que anunciar. A regra geral do ARIA é: primeira opção sempre é usar a tag HTML nativa certa, ARIA é o recurso pra quando não existe tag nativa que resolva o caso.

Vale o esforço

Acessibilidade não é um item de checklist pra passar numa auditoria, é sobre o site funcionar de verdade pra quem não usa mouse, não enxerga bem, ou depende de tecnologia assistiva pra navegar. A maior parte do trabalho, tag semântica certa, alt em imagem, contraste adequado, foco visível, é barata de aplicar, principalmente se você já pensa nisso desde o início do projeto, em vez de tentar encaixar depois que tudo já foi construído do jeito errado.