Tudo sobre Marketing e Empreendedorismo

Google explica texto alternativo para logotipos e botões

O atributo alt ou texto alternativo para logotipos e botões é feito de forma do que é comumente usado para outros tipos de locais, como imagens. Por isso, o Google discute a maneira certa de fazer isso em um episódio de PodCast com representantes da empresa.

Texto alternativo para Logotipos e Botões

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. Isso porque existem práticas corretas e 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. Vale destacar ainda que incluir o texto alternativo correto é bom para os usuários e, a longo prazo, é ótimo para ganho de posições nas SERPs.

Adicionando Texto alternativo a Imagens Funcionais

Lizzi Sassman inicia a discussão onde faz referência a imagens funcionais, que são aquelas que têm um propósito funcional na página. Assim, a mesma 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.

O diálogo discorre acerca deste tema entre os Googlers. Por fim, ela pergunta se há um propósito de SEO em adicionar texto alternativo a imagens funcionais, como botões em uma página. Então, veja como foi a conversa em alto:

“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?

John Mueller: Sim. Eu penso…

Lizzi Sassman: 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”.

John Mueller: Claro.

Lizzi Sassman: 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.

John Mueller: Sim.

Lizzi Sassman: 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. Então, dá para tirar alguns insights dessas falas de John e Lizzi no PodCast.

Caso a imagem do logotipo funcione 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. Por isso, veja abaixo algumas dicas de código e texto alternativo para inserir na mesma.

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. Porém, 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 deve ignorar este tipo de detalhe no seu código.

A razão pela qual um texto alternativo nulo é bom é porque há um texto que descreve qual é a função do link, com mostra o detalhe abaixo:

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). Assim, 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. Com isso, 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. Assim, o W3C usa o exemplo de uma caixa de pesquisa que tem uma lupa para um botão de envio.

A pior maneira de fazer isso é usar o texto alternativo para descrever que a imagem é uma lupa. Então, a melhor maneira de fazê-lo é usar o atributo alt para descrever o que a imagem faz. Abaixo está é 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. Portanto, como dito antes, 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, além de práticas de SEO.

Seja o primeiro a ser notificado, sempre que um novo artigo ser publicado

Deixe uma resposta

Usamos cookies para melhorar sua experiência neste site. Ao continuar no site, você concorda com essas condições. Sim Mais detalhes