[Notas de estudo] Acessibilidade

Material de consulta referente a Acessibilidade Web

9 de fevereiro de 2026 Por Samuel Alves

I design and develop experiences that make people's live simple.

Siglas e Significados:

  • a11y: Abreviação para Accessibility (Acessibilidade), onde o "11" representa o número de letras entre o 'a' e o 'y'.•
  • W3C: World Wide Web Consortium, a organização internacional que define os padrões para a web (HTML, CSS, etc.).
  • WAI: Web Accessibility Initiative, uma iniciativa dentro do W3C focada especificamente em acessibilidade e autora do WCAG.
  • WCAG: Web Content Accessibility Guidelines, o padrão oficial de diretrizes de acessibilidade web.
  • WAI-ARIA (ou ARIA): Accessible Rich Internet Applications, padrão que fornece técnicas para tornar conteúdos dinâmicos e componentes complexos acessíveis.
  • POUR: Sigla para os quatro princípios do WCAG: Perceivable (Perceptível), Operable (Operável), Understandable (Compreensível) e Robust (Robusto).

Práticas e Suas Funções•:

  • HTML Semântico: Utilizar tags de acordo com seu significado (ex: <button>, <header>, <nav>). Serve para fornecer funcionalidade e significado nativos para tecnologias assistivas.
  • Texto Alternativo (Alt Text): Descrição de imagens. Serve para que leitores de tela comuniquem o conteúdo da imagem a usuários cegos. Imagens decorativas devem usar alt="" para serem ignoradas.
  • Gerenciamento de Foco: Garantir que o indicador de foco seja visível e siga uma ordem lógica. É crucial para usuários que navegam apenas pelo teclado.
  • Skip Links (Links de Salto): Botão que aparece ao usar o "Tab" pela primeira vez. Serve para permitir que o usuário pule grandes blocos de navegação e vá direto ao conteúdo principal.
  • Legendas e Transcrições: Uso de serviços de legendagem para vídeos. Serve para tornar conteúdos em áudio e vídeo acessíveis para quem não pode ouvi-los ou vê-los.
  • Tab Trapping: Técnica para prender o foco dentro de um elemento (como um modal). Serve para evitar que o usuário de teclado saia do modal e se perca no documento principal ao navegar pelos campos.

Propriedades Técnicas Importantes:

  • tabindex:
    • 0: Torna o elemento focável e alcançável via navegação por teclado.
    • Valor Negativo (-1): O elemento é focável via script, mas não via teclado.
    • Valor Positivo: Deve ser evitado, pois quebra a sequência lógica do documento.
    • aria-label: Atributo que fornece um nome acessível para um elemento, substituindo o texto visual ou preenchendo a falta dele.
    • aria-labelledby: Associa o elemento a outro texto na página que serve como seu rótulo (label).
    • aria-describedby: Fornece uma descrição mais detalhada e estendida sobre um objeto.
    • aria-live: Define regiões que comunicam atualizações dinâmicas automaticamente (ex: placares de jogos). Possui níveis de "polidez": ◦ assertive: Interrompe o que o leitor de tela está fazendo para anunciar.
    • polite: Aguarda o leitor de tela ficar ocioso para anunciar.

