🏆 Guia de Boas Práticas em Acessibilidade Digital

📌 Conceitos Fundamentais Utilizados

Para a criação desse guia, foram utilizados três pilares conceituais para determinar critérios de aceitação de acessibilidade. Eles são:

🔹 WCAG 2.2 (Web Content Accessibility Guidelines)

A WCAG é um conjunto internacional de diretrizes do W3C que define padrões para tornar conteúdos web mais acessíveis a pessoas com diferentes tipos de deficiência. Seus princípios são:

  • Perceptível: O conteúdo deve ser apresentado de forma que possa ser percebido pelos sentidos do usuário.
  • Operável: Os elementos da interface devem ser utilizáveis por diferentes formas de navegação (teclado, mouse, toque).
  • Compreensível: As informações e a interface devem ser fáceis de entender.
  • Robusto: O conteúdo deve ser compatível com diferentes agentes de usuário e tecnologias assistivas.

Além desses princípios, a versão 2.2 da WCAG introduz novos critérios, como:

  • 2.4.11 – Foco Não Oculto
  • 2.4.12 – Aparência do Foco
  • 2.5.7 – Alternativa ao Arrastar
  • 2.5.8 – Alvo Tamanho Mínimo
  • 3.2.6 – Consistência da Ajuda
  • 3.3.7 – Mecanismo de Entrada Reduzida

Vale lembrar que a versão atual da WCAG é a versão 2.2, com a versão 3.0 já em estagios iniciais de desenvolvimento.

🔹 NBR 17225:2025

Norma brasileira da ABNT que estabelece requisitos para acessibilidade em conteúdos e aplicações web, adaptando os princípios da WCAG à realidade e à legislação brasileiras.

Diretrizes extraídas da NBR e utilizadas neste guia incluem:

  • Planejamento da acessibilidade desde a concepção
  • Contraste e legibilidade de textos e interfaces.
  • Estrutura de navegação clara e consistente.
  • Linguagem clara e objetiva, com apoio visual e contextual.
  • Compatibilidade com tecnologias assistivas.
  • Uso adequado de marcação semântica (cabeçalhos, listas, tabelas, formulários).

Essas diretrizes estão incorporadas nas seções sobre estrutura, conteúdo textual, apresentação visual e compatibilidade técnica.

🔹 Diretrizes da ABNT para conteúdos acessíveis

Além da NBR 17225, a ABNT também aponta boas práticas voltadas à produção de conteúdos acessíveis. Essas orientações reforçam a importância de:

  • Utilizar contrastes adequados e tipografia legível;
  • Escrever com linguagem simples, direta e inclusiva;
  • Organizar as informações com títulos bem estruturados;
  • Usar corretamente listas, tabelas e formulários com rótulos claros;
  • Evitar o uso exclusivo de cor como meio de transmitir informação.

Essas práticas estão refletidas nas seções sobre estrutura semântica, links, botões, formulários e conteúdo textual.

Esses conceitos e diretrizes foram aplicados de forma integrada ao longo deste pocket para orientar desenvolvedores na criação de sistemas mais acessíveis e inclusivos.

Baseado na WCAG 2.2, NBR 17225:2025 e diretrizes da ABNT

Este guia é um material de referência, prático e atualizado para promover acessibilidade digital em projetos web, sistemas e conteúdos. Ele unifica recomendações internacionais (WCAG 2.2) e brasileiras (NBR 17225:2025), orientando para a criação de experiências inclusivas, acessíveis e universais.

🎯 Princípios Fundamentais (WCAG)

  • Perceptível: As informações devem ser apresentadas de forma que todos possam perceber.
  • Operável: Todos os componentes e navegação devem ser utilizáveis.
  • Compreensível: A interface e os conteúdos devem ser fáceis de entender.
  • Robusto: Compatível com diferentes agentes de usuário, incluindo tecnologias assistivas.

🆕 Novidades na WCAG 2.2 (🌟 Destaques Importantes)

🔷 Critérios Novos:

  • 2.4.11 – Foco Não Oculto (AA)
    👉 O foco de teclado deve estar sempre visível e nunca ser encoberto por outros elementos.

  • 2.4.12 – Aparência do Foco (AAA)
    👉 O foco deve ser altamente visível, com contraste mínimo de 3:1 e uma área mínima destacada.

  • 2.5.7 – Alternativa ao Arrastar (AA)
    👉 Qualquer função que exija arrastar (ex.: sliders, calendários) deve oferecer alternativa, como cliques ou setas.

  • 2.5.8 – Alvo Tamanho Mínimo (AA)
    👉 Áreas de clique devem ter pelo menos 24x24 pixels CSS, salvo exceções.

  • 3.2.6 – Consistência da Ajuda (A)
    👉 Recursos de ajuda (suporte, FAQs, contatos) devem estar disponíveis de forma consistente em todas as páginas.

  • 3.3.7 – Mecanismo de Entrada Reduzida (A)
    👉 Processos que exigem entrada de texto devem ter formas de simplificação, como copiar e colar, preenchimento automático ou métodos alternativos.

