No Brasil e no mundo, milhões ou talvez bilhões de novos sites aparecem semanalmente tentando buscar o seu melhor lugar entre tantas opções disponíveis na Internet. Não é tarefa fácil, mas uma pequena parte dessas pessoas que criam ou já criaram suas presenças digitais tentam estabelecer melhores práticas para obter um bom ranking nas pesquisas orgânicas, fazendo aquilo que sites mais maduros já fazem: melhores práticas em Search Engine Optimization (SEO).
É claro que há outras formas de se obter audiência, através de aquisições via redes sociais, investimento em busca paga, e-mail marketing, construção de uma base de links de referência com parceiros, mídia display, entre outras. Mas a busca orgânica, em especial no Google, é fundamental - e um dos primeiros caminhos. E isso se estabelece somente pelas melhores práticas de SEO.
E quando falamos em Acessibilidade, SEO parece em destaque, pois entre suas melhores práticas, estão o uso de atributos de acessibilidade que podem e devem ser seguidos para melhorar o posicionamento do site nos motores de busca. As regras são claras, são obrigatórias, contam em cada ponto na visão do algoritmo do Google, principalmente e... infelizmente, a realidade é que poucos praticam, inclusive os grandes portais de notícias do País.
Uma ação de inclusão via SEO
O Movimento Web para Todos, em conjunto com a BigData Corp, divulgou em abril de 2020 um estudo com mais de 14 milhões de endereços ativos na internet Brasil para verificar como estavam os sites do País com relação à acessibilidade para navegação de usuários com algum tipo de experiência. Neste estudo, realizaram testes verificando uma lista de elementos internos relacionados basicamente a 3 conjuntos: imagens, links e formulários. E o resultado não é nada bom (você pode conferir a pesquisa e muito mais informações sobre acessibilidade na internet no site do MWPT aqui).
Mas vou falar sobre especificamente dos atributos de imagem. No resultado da pesquisa que citei acima, 83,36% dos sites avaliados não atendiam aos critérios para acessibilidade em imagens. Na metodologia do estudo, a parte específica de imagens analisou se os sites BR seguiam os seguintes critérios:
- Existe um Atributo Alt no elemento ou
- Existe um atributo title no elemento e ele não está vazio ou
- Existe um atributo aria-labelledby no elemento, ele se relaciona a um elemento da página por meio do id e é suportado pela tecnologia assistiva ou
- Existe um atributo aria-label no elemento e é suportado pela tecnologia assistiva.”
Os atributos WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) ou simplesmente ARIA, são complexos e daria um artigo exclusivo para análise (mas você pode conhecer mais aqui). Como estamos focando em Acessibilidade e SEO, vamos explicar aqui o que aparece e é cobrado como uma das práticas fundamentais que é o Alt. Na figura abaixo, por exemplo, você pode ver como o relatório de SEO da ferramenta que é uma das mais utilizadas globalmente, o Semrush, indica o não uso do Atributo Alt:
Definição e orientações
O que são Atributos Alt - São atributos de HTML e XHTML dentro das tags <img> e que são identificados “pelos mecanismos de pesquisa para entender o conteúdo das suas imagens”. Quase todas as ferramentas que analisam as melhores práticas de SEO dizem: se você ignorar Atributos Alt, pode perder a chance de obter uma melhor classificação nos resultados de pesquisa. Mas o centro do nosso tema é acessibilidade e este atributo tão simples e fácil, encontrado em quase todos editores de texto para Web, é a forma correta e objetiva de garantir uma experiência mais completa aos usuários com deficiência visual.
Por que usá-los - Os mais usados leitores de tela como Jaws, Virtual Vision, NVDA, Windows-Eyes (todos para Windows), Orca (Linux) e VoiceOver (leitor de tela para IOS), por exemplo, lêem as informações presentes na tela e quando chega a uma imagem irá ler justamente o texto que explica a imagem - o Atributo Alt. Se encontrarem um Atributo vazio ou escrito “tirei do facebook.jpeg”, é exatamente isso que o deficiente visual terá de experiência (ou seja, experiência nenhuma). O Atributo Alt, neste caso, faz o papel dos olhos que o deficiente visual precisa para “visualizar” a imagem.
Em SEO, só isso ajuda? - Não, existem outros atributos que temos que usar para melhorar o ranking de um site e que, ao mesmo tempo, ajudam muito os deficientes visuais. Um cuidado básico com SEO, por exemplo, está com as Heading Tags, mais conhecidas como H1, H2, H3… Elas são uma das formas que leitores de tela usam para navegar "através da tecla H", e a ordem correta, clara e hierárquica das Heading Tags que o Google classifica como centrais, também são essenciais para uma boa experiência do usuário com deficiência visual. Existem outras, claro, e você pode encontrá-las aqui: - https://brasil.uxdesign.cc/acessibilidade-como-funcionam-os-leitores-de-tela-3d9b610216e1
Como produzir bons Atributos Alt - Antes de tudo, é importante ressaltar que nem toda imagem que está num site necessita obrigatoriamente de descrição. Imagens que são apenas ícones sem função alguma e que são somente ilustrativas, não precisam de referências e, de preferência, poderiam ser colocadas diretamente no background do CSS (Cascading Style Sheet). Por isso, o site Hands Talk coloca uma fórmula que precede o uso do atributo e força a validade ou não. A fórmula são 3 perguntas:
- Por que esta imagem existe neste contexto?
- Por qual motivo ela aparece para o meu usuário?
- O que eu desejo transmitir ao meu usuário com esta imagem?
- Procure ser claro e objetivo: uma notícia mostra o prefeito de uma cidade, o José, e ele fez a inauguração de um pronto-socorro, por exemplo. Na matéria, há uma foto do José, entregando as chaves do novo pronto-socorro para a Maria, Secretária de Saúde. Descrição: “O prefeito José entrega as chaves do novo pronto-socorro para a Secretária de Saúde, Maria”. É comum, hoje em dia, a preocupação com uma descrição mais aproximada de cores, gestos e outros contextos e elas podem, sim, ser colocadas em prática.
- Pense nas palavras-chaves: encontrar as palavras centrais do contexto é sempre o caminho em SEO e, também, em Acessibilidade. É fundamental fazer descrições breves no Atributo Alt, e segundo o Hands Talk, “não é necessário escrever um outro texto explicando toda a imagem, a não ser em casos de que a imagem seja um quadro, e seja importante criar uma descrição explicando todos os traços daquela pintura”, por exemplo.
- Ícones com link precisam também de descrições: imagina que na matéria que fez, você coloque um link para um vídeo do Youtube. É preciso descrever que aquele ícone é do Youtube pelo Atributo Alt. E neste caso, entra em cena um outro Atributo, o title. Nele, é possível descrever a ação: “clique para ir ao vídeo do Youtube” ou somente “ir para o Youtube”.
- Não repita informações, não seja redundante: as pessoas com deficiência visual não precisam de repetições, elas precisam de boa experiência de navegação. Não é preciso ficar repetindo sem parar detalhes que já estão explícitos no texto.
- E imagens complexas, como gráficos? Gráficos, infográficos, mapas e até obras de arte, precisam de mais precisão (e precisão não é redundância). O Atributo Alt entra aqui como um elemento importante para que o redator ou criador do conteúdo possa realmente explicar o que aquela imagem contém de informação relevante. Neste caso, é possível sim fazer um Atributo Alt mais completo e até complexo, mas nunca confuso e redundante.
Existem muitas outras variáveis a respeito da descrição de imagens. Você pode conferi-la aqui: