Boas práticas de acessibilidade no HTML do dia a dia

Consolide o aprendizado com um guia de boas práticas simples que você pode aplicar em qualquer projeto.

Chegamos ao final do nosso submódulo de acessibilidade no HTML! Até agora, exploramos os conceitos fundamentais, a importância do alt em imagens, a construção de formulários acessíveis, a hierarquia de títulos e uma introdução ao ARIA.

Nesta lição, vamos consolidar todo esse conhecimento em um guia prático de boas práticas de acessibilidade no HTML que você pode aplicar em qualquer projeto, desde o primeiro dia. Lembre-se: acessibilidade não é um "extra", mas parte integrante de um bom desenvolvimento web.

1. Use HTML Semântico Sempre!

Esta é a regra de ouro e a base de tudo. O HTML semântico dá significado ao seu conteúdo, o que é essencial para tecnologias assistivas e mecanismos de busca.

  • O que fazer:
    • Use <h1> a <h6> para títulos, seguindo a hierarquia correta.
    • Use <p> para parágrafos.
    • Use <a> para links (que levam a outra página ou seção).
    • Use <button> para ações (que disparam uma função JavaScript).
    • Use <nav> para navegação, <main> para conteúdo principal, <article> para conteúdo independente, <section> para seções temáticas, <aside> para conteúdo lateral e <footer> para rodapé.
    • Use <ul>, <ol>, <li> para listas.
    • Use <table> para dados tabulares.
  • O que evitar:
    • Usar <div>s e <span>s para tudo. Eles são elementos genéricos e não transmitem significado.
    • Usar tags de título para estilização (ex: usar <h3> para um texto que não é um subtítulo, só porque ele tem um tamanho de fonte legal).

2. Atributo alt em Imagens: Nunca Esqueça!

O alt é vital para usuários com deficiência visual e para o SEO.

  • O que fazer:
    • Sempre inclua o atributo alt em todas as tags <img>.
    • Escreva descrições concisas, descritivas e relevantes para o contexto.
    • Se a imagem for puramente decorativa e não adicionar informação, use alt="" (vazio).
    • Se a imagem for um link, o alt deve descrever o destino do link.
  • O que evitar:
    • Omitir o atributo alt completamente.
    • Fazer "keyword stuffing" (repetir palavras-chave).
    • Usar descrições genéricas como "imagem" ou "foto".

3. Formulários Acessíveis: Conecte os Rótulos!

Formulários são pontos críticos de interação. Garanta que sejam utilizáveis por todos.

  • O que fazer:
    • Sempre associe um <label> a cada campo de formulário (<input>, <textarea>, <select>) usando for e id.
    • Use <fieldset> e <legend> para agrupar campos relacionados (ex: radio buttons, checkboxes).
    • Garanta que as mensagens de erro sejam claras, visíveis e associadas ao campo correto.
  • O que evitar:
    • Usar placeholder como substituto para <label>.
    • Deixar campos de formulário sem rótulos.

4. Foco e Navegação por Teclado

Muitos usuários (com deficiência motora, cegos, ou simplesmente preferindo o teclado) navegam usando a tecla Tab.

  • O que fazer:
    • Certifique-se de que todos os elementos interativos (links, botões, campos de formulário) sejam focáveis e que a ordem de foco (tabindex) seja lógica e intuitiva.
    • O estilo de foco padrão do navegador (outline) é importante; não o remova sem fornecer um substituto visual claro.
  • O que evitar:
    • Remover o outline padrão dos elementos focados sem fornecer um indicador visual alternativo.
    • Usar tabindex="-1" em elementos interativos que deveriam ser focáveis.

5. Contraste de Cores e Tamanho da Fonte

O conteúdo deve ser legível para todos.

  • O que fazer:
    • Garanta um contraste de cores suficiente entre o texto e o fundo. Ferramentas online podem ajudar a verificar isso.
    • Use tamanhos de fonte legíveis e permita que o usuário aumente o zoom sem quebrar o layout.
  • O que evitar:
    • Combinar cores de texto e fundo com baixo contraste.
    • Usar tamanhos de fonte muito pequenos.

6. ARIA: Use com Cautela e Conhecimento

ARIA é uma ferramenta poderosa, mas deve ser usada como um complemento, não como um substituto.

  • O que fazer:
    • Use role para definir o papel de elementos quando o HTML semântico não for suficiente (ex: role="tab", role="alert").
    • Use aria-label para fornecer rótulos acessíveis quando não há um rótulo visível ou ele é insuficiente (ex: botões de ícone).
    • Use aria-hidden="true" para esconder conteúdo puramente decorativo ou fora da tela de tecnologias assistivas.
  • O que evitar:
    • Usar ARIA quando uma tag HTML semântica já faz o trabalho (regra de ouro!).
    • Usar ARIA de forma incorreta, o que pode piorar a acessibilidade.

7. Idioma da Página (lang)

Sempre declare o idioma da sua página.

  • O que fazer:
    • Defina o atributo lang na tag <html> (ex: <html lang="pt-BR">).
    • Se houver trechos de texto em outro idioma, use o atributo lang no elemento específico (ex: <span lang="en">Hello</span>).
  • O que evitar:
    • Deixar o atributo lang ausente.

8. Teste com Tecnologias Assistivas

A melhor forma de saber se seu site é acessível é testando-o.

  • O que fazer:
    • Use um leitor de tela (ex: NVDA ou JAWS no Windows, VoiceOver no macOS/iOS, TalkBack no Android) para navegar pelo seu site.
    • Tente navegar pelo seu site usando apenas o teclado.
  • O que evitar:
    • Assumir que seu site é acessível apenas porque você seguiu algumas regras.

Resumindo o Resumo

A acessibilidade web é um compromisso contínuo. Ao incorporar essas boas práticas no seu fluxo de trabalho diário, você não apenas cria sites mais inclusivos, mas também melhora a qualidade geral do seu código, a experiência do usuário e o SEO.

Comece pequeno, mas comece. Cada pequena melhoria faz a diferença!