En un episodio del podcast Google Search Off the Record, Lizzi Sassman de Google y John Mueller discuten la forma más adecuada de gestionar el texto alternativo para logotipos y botones que están creados a partir de imágenes.
Existen métodos más efectivos para incluir atributos alt en logotipos y botones.
Al principio, las reglas pueden resultar algo confusas, pero en realidad son fáciles de comprender.
Es beneficioso para los usuarios tener atributos alternativos y, a largo plazo, resulta beneficioso para los ingresos.
Incluir descripciones alternativas en las imágenes con propósitos prácticos.
Lizzi Sassman inicia la conversación mencionando imágenes prácticas, es decir, imágenes que cumplen una función específica en el sitio web.
¿Debería el texto alternativo describir la función del botón o lo que representa la imagen en el botón cuando este se utiliza como un icono?
Finalmente, se cuestiona si existe un motivo SEO para incluir texto alternativo en imágenes que cumplen una función práctica, como botones.
“Debemos dedicar la misma atención a las palabras que describen un activo visual como la que dedicamos a cuidar ese activo visual. Considero que esto es algo muy positivo”.
Otro tipo de imágenes se refiere a lo funcional, que en ocasiones podría representar un botón.
Como si se tratara de un diagrama que cumple una función adicional.
Entonces, ¿debería la descripción alternativa del texto indicarme lo que va a ocurrir?
¿Si presionas esto, te dirigirá a este lugar?
Podría ser comparado con una representación visual que a la vez sirve como un elemento interactivo.
¿Puede explicar la función de otra manera, tal vez comparándola con una imagen de flecha?
Además, ¿tiene relevancia en términos de SEO?
Sí, creo que…
Podría funcionar como un logotipo.
John Mueller sugiere que tiene sentido trabajar en algo relacionado con la accesibilidad.
Sin embargo, en términos de SEO, las personas no buscarán específicamente el botón de pago en línea, por ejemplo.
La descripción alternativa de los botones se utiliza para mejorar la accesibilidad, no para mejorar el posicionamiento en los motores de búsqueda.
John Mueller ha aclarado que no hay ninguna razón de SEO para incluir texto alternativo en botones.
Sin embargo, también notó que el atributo “alt” en este tipo de imágenes se utiliza principalmente por motivos de accesibilidad.
Lizzi siguió con la conversación.
Lizzi Sassman sugiere que es posible que accedan al sitio web a través del logo o logotipo, lo cual redirigiría a la página principal.
Sin embargo, también se puede decir: “¡Ah, es un logotipo!”.
Entonces, menciona, “Este es el emblema de Google Search Central”.
Sí, por supuesto.
Lizzi Sassman hace referencia al texto descriptivo.
¿La clave de la imagen es que se trata de Googlebot en lugar de centrarse en que es un logotipo?
¿De qué manera luce el diseño gráfico?
Creo que desde esa perspectiva, es probable que las personas estén buscando el logotipo.
John Mueller asintió afirmativamente.
Lo siento, pero necesito más contexto o información para poder parafrasear el texto correctamente. ¿Puedes proporcionar más detalles sobre lo que quieres que parafrasee?
¿Podrías decirme cuál es el logotipo de la empresa X, por favor?
John Mueller mencionó que se refiere a retomar la estrategia que están intentando evitar.
¿Con qué propósito deseas ser hallado?
Lizzi Sassman menciona que esa sería la pregunta fundamental, ya que…
Puedo lidiar con todos estos desafíos, por lo tanto, es importante determinar qué aspectos debemos considerar primero, ya que no es necesario detallar todo, supongo.
Utilizar de manera correcta el texto alternativo en logotipos y botones.
La manera adecuada de emplear el texto alternativo en imágenes como logotipos varía según si la imagen es un enlace o no.
Si el logotipo es un enlace que lleva de vuelta a la página de inicio, es apropiado etiquetar la imagen correctamente para que los visitantes que utilizan lectores de pantalla sepan que se trata de un enlace a la página de inicio.
El organismo oficial de estándares de fabricación de HTML, conocido como The World Wide Web Consortium (W3C), ha lanzado una guía sobre la gestión de logotipos.
Enlace de la página de inicio del logotipo.
Un logo que sirve como enlace principal debe incluir un texto alternativo que indique a los usuarios de lectores de pantalla que el logo es un enlace a la página web principal.
El ejemplo de código es utilizado por el W3C.
El fragmento previo se refiere a un código diseñado para un logo que aparece en la parte superior de la página y que también funciona como un enlace que redirige a la página principal.
El texto provisto por el W3C como ejemplo simplemente dice “W3C home”, pero podría ser más detallado si así lo prefieres.
Inicio de la página web con el logotipo, texto y enlace.
Existen distintos tipos de enlaces de logotipos en los que se combina un logotipo de imagen con texto situado junto o debajo de él, y tanto la imagen como el texto están incluidos en el mismo código de enlace.
En resumen, no existen dos enlaces separados, uno para el logotipo y otro para el texto, sino un único enlace que incluye tanto el logotipo como el texto juntos.
En este caso, sería redundante volver a mencionar la función del enlace del logotipo, ya que el texto ya la describe.
Por lo tanto, en esa situación, es recomendable utilizar un texto alternativo vacío.
Esta es la muestra que ofrece el W3C.
Mira la forma en que se inserta el atributo alt en la imagen.
Las comillas vacías usadas en el atributo alt se conocen como texto alt nulo. Un lector de pantalla simplemente lo ignorará.
La explicación de por qué es beneficioso tener un texto null alt es que proporciona una descripción de la función del enlace.
Inicio de W3C
Descripción alternativa para un enlace de icono.
En ocasiones, un enlace se presenta en forma de icono sin ningún texto que lo acompañe para indicar su función, como por ejemplo un sobre (que simboliza correo electrónico o mensaje) o una impresora (que señala que el enlace imprime algo).
En esta situación, es incorrecto hacer una descripción de la imagen, como por ejemplo indicar que se trata de un sobre o una impresora.
La recomendación principal es explicar la función de la imagen (al empezar un correo electrónico o al imprimir una página web).
El W3C emplea como ejemplo un ícono de impresora con el código y texto alt siguientes:
El icono de una impresora muestra el texto alternativo “Imprimir esta página”, lo cual describe la función del icono de manera clara y útil.
Frase alternativa para describir un botón.
Igual que en el caso del icono, el texto alternativo para una imagen de un botón debe explicar la función de la imagen.
El W3C ejemplifica un cuadro de búsqueda con un icono de lupa en lugar de un botón de enviar.
Una forma incorrecta de hacerlo es emplear el atributo de texto alternativo para indicar que la imagen representa una lupa.
La recomendación óptima es emplear el atributo “texto alternativo” para explicar la función de la imagen.
Aquí se presenta el código de muestra que el W3C ofrece como ejemplo.
El texto alternativo para el botón de búsqueda es la palabra “Buscar”, lo cual indica la función que cumple dicho botón.
Frase alternativa para describir botones y logotipos.
Lizzi y John no discutieron los pormenores de cómo abordar las diversas situaciones relacionadas con logotipos y botones.
No obstante, John indicó que el atributo “texto alt” en botones y logotipos no aporta valor en términos de SEO, sino que se utiliza para mejorar la accesibilidad.
Es recomendable ofrecer páginas web que sean accesibles para los usuarios que utilizan lectores de pantalla, de manera que puedan utilizarlas de forma efectiva.
Como se ha señalado previamente, aquellos que hacen uso de lectores de pantalla podrían ser tanto clientes como promotores de su empresa o página web.
Por lo tanto, es beneficioso que la parte final siga las prácticas de accesibilidad más efectivas.
El acto de citar fuentes.
Mayor cantidad de datos acerca de la accesibilidad para botones y emblemas en el W3C.
Imágenes con propósito funcional.
Unir enlaces de imagen y texto que estén uno al lado del otro para el mismo contenido.
Empleando atributos alt en imágenes que se usan como botones de enviar.
Escucha la exploración fuera del episodio de podcast a partir del minuto 15:57.
La imagen principal es proporcionada por Shutterstock y fue creada por Evgeny Atamanenko.
