Teclado, ARIA e Leitores de Tela
1. HTML semântico primeiro
A regra de ouro da acessibilidade em desenvolvimento web: use o elemento HTML nativo correto
antes de recorrer a ARIA. Um <button> já vem com foco por teclado, ativação
por Enter/Espaço e papel semântico de "botão" para leitores de tela — de graça. Um
<div onclick="..."> não tem nada disso; você precisaria recriar manualmente toda essa
funcionalidade com tabindex, role="button" e listeners de teclado.
2. Navegação por teclado
- Tab move o foco para o próximo elemento interativo; Shift+Tab para o anterior. A ordem deve seguir a ordem visual/lógica da página (critério 2.4.3 Ordem do Foco).
- Todo elemento interativo precisa de um indicador de foco visível (critério 2.4.7,
nível AA) — nunca use
outline: nonesem fornecer uma alternativa visível equivalente. - Armadilhas de foco (2.1.2): o usuário precisa sempre conseguir sair de um componente usando só o teclado (ex.: um modal mal implementado que "prende" o foco dentro dele para sempre).
- Links de pular bloco ("Pular para o conteúdo principal") permitem que quem navega por teclado não precise passar por dezenas de links de menu em toda página nova.
3. O que é ARIA (e quando usar)
WAI-ARIA (Accessible Rich Internet Applications) é um conjunto de atributos HTML que comunica papéis, estados e propriedades para tecnologias assistivas quando o HTML nativo não é suficiente — tipicamente em componentes de interface JavaScript (abas, modais, menus suspensos, sliders). A primeira regra do ARIA é: "não use ARIA se existe um elemento HTML nativo com a semântica e o comportamento que você precisa." ARIA mal aplicado pode piorar a acessibilidade em vez de melhorá-la, porque sobrescreve a semântica nativa sem alterar o comportamento.
- Roles (papéis): definem o que um elemento é — ex.
role="dialog",role="navigation",role="alert". - Landmarks (marcos): roles de navegação estrutural —
<nav>,<main>,<header>,<footer>— permitem que usuários de leitor de tela pulem direto para a seção que querem, em vez de navegar linearmente por toda a página. - Estados e propriedades:
aria-expanded,aria-hidden,aria-label,aria-live(para anunciar mudanças dinâmicas de conteúdo, como mensagens de erro em formulários).
4. Leitores de tela
Software que converte a interface em fala (ou braille), usado principalmente por pessoas cegas ou com baixa visão severa. Os mais usados: NVDA e JAWS (Windows, gratuito e pago respectivamente), VoiceOver (nativo no macOS/iOS), TalkBack (nativo no Android). Testar sua própria interface com um leitor de tela real — mesmo que superficialmente — revela problemas que nenhuma ferramenta automatizada encontra sozinha.