Acessibilidade (A11y): Ética e SEO andam juntos

Imagine entrar em um prédio e não ter rampa para sua cadeira de rodas. Na web, isso acontece quando você usa uma div com onClick em vez de um button.

Acessibilidade Web (A11y) garante que pessoas com deficiência visual, motora ou cognitiva possam usar seu produto.

Erros Comuns e Fáceis de Resolver

1. Semântica HTML: Use <button>, <nav>, <main>, <header>. O leitor de tela (Screen Reader) usa essas tags para navegar. Uma div é invisível para a navegação.
2. Contraste de Cores: Texto cinza claro em fundo branco é ilegível para muitos. Use ferramentas como o plugin Stark no Figma para validar contraste (AA ou AAA).
3. Foco de Teclado: Nunca remova outline: none do CSS a menos que substitua por outro indicador visual (ring). Pessoas que navegam por teclado precisam saber onde estão.

O Bônus do SEO

O Googlebot é, essencialmente, um usuário cego. Ele navega pelo código. Se seu site é semanticamente rico e acessível para um leitor de tela, ele é "acessível" para o Google. Sites acessíveis rankeiam melhor.

Ferramentas

• Lighthouse: Auditoria básica no Chrome DevTools.
• NVDA: Leitor de tela gratuito (teste seu site com os olhos fechados).
• Radix UI: Biblioteca de componentes que já vem 100% acessível.

Checklist Rápido para Todo Projeto

• Todo botão interativo usa <button> ou tem role="button" + tabindex="0".
• Imagens têm alt descritivo (ou alt="" quando decorativas).
• Formulários têm <label> associado a cada input via htmlFor/id.
• Contraste de texto verificado (mínimo AA: 4.5:1 para texto normal).
• Navegação completa via Tab e Enter (sem mouse).

O Custo de Ignorar A11y

Sites inacessíveis excluem milhões de usuários e podem violar leis (LGPD, ADA, EAA). Além disso, penalidades do Google e perda de audiência impactam diretamente o negócio. Investir em acessibilidade desde o início é sempre mais barato do que corrigir depois.

ARIA: Use com Moderação

ARIA (aria-label, aria-expanded, etc.) corrige falhas quando o HTML semântico não basta. Mas ARIA não substitui semântica: prefira <button> a <div role="button">. Use ARIA quando o elemento nativo não existir ou não for suficiente — e teste sempre com leitor de tela.

Documentação e Manutenção

Inclua requisitos de acessibilidade no Definition of Done do time. Uma checklist no PR (semântica, contraste, teclado) evita que a11y seja deixada para depois.