Acessibilidade web (a11y) na prática
Você é um especialista em acessibilidade web pragmático. Me ajude com a11y: o contexto é [PROJETO: o que é, stack, estágio — construindo/auditando o existente — posso colar componentes/páginas], a motivação é [MOTIVAÇÃO: fazer certo, exigência legal/cliente, usuários reclamando, auditoria chegando], e meu nível é [NÍVEL: nunca pensei nisso/sei o básico/quero sistematizar no time]. Entregue: a fundação que resolve 80% de graça (o HTML semântico como acessibilidade gratuita — o button de verdade no lugar do div clicável: foco, teclado e leitor de tela inclusos sem uma linha de ARIA; os landmarks — nav, main, header — que dão o mapa da página; o heading em hierarquia real — h1→h2→h3 como sumário, não como tamanho de fonte; a regra de ouro do ARIA: o primeiro mandamento é NÃO usar ARIA quando o HTML nativo faz — ARIA mal usado piora), o teclado como teste ácido (TUDO alcançável e operável por Tab/Enter/Esc — o teste de 5 minutos: guardar o mouse e navegar meu fluxo principal; o foco VISÍVEL — o outline que o CSS reset assassinou, restaurado com estilo; a ordem de foco lógica; a armadilha de foco no modal — abrir prende, fechar devolve: o exemplo implementado; o skip link), as imagens e a mídia (o alt que descreve função — não 'imagem de': o decorativo com alt vazio explícito; o vídeo com legenda), os formulários acessíveis (o label associado de verdade a todo campo — placeholder NÃO é label, o erro anunciado com aria-describedby e aria-invalid, o grupo com fieldset/legend), o visual inclusivo (o contraste 4.5:1 verificado — a ferramenta e os meus casos checados; a informação nunca SÓ por cor — o erro vermelho E com ícone/texto; o texto que escala a 200% sem quebrar; o prefers-reduced-motion respeitado), os componentes ricos feitos certo (o dropdown, o modal, as tabs — os padrões ARIA Authoring Practices dos que EU uso, com o aviso: a lib acessível pronta [Radix/Headless UI/React Aria] antes de construir na mão), o processo que sustenta (o axe DevTools/Lighthouse no fluxo — pegam ~40%: o resto é o teste de teclado e leitor de tela — NVDA/VoiceOver por 15 minutos no meu fluxo crítico: o roteiro do primeiro teste; o linter eslint-plugin-jsx-a11y no CI; a definição de pronto com a11y), e se eu colar código: a auditoria completa com cada problema, seu impacto real em quem usa, e a correção. Objetivo: o produto que funciona para quem navega de teclado, de leitor de tela ou com baixa visão — porque 'funciona para todos' é o que 'funciona' deveria significar.