Google explica el texto alternativo para logotipos y botones

El atributo alt para logotipos y botones se realiza de manera diferente al texto alternativo que se usa para otros tipos de imágenes. Google analiza la forma correcta de hacerlo.

En un podcast de Google Search Off the Record, Lizzi Sassman y John Mueller de Google discuten la mejor manera de manejar el texto alternativo para logotipos y botones basados ​​en imágenes.

Existen mejores prácticas para agregar atributos alt a logotipos y botones.

Las reglas pueden parecer un poco complicadas al principio, pero en realidad son fáciles de entender.

Obtener los atributos alt correctos es bueno para los usuarios y, a la larga, es excelente para las ganancias.

Agregar texto alternativo a imágenes funcionales

Lizzi Sassman inicia la discusión haciendo referencia a imágenes funcionales, imágenes que tienen un propósito funcional en la página web.

Ella pregunta si el texto alternativo debe describir qué hace el botón o cuál es la imagen en el botón en la situación en la que un botón es un icono.

Por último, pregunta si hay un propósito de SEO para agregar texto alternativo a imágenes funcionales como botones.

“Lizzi Sassman:
…The level of care in which we spend on the visual asset, we should also put the same level of energy into the words that describe that asset as well. Which I think is great.

Another category of images is like the functional thing, which sometimes could be a button.

Like it’s a graphic that also functions as something.

So should the alt text tell me what’s about to happen?

If you click this, then it’s going to take you here?

It could be like an image of something, that then also functions as a button.

And do you describe the function, or like also it was, I don’t know… like an arrow picture?

And also, does it matter for SEO?

John Mueller:
Yeah. I think…

Lizzi Sassman:
It could be like a logo.

John Mueller:
For accessibility, that probably makes sense, to just do something around that.

But for SEO, people are not going to search for the checkout button, or something like that.”

“Lizzi Sasman: Lo cual creo que es genial.

Otra categoría de imágenes es como lo funcional, que a veces puede ser un botón.

Como si fuera un gráfico que también funciona como algo.

Entonces, ¿el texto alternativo debería decirme qué está a punto de suceder?

Si haces clic aquí, ¿te llevará aquí?

Podría ser como una imagen de algo, que luego también funciona como un botón.

¿Y describe la función, o como también era, no sé… como una imagen de flecha?

Y también, ¿importa para el SEO?

Juan Mueller: Pienso…

Lizzi Sasman:

Juan Mueller:

Pero para el SEO, la gente no va a buscar el botón de pago o algo así”.

El texto alternativo en los botones es para accesibilidad, no para SEO

John Mueller deja en claro que no hay un propósito de SEO para agregar texto alternativo a los botones.

Pero también observó que el texto alternativo para este tipo de imágenes se debe principalmente a razones de accesibilidad.

Lizzi continuó la discusión:

“Lizzi Sassman:
…But maybe they would for the logo, or something like the logo. When you click it, it takes you to the homepage, or something.

But it’s also, “Oh, it’s a logo.”

So do you say, “This is the logo for Google Search Central.”

John Mueller:
Sure.

Lizzi Sassman:
Or like what would be descriptive text.

It’s Googlebot in the logo, but is the thing that’s most important to know about the image the fact that it’s a logo?

Or what the logo looks like?

I guess from that angle, people are probably looking for the logo.

John Mueller:
Yeah.

Lizzi Sassman:

Like what is the logo for X company, maybe?

John Mueller:
Yeah. I mean it goes back to kind of that strategy that we’re trying to avoid.

What do you want to be found for?

Lizzi Sassman:
Yeah, but that’s the most important question, I guess, because then it sort of steers…

I can get carried away with all these rabbit holes, so it sort of, I don’t know, prioritizes what are the things that we should be thinking of, because you don’t necessarily need to write all the things for these things, I guess.”

“Lizzi Sasman: Cuando haces clic en él, te lleva a la página de inicio, o algo así.

Pero también es, «Oh, es un logo».

Entonces dices: «Este es el logotipo de Google Search Central».

Juan Mueller:

Lizzi Sasman:

Es Googlebot en el logo, pero ¿es lo más importante saber sobre la imagen el hecho de que es un logo?

¿O cómo se ve el logo?

Supongo que desde ese ángulo, la gente probablemente esté buscando el logo.

Juan Mueller:

Lizzi Sasman:

¿Cuál es el logotipo de la empresa X, tal vez?

Juan Mueller: Quiero decir que se remonta a esa estrategia que estamos tratando de evitar.

¿Para qué quieres que te encuentren?

Lizzi Sasman:

Puedo dejarme llevar por todas estas madrigueras de conejo, por lo que, no sé, prioriza cuáles son las cosas en las que deberíamos estar pensando, porque no necesariamente necesitas escribir todas las cosas para estas cosas,

El uso adecuado del texto alternativo en logotipos y botones

La forma correcta de usar texto alternativo en imágenes como logotipos en realidad depende de si la imagen es un enlace o no.

