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 ícono.

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

“Lizzi Sasman:
…El nivel de cuidado en el que gastamos en el activo visual, también debemos poner el mismo nivel de energía en las palabras que describen ese activo también. 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 un dibujo de flecha?

Y también, ¿importa para el SEO?

Juan Mueller:
Sí. Pienso…

Lizzi Sasman:
Podría ser como un logotipo.

Juan Mueller:
Para la accesibilidad, eso probablemente tenga sentido, simplemente hacer algo al respecto.

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 Sasman:
…Pero tal vez lo harían por el logo, o algo así como el logo. 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:
Por supuesto.

Lizzi Sasman:
O como lo que sería un texto descriptivo.

Es Googlebot en el logo, pero ¿lo más importante sobre la imagen es 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:
Sí.

Lizzi Sasman:

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

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

¿Para qué quieres que te encuentren?

Lizzi Sasman:
Sí, pero esa es la pregunta más importante, supongo, porque de algún modo dirige…

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, Supongo.”

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.

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="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/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 otro 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="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt=""> W3C Home
</a>

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

img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt=""

Las comillas vacías para el texto alternativo se denominan 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 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="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/javascript:print()">
<img src="print.png" alt="Print this page">
</a>

Como puede ver, el icono con forma de impresora tiene las palabras “Imprimir esta página” como texto alternativo. Indica 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="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/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 buena práctica servir adecuadamente las páginas web que son funcionales para los usuarios que acceden a las 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

Combinar enlaces de imagen y texto adyacentes para el mismo recurso

Uso de atributos alt en imágenes utilizadas como botones de envío

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

Imagen destacada de Shutterstock/Evgeny Atamanenko