❌ Critério Removido:

  • 4.1.1 – Parsing
    🔻 Removido por obsolescência. Embora não seja mais obrigatório, manter código bem estruturado e semanticamente correto continua sendo uma boa prática.

⌨️ Interação por Teclado

  • Todo conteúdo e funcionalidade operável via teclado.
  • Indicador de foco sempre visível e destacado (🌟 Novo: Foco Não Oculto - 2.4.11).
  • Aparência do foco atende contraste e área mínima (🌟 Novo: Aparência do Foco - 2.4.12).
  • Ordem de navegação lógica e previsível.
  • Sem armadilhas de foco.
  • Atalhos devem ser simples, configuráveis e com tecla modificadora.

🖼️ Imagens

  • Texto alternativo adequado (alt) para imagens informativas e funcionais.
  • Imagens decorativas marcadas como alt="".
  • Descrição adicional para imagens complexas (gráficos, mapas).
  • Evitar usar texto embutido em imagens, salvo quando essencial.

🏗️ Estrutura: Cabeçalhos, Regiões e Listas

  • Hierarquia de cabeçalhos correta (h1, h2, ...).
  • Título principal definido por página.
  • Áreas como navegação, conteúdo principal e rodapé devem ter marcação semântica (<nav>, <main>, <footer>, etc.).
  • Listas bem estruturadas semanticamente para refletir agrupamentos.

📊 Tabelas

  • Usadas apenas para dados estruturados, não para layout.
  • Cabeçalhos (<th>) associados corretamente às células (<td>).
  • Fornecer título e, se necessário, descrição para tabelas complexas.
  • Texto do link é autoexplicativo (evitar "clique aqui").
  • Indicar claramente se um link abre nova aba ou documento externo.
  • Navegação consistente entre páginas.
  • Oferecer opção de pular blocos repetitivos (“Ir para conteúdo principal”).

🖲️ Botões e Controles

  • Botões e controles possuem rótulos claros.
  • Área mínima de clique de 24x24 pixels CSS (🌟 Novo: Alvo Tamanho Mínimo - 2.5.8).
  • Controles oferecem feedback e seguem comportamentos previsíveis.

📝 Formulários e Entrada de Dados

  • Campos com rótulos descritivos e associados semanticamente.
  • Indicação visual e programática de campos obrigatórios.
  • Ajuda contextual clara e agrupamento de campos relacionados.
  • Mensagens de erro são descritivas e sugerem correção.
  • Alternativas para entradas complexas (🌟 Novo: Mecanismo de Entrada Reduzida - 3.3.7).
  • Autenticação e validações sensoriais são acessíveis a diferentes usuários.

🎨 Apresentação e Uso de Cores

  • Não usar cor como única forma de transmitir informação.
  • Contraste de pelo menos 4.5:1 para texto e 3:1 para textos grandes e interfaces.
  • Componentes e foco com contraste adequado e área visível.
  • Layout responsivo e compatível com diferentes tamanhos e orientações de tela.

📑 Conteúdo Textual

  • Espaçamento adequado entre linhas e blocos de texto.
  • Alinhamento preferencial à esquerda (ou à direita, conforme idioma).
  • Textos podem ser ampliados até 200% sem perda de funcionalidade.
  • Uso correto de semântica textual (<strong>, <em>, <abbr>, etc.).
  • Linguagem simples, clara e objetiva, com definição de termos e siglas.

🎥 Multimídia: Áudio, Vídeo e Animações

  • Vídeos possuem legendas, transcrição, audiodescrição e, quando necessário, janela em Libras.
  • Conteúdos em áudio oferecem alternativa textual.
  • Animações não são automáticas ou podem ser pausadas.
  • Evitar flashes que possam causar desconforto ou crises fotossensíveis.

⏱️ Tempo e Atualizações

  • Permitir ajustes em interações com tempo limite.
  • Mudanças automáticas devem ser controláveis pelo usuário.
  • Dados preenchidos são preservados após reautenticação ou atualizações.

🧠 Código e Estrutura Semântica

  • Idioma principal e idiomas secundários definidos (lang).
  • Títulos de página, frames e componentes corretamente configurados.
  • Ordem de leitura lógica e determinada programaticamente.
  • Componentes personalizados possuem nome acessível e são compatíveis com tecnologias assistivas.
  • Zoom permitido sem quebra de layout.

🚀 Checklist Final de Implementação

  • Acessibilidade aplicada desde a concepção (Design Universal).
  • Testes realizados com navegação por teclado, leitores de tela e dispositivos móveis.
  • Participação de pessoas com deficiência no processo de validação.
  • Documentação de critérios e práticas de acessibilidade mantida no projeto.
  • Acessibilidade tratada como processo contínuo, não como uma etapa isolada.

📚 Referências

✨ Este documento é uma síntese prática e robusta das melhores práticas atuais de acessibilidade digital, e deve ser tratado como um pilar na construção de experiências inclusivas.