Google explica el texto alternativo para logotipos y botones

En el podcast de Google Search Off the Record, Lizzy Sussman y John Mueller de Google analizan 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 a primera vista, pero en realidad son simples y complejas de entender.

Obtener los atributos alt correctos es bueno para los usuarios y excelente para obtener ganancias a largo plazo.

Agregar texto alternativo a las imágenes destacadas

Lizzy Sussman comienza 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 una situación en la que el botón es un ícono.

Finalmente, pregunta si hay un propósito de SEO para agregar texto alternativo para mostrar imágenes como botones.

Lizzy Susman:
... El nivel de cuidado que ponemos en un activo visual, debemos poner el mismo nivel de energía en las palabras que describen ese activo. Lo cual creo que es genial.
Otra categoría de imágenes es como lo funcional que a veces puede ser un botón.
Es como si fuera un gráfico que también funciona como algo.
¿Debería decirme el texto alternativo qué sucederá?
Si haces clic en eso, ¿te llevará aquí?
Podría ser como una imagen de algo que luego también funciona como un botón.
¿Y estás describiendo la característica, o también era, no sé... como una imagen de flecha?
Y también, ¿importa para el SEO?
Juan Mueller:
si, yo pienso...
Lizzy Susman:
Podría ser como un logotipo.
Juan Mueller:
Para la accesibilidad, probablemente tenga sentido hacer algo al respecto.
Pero para el SEO, la gente no va a buscar el botón de pago ni nada por el estilo".

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

John Muller aclara que no hay un propósito de SEO para agregar texto alternativo a los botones.

Pero también señaló que el texto alternativo para este tipo de imágenes es principalmente por razones de accesibilidad.

Lizzie continuó la discusión:

Lizzy Susman:
… 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".
Así que dices: "Este es el logotipo de Google Search Central".
Juan Mueller:
Por supuesto.
Lizzy Susman:
O como lo que sería un texto descriptivo.
Ese es Googlebot en el logotipo, pero lo más importante que debe saber sobre la imagen es el hecho de que es un logotipo.
¿O cómo es el logo?
Supongo que desde este ángulo la gente probablemente esté buscando el logo.
Juan Mueller:
Sí
Lizzy Susman:
Por ejemplo, ¿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?
Lizzy Susman:
Sí, pero esa es la pregunta más importante, supongo, porque luego se las arregla...
Puedo dejarme llevar por todos estos agujeros de conejo, por lo que, no sé, prioriza cuáles son las cosas en las que pensar porque no necesariamente escribes todas las cosas sobre esas cosas, supongo. "

Uso correcto de texto alternativo en logos 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 para que un visitante del sitio que use un lector de pantalla no pueda saber que este logotipo es un enlace a la página de inicio.

El organismo oficial de elaboración de estándares HTML, The World Wide Web Consortium (W3C) publicar una aclaración cómo manejar los logotipos.

Enlace a la página de inicio del logotipo

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

El W3C usa este ejemplo de 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, que también sirve como enlace a la página de inicio.

El texto alternativo de ejemplo proporcionado por el W3C simplemente dice "W3C Home", pero puede ser más descriptivo si lo desea.

Logotipo y enlace de texto a la página de inicio

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

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

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

Entonces, para este caso, la mejor práctica es usar null Texto alternativo.

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 cual el texto alternativo nulo es bueno es porque tiene texto que describe cuál es la función de enlace:

Hogar del W3C

Texto alternativo para un enlace de icono

A veces, el enlace es un icono sin texto que explique lo que hace, como un icono de sobre (que representa un correo electrónico o 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 del ícono de la 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 ícono en forma de impresora tiene las palabras "Imprimir esta página" como texto alternativo. Dice lo que hace el icono. Esto es útil.

Texto alternativo para el botón

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

El W3C usa el ejemplo de un campo de búsqueda que tiene una lupa para un 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 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

Lizzie y John no entraron en detalles sobre cómo manejar los distintos escenarios de logotipos y botones.

Sin embargo, John señaló que no hay valor de SEO para el texto alternativo para botones y logotipos, sino 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 patrocinadores de su negocio o sitio web.

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