Acessibilidade, contraste e desempenho
Trechos do capítulo · alexandrecaramaschi.com/educacao/frontends-com-vibecoding

Leia o LEIA-ME.txt desta pasta antes de usar qualquer trecho.

### O que faz: pede uma auditoria de tela pelo que o leitor de tela anunciaria, e não só pelo que o validador automático encontra
### Onde entra: conversa com o agente, com a tela já rodando
### Cuidado: exija a frase anunciada hoje ao lado da frase que deveria ser anunciada; sem esse par a lista vira opinião

Audite esta tela como um usuário de LEITOR DE TELA, não só com o axe.

1. Descreva o que o NVDA (ou VoiceOver) anunciaria ao percorrer a página com
   Tab e com a tecla H (headings): a ordem faz sentido? algum botão vira
   "botão botão" ou "image"? algum link diz só "clique aqui"?
2. Simule trocar de rota: o foco vai para o <h1> da nova tela? o scroll volta
   ao topo? algo é anunciado?
3. Aplique um filtro na lista: existe uma live region (aria-live=polite) que
   anuncia "N resultados"? ela já está no DOM antes da mudança?
4. No menu/dialog/tabs: a ordem do Tab segue a ordem visual? há tabindex
   positivo (proibido)? o dialog prende e devolve o foco? as setas movem o
   foco dentro do grupo (roving tabindex)?

Liste os problemas com a frase que o leitor anunciaria hoje e o que deveria
anunciar. Depois corrija na raiz e me mostre o TSX, sem tabindex positivo.