Alternativas em texto para imagens

Usar o atributo alt para fornecer alternativas em texto a imagens

Alice Boxhall

Dave Gash

Meggin Kearney

As imagens são um componente importante da maioria das páginas da Web e, obviamente, são um problema específico para usuários com baixa visão. Precisamos considerar o papel que uma imagem desempenha em uma página para descobrir que tipo de alternativa de texto ela deve ter. Confira esta imagem.

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500.jpg">
</article>

Estudo mostra que 9 em cada 10 gatos julgam silenciosamente os donos enquanto dormem

Na página, temos a imagem de um gato, ilustrando um artigo sobre o famoso comportamento crítico dos gatos. Um leitor de tela anunciaria esta imagem usando o nome literal, "/160204193356-01-cat-500.jpg". Isso é exato, mas não tem utilidade alguma.

Você pode usar o atributo alt para fornecer uma alternativa de texto útil a esta imagem, por exemplo, "Um gato olhando ameaçadoramente para o espaço".

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

Assim, o leitor de tela pode anunciar uma descrição sucinta da imagem ( vista na barra preta VoiceOver) e o usuário pode escolher se deseja ir para o artigo.

Alguns comentários sobre alt:

• alt permite que você especifique uma string simples a ser usada sempre que a imagem não estiver disponível, por exemplo, quando a imagem não for carregada, for acessada por robô de Web lento ou for encontrada por um leitor de tela.
• alt difere de title, ou qualquer tipo de legenda, na medida em que é usado apenas se a imagem não estiver disponível.

Escrever texto alternativo útil é quase uma forma de arte. Para que uma string seja uma alternativa de texto utilizável, ela precisa transmitir o mesmo conceito que a imagem, no mesmo contexto.

Considere uma imagem do logotipo vinculado no cabeçalho de uma página, como os mostrados acima. Podemos descrever a imagem com bastante precisão como "O logotipo da Funion".

<img class="logo" src="logo.jpg" alt="The Funion logo">

Pode ser tentador dar-lhe uma alternativa de texto simples como "página principal" ou "página principal", mas isso é um desserviço a usuários de baixa visão e àqueles que enxergam.

Mas imagine um usuário de leitor de tela que quer localizar o logotipo no cabeçalho da página. Atribuir um valor alternativo de "início" cria uma experiência mais confusa. E um usuário que enxerga enfrenta o mesmo desafio, descobrir o que clicar no logotipo do site faz, como um usuário de leitor de tela.

Por outro lado, nem sempre é útil para descrever uma imagem. Por exemplo, considere uma imagem de lupa dentro de um botão de pesquisa que tem o texto "Pesquisar". Se o texto não estivesse lá, você definitivamente daria a essa imagem um valor alternativo de "pesquisa". Mas, como temos o texto visível, o leitor de tela vai ler em voz alta a palavra "busca"; assim, um valor alt idêntico na imagem é redundante.

No entanto, sabemos que, se deixarmos o texto alt de fora, provavelmente vamos ouvir o nome do arquivo de imagem em vez disso, o que é inútil e potencialmente confuso. Nesse caso, você pode simplesmente usar um atributo alt vazio, e o leitor de tela pulará a imagem completamente.

<img src="magnifying-glass.jpg" alt="">

Resumindo, todas as imagens precisam ter um atributo alt, mas nem todas precisam ter texto. Imagens importantes devem ter texto alternativo descritivo que descreva sucintamente o que a imagem é, enquanto imagens decorativas devem ter atributos alternativos vazios, ou seja, alt="".