Como deixar a internet mais acessível utilizando texto alternativo no seu HTML

Forneça texto alternativo para imagens com o atributo alt

A tag <img> possui outro atributo essencial, que é o atributo alt. Ao configurá-lo o elemento <img> apresentará um texto alternativo caso a imagem não seja carregada por algum motivo e ou caso o usuário utilize um leitor de tela por possuir deficiência visual, onde o texto do atributo alt deverá ser uma explicação clara da imagem que será lida pelo leitor de tela ou aparecerá como texto escrito em caso de problema com a exibição da imagem.

Configurando o atributo alt

O atributo alt deve ser inserido dentro da tag <img> da mesma forma que o atributo src, uma observação é que sempre que há outros atributos, devemos separá-los com um espaço. Por exemplo: <img src="www.exemplo.com" alt="um texto descritivo"> 

Atributo alt inserido na tag <img>

Se você adicionar o atributo alt ao nosso exemplo da última aula e abrir o arquivo, não notará diferença alguma, porém se uma pessoa utilizar um leitor de tela para ler o mesmo documento, o leitor usará o texto alternativo para representar a imagem que o usuário não pode ver. 

Vendo o texto alternativo quando há um erro com a exibição da imagem

Falamos que o texto alternativo inserido na tag <img> através do atributo alt também é útil para dar ao usuário uma dica do assunto de que trata uma imagem quando por algum motivo ela não puder ser exibida. Forçaremos um erro de exibição do arquivo no nosso mesmo exemplo anterior, para isso, abra o código no bloco de notas e propositalmente apague a última letra do url da imagem  na tag imagem, dentro do atributo src, onde está a extensão do arquivo ".jpg", apague o "g", deixando a extensão incorreta ".jp" não é necessário alterar nenhuma outra parte do url. Salve o documento e abra-o novamente, você verá que a imagem não carregará e o texto alternativo inserido no atributo alt aparecerá ao lado do ícone de imagem na tela:

Exibição de texto alternativo quando a imagem não pôde ser carregada

Conclusão

Além de ser fundamental a inserção do atributo alt em imagens para o caso de erro na exibição, como dica para o usuário, também é um requisito dos motores de busca e boa prática na internet que se insira o atributo alt para incluir os usuários que utilizam leitores de tela. Assim, se você criar páginas com imagens sem o atributo alt, os motores de busca podem avaliar mal o seu site, prejudicando assim o posicionamento dele nas buscas.