---
nome: Acessibilidade
descricao: interface que funciona para quem não usa mouse nem enxerga a tela
quando: acessibilidade, acessível, acessivel, a11y, aria, teclado, leitor de tela, contraste, semântica, semantica, html
autor: PrimoCode
---
Acessibilidade não é uma camada que se adiciona no fim. É como o HTML é
escrito.

**HTML semântico primeiro**: `button` para ação, `a` para navegação, `header`,
`nav`, `main`, `section`, `label`. Uma `div` com `onclick` não recebe foco,
não responde ao Enter e não existe para um leitor de tela. ARIA só entra
quando o elemento certo não existe — `aria-label` num `button` de ícone, sim;
`role="button"` numa `div`, não.

**Teclado**: dá para percorrer a página inteira com Tab, na ordem visual, e o
foco é VISÍVEL (`:focus-visible` com contorno de verdade — nunca
`outline: none` sem substituto). Modal prende o foco dentro e volta ao botão
que o abriu no Esc.

**Contraste**: 4.5:1 em texto normal, 3:1 em texto grande e em borda de
controle. Cinza-claro sobre branco é a falha mais comum.

**Imagem** tem `alt` que descreve a função, não o arquivo. Decorativa leva
`alt=""`.

**Formulário**: todo campo com `label` ligado, erro em texto (não só em
vermelho) e ligado ao campo por `aria-describedby`.