Acessibilidade não é opcional. 15% da população tem alguma deficiência. Testes automáticos detectam 30-40% dos problemas.
Conceitos Principais
WCAG Guidelines
Web Content Accessibility Guidelines. Níveis A, AA, AAA. AA é padrão legal. Perceivable, Operable, Understandable, Robust.
Axe Core
Engine de a11y testing. Detecta issues WCAG. Integra Jest, Cypress, Playwright. Deque Labs.
Aria Attributes
aria-label, role, aria-describedby. Semantic HTML melhor. Test screen reader compatibility.
Manual Testing
Automação detecta 40%. Keyboard nav, screen reader, color contrast. Manual essencial.
Passo a Passo
- Install Axe: npm install --save-dev @axe-core/react. Jest: jest-axe. Cypress: cypress-axe.
- Test com Jest: import { axe, toHaveNoViolations } from "jest-axe"; expect.extend(toHaveNoViolations); const results = await axe(container); expect(results).toHaveNoViolations();
- Lighthouse CI: npm install -g @lhci/cli. lighthouserc.json: assert accessibility score > 90. lhci autorun.
- Manual Tests: Tab navigation: todos elementos acessíveis? Screen reader: NVDA, JAWS. Color contrast: 4.5:1 text, 3:1 UI.
- CI Integration: Axe tests em PR. Lighthouse CI score gate. Block merge se a11y regression.
Boas Praticas
Recomendacoes
• Semantic HTML primeiro
• Test com keyboard only
• Screen reader testing
• Color contrast tools
• Axe em CI/CD
• Manual testing periódico
Erros Comuns
Evite estes erros
• Confiar apenas em automação
• Divs ao invés de buttons
• Não testar com keyboard
• Aria quando HTML semântico suficiente
• Color-only information
Checklist
- Axe core instalado
- Tests automatizados rodando
- Lighthouse CI configurado
- Keyboard navigation testada
- Screen reader testado
- WCAG AA compliance