Seja bem-vindo ao HTML4Noobs, seu curso introdutório de HTML5 provido pela He4rt Developers™
Uma das tags essenciais a se integrar acessibilidade é a tag img já que imagens podem conter conteúdos importantes para o contexto do assunto. Podemos então descrever as imagens. A forma mais comum é adicionando o atributo alt à tag imagem, pois você pode descrever a imagem usando esse atributo, fazendo com que essa descrição seja lida no lugar da imagem ao se usar um leitor de tela. Exemplo:
<img src="html.png" alt="ícone do html">
Veja que essa descrição aparece quando a fonte da imagem não é encontrada, o famoso "crash", mas não aparece quando a imagem é encontrada, sendo apenas lida pelos leitores de tela.
Você pode adicionar descrições visíveis e mais completas desta forma:
<figure>
<img src="/images/html.png" alt="ícone do html">
<figcaption>Ícone do HTML: Pentágono laranja com um número 5 de cor branca no centro, representando o 5 de HTML5</figcaption>
</figure>
Mas sempre use o atributo alt pois nem todos os leitores de tela reconhecem essa tag.
Mesmo para imagens decorativas deve-se usar o atributo alt, porém, deixa-se o atríbuto vazio. Desta forma:
<img src="html.png" alt="">Imagem crashada está aqui embaixo
Imagem crashada está aqui acima
Perceba que novamente coloquei uma source inexistente, como no primeiro exemplo, dessa vez, porém, você pode ver que mesmo com a imagem crashada, nem um ícone nem uma descrição aparecem, pois é como se fosse uma imagem "fantasma" que só existe como decoração, não existindo em forma "legível".