Lista de verificacao de acessibilidade aplicada a paginas de servicos

Checklist de Acessibilidade para Paginas de Atendimento

Verificacoes praticas para garantir que paginas de atendimento e servicos sejam acessiveis ao maior numero possivel de pessoas.

Paginas de atendimento e servicos sao, muitas vezes, o ponto de contato mais importante entre uma organizacao e seu publico. Se essas paginas nao forem acessiveis, pessoas com deficiencia visual, motora, auditiva ou cognitiva podem ser excluidas de informacoes e servicos essenciais. Este checklist cobre as verificacoes mais importantes, organizadas por categoria, com orientacoes praticas para cada item.

Para uma abordagem mais aprofundada sobre os principios de acessibilidade, consulte a pagina de acessibilidade.

Estrutura e semantica

A estrutura do HTML determina como tecnologias assistivas interpretam e apresentam o conteudo.

  • Cada pagina tem exatamente um <h1> que descreve seu conteudo principal
  • Titulos seguem ordem logica (h1 → h2 → h3) sem pular niveis
  • O conteudo principal esta dentro de <main>
  • A navegacao esta dentro de <nav> com aria-label descritivo
  • Listas usam <ul>, <ol> ou <dl> conforme o tipo de conteudo
  • Tabelas de dados usam <th> com scope para cabecalhos
  • O atributo lang esta definido no <html> (ex: lang="pt-BR")
  • Secoes de conteudo usam elementos semanticos (<article>, <section>, <aside>)

Imagens e midia

  • Toda imagem informativa tem atributo alt descritivo
  • Imagens decorativas usam alt="" (vazio) ou sao inseridas via CSS
  • Textos alternativos descrevem a funcao ou conteudo da imagem, nao sua aparencia
  • Graficos e infograficos tem descricao textual equivalente
  • Videos com fala tem legendas ou transcricao
  • Nenhuma informacao e transmitida exclusivamente por cor
Exemplo de texto alternativo

Inadequado: alt="imagem" ou alt="foto.jpg"

Adequado: alt="Formulario de contato com campos para nome, email e mensagem"

Decorativa: alt="" (imagem sem conteudo informativo)

Formularios

Formularios de contato e atendimento sao criticos para acessibilidade. Erros aqui excluem diretamente pessoas que precisam dos servicos.

  • Cada campo tem um <label> associado com for correspondendo ao id do campo
  • Campos obrigatorios sao indicados visualmente e via aria-required="true" ou atributo required
  • Mensagens de erro identificam qual campo tem problema e como corrigi-lo
  • Erros sao anunciados para leitores de tela (usando aria-live ou role="alert")
  • O formulario pode ser preenchido e enviado usando apenas o teclado
  • Campos de selecao usam <select> nativo ou componentes com roles ARIA adequados
  • Captchas oferecem alternativa acessivel (como captcha de audio)
  • Instrucoes de preenchimento sao claras e estao visiveis antes do campo

Navegacao por teclado

  • Todos os elementos interativos sao alcancaveis com Tab
  • A ordem de foco (tab order) segue a sequencia logica de leitura
  • O indicador de foco e visivel em todos os elementos interativos
  • Menus dropdown podem ser abertos e navegados com teclado
  • Modais capturam o foco e permitem fechar com Escape
  • Nao existem armadilhas de foco (pontos dos quais o usuario nao consegue sair)
  • Links de pular para o conteudo principal estao disponiveis (skip links)
  • Botoes e links sao ativaveis com Enter ou Espaco conforme esperado

Contraste e legibilidade

  • Texto normal tem contraste minimo de 4.5:1 com o fundo
  • Texto grande (18px+ ou 14px+ bold) tem contraste minimo de 3:1
  • Elementos de interface (bordas de campos, icones funcionais) tem contraste de 3:1
  • O tamanho base de texto e pelo menos 16px (1rem)
  • O espacamento entre linhas (line-height) e pelo menos 1.5 para texto corrido
  • O texto nao esta em imagens (exceto logotipos)
  • A pagina e legivel com zoom de 200% sem perda de conteudo ou funcionalidade
  • Links sao distinguiveis do texto ao redor (sublinhado ou outra indicacao alem de cor)
Texto normal4.5:1 minimo
Texto grande3:1 minimo
Elementos UI3:1 minimo

Conteudo e redacao

  • Textos de link descrevem o destino (Leia o guia de hospedagem, nao clique aqui)
  • Paragrafos sao curtos (3-5 linhas) para facilitar a leitura em tela
  • Jargao tecnico e evitado ou explicado na primeira ocorrencia
  • Instrucoes nao dependem de posicao visual (“o botao a direita”) ou cor (“o texto em vermelho”)
  • Abreviacoes e siglas sao explicadas na primeira ocorrencia
  • O proposito de cada pagina e claro nos primeiros paragrafos

Responsividade e dispositivos

  • O conteudo e acessivel em larguras de tela de 320px a 1920px+
  • Elementos de toque tem area minima de 44x44px
  • O viewport esta configurado corretamente (<meta name="viewport">)
  • Nenhum conteudo depende de orientacao especifica (retrato ou paisagem)
  • Tabelas longas tem scroll horizontal ou layout alternativo em telas pequenas

Como usar este checklist

Este checklist nao substitui uma auditoria completa de acessibilidade, mas cobre as verificacoes mais impactantes para paginas de atendimento. Para uso pratico:

  • Na criacao de paginas: use como referencia durante o desenvolvimento para garantir conformidade desde o inicio
  • Na revisao periodica: aplique o checklist uma vez por trimestre como parte do ciclo de manutencao
  • Apos atualizacoes: verifique os itens relevantes sempre que novas paginas ou funcionalidades forem adicionadas

Ferramentas de verificacao

Ferramentas automatizadas identificam muitos problemas, mas nao substituem a verificacao manual. Uma abordagem combinada e mais eficiente:

Verificacao automatizada

  • Extensoes de navegador para analise de acessibilidade (Lighthouse, axe)
  • Verificadores de contraste online
  • Validadores de HTML para garantir estrutura semantica

Verificacao manual

  • Navegar pelo site usando apenas o teclado (Tab, Enter, Escape)
  • Testar com um leitor de tela (NVDA no Windows, VoiceOver no macOS)
  • Verificar a pagina com zoom de 200%
  • Testar em modo de alto contraste do sistema operacional
  • Verificar se videos tem legendas utilizaveis

Proximos passos

Acessibilidade nao e um projeto com data de conclusao — e uma pratica continua. Apos aplicar este checklist:

  • Documente os itens atendidos e os que precisam de correcao
  • Priorize correcoes que afetam navegacao e formularios (impacto mais direto)
  • Inclua verificacao de acessibilidade no ciclo regular de manutencao
  • Consulte a pagina de acessibilidade para orientacoes mais detalhadas sobre cada principio