Melhores Práticas de Acessibilidade

Acessibilidade é engenharia de qualidade humana

Um site acessível mantém a experiência funcional para quem usa teclado, leitor de tela, zoom, baixa visão, daltonismo, limitações motoras ou dispositivos em condições ruins.

Semântica, links, imagens, formulários e tabelas

A acessibilidade começa no HTML. Leitores de tela e buscadores dependem de estrutura: títulos em ordem, landmarks, links descritivos, botões claros, imagens com alt, labels conectadas e tabelas com cabeçalhos.

<h1>Página HTML Acessível e Auditável</h1>
<section>
  <h2>Contraste e leitura</h2>
  <h3>Exemplo de botão claro</h3>
</section>

<a href="guia-acessibilidade.pdf">Baixar guia de acessibilidade em PDF</a>

<button type="button">Salvar preferências de acessibilidade</button>

<img src="grafico.png" alt="Gráfico mostrando aumento de 20% na legibilidade">
<img src="decoracao.png" alt="">

Navegação por teclado, foco visível e skip link

Se uma pessoa não consegue usar seu site com Tab, Shift + Tab, Enter, Espaço e Esc, o recurso não existe para ela. O foco visível é o cursor de quem navega sem mouse.

• Use Tab para avançar entre links, botões e campos.
• Use Shift + Tab para voltar.
• Use Enter ou Espaço para ativar elementos interativos.
• Evite remover outline sem alternativa visual.
• Evite div clicável sem suporte de teclado.
• Garanta que modais tenham saída clara por teclado.
• Mantenha a ordem visual próxima da ordem do DOM.
• Use skip link para pular menus repetitivos.

<a href="#conteudo-principal" class="skip-link">Pular para o conteúdo principal</a>

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 4px solid #f7c948;
  outline-offset: 4px;
}

Contraste, legibilidade e mensagens claras

A interface deve ser compreensível, legível e calma. Não dependa apenas de cor, não use fonte minúscula, não crie botões com área clicável ridícula e não escreva mensagens de erro inúteis.

• Garanta contraste suficiente entre texto e fundo.
• Use tamanho de fonte confortável.
• Divida parágrafos gigantes em blocos menores.
• Crie botões e links com área clicável generosa.
• Não indique erro apenas com vermelho.
• Explique o problema e como corrigir.
• Evite linguagem confusa sem necessidade.
• Evite excesso de estímulos visuais.

Como testar acessibilidade de verdade

Ferramenta automática ajuda, mas não substitui teste humano. Lighthouse aponta falhas óbvias, mas não sabe se seu texto alternativo é realmente útil ou se o fluxo de formulário faz sentido.

Checklist manual de auditoria

• Consigo navegar tudo usando apenas Tab?
• O foco visual é claro em links, botões e campos?
• Existe apenas um h1 por página?
• A hierarquia segue h1, h2 e h3 sem pular níveis?
• Todo input possui label conectado?
• Mensagens de erro são textuais e claras?
• Imagens informativas possuem alt descritivo?
• Imagens decorativas usam alt vazio?
• O contraste do texto é suficiente?
• Tabelas possuem caption e th com scope?
• Links fazem sentido fora do contexto?
• O site continua compreensível com zoom?

15 perguntas para provar domínio

1. O que é acessibilidade web? Tornar sites acessíveis a todos, independentemente de limitações.
2. Qual o primeiro passo para um site acessível? HTML semântico correto.
3. Por que alt é vital? Descreve imagens para leitores de tela e falhas de carregamento.
4. O que é contraste insuficiente? Texto com cor muito próxima ao fundo.
5. Pode usar apenas cor para instrução? Não.
6. Problema de pular headings? Quebra a hierarquia lógica.
7. Para que serve scope em tabela? Relacionar cabeçalhos a células.
8. Por que evitar “clique aqui”? Não descreve o destino do link.
9. Como associar label e input? for no label igual ao id do input.
10. O que tabindex errado causa? Ordem de foco confusa.
11. O que é skip link? Atalho para pular navegação repetitiva.
12. Imagem decorativa deve ter alt? Sim, alt vazio.
13. Qual tecla base da navegação por teclado? Tab.
14. Acessibilidade ajuda SEO? Sim.
15. Ferramenta automática resolve tudo? Não, precisa teste manual.

Registre sua página auditável

git status
git add .
git commit -m "aula-31: cria pagina html acessivel e auditavel"
git push

• git status: verifica o arquivo da página auditada.
• git add .: prepara o arquivo para commit.
• git commit: documenta sua maestria em acessibilidade.
• git push: sobe sua evidência técnica para o mundo.