Texto alternativo para imagens de conteúdo
O que a norma pede
Toda imagem que transmite informação tem um texto alternativo que descreve essa informação.
- 1.1.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Marque no protótipo quais imagens são de conteúdo e anote, para cada uma, a mensagem que ela transmite. Essa anotação é o ponto de partida do texto alternativo; evite deixar informação importante só na imagem.
Foto na notícia sobre vacinação
Uma notícia mostra a foto da fila no posto de saúde.
Errado: Imagem sem intenção registrada
sem altNa especificação
“foto-destaque.jpg”
Ninguém sabe o que a imagem precisa comunicar.
Certo: Mensagem anotada
altNa especificação
Mensagem: “fila curta no posto, pessoas idosas sendo vacinadas primeiro”.
A pessoa conteudista escreve o alt a partir da intenção.
Coloque o texto alternativo no atributo alt de toda imagem de conteúdo e torne esse campo obrigatório nos componentes e no gerenciador de conteúdo. Para imagens em CSS que tenham informação, ofereça o texto de outra forma.
Gráfico da arrecadação
Uma imagem mostra que a arrecadação subiu 12% no ano.
Errado: Alt ausente ou genérico
<img src="grafico.png"> <img src="grafico.png" alt="imagem">O leitor lê o nome do arquivo ou “imagem”.
Certo: Alt com a informação
<img src="grafico.png" alt="Arrecadação subiu 12% em 2024 em relação a 2023">Quem não vê recebe a mesma informação.
Garanta que o gerenciador de conteúdo exija o texto alternativo e que a revisão dele faça parte do fluxo de publicação. Imagem sem descrição é o problema de acessibilidade mais comum na web.
Publicação de notícias
A assessoria publica várias notícias com fotos por dia.
Errado: Alt opcional
No processo
Campo de texto alternativo opcional e escondido em “avançado”.
A maioria das fotos vai ao ar sem alt.
Certo: Alt no fluxo
No processo
Campo obrigatório ao lado da imagem, com uma dica de como preencher.
O alt vira parte natural da publicação.
Com leitor de tela, ouça o que é anunciado em cada imagem e compare com o que ela mostra. Registre imagens sem alt e alts que só trazem nome de arquivo ou a palavra “imagem”.
Página de resultados do concurso
O leitor de tela percorre a página.
Errado: Anúncio vazio de sentido
Leitor de tela anuncia: “IMG_2034.jpg, imagem”
A imagem com a lista de aprovados não é acessível.
Certo: Anúncio com a informação
Leitor de tela anuncia: “Lista de aprovados publicada em 10 de março; o arquivo completo está abaixo, imagem”
A pessoa entende o que a imagem traz.
Descreva em uma ou duas frases a informação que a imagem transmite naquele contexto, e não a aparência dela. Não comece com “imagem de” ou “foto de”, porque o leitor de tela já anuncia isso.
Cartaz da campanha
A imagem mostra a data e o local da campanha de vacinação.
Errado: Descreve a aparência
Texto alternativo
“Imagem de um cartaz azul com letras brancas.”
A informação do cartaz se perde.
Certo: Descreve a informação
Texto alternativo
“Vacinação contra a gripe: de 5 a 30 de abril, em todos os postos de saúde.”
Quem não vê recebe o mesmo recado.