Texto alternativo para imagens

Um arabesco decorativo e um gráfico de vendas usam ambos o elemento img, mas o alt certo para o primeiro é uma string vazia e para o segundo é uma frase completa.

Para que serve o texto alternativo

Um leitor de tela transforma uma página em fala ou braile. Quando chega a uma imagem, ele não consegue olhar os pixels, então lê o atributo alt. O mesmo texto aparece quando uma imagem não carrega, e é o que um buscador ou um navegador só de texto recebe. A WCAG 2.2 põe isso em primeiro lugar: o critério de sucesso 1.1.1 Conteúdo Não Textual, de nível A, pede que toda imagem, ícone ou gráfico que traz informação tenha uma alternativa em texto que sirva ao mesmo propósito.

As palavras-chave são "o mesmo propósito". O texto alternativo não é uma legenda nem uma lista de tudo o que aparece no quadro. Pergunte o que um leitor que enxerga tira da imagem naquele lugar e escreva isso. A foto de um pão na página inicial de uma padaria talvez precise só de "Pão de fermentação natural, fatiado". A mesma foto num artigo sobre a cor da casca talvez precise de "Pão de fermentação natural com casca escura, quase preta, e miolo aberto". Mesmo arquivo, outra função, outro texto.

Quatro casos comuns

O tutorial de imagens do W3C divide a maioria das imagens em alguns grupos. Imagens informativas, como uma foto ou um diagrama simples, recebem uma descrição curta do que mostram. Imagens decorativas, como uma linha divisória ou uma textura de fundo, recebem um alt vazio, escrito alt="", que diz à tecnologia assistiva para pulá-las. Imagens funcionais, como um logotipo que leva à página inicial ou uma lupa que envia uma busca, recebem um texto que diz o que acontece: "Corner Bakery, página inicial" ou "Buscar", e não "logotipo" ou "lupa". Imagens de texto recebem as palavras da imagem.

Deixar o atributo de fora não é o mesmo que deixá-lo vazio. Sem alt nenhum, alguns leitores de tela recorrem ao nome do arquivo, e quem ouve pode escutar algo como "IMG underscore 4032 ponto jpeg". Um alt vazio é uma escolha deliberada que diz "não há nada para ver aqui". Para um gráfico complexo, mantenha o alt curto ("Gráfico de barras das vendas mensais, descrito abaixo") e ponha os números numa tabela ou num parágrafo ao lado, onde todos possam lê-los.

Imagens que não são elementos img

As imagens também podem chegar como SVG inline ou como imagens de fundo do CSS. Um fundo do CSS não tem lugar nenhum para texto alternativo, então só deve ser usado para decoração; tudo o que traz significado pertence ao HTML. Um svg inline que é pura decoração pode ser escondido com aria-hidden="true", o que a unidade 6 explica. A WCAG não define limite de caracteres para o texto alternativo, mas o tutorial do W3C volta sempre ao mesmo conselho: seja breve e dê o que importa naquele contexto. Se você está escrevendo três frases, o conteúdo provavelmente deveria estar no texto da página, onde todos podem lê-lo.

Você pode conferir as suas próprias páginas sem programa especial. Veja o código-fonte da página e procure <img: cada resultado deve ter um atributo alt, vazio ou não. As ferramentas de desenvolvedor dos principais navegadores também têm um painel de acessibilidade que mostra o nome que cada imagem acaba recebendo. Ler esses nomes em sequência, fora de contexto, é um bom teste. Se uma lista diz "imagem, imagem, gráfico, logotipo", quem usa leitor de tela ouve exatamente isso.