Manual Completo: Testando com Leitor de Tela
Guia passo-a-passo para teste manual com leitor de tela
Escolha seu Leitor
Recomendado para Iniciantes: NVDA (Gratuito)
Por que? Gratuito, fácil de usar, e padrão em desenvolvimento web
- Visite www.nvaccess.org
- Baixe a versão estável
- Instale (pode usar portátil também)
- Abra o site que quer testar
Começando com NVDA
Atalhos Essenciais (NVDA)
NVDA + Seta Para Baixo
Lê a linha atual
NVDA + Seta Para Cima
Lê a linha anterior
NVDA + H
Navega por headings
NVDA + F
Navega por formulários
NVDA + K
Navega por links
NVDA + L
Navega por listas
NVDA + Insert + F7
Abre "Elements List"
NVDA + Espaço
Ativa modo focus/navegação
Nota: "NVDA" geralmente significa Insert (tecla à direita de Backspace) em teclados norte-americanos, ou pode ser configurado diferente.
Teste 1: Navegação por Headings
Objetivo
Verificar se site tem estrutura clara de headings para navegação rápida
1. Abra NVDA
Inicie NVDA (ícone na barra de tarefas)
2. Abra o site em novo aba
NVDA começará a ler automaticamente
3. Pressione NVDA + H
Pula para próximo heading
✅ Esperado: "Heading 1, Bem-vindo"
❌ Problema: Sem anúncio ou pula seções
4. Continue navegando
Pressione NVDA + H repetidamente
✅ Esperado: Navega por H1 → H2 → H3 logicamente
❌ Problema: Ordem confusa, headings faltando
5. Abra Elements List
NVDA + Insert + F7 → Clique em "Headings"
✅ Esperado: Ver lista clara de todas seções
❌ Problema: Faltam seções principais
Checklist: Headings
Teste 2: Navegação por Links
Objetivo
Verificar se links têm texto descritivo que faz sentido isolado
1. Pressione NVDA + K
Pula para próximo link
2. Ouça o texto
✅ Bom: "Ver política de privacidade"
❌ Ruim: "Clique aqui" ou "Link"
3. Teste cada link
Navegue por todos links com NVDA + K
❌ Problema: Vários links "Clique aqui"
4. Abra Elements List para Links
NVDA + Insert + F7 → "Links"
Veja se cada link tem label claro
Checklist: Links
Teste 3: Navegação por Formulários
Objetivo
Verificar se campos têm labels claros e erros são anunciados
1. Pressione NVDA + F
Pula para próximo campo de formulário
2. Ouça o label
✅ Esperado: "Email, campo de edição"
❌ Problema: Só "campo de edição" sem label
3. Preencha com Tab
Tab para próximo campo
Digite alguns caracteres
4. Teste validação
Deixe campo vazio ou erro intencional
✅ Esperado: "Campo obrigatório" é anunciado
❌ Problema: Mensagem visível mas não lida
5. Envie o formulário
Pressione Tab até botão, Enter para enviar
✅ Esperado: Sucesso é anunciado
Checklist: Formulários
Teste 4: Estrutura Semântica
Objetivo
Verificar se site usa HTML semântico correto (não só DIVs)
1. Comece a ler de cima
NVDA + Seta para Baixo para ler linha por linha
2. Ouça as estruturas
✅ Esperado: "Navigation", "Main", "Footer" anunciados
❌ Problema: Tudo é "grupo" genérico
3. Teste landmarks
Use NVDA + Insert + F7, clique em "Landmarks"
✅ Esperado: Nav, Main, Complementary, Contentinfo
❌ Problema: Sem landmarks
4. Teste listas
Se há listas, NVDA anuncia "lista com X itens"?
❌ Problema: Listas como DIVs aninhados
Checklist: Semântica
Dicas Práticas
Pause o leitor quando confuso
Pressione Ctrl para pausar NVDA a qualquer momento
Use velocidade lenta no início
Alterar velocidade no painel de controle do NVDA
Pratique em sites conhecidos
Teste em Amazon, Google, etc. para aprender a estrutura
Feche os olhos
Teste com olhos fechados para simular cegueira
Próximos Passos
- Baixe e instale NVDA
- Pratique em sites conhecidos (Google, Wikipedia)
- Execute os 4 testes acima em seu site
- Anote problemas com localização exata
- Consulte guia de correções
- Implemente e teste novamente