Em um podcast do Google Search Off the Record, Lizzi Sassman e John Mueller, do Google, discutem a melhor maneira de lidar com texto alternativo para logotipos e botões baseados em imagens.
Existem práticas recomendadas para adicionar atributos alt a logotipos e botões. As regras podem parecer um pouco complicadas no começo, mas na verdade são simples de entender. Obter os atributos alt corretos é bom para os usuários e, a longo prazo, é ótimo para ganhos.
Adicionando Alt Text a Imagens Funcionais
Lizzi Sassman inicia a discussão fazendo referência a imagens funcionais, imagens que têm um propósito funcional na página. Ela pergunta se o texto alternativo deve descrever o que o botão faz ou qual é a imagem do botão na situação em que um botão é um ícone. Por fim, ela pergunta se há um propósito de SEO em adicionar texto alternativo a imagens funcionais, como botões.
“Lizzi Sassman: O nível de cuidado que dedicamos ao ativo visual, também devemos colocar o mesmo nível de energia nas palavras que descrevem esse ativo também. O que eu acho ótimo. Outra categoria de imagens é como a funcional, que às vezes pode ser um botão. Como se fosse um gráfico que também funciona como algo. Então, o texto alternativo deve me dizer o que está prestes a acontecer? Se você clicar aqui, ele o levará até aqui? Pode ser como uma imagem de algo, que também funciona como um botão. E você descreve a função, ou como também era, não sei… como uma imagem de seta? E também, isso importa para SEO? Poderia ser como um logotipo.
John Mueller: Para acessibilidade, provavelmente faz sentido, apenas fazer algo em torno disso. Mas para SEO, as pessoas não vão procurar o botão de checkout ou algo assim.”
O texto alternativo nos botões é para acessibilidade, não para SEO
John Mueller deixa claro que não há propósito de SEO para adicionar texto alternativo aos botões. Mas ele também observou que o texto alternativo para esse tipo de imagem é principalmente por motivos de acessibilidade.
Lizzi continuou a discussão:
“Lizzi Sassman: Mas talvez eles fossem para o logotipo, ou algo parecido com o logotipo. Quando você clica nele, ele o leva para a página inicial ou algo assim. Mas também é “Ah, é um logotipo”. Então você diz: “Este é o logotipo da Central de Pesquisa do Google”. Ou como o que seria um texto descritivo. É o Googlebot no logotipo, mas o que é mais importante saber sobre a imagem é o fato de ser um logotipo? Ou como é o logotipo? Acho que, por esse ângulo, as pessoas provavelmente estão procurando o logotipo. Como qual é o logotipo da empresa X, talvez?
John Mueller: Sim. Quero dizer, isso remonta a essa estratégia que estamos tentando evitar. Para que você quer ser encontrado?
Lizzi Sassman: Sim, mas essa é a pergunta mais importante, eu acho, porque então meio que orienta… Eu posso me empolgar com todas essas tocas de coelho, então meio que, eu não sei, prioriza quais são as coisas que devemos pensar, porque você não precisa necessariamente escrever todas as coisas para essas coisas, Eu acho.”
O uso adequado de texto alternativo em logotipos e botões
A maneira correta de usar texto alternativo em imagens como logotipos depende se a imagem é um link ou não. Se a imagem do logotipo funcionar como um link para a página inicial, é correto rotular essa imagem com a função que ela possui, para que um visitante do site usando um leitor de tela possa perceber que esse logotipo é um link para a página inicial.
O órgão oficial de criação de padrões HTML, The World Wide Web Consortium (W3C), publica um explicativo sobre como lidar com logotipos.
Link da página inicial do logotipo
Um logotipo que funciona como um link de página inicial deve conter um texto alternativo que informe ao usuário do leitor de tela que o logotipo é um link de página inicial.
O W3C usa este exemplo de código:
<a href=”https://www.w3.org/”>
<img src=”w3c.png” alt=”W3C home”>
</a>
O código acima é para um logotipo que pode ser encontrado na parte superior da página que também serve como um link para a página inicial.
O texto alternativo de exemplo fornecido pelo W3C simplesmente diz “W3C home”, mas pode ser mais descritivo, se você quiser.
Link da página inicial do logotipo e do texto
Existem outros tipos de links de logotipo em que há um logotipo de imagem e um texto ao lado ou abaixo dele e a imagem e o texto são codificados no mesmo código de link.
Em outras palavras, não há dois links, como um link para o logotipo e um link para o texto, é apenas um link para o logotipo e o texto juntos.
Nesse caso, como o texto descreve a função do link, seria repetitivo repetir a função do link do logotipo. Portanto, para esse caso, a melhor prática é usar um texto alternativo nulo.
Este é o exemplo que o W3C fornece:
<a href=”https://www.w3.org/”>
<img src=”w3c.png” alt=””> Página inicial do W3C
</a>
Observe como o atributo alt é codificado para a imagem: img src=”w3c.png” alt=””
As aspas vazias para o texto alternativo são chamadas de atributo alt nulo (ou texto alternativo nulo). Um leitor de tela simplesmente o ignorará.
A razão pela qual um texto alternativo nulo é bom é porque há um texto que descreve qual é a função do link: Página inicial do W3C
Texto alternativo para um link de ícone
Às vezes, um link está na forma de um ícone, sem texto para explicar o que ele faz, por exemplo, um ícone na forma de um envelope (representando e-mail ou mensagem) ou uma impressora (que indica que o link ativa uma impressora).
Para esta situação, é uma má prática descrever o que é a imagem (como um envelope ou uma impressora). A melhor prática é descrever o que a imagem faz (iniciar um e-mail ou imprimir uma página da web).
O W3C usa o exemplo de um ícone de impressora com o seguinte código e texto alternativo:
<a href=”javascript:print()”>
<img src=”print.png” alt=”Imprimir esta página”>
</a>
Como você pode ver, o ícone em forma de impressora tem as palavras “Imprimir esta página” como texto alternativo. Ele diz o que o ícone faz. Isso é útil.
Texto alternativo para um botão
Semelhante ao exemplo do ícone, o texto alternativo de uma imagem de botão deve descrever o que a imagem faz. O W3C usa o exemplo de uma caixa de pesquisa que tem uma lupa para um botão de envio.
A má maneira de fazer isso é usar o texto alternativo para descrever que a imagem é uma lupa. A melhor prática é usar o texto alternativo para descrever o que a imagem faz.
Este é o código de exemplo que o W3C mostra como exemplo: <input type=”image” src=”searchbutton.png” alt=”Pesquisar”>
Como você pode ver, o texto alternativo do botão de pesquisa é a palavra “Pesquisar”, que descreve qual é a função do botão.
Texto alternativo para botões e logotipos
Lizzi e John não entraram nos detalhes de como lidar com os diferentes cenários para logotipos e botões. No entanto, John apontou que não há valor de SEO para texto alternativo para botões e logotipos, é para acessibilidade.
É uma prática recomendada servir adequadamente páginas da Web que sejam funcionais para usuários que acessam páginas da Web com leitores de tela. Como mencionado anteriormente, as pessoas que usam leitores de tela podem ser clientes ou defensores de sua empresa ou site. Portanto, é bom que o resultado final use as práticas recomendadas de acessibilidade.
Matéria completa: https://l.blackrat.pro/EGiIa
