0Pricing
HTML Academy · Aula

Testes com leitores de tela

Use VoiceOver e NVDA para verificar implementações de ARIA.

Testes com leitores de tela é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Por que testar com leitores de tela?

As ferramentas automatizadas detectam apenas 30–40% dos problemas de acessibilidade. Testes reais com leitores de tela revelam problemas que as verificações automatizadas não encontram:

  • Ordem de leitura confusa
  • Anúncios ARIA pouco úteis
  • Gerenciamento de foco ausente
  • Padrões de interação confusos

VoiceOver no Mac

O VoiceOver vem integrado ao macOS — não é necessário instalá-lo:

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

VoiceOver no iOS

Teste a experiência com leitores de tela móveis usando o VoiceOver no iPhone/iPad:

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

NVDA no Windows

O NVDA é um leitor de tela gratuito e de código aberto para Windows:

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

Lista de verificação para leitores de tela

O que verificar com um leitor de tela:

  • O título da página é anunciado durante o carregamento
  • Os títulos criam uma estrutura lógica de navegação
  • Todas as imagens têm texto alternativo significativo ou vazio
  • Todos os campos de formulário têm rótulos
  • Botões e links têm nomes descritivos
  • A contenção de foco do modal funciona corretamente
  • As atualizações de conteúdo dinâmico são anunciadas

Erros comuns em leitores de tela

Problemas que os testes automatizados não encontram:

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

Teste priorizando o teclado

Antes de usar um leitor de tela, teste primeiro apenas com o teclado:

  1. Desconecte o mouse ou trackpad
  2. Navegue por toda a página usando apenas Tab
  3. Verifique se todos os elementos interativos podem ser alcançados
  4. Verifique se todas as ações podem ser realizadas com o teclado

Ferramentas automatizadas de teste de acessibilidade

Complemente os testes manuais com ferramentas automatizadas:

  • axe DevTools — extensão do Chrome; verificador automatizado mais preciso
  • WAVE — wavebooth.com; sobreposição visual na página
  • Lighthouse — Chrome DevTools; auditoria de desempenho e acessibilidade
  • pa11y — ferramenta de CLI; excelente para fluxos de CI/CD

Referência de padrões ARIA

O W3C ARIA Authoring Practices Guide (APG) fornece implementações de referência:

  • Acordeão, Alerta, Diálogo de alerta
  • Trilha de navegação, Botão, Carrossel
  • Caixa de seleção, Caixa de combinação, Diálogo
  • Divulgação, Feed, Grade
  • Caixa de lista, Menu, Barra de menus
  • Aba, Dica de ferramenta, Visualização em árvore

URL: w3.org/WAI/ARIA/apg/

Integração contínua de acessibilidade

Inclua os testes de acessibilidade no seu fluxo de trabalho:

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

Resumo dos testes

Uma estratégia completa de testes de acessibilidade:

  1. Projeto — verifique o contraste de cores e os tamanhos dos alvos de toque
  2. Desenvolvimento — teste com o teclado e faça uma verificação automatizada com axe
  3. Revisão — teste com leitores de tela (VoiceOver + NVDA)
  4. CI/CD — use pa11y ou axe no fluxo automatizado
  5. Produção — use o Lighthouse e faça verificações manuais pontuais

Verificação rápida

Que porcentagem dos problemas de acessibilidade as ferramentas automatizadas conseguem detectar com confiabilidade?

Recapitulação: testes com leitores de tela

Elementos essenciais dos testes:

  • VoiceOver (Mac/iOS) e NVDA (Windows) são gratuitos e essenciais
  • Teste primeiro apenas com o teclado; depois adicione o leitor de tela
  • Ferramentas automatizadas: axe, WAVE, Lighthouse e pa11y
  • Os testes automatizados detectam apenas cerca de 30–40% dos problemas
  • Consulte os padrões do APG para implementar ARIA corretamente

Perguntas Frequentes

A aula “Testes com leitores de tela” é grátis?

Sim — o texto completo de “Testes com leitores de tela” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Testes com leitores de tela”?

Use VoiceOver e NVDA para verificar implementações de ARIA. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Testes com leitores de tela”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. aria-expanded e aria-controls para alternâncias
  2. aria-selected e padrões de abas
  3. Regiões dinâmicas: aria-live aria-atomic aria-relevant
  4. Testes com leitores de tela
← Voltar para HTML Academy