Otimizacao para leitores de tela com ARIA e HTML semantico

Otimize [NOME DO PRODUTO/FUNCIONALIDADE] para leitores de tela, focando no fluxo de [DESCRICAO DO FLUXO].

Tecnologias: [FRAMEWORK] com [COMPONENT LIBRARY]. Leitores de tela alvo: [NVDA/JAWS/VoiceOver/TalkBack].

**1) HTML Semantico (Fundacao):**
Para cada tipo de conteudo, o elemento correto:
- Navegacao principal: `<nav aria-label="...">`
- Conteudo principal: `<main>`
- Secoes: `<section aria-labelledby="...">`
- Listas: `<ul>/<ol>` (nunca divs com bullet visual)
- Tabelas de dados: `<table>` com `<th scope>`
- Formularios: `<form>` com `<fieldset>/<legend>`
- Headings: h1-h6 em hierarquia correta

**2) Landmarks e Regioes:**
- Mapa de landmarks por pagina/tela
- aria-label para landmarks duplicados (ex: duas `<nav>`)
- Skip links: implementacao e posicionamento
- Ordem de leitura vs. ordem visual (flex order, grid)

**3) Componentes Custom (ARIA Patterns):**
Para cada componente interativo custom:

a) **Carrossel/Slider:**
- role="region" + aria-label + aria-roledescription="carrossel"
- Botoes prev/next com aria-label
- Live region para anunciar slide atual
- Controle de autoplay

b) **Modal/Dialog:**
- role="dialog" + aria-modal="true" + aria-labelledby
- Focus trap: Tab e Shift+Tab cicla dentro do modal
- Escape fecha o modal
- Focus retorna ao trigger ao fechar

c) **Tabs:**
- role="tablist" + role="tab" + role="tabpanel"
- aria-selected, aria-controls
- Setas esquerda/direita navegam entre tabs

d) **Dropdown/Menu:**
- role="menu" + role="menuitem"
- aria-expanded no trigger
- Setas up/down navegam itens

e) **Toast/Notification:**
- role="alert" ou aria-live="polite"
- aria-atomic="true"
- Timer suficiente para leitura

**4) Formularios Acessiveis:**
- Labels explicitos (for/id) ou implicitos
- Grupos com fieldset/legend
- Mensagens de erro: aria-describedby + aria-invalid
- Instrucoes: aria-describedby
- Autocomplete attribute para dados pessoais
- Validacao: anunciar erros em live region

**5) Conteudo Dinamico:**
- SPA route changes: anunciar nova pagina (aria-live ou document.title)
- Loading states: aria-busy="true" + anuncio quando completo
- Infinite scroll: aria-live region para novos itens
- Filtros que atualizam lista: anunciar quantidade de resultados

**6) Testes:**
- Checklist de teste manual com VoiceOver (Mac/iOS)
- Checklist de teste manual com NVDA (Windows)
- Testes automatizados com jest-axe e @testing-library
- Screen reader output esperado vs. real para cada fluxo

Regra de ouro: **Primeiro HTML semantico. ARIA so quando HTML nao resolve.**