Alternativas em texto para imagens

Usar o atributo alternativo para fornecer alternativas de texto para imagens

Alice Boxhall

Dave Gash

Meggin Kearney

As imagens são um componente importante da maioria das páginas da Web e, é claro, são um problema para usuários com baixa visão. É preciso considerar o papel de uma imagem em uma página para descobrir que tipo de texto alternativo ela precisa 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 entre 10 gatos julgam silenciosamente os donos enquanto eles dormem

Na página, temos uma imagem de um gato, ilustrando um artigo sobre o comportamento conhecido de julgamento dos gatos. Um leitor de tela vai anunciar essa imagem usando o nome literal, "/160204193356-01-cat-500.jpg". Isso é preciso, mas não é útil.

Você pode usar o atributo alt para fornecer uma alternativa de texto útil para essa 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">

Em seguida, o leitor de tela pode anunciar uma descrição sucinta da imagem ( mostrada na barra preta do VoiceOver) e o usuário pode escolher se quer passar para o artigo.

Alguns comentários sobre alt:

• alt permite especificar uma string simples para ser usada sempre que a imagem não estiver disponível, como quando ela não for carregada ou for acessada por um bot de rastreamento da Web ou encontrada por um leitor de tela.
• alt é diferente de title ou qualquer tipo de legenda porque só é usado se a imagem não estiver disponível.

Escrever textos alternativos úteis é uma arte. Para que uma string seja uma alternativa de texto útil, ela precisa transmitir o mesmo conceito da imagem, no mesmo contexto.

Considere uma imagem de logotipo vinculada no cabeçalho de uma página, como as mostradas 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 usar um texto alternativo mais simples, como "página inicial" ou "página principal", mas isso prejudica os usuários com visão reduzida e com visão normal.

Mas imagine um usuário de leitor de tela que quer localizar o logotipo da cabeceira na página. Dar a ele um valor alt de "início" cria uma experiência mais confusa. E um usuário com visão enfrenta o mesmo desafio, descobrir o que acontece ao clicar no logotipo do site, assim como um usuário de leitor de tela.

Por outro lado, nem sempre é útil descrever uma imagem. Por exemplo, considere uma imagem de lupa dentro de um botão de pesquisa que tenha o texto "Pesquisar". Se o texto não estivesse lá, você definitivamente daria à imagem um valor alternativo de "search". No entanto, como temos o texto visível, o leitor de tela vai identificar e ler em voz alta a palavra "search". Portanto, um valor alt idêntico na imagem é redundante.

No entanto, sabemos que, se o texto alt for omitido, provavelmente vamos ouvir o nome do arquivo de imagem, o que é inútil e potencialmente confuso. Nesse caso, basta usar um atributo alt vazio, e o leitor de tela vai pular a imagem.

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

Em resumo, todas as imagens precisam ter um atributo alt, mas não precisam ter texto. As imagens importantes precisam ter um texto alternativo descritivo que descreva sucintamente o que a imagem é, enquanto as imagens decorativas precisam ter atributos alt vazios, ou seja, alt="".