Prévia de leitor de tela
Para um leitor de tela, uma página é uma única frase comprida. Informe um endereço para receber essa frase como transcrição, ouvi-la com uma voz do seu aparelho e ver quais itens são anunciados sem nome.
De duas dimensões para uma
Com os olhos você abarca a página de uma vez: logo no alto à esquerda, menu atravessado, artigo no meio, barra lateral à direita. A fala não consegue fazer “tudo de uma vez”. Um leitor de tela como NVDA, JAWS, VoiceOver ou TalkBack percorre o HTML na ordem do código-fonte e fala um item por vez, com o papel do item antes do texto: “título nível 2, Preços”, “link, Fale conosco”, “editar, E-mail, obrigatório”.
Ninguém escuta tudo isso do começo ao fim. Usuários experientes navegam por tipo. Uma tecla pula para o próximo título, outra lista todos os links da página, outra vai direto para a região principal. Então, para eles, o papel e o nome de cada elemento são a interface inteira. Um botão que parece óbvio na tela mas não tem texto é anunciado como “botão”, e é só isso que eles ouvem.
Como a transcrição é montada
Nosso servidor baixa a página uma vez e percorre o <body> do jeito que o software assistivo faz. O <title> da página vem primeiro, já que é a primeira coisa falada quando uma página abre. Depois disso, cada elemento vira uma linha:
- Regiões: banner, navegação, principal, complementar, informações de conteúdo, pesquisa, além de regiões e formulários com nome.
- Títulos com o nível, links com o destino, botões com o estado (expandido, recolhido, pressionado).
- Campos de formulário com o tipo e o estado: “caixa de seleção, não marcada”, “caixa de combinação”, “editar, e-mail, obrigatório”.
- Imagens, frames, listas com o número de itens e tabelas com o número de linhas e colunas.
Calculamos o nome de cada elemento na ordem que os navegadores usam: aria-labelledby, depois aria-label, depois a fonte nativa (alt, <label>, conteúdo de texto), depois title. Tudo o que tem hidden, aria-hidden="true" ou um display:none inline fica de fora, assim como o conteúdo de um <details> fechado. Imagens com alt="" são puladas e contadas como decorativas.
Clique em Ouvir e o mecanismo de fala do navegador lê as linhas. Os papéis são falados em inglês. O conteúdo é falado com uma voz que corresponde ao atributo lang da página quando o seu aparelho tem uma, e a voz muda nos trechos marcados com um lang próprio.
O que os alertas significam
| Alerta | O que quem ouve escuta | Correção |
|---|---|---|
| sem alt | “Imagem sem rótulo”, às vezes seguido do nome do arquivo | Adicione um texto alt, ou alt="" se a imagem for decorativa |
| link vazio, sem nome | Só “link” ou “botão” | Texto visível, um alt no ícone, ou aria-label |
| sem rótulo | “Editar” sem nenhuma pergunta | <label for="…"> ligado ao id do campo |
| só placeholder | Uma dica que talvez nem seja lida | Um rótulo de verdade ao lado do campo |
| texto vago, texto repetido | “Leia mais” cinco vezes, cada um levando a um lugar diferente | Diga o destino no próprio link |
| pula um nível, vazio | Uma estrutura cheia de buracos | Vá de h2 para h3, nunca direto para h4 |
| sem title, sem cabeçalhos | “Frame”; valores de tabela sem a coluna deles | title no <iframe>; células <th> |
Um alerta vermelho significa que o item não tem nome nenhum. Um alerta âmbar significa que tem, mas o nome não ajuda. O resumo também aponta a falta do idioma da página, de um <h1> e de uma região principal, e diz quantos itens vêm antes do conteúdo principal. Se esse número for alto, toda visita a toda página começa com a mesma longa recitação do seu menu.
Três jeitos de usar os filtros
- Selecione Títulos e leia só essa lista. Ela deve funcionar como sumário da página.
- Selecione Links. Cada linha precisa fazer sentido sem a frase em volta.
- Selecione Campos e botões, feche os olhos e clique em Ouvir. Você deve conseguir entender o que cada controle quer de você.
Selecione qualquer linha para recomeçar a leitura dali. O controle de velocidade dá uma ideia do ritmo que usuários frequentes escolhem, muitas vezes bem acima da fala normal.
Uma aproximação, com lacunas conhecidas
A transcrição vem do HTML tal como o servidor enviou. Não executamos JavaScript nem aplicamos folhas de estilo, então o conteúdo adicionado por script falta e o conteúdo escondido por uma classe CSS ainda é lido. O tempo de escuta é uma estimativa baseada em cerca de 170 palavras por minuto. Páginas muito longas param em 1.200 itens. Cada leitor de tela real também tem seu próprio vocabulário e seus atalhos, então teste com pelo menos um deles antes de publicar. O NVDA é gratuito no Windows, e o VoiceOver vem com o macOS e o iOS.
Perguntas frequentes
Isso é o mesmo que testar com NVDA ou VoiceOver?
Não. Mostra a ordem, os papéis e os nomes com que um leitor de tela trabalha, e é aí que está a maioria dos problemas. Não reproduz comportamentos interativos como menus abrindo, anúncios ao vivo ou o foco entrando numa caixa de diálogo. Use para achar problemas rápido e depois confirme com um leitor de tela de verdade.
Por que a voz lê minha página com o sotaque errado?
Ou a página não declara um idioma com <html lang="…">, ou o seu aparelho não tem voz instalada para esse idioma. A linha de status acima da transcrição diz qual voz está em uso. Os leitores de tela reais se comportam do mesmo jeito.
Por que falta na transcrição parte do texto da minha página?
Provavelmente foi adicionado por JavaScript depois que a página carregou, ou está dentro de um elemento <details> fechado ou de um contêiner aria-hidden. Só lemos o HTML que o servidor entrega.
O que um leitor de tela deve anunciar para um logo?
O nome da organização e, se o logo for um link, para onde ele leva: alt="Acme, home page". Não escreva só “logo”, e não deixe o alt de fora, senão o link é anunciado pelo nome do arquivo ou pelo endereço.
Quantos links antes do conteúdo principal é demais?
Não há limite fixo, porque um link de pular e um elemento <main> permitem passar por eles com uma tecla. Sem esses dois, qualquer coisa além de uns poucos itens cansa já na terceira página.