Si la imagen del logotipo funciona como un enlace a la página de inicio, entonces es correcto etiquetar esa imagen con la función que tiene, de modo que un visitante del sitio que use un lector de pantalla pueda darse cuenta de que este logotipo es un enlace a la página de inicio.

El organismo oficial de creación de estándares HTML, The World Wide Web Consortium (W3C), publica una explicación sobre cómo manejar los logotipos. publishes an explainer

Enlace de la página de inicio del logotipo

Un logotipo que funciona como enlace de página de inicio debe contener texto alternativo que le diga al usuario del lector de pantalla que el logotipo es un enlace de página de inicio.

El W3C usa este ejemplo del código:

<a href="https://www.w3.org/">
<img src="w3c.png" alt="W3C home">
</a>

El código anterior es para un logotipo que se puede encontrar en la parte superior de la página y que también sirve como enlace a la página de inicio.

El texto alternativo de ejemplo proporcionado por el W3C simplemente dice «Inicio del W3C», pero podría ser más descriptivo si lo desea.

Enlace de página de inicio de logotipo y texto

Hay otros tipos de enlaces de logotipos en los que hay un logotipo de imagen y un texto justo al lado o debajo, y tanto la imagen como el texto están codificados dentro del mismo código de enlace.

En otras palabras, no hay dos enlaces, como un enlace para el logotipo y un enlace para el texto, es solo un enlace para el logotipo y el texto juntos.

En ese caso, dado que el texto describe la función del enlace, sería repetitivo repetir la función del enlace del logotipo.

Entonces, para ese caso, la mejor práctica es usar un texto alternativo nulo.

Este es el ejemplo que proporciona el W3C:

<a href="https://www.w3.org/">
<img src="w3c.png" alt=""> W3C Home
</a>

Tenga en cuenta cómo se codifica el atributo alt para la imagen:

img src="w3c.png" alt=""

Las comillas vacías para el texto alternativo se denomina atributo alternativo nulo (o texto alternativo nulo) Un lector de pantalla simplemente lo omitirá.

La razón por la que un texto alternativo nulo es bueno es porque hay un texto que describe cuál es la función de enlace:

W3C Home

W3C Inicio

Texto alternativo para un enlace de icono

A veces, un enlace tiene la forma de un icono, sin texto que explique lo que hace, por ejemplo, un icono en forma de sobre (que representa un correo electrónico o un mensaje) o una impresora (que indica que el enlace activa una impresora).

Para esta situación, es una mala práctica describir qué es la imagen (como un sobre o una impresora).

La mejor práctica es describir lo que hace la imagen (iniciar un correo electrónico o imprimir una página web).

El W3C usa el ejemplo de un ícono de impresora con el siguiente código y texto alternativo:

<a href="javascript:print()">
<img src="print.png" alt="Print this page">
</a>

Como puede ver, el ícono en forma de impresora tiene las palabras «Imprimir esta página» como texto alternativo Dice lo que hace el icono. Eso es útil.

Texto alternativo para un botón

Similar al ejemplo del ícono, el texto alternativo para la imagen de un botón debe describir lo que hace la imagen.

El W3C utiliza el ejemplo de un cuadro de búsqueda que tiene una lupa como botón de envío.

La mala manera de hacerlo es usar el texto alternativo para describir que la imagen es una lupa.

La mejor práctica es usar el texto alternativo para describir lo que hace la imagen.

Este es el código de ejemplo que muestra el W3C como ejemplo:

<input type="image" src="searchbutton.png" alt="Search">

Como puede ver, el texto alternativo para el botón de búsqueda es la palabra «Buscar», que describe cuál es la función del botón.

Texto alternativo para botones y logotipos

Lizzi y John no entraron en detalles sobre cómo manejar los diferentes escenarios para logotipos y botones.

Sin embargo, John señaló que no hay valor de SEO para el texto alternativo para botones y logotipos, es para la accesibilidad.

Es una práctica recomendada servir adecuadamente páginas web que sean funcionales para los usuarios que acceden a páginas web con lectores de pantalla.

Como se mencionó anteriormente, las personas que usan lectores de pantalla pueden ser clientes o defensores de su negocio o sitio web.

Por lo tanto, es bueno para el resultado final utilizar las mejores prácticas de accesibilidad.

Citas

Obtenga más información sobre la accesibilidad de botones y logotipos en el W3C

Imágenes funcionales Functional Images

Combinar enlaces de imagen y texto adyacentes para el mismo recurso Combining adjacent image and text links for the same resource

Uso de atributos alt en imágenes utilizadas como botones de envío Using alt attributes on images used as submit buttons

Escuche el podcast Search Off the Record en el minuto 15:57:

Imagen destacada de Shutterstock/Evgeny Atamanenko

Leer el articulo original en Search Engine Journal.

¡Danos un Voto!

¿Tienes una pregunta?

Luis Narciso
Sobre SEO
(Posicionamiento Web)

Frank Fajardo
Sobre Diseño Web, Anuncios, Diseño y Redes Sociales