Implementação de acessibilidade WCAG 2.1 AA em aplicações React

Crie um plano de implementação de acessibilidade WCAG 2.1 AA para [NOME DA APLICAÇÃO], uma [TIPO] construída com React e [BIBLIOTECA UI: Material UI/Chakra/Radix/shadcn].

**Contexto:**
- Páginas/telas principais: [NÚMERO]
- Público: [DESCRIÇÃO DO PÚBLICO]
- Prazo: [NÚMERO] dias
- Requisito legal: Lei Brasileira de Inclusão (Lei 13.146/2015)

**1) Auditoria Inicial:**
- Checklist de verificação automática (axe-core, Lighthouse, WAVE)
- Testes manuais obrigatórios (navegação por teclado, leitor de tela)
- Ferramentas de teste: axe DevTools, NVDA, VoiceOver
- Classificação de issues por severidade (bloqueante, grave, menor)

**2) Correções por Componente:**

Para cada componente abaixo, forneça código React/TypeScript corrigido:

- **Navegação**: landmarks (main, nav, aside), skip links, breadcrumb com aria-label
- **Formulários**: labels associados, mensagens de erro acessíveis, aria-describedby, aria-invalid
- **Modais/Dialogs**: focus trap, aria-modal, retorno de foco ao fechar
- **Tabelas de dados**: caption, scope, aria-sort para colunas ordenáveis
- **Carrosséis/Tabs**: aria-selected, roving tabindex, navegação por setas
- **Toasts/Alertas**: aria-live regions (polite vs assertive), role=alert
- **Imagens**: alt text significativo, decorativas com alt=""

**3) Padrões de Código:**
- Custom hook `useAccessibility` para gerenciar focus
- Componente `VisuallyHidden` para texto acessível
- ESLint plugin jsx-a11y configuração recomendada
- Testes automatizados com jest-axe

**4) Contraste e Visual:**
- Verificação de contraste mínimo (4.5:1 texto, 3:1 elementos grandes)
- Modo de alto contraste
- Respeitar prefers-reduced-motion
- Indicador de foco visível (não usar outline: none)

**5) Cronograma e Priorização:**
- Semana 1-2: Issues bloqueantes
- Semana 3-6: Issues graves
- Semana 7-10: Issues menores + testes com usuários reais
- Semana 11-12: Documentação + treinamento do time