Alt text é uma dessas coisas na minha memória muscular que aparece sempre que estou trabalhando com um elemento de imagem. O atributo quase se escreve sozinho.
<img src="image.jpg" alt="">Ou se você usar o Emmet, ele será preenchido automaticamente para você. Não se esqueça do alttexto! Use-o mesmo que não haja necessidade, pois uma string vazia é simplesmente ignorada pelos leitores de tela. Isso é chamado de “anular” o texto alternativo e muitos leitores de tela simplesmente anunciam o nome do arquivo de imagem. Apenas certifique-se de que seja realmente uma string vazia, porque até mesmo um espaço é captado por alguma tecnologia assistiva, o que faz com que um leitor de tela ignore completamente a imagem:
<!-- Not empty -->
<img src="image.jpg" alt=" ">Mas espere… há situações em que uma imagem não precisa de texto alt? Eu tendo a concordar com Eric que a grande maioria das imagens são mais do que decorativas e precisam ser descritas. Suas imagens provavelmente não são decorativas e devem ser descritas com alttexto.
Provavelmente está fazendo muito levantamento lá porque nem todas as imagens são iguais quando se trata de conteúdo e contexto. Emma Cionca e Tanner Kohler têm um novo estudo sobre aquelas situações em que você provavelmente não precisa de alt. É um artigo bem escrito e pesquisado e estou reunindo algumas pepitas dele.
O que os usuários precisam do texto alternativo
É o mesmo que qualquer outra pessoa precisaria de uma imagem: um caminho fácil para realizar tarefas básicas. Uma imagem de produto é um bom exemplo disso. Fornecer um visual suaviza o caminho para a compra porque é um contexto sobre a aparência do item e o que esperar quando você o receber. Não fornecer uma imagem quase adiciona atrito à experiência se você tiver que parar e fazer perguntas básicas ao suporte ao cliente sobre o tamanho e a cor daquela camisa que você quer.
Então, sim. Descreva essa imagem em alt! Mas talvez “descrever” não seja a melhor formulação porque o artigo segue para o próximo ponto…
Pare de descrever a aparência das imagens
O artigo cai em uma armadilha comum da qual sou muito culpado, que é descrever uma imagem de uma forma que eu ache útil. Ou, como o artigo diz, é muito como se eu estivesse dizendo a mim mesmo: “Vou descrever no texto alternativo para que os usuários de leitores de tela possam imaginar o que não estão vendo”.
Essa é a maneira errada de fazer isso. Voltando ao exemplo de uma imagem de produto, o artigo descreve como um leitor de tela pode abordá-la:
Por exemplo, veja como um usuário de leitor de tela pode abordar uma página de produto:
- Navegue entre os cabeçalhos das páginas para ter uma ideia da estrutura da página.
- Explore os detalhes de uma seção específica com o título Descrição do produto.
- Encontre uma imagem e pergunte-se: “ Que informação esta imagem comunica sobre o produto que eu possa ter perdido em outro lugar? ”
Interessante! Onde eu poderia encontrar uma imagem e avaliá-la com base no texto ao redor dela, um leitor de tela já está questionando qual conteúdo foi perdido ao redor dela. Esta passagem é uma sobre a qual preciso refletir (ênfase minha):
Na maioria das vezes, os usuários de leitores de tela não se perguntam como as imagens se parecem. Em vez disso, eles querem saber seu propósito. (Exceções a essa regra podem incluir sites que apresentam imagens, como obras de arte, puramente para diversão visual, ou usuários que antes podiam ver e perderam a visão.)
OK, então como diabos sabemos quando uma imagem precisa ser descrita? Parece tão estranho tomar o que é, em última análise, uma decisão subjetiva. Mesmo assim, o artigo apresenta três perguntas para nos fazermos a fim de determinar a melhor rota.
- A imagem é repetitiva? As informações relacionadas à tarefa na imagem também são encontradas em outro lugar na página?
- A imagem é referencial? A cópia da página faz referência direta à imagem?
- A imagem é eficiente? O texto pode
altajudar os usuários a completar uma tarefa de forma mais eficiente?
Esse é o cerne do artigo, então vou dividi-lo em partes.
A imagem é repetitiva?
Repetitivo no sentido de que o conteúdo ao redor já está fazendo um trabalho incrível pintando uma imagem. Se a imagem já estiver apropriadamente “descrita” pelo conteúdo, então talvez seja possível escapar anulando o altatributo.
Esta é a figura que o artigo usa para ilustrar o ponto (e, sim, estou altusando -ing):
A legenda para esta imagem descreve exatamente o que a imagem comunica. Portanto, qualquer texto alternativo para a imagem será redundante e uma perda de tempo para usuários de leitores de tela. Neste caso, o texto alternativo real era o mesmo que a legenda. Encontrar a mesma informação duas vezes seguidas parece ainda mais confuso e desnecessário.
O caminho feliz:
<img src="image.jpg" alt="">
Mas veja esta imagem sobre a disposição informal/semiformal da mesa, mostrando como ela não é descrita pelo texto ao redor (e, não, não estou usando alt“-ing”):
Se eu fosse descrever esta imagem, eu poderia me deixar levar descrevendo o diagrama e todos os pontos destacados na legenda. Se eu consigo ler tudo isso, então um leitor de tela também conseguiria, certo? Não exatamente. Eu realmente aprecio a quantidade de exemplos fornecidos no artigo. Uma amostra:
- Prato de pão e faca de manteiga, localizados no canto superior esquerdo.
- Garfo de sobremesa, colocado horizontalmente na parte superior central.
- Colher de sobremesa, colocada horizontalmente na parte superior central, abaixo do garfo de sobremesa.
Isso é bem menos verboso do que eu teria sido. Falar sobre quão longo (ou curto) altdeveria ser é outro tópico completamente diferente.
A imagem é referencial?
A segunda imagem que coloquei na última seção é um bom exemplo de uma imagem referencial porque eu a referenciei diretamente no conteúdo que a precede. Eu anulei o altatributo por causa disso. Mas o que eu errei foi não tornar a imagem reconhecível para leitores de tela. Se o altatributo for nulo, então o leitor de tela o ignora. Mas o leitor de tela ainda deve saber que ele está lá, mesmo que seja descrito apropriadamente.
O caminho feliz:
<img src="image.jpg" alt="">Lembre-se de que um leitor de tela pode anunciar o nome do arquivo da imagem. Então, talvez use isso como uma oportunidade para chamar a imagem e descrevê-la brevemente. Novamente, queremos que o leitor de tela anuncie a imagem se fizermos menção a ela no conteúdo ao redor dela. Simplesmente ignorá-la pode causar mais confusão do que clareza.
A imagem é eficiente?
Minha mente sempre vai para desempenho quando vejo a palavra eficiente aparecer em referência a imagens. Mas neste contexto o artigo quer dizer se a imagem pode ou não ajudar os visitantes a completar uma tarefa de forma eficiente.
Se a imagem ajuda a completar uma tarefa, digamos, comprar um produto, então sim, a imagem precisa altde texto. Mas se o conteúdo ao redor dela já faz o trabalho, então podemos deixá-la nula ( alt="") ou ignorá-la ( alt=" ") se não houver menção a ela.
Encerrando
Fiz uma pequena demonstração com alguns resultados de testes de alguns leitores de tela diferentes para ver como tudo isso funciona.