Uso correto do ALT em imagens

Normalmente, quando falamos em Acessibilidade, a primeira coisa que pensamos é usar a tag alt nas imagens que colocamos no HTML. Porém, algo tão simples requer alguns cuidados na aplicação e principalmente usar a tag conforme sua função.

Um ponto importante é saber que a função da tag alt não é mostrar um Tooltip quando o mouse passa sobre a imagem, mas sim exibir um texto alternativo quando o navegador não exibe imagens, mostrar um conteúdo caso a imagem não carregue ou servir como referência para deficientes visuais.

Acessibilidade

Agora, o que colocar na tag alt? É interessante lembrar que todas as imagens devem conter este atributo, porém em algumas situações parece não ser relevante o seu uso. Como por exemplo, imagens que montam o layout, ou servem apenas para ilustrar, não agregando informação ao conteúdo. Nestes casos use alt=””.

Não existe uma regra que defina qual conteúdo colocar na tag alt. O principal ponto é analisar a FUNÇÃO da imagem e o CONTEÚDO da página. Não seja redundante, se houver uma imagem como uma legenda, não replique este texto na tag alt. Imagine como seria chato para um deficiente visual escutar o mesmo texto duas vezes.

Quando colocamos uma imagem dentro de um link, isto quer dizer que há uma FUNÇÃO. Nesta situação deve ser levado em conta, qual função será executada. Em certos casos podem haver várias imagens iguais em uma página, porém a FUNÇÃO pode ser diferente. Por exemplo, alguns ícones iguais, com links para salvar arquivos diferentes. Neste caso, colocar no alt, o nome do arquivo que será salvo é uma boa alternativa para distinguir qual acão será executada naquele elemento.

Como não é uma regra, a melhor solução é tentar se colocar no lugar de quem está navegando na página e simular as situações em que o conteúdo do alt será exibido no lugar da imagem.

Uma matéria bem completa, inclusive com exemplos práticos pode ser encontrada no site Web Accessibility in Mind. Leitura recomendada: Appropriate use of alternative text.

Referências

Appropriate use of alternative text
W3C – How to specify alternate text
ZeroSeis: Uso correto de texto alternativo em imagens