Contraste de Cor: O padrão WCAG AA exige uma proporção mínima de contraste (ex: 4.5:1 para texto normal e 3:1 para indicadores de foco) para garantir a legibilidade.

  1. Siglas e Conceitos Técnicos Expandidos
    • eMAG: Modelo de Acessibilidade em Governo Eletrônico. Padrão brasileiro que especializa o WCAG para as necessidades nacionais, focando em facilidade de implementação.
    • DOM (Document Object Model): A representação hierárquica dos elementos da página. Para o desenvolvedor, a acessibilidade depende de como o JavaScript manipula essa camada para refletir mudanças de estado às tecnologias assistivas.
    • Landmarks (Pontos de Referência): Regiões estruturais definidas via HTML5 ou ARIA (como banner, main, navigation, search) que permitem que usuários de leitores de tela saltem diretamente para partes específicas da página.
    • OCR (Optical Character Recognition): Tecnologia para reconhecer texto em imagens. Essencial para converter documentos digitalizados inacessíveis em texto real que pode ser lido por máquinas.
  2. Práticas de Codificação e Estrutura
    • Hierarquia de Cabeçalhos (H1-H6): Use os títulos de forma lógica e sequencial. O <h1> deve representar o conteúdo principal e existir apenas um por página. Usuários de leitores de tela usam esses níveis para navegar rapidamente.
    • Ordem de Tabulação Lógica: O foco do teclado deve seguir a ordem em que os elementos aparecem no código HTML. Evite tabindex positivo, pois ele quebra a sequência esperada pelo usuário.
    • Landmarks Semânticos: Utilize tags HTML5 como <header>, <nav>, <main>, <section>, <article>, <aside> e <footer>. Elas fornecem significado estrutural imediato sem necessidade de CSS adicional.
    • Tableless para Layout: Jamais use tabelas para diagramação visual. Tabelas devem ser reservadas exclusivamente para dados tabulares, utilizando <caption> para títulos e <th> para cabeçalhos de coluna/linha.
  3. Propriedades ARIA: Estados e Atributos Críticos. Além do aria-label, o desenvolvedor deve dominar estes atributos para componentes complexos:
    • aria-expanded: Essencial para menus e sanfonas (accordions). Indica se um componente está expandido (true) ou recolhido (false).
    • aria-haspopup: Informa ao usuário que o acionamento de um elemento abrirá um submenu, janela modal ou menu flutuante.
    • aria-hidden="true": Remove elementos da árvore de acessibilidade. Útil para ícones decorativos ou elementos redundantes que não devem ser lidos pelo leitor de tela.
    • aria-invalid: Indica programaticamente que um campo de formulário contém um erro de validação.
    • aria-required: Marca campos como obrigatórios para tecnologias assistivas (complementa o atributo required do HTML5).
    • aria-atomic e aria-busy: Usados em regiões dinâmicas (aria-live) para controlar se o leitor de tela deve ler toda a região alterada ou se deve esperar o carregamento terminar.
  4. Formulários e Interação
    • Associação de Rótulos (Labels): Sempre associe o <label> ao seu <input> usando o atributo for casado com o id. Se não puder usar label visível, utilize aria-label.
    • Agrupamento semântico: Use <fieldset> e <legend> para agrupar campos relacionados (como perguntas de múltipla escolha ou grupos de endereços).
    • Feedback de Erro Acessível: Ao detectar um erro, mova o foco para o aviso de erro e use âncoras internas para permitir que o usuário salte direto para o campo problemático.
    • Evite o CAPTCHA Tradicional: Imagens com letras distorcidas são barreiras severas. Prefira métodos como limites de conexão, monitoramento ou desafios baseados em lógica textual.
  5. Técnicas de CSS
    • Foco Visível (:focus): Nunca utilize outline: none no CSS sem fornecer um estilo de foco alternativo altamente visível (ex: borda de 2px com cor contrastante).
    • Hiding Content (Esconder Conteúdo):
      • Para esconder de todos: display: none ou visibility: hidden.
      • Para esconder apenas visualmente (manter acessível para leitores de tela): Use classes que movam o texto para fora da tela (ex: position: absolute; left: -999em;).
      • Media Query prefers-reduced-motion: Permite detectar se o usuário desativou animações no sistema operacional e, então, suprimir Gifs e transições pesadas no seu CSS.
      • Design Responsivo: Use Media Queries para garantir que o site funcione em resoluções de até 320px sem perda de funcionalidade ou necessidade de rolagem horizontal.
  6. O Fluxo de Auditoria do Desenvolvedor
    1. Validação Automática: Use Lighthouse, Axe DevTools ou WAVE durante o desenvolvimento.
    2. Navegação por Teclado: Tente completar todas as tarefas do site usando apenas a tecla Tab, Enter e Setas.
    3. Teste de Leitor de Tela: Use o NVDA (Windows) ou VoiceOver (Mac) para verificar se a leitura segue a lógica esperada.
    4. Inibição de Estilos: Desative o CSS e veja se o HTML puro ainda é compreensível e segue a ordem correta de conteúdo.