O desenvolvedor web tem uma grande relevância quando o assunto é acessibilidade, pois ele tem o poder de democratizar as informações e pode usar uma simples ferramenta que pode mudar por completo a interação do usuário em um website.
Por isso quero falar do texto alternativo que é utilizado para descrever o conteúdo de uma imagem. Ele é inserido através do atributo 'alt' na tag .
Além de auxiliar o usuário em situações, como um erro no carregamento da imagem devido a uma conexão ruim ou até um erro na url da imagem, é também de suma importância para as pessoas com deficiência visual.
Visto que é pela descrição da imagem que as pessoas cegas conseguem identificar do que se trata o “gráfico” (nome dado pelos leitores de tela para sinalizar que naquele local existe uma imagem, mesmo quando não existe o alt na tag img).
É isso mesmo! Quando não colocamos um 'alt' em nossa tag, as pessoas com deficiência visual sabem que existe uma imagem no conteúdo do seu site, porém, não sabem do que se refere, o que traz uma experiência muito ruim para o usuário.
Dicas de como fazer um atributo 'alt' de qualidade.
Procure ser deixar tudo claro e objetivo.
Por exemplo, um site de notícias, neste site existe um artigo que conta sobre uma ONG que ajudou uma comunidade carente com agasalhos e alimentos.
Dentro deste conteúdo temos uma imagem que mostra as pessoas da ONG X entregando as doações para a comunidade, neste caso, criamos um 'alt' com a seguinte descrição: “Responsáveis da ONG X entregam doações à comunidade carente”.
O texto deve ser simples e direto a respeito do que se trata a figura, porém, quando a imagem tem mais um objetivo, como trabalhar a palavra-chave: “São Paulo” e “Amigos do bem”, neste exemplo, a palavra “São Paulo” teria o intuito de que o Google indexasse a notícia para esta região e já a palavra “Amigos do Bem”, seria mais um nome popular da ONG, como as pessoas da região conhecem. Como faríamos neste caso? A descrição poderia ser: “Amigos do bem (ONG X) entregam doações à comunidade carente em São Paulo”.
Exemplos de um HTML de imagem:
Exemplo 1 (Certo!): Com alt declarado e preenchido de vazio
_
<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=” “ /->
_
Exemplo 2 (Certo!): Com alt declarado e preenchido
<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”Dr. Paulo Cezar Maldonado” /->
Exemplo 3 (ERRADO): Com alt declarado, mas nulo
<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”” /->
Exemplo 4 (ERRADO): Sem alt declarado
<-img src=”marca-nome-dr-paulo-cezar-maldonado.gif” /->
Ao criar o atributo 'alt' para suas imagens, sempre lembre que o objetivo é descrever a imagem para aqueles que podem não são capazes de vê-la. Deve-se levar em consideração que o SEO e as palavras-chave são definitivamente importantes.
Top comments (0)