Análise rápida de acessibilidade
A maioria das falhas de acessibilidade são pequenas coisas que ficaram de fora do HTML, como uma imagem sem descrição ou um campo sem nome. Esta análise busca uma página, encontra essas falhas e diz quais elementos corrigir.
Tudo numa página precisa de um nome
Quando você olha uma página, o layout trabalha muito sem dizer uma palavra. Um ícone de lupa ao lado de uma caixa quer dizer “pesquise aqui”. Um texto grande em negrito quer dizer “começa uma nova seção”. Nada disso chega a quem usa um leitor de tela, uma linha braille ou controle por voz. O software dessa pessoa não enxerga o layout. Ele lê o HTML e quer duas coisas de cada elemento: o que ele é e como se chama.
Um <img> responde pelo atributo alt, um campo de formulário pelo seu <label>, uma seção pelo seu título. Quando falta a resposta, o software diz “imagem”, “editar texto” ou “link” e segue em frente, o que não ajuda ninguém. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) transformam essa ideia em regras testáveis, e boa parte delas pode ser verificada por um programa.
O que a análise testa e quanto custa cada problema
A página começa com 100 pontos. Cada problema tira alguns, e um problema que se repete custa mais, até um teto.
| Problema | Pontos descontados |
|---|---|
Nenhum lang em <html> | 10 |
Zoom bloqueado (user-scalable=no, ou maximum-scale abaixo de 2) | 10 |
<title> vazio ou ausente | 6 |
Imagens sem atributo alt | 4 + 2 por imagem, no máximo 20 |
| Campos de formulário sem rótulo | 5 + 3 por campo, no máximo 20 |
| Links ou botões sem nome | 4 + 2 cada, no máximo 20 |
| Nenhum título | 8 |
Nenhum <h1>; níveis de título pulados | 4; 2 + 1 por salto, no máximo 6 |
| Texto de link vago (“clique aqui”, “leia mais”) | 2 + 1 por link, no máximo 8 |
| Texto com estilo inline abaixo de 4,5:1 de contraste | 3 + 2 cada, no máximo 10 |
<iframe> sem title | 2 + 1 cada, no máximo 6 |
Valores de id duplicados | 1 + 1 cada, no máximo 5 |
| Áudio ou vídeo que toca sozinho com som | 4 |
Nenhuma região <main>; um tabindex acima de 0 | 3 cada |
A análise ignora elementos ocultos com hidden, aria-hidden="true" ou um display:none inline, e imagens marcadas com role="presentation".
Como ler a nota
Os pontos que sobram viram uma letra: A a partir de 90, B a partir de 80, C a partir de 65, D a partir de 50, F abaixo disso. Problemas em vermelho são barreiras, do tipo que impede alguém de concluir uma tarefa. Problemas em âmbar atrasam as pessoas sem impedi-las. Abaixo de cada um você vê até oito dos elementos envolvidos, mostrados como uma tag com o caminho do arquivo, o nome do campo, o id ou a classe, para que você possa procurá-los nos seus templates.
Um A quer dizer que a análise não encontrou nenhum dos problemas que sabe detectar. Testes automáticos pegam mais ou menos um terço dos problemas reais de acessibilidade. Se o seu texto alternativo é exato, se a ordem de leitura faz sentido, como um menu personalizado se comporta com o teclado: isso precisa de uma pessoa para julgar.
Correções para os problemas mais comuns
- Imagem sem texto alternativo
- Diga o que a imagem transmite a quem enxerga:
<img src="team.jpg" alt="Five engineers around a whiteboard">. Para um enfeite decorativo, escrevaalt="". O valor vazio diz ao software assistivo para pular a imagem, e isso não é o mesmo que omitir o atributo. - Campo sem rótulo
<label for="email">Email</label> <input id="email" type="email">. Um placeholder não conta, já que some na primeira tecla digitada.- Link ou botão só com ícone
<button aria-label="Open menu">…</button>, ou coloque umaltna imagem do ícone dentro dele.- Nível de título pulado
- Escolha o nível pela estrutura (
h2para uma seção,h3dentro dela) e defina o tamanho no CSS. - Zoom bloqueado
- Reduza a tag viewport para
<meta name="viewport" content="width=device-width, initial-scale=1">.
O que esta análise não enxerga
Nosso servidor lê o HTML que recebe e não executa JavaScript, então tudo o que um framework injeta depois do carregamento fica sem exame. Ele também não baixa suas folhas de estilo. Por isso o contraste só é medido onde a cor do texto e a do fundo estão escritas num atributo style. Para todo o resto, teste suas cores na calculadora de taxa de contraste. Para ir mais longe numa página, ouça-a na prévia de leitor de tela e siga a sua ordem de tabulação.
Perguntas frequentes
Uma nota perfeita quer dizer que meu site está em conformidade com a WCAG?
Não. Quer dizer que esta página passa nas verificações que um programa consegue fazer no HTML bruto. A conformidade com a WCAG 2.2 nível AA também exige testes manuais com teclado e leitor de tela, em cada template do site.
Qual é a diferença entre um alt vazio e um alt ausente?
alt="" diz de propósito que a imagem é decorativa, e os leitores de tela a pulam sem dizer nada. Sem nenhum atributo alt, muitos leitores de tela acabam lendo o nome do arquivo, algo como “IMG underline 4521 ponto jpg”.
Por que um placeholder não é aceito como rótulo?
Um placeholder desaparece assim que o visitante digita, então quem é interrompido ou usa ampliação perde de vista o que o campo pedia. Alguns leitores de tela também não o anunciam. Um <label> visível fica no lugar e aumenta a área de clique.
A análise não aponta nenhum problema de contraste. Minhas cores estão boas?
Não necessariamente. A análise não lê cores definidas em folhas de estilo, só as definidas diretamente em atributos style="…". Confira à mão as cores do texto principal e dos botões na calculadora de taxa de contraste.
Minha página é feita com React ou Vue. O resultado é confiável?
Só se o HTML for renderizado no servidor. Se o servidor envia um documento quase vazio e o navegador monta a página com JavaScript, a análise vê o documento vazio e aponta pouco ou nada.