Enviar un artículo
Ir a blog

Atributo alt y accesibilidad: cómo crear contenidos para todos los públicos

75
Wow-Score
La Wow-Score muestra si una entrada de un blog crea o no interacción. Se calcula en base a la correlación entre el tiempo de lectura activo de los usuarios, su velocidad de desplazamiento y la longitud del artículo.

Atributo alt y accesibilidad: cómo crear contenidos para todos los públicos

Rocío García Algora
Atributo alt y accesibilidad: cómo crear contenidos para todos los públicos

En el mundo del Marketing todos conocemos el atributo alt.

Se podría decir que es un elemento archiconocido y, sin embargo, infrautilizado.

Resulta paradójico que haya cientos, miles de artículos, innumerables ponencias, incluso profesiones que se centren en la experiencia de usuario y usabilidad, y que por regla general no cumplamos el principal uso del “alt text” o texto alternativo: garantizar la accesibilidad a la web.

El gran desarrollo en la búsqueda por voz, así como la creación de contenidos cada vez más interactivos, suponen un reto en el mundo del Marketing.

Aunque realmente el gran desafío es conseguir integrar todos los nuevos avances sin dejar de lado a un gran número de usuarios que también consumen estos contenidos.  

En este artículo vamos a ver una radiografía completa del atributo alt, explicando qué es y sus funciones; su uso en el SEO;  algunos ejemplos de su uso y recomendaciones para escribir el texto alternativo perfecto.

Es momento de cambiar la mentalidad y utilizar este atributo de manera óptima.

¿Qué es el atributo alt y cuáles son sus funciones?

El texto alternativo (alt text), también conocido como “atributo alt”, “descripción alt” y de manera incorrecta como “etiqueta alt”, es en pocas palabras la descripción de la imagen y nos da información de la apariencia y función de una imagen en una página.

Funciones del atributo alt

Informar y contextualizar el contenido

Su propósito principal es brindar información y ayudar a contextualizar el contenido a personas con discapacidad visual que utilizan lectores de pantalla.

Imagínate por un momento que perteneces a este segmento de la población.

Estás leyendo un artículo con tu lector de pantallas y de repente llegas a una imagen.

La imagen aporta contenido de valor a ese texto que acompaña y es un complemento ideal para aquellas personas sin problemas de visión, sin embargo, tú solo escuchas:

“DSC45673.jpg”; o quizá no escuchas nada porque no existe atributo y cuando el lector salta al siguiente párrafo, sientes que te falta información; tal vez el texto alternativo solo lo compone una palabra clave: “gráfico de analytics”; también puede ser que incluya un listado de palabras clave: “gráfico de analytics”, “analytics”, “google analytics”, “gráfico de resultados", etcétera.

Si te sientes identificado con el uso de algunas de estas combinaciones, por regla general estarás obviando el principal objetivo del texto alternativo y descuidando la accesibilidad del sitio web.

Facilitar información ante problemas concretos

Otra de sus funciones es facilitar información en caso de que la imagen no cargue en conexiones con poco ancho de banda o por otras razones como:

  • Navegadores antiguos, que no pueden interpretar algunos archivos de imagen.
  • Protección de rastreo: si lo tienes activo en tu navegador, puede fallar la carga de algunas imágenes.
  • Visualización desactivada: algunos navegadores dan la opción de no mostrar los archivos de imagen.
  • URL defectuosa de la fuente de la imagen.

Servicio de ayuda a crawlers

Ayuda a los crawlers a interpretar sobre qué trata esa imagen.

Aunque la tecnología que utiliza Google para reconocer imágenes ha evolucionado bastante, a día de hoy los motores de búsqueda son incapaces de entenderlas.  

Más sobre esto ¿Qué es la rastreabilidad de un sitio web? ¿Y la indexabilidad SEO? Post Elena Terenteva Kit de herramientas SEO de SEMrush Ebook Mar 29, 2018

Además, puede servir de texto de enlace si se decide usar imágenes como enlaces.

Líneas más arriba hablaba de la paradoja de este atributo.

La práctica diaria en el mundo del Marketing en general y del SEO en particular, es destinar el texto alternativo exclusivamente para objetivos SEO, olvidándonos casi por completo de su propósito fundamental de accesibilidad.

En esta línea, voy a comentar dos anécdotas de diferente índole que me he encontrado al  consultar el artículo “prácticas recomendadas de Google Imágenes”, del soporte de google.

Primera curiosidad

Si hacéis scroll en el artículo citado y llegáis a la parte “Utiliza texto alternativo descriptivo” veréis como en la explicación que dan del atributo alt no se hace referencia a la función SEO:

El texto alternativo (es decir, el texto que describe las imágenes) mejora la accesibilidad porque ayuda a las personas que no pueden ver imágenes en las páginas web, como los usuarios que emplean lectores de pantalla o los que tienen conexiones con poco ancho de banda.

— Soporte de Google

A pesar de que el artículo está escrito en español se complementa con un vídeo de Matt Cutts de habla inglesa con posibilidad de subtítulos en inglés (por lo que no todo el mundo podrá acceder a él).

Solo en este vídeo se hace alusión a los motores de búsqueda.

En el vídeo, Matt Cutts  explica cómo se debería utilizar de manera óptima el atributo alt para describir la imagen de un gato con un ovillo de lana.

Más adelante recupero este ejemplo para mostrar las maneras recomendadas y no recomendadas de hacerlo.

Segunda curiosidad

Si inspeccionamos con web developer la siguiente imagen utilizada en este artículo, veremos que no tiene descripción en el atributo alt, está vacío.

image3.jpg

El por qué lo veremos más adelante en el apartado de buenas prácticas.

Partes de un texto alternativo

El fragmento de código de un texto descriptivo es muy sencillo:

<img src=”perrojugandopelota.jpg” alt=”perro mediano color negro jugando con una pelota”

  • img src: hace referencia al archivo de la imagen que se quiere mostrar.

  • alt: se refiere al texto que describe lo que muestra la imagen.

Para una buena optimización de la imagen, que además garantice la accesibilidad,  lo idóneo es trabajar ambas partes del código, priorizando siempre al usuario respecto a los motores de búsqueda.  

Imágenes pensadas principalmente para los usuarios, no para los buscadores

Desde el punto de vista SEO, y dada la naturaleza particular del atributo alt- visible para los crawlers, invisible para los usuarios lectores- ha sido uno de los elementos más infrautilizado.

nubes-palabras-pesimismo

El alt text ha sufrido y sufre de keyword stuffing, esto es, utilizar su campo para poner un listado interminable de palabras clave, sinónimos y semántica relacionada con el objetivo de posicionar mejor en los rankings de Google.  

Además, de nuevo fomentado por su particular característica, se podría decir que se cae también en el cloaking, es decir, mostrar contenidos diferentes a usuarios y a crawlers.

Se trata de un cloaking especial:

  • Por una parte, se aprovecha que el usuario sin problemas de visión no ve este contenido para incluir palabras clave mal escritas con interesantes volúmenes de búsqueda.

  • Por otra parte, se muestran contenidos diversos. Se publica una imagen llamativa para captar la atención, aunque poco tenga que ver con el artículo y en el alt text se incluye la palabra clave por la que queremos posicionar.

Perseguir un  mejor posicionamiento nos lleva a priorizar a los buscadores sobre los usuarios, olvidándonos sobre todo de aquellos con mayores problemas para acceder al contenido de un site.  

Sabemos que con la llegada del rank brain, Google cada vez entiende mejor de qué trata el contenido de nuestra página y ya no busca el match perfecto con palabras clave como hacía en el pasado, si no que responde a intenciones de búsqueda del usuario.

Por esta razón, ha llegado el momento de cambiar la mentalidad e interiorizar el propósito fundamental del atributo alt: mejorar la accesibilidad.

Ejemplos de alt title

Antes de meternos de lleno en las buenas prácticas, vamos a echar una ojeada a algunos ejemplos del uso generalizado de este atributo.

Dado que la optimización del atributo alt es una de las tareas que pertenecen al SEO On Page, pregunté en Twitter por sites con un buen SEO para inspeccionar algunas de sus imágenes.

Sites con buen SEO on page

BLOG DINOSAURIOSS DE DEAN ROMERO

El compañero Iván Larizgoitia muy amablemente me dio como referencia el blog de Dinosaurioss de Dean Romero y superalimentos24, site creado por Alex Navarro.

A continuación, os muestro el resultado de inspeccionar estos dominios con la extensión de Chrome Web Developer.

Uso del texto alternativo en Dinosaurioss

IMAGENES DINOSAURIOS HOME DEAN ROMERO

Como se observa en la imagen, se utilizan únicamente palabras clave para el texto alternativo.

Cumple con los objetivo SEO y para aquellos casos en los que no carga la imagen.

Sin embargo, no contextualiza, limitando la información que llega a los usuarios con problemas de visión.  

Uso del atributo alt en Superalimentos24

IMÁGENES TE KOMBUCHA BLOG ALEX NAVARRO

En este caso, se hace un collage de diferentes imágenes y se utiliza el atributo para objetivo SEO incluyendo una long tail sobre el té kombucha.

De nuevo, no se tiene en cuenta la accesibilidad ya que “propiedades del té kombucha” no es el texto que mejor describe a este grupo de imágenes. 

Quiero subrayar que en ningún caso he utilizado estos ejemplos para criticar negativamente estos trabajos.

Se trata de un comentario constructivo para quienes generamos contenidos y publicamos en la web.

Admito que soy la primera que, en muy contadas ocasiones, he utilizado el texto alternativo teniendo en mente la accesibilidad del usuario. 

Y para muestra, un botón.

En el artículo que escribí para SEMrush sobre la metodología DISC y los diferentes tipos de clientes, utilizo numerosas imágenes.

Aquí os muestro un ejemplo que muestra claramente que no utilizo de manera óptima el atributo alt. 

autocritica-constructiva-uso-etiqueta-alt.png

Buenas prácticas para hacer el texto alternativo perfecto

Entonces, ¿cómo debe generarse un buen texto alternativo?

  • Hay que transmitir el mismo concepto que la imagen, en el mismo contexto

No te quedes solo con la palabra clave, sino contextualiza.

En el vídeo que cito más arriba, Matt Cutts explica perfectamente cómo se debería describir la imagen de un gato junto a un ovillo de lana.

Imaginemos que la imagen es ésta

gato jugando ovillo de lana

Opciones válidas y erróneas de texto alternativo

  • Ok: <img src=”gato.png” alt=”gato”>

El alt muestra lo que es la imagen, pero no es realmente descriptivo.

  • Mejor: <img src=”gato.png” alt=”gato bebé juega con un ovillo de lana rosa”>

Esto es un buen texto alternativo.

No solo indica qué animal es, sino que describe, contextualiza la imagen.

  • No recomendado: <img src=”gato.png” alt=”gato gatos felinos gato persa animales domesticos juegos de gatos”>

En este ejemplo se cae en el keyword stuffing.

  • No recomendado: <img src=”gato.png” alt=” ”>

A priori, el atributo alt no debería estar vacío, aunque vamos a ver algunos casos donde sí puede ser el tratamiento correcto.

  • No recomendado: <img src=”gato.png” alt=”Juegos para todas las edades ”>

En ocasiones, se utilizan imágenes para captar la atención del lector, pero que poco tienen que ver con el contenido del artículo.

  • El texto alternativo con gráficos o imágenes con texto.

En estos casos, se debe describir sobre qué trata el gráfico o el texto y explicarlo a continuación en el contenido.

Por ejemplo, un gráfico con datos:  <img src=”gráfico.png” alt=”gráfico que muestra la evolución del número compras en 2018”>

  • Atributos alt vacíos

Tal y como se indica en el artículo sobre el texto alternativo para imágenes de los desarrolladores de google:

Todas las imágenes deberían tener un atributo alt, pero no es necesario que todas tengan texto. Las imágenes importantes deberían tener texto de alt descriptivo que describa en forma concisa qué es una imagen, mientras que las imágenes decorativas deberían tener atributos de alt vacíos, es decir, alt=""

— Desarrolladores de Google

Ponte en lugar del usuario

Si has llegado hasta aquí te pido que respondas sinceramente a esta pregunta: cuando trabajas el texto alternativo, ¿tienes en mente garantizar la accesibilidad a tu contenido?

Google cada vez es más inteligente y nos entiende mejor.

Es momento de dejar a un lado la vieja rutina de utilizar exclusivamente palabras clave y comprometernos a cumplir con los tres propósitos de este atributo, priorizando conseguir contenidos de fácil consumo para todos los usuarios.

Trabajar de manera óptima el texto alternativo favorece a personas con problemas de visión y, al mismo tiempo a los buscadores, ya que les ayudamos a entender que muestran las imágenes que utilizamos, ajustando éstas al tópico de la página.

Crea contenido SEO-friendly

Ideas para estar entre los 10 mejores resultados

Please specify a valid domain, e.g., www.example.com

Optimiza de manera adecuada el atributo alt de tus contenidos y consigue un tres por uno en tu site. Somos responsables de conseguir que el entorno web sea mucho más agradable para todos.

Rocío García Algora
Profesional

Formula excelentes preguntas y suministra respuestas brillantes.

Consultora SEO y de Marketing en www.Rgalgora.com. Cada día salgo en busca de un nuevo atardecer. La vida me reta y yo no hago más que aprender. Mi lema: “Si emociona pensarlo, imagínate conseguirlo”.
Compartir esta entrada
o

Comentarios

2000
Lucas Cabrera
Entusiasta

En ocasiones participa en las conversaciones.

Muy instructivo el artículo.
Siempre ofrecéis buenos contenidos.
Gracias!!!
Rocío García Algora
Profesional

Formula excelentes preguntas y suministra respuestas brillantes.

Lucas Cabrera
Muchas gracias Lucas por tu comentario. La magia de los artículos es que aprendemos cuando leemos y cuando escribimos, dada la investigación que requiere. Qué tengas un buen día!
Elección del editor
Nuria Cámaras
Entusiasta

En ocasiones participa en las conversaciones.

Elección del editor
Muy buen artículo, Rocío. Justo hace poco estuve releyendo las directrices de Google y puse especial atención en este tema y, a día de hoy, sigo sin hacerlo bien. Hay que cambiar la mentalidad #SEO, no vas a posicionar menos por hacer las cosas bien.

Además, creo que también es una cuestión de vaguería porque hacerlo bien requiere pararte un momento, así como hacer una mejor selección de imágenes.

Un abrazo
Rocío García Algora
Profesional

Formula excelentes preguntas y suministra respuestas brillantes.

Nuria Cámaras
Hola Nuria, muchas gracias por pasarte por aquí y dejarme tu comentario. Estoy totalmente de acuerdo contigo. Hablamos mucho de UX, de usabilidad, etc, pero tenemos la oportunidad de hacerlo bien con el atributo alt y revisando páginas no vi ni una sola que la tuviera realmente optimizada. Como generadores de contenido creo que debemos asumir nuestra responsabilidad y tener en cuenta a estas personas con problemas de accesibilidad.
Lo de la vagueria...+1000

Un abrazo!
Sonia Duro Limia
Leyenda

¡Llegar hasta aquí no es nada fácil!

Hola Rocío,
¿Qué pondrías, entonces, en el cajetín de "descripción"? ¿Cómo diferencias el alt de la descripción?
Gracias por tu artículo!
Rocío García Algora
Profesional

Formula excelentes preguntas y suministra respuestas brillantes.

Sonia Duro Limia
Hola, Sonia. Interesante pregunta y me alegra que me la hagas. No me quise extender más en el artículo y me ceñí al texto alternativo. En el soporte de google y otros artículos ingleses de referencia indican que en la descripción se puede y debe incluir copy. Voy a poner un ejemplo de los que leí, que será mucho más sencillo:
Imagen de camiseta azul en un ecommerce.
Alt Text: Chica morena de 30 años con una camiseta azul claro
Descripción: esta camiseta azul 100% algodón y sin costuras combina perfectamente con unos jeans. Un look informal y cómodo perfecto para esta primavera.
Hasta tal punto habría que detallar la imagen, y nosotros nos pensábamos que poniendo una palabra clave estaba el tema solucionado...
Gracias a ti por tu comentario! Un abrazo :D
Pedro Luis Chinchilla
Novato

Se ha registrado recientemente o es demasiado tímido para comentar.

¡Fantástico artículo, Rocío!
En mi caso, muchas veces el Alt mal optimizado es simplemente una cuestión de pereza. Priorizo tanto el texto que luego ya no me quedan ganas!. Siempre pienso..."eso lo optimizaré más tarde" y luego, por supuesto, nunca lo hago. Un beso!
Rocío García Algora
Profesional

Formula excelentes preguntas y suministra respuestas brillantes.

Pedro Luis Chinchilla
Hola, Pedro, ¡qué alegría leerte por aquí! Muchas gracias por tu comentario. En tu caso es cierto que vuelcas en tu blog tanto contenido de valor que entiendo que te pueda la pereza. Si tenemos en mente a ese segmento de la población con problemas de accesibilidad, seguro que la pereza se desvanece. Un beso enorme, compañero!
Ismael González
Entusiasta

En ocasiones participa en las conversaciones.

Me ha parecido un artículo muy bueno Rocio. Cada vez más tenemos que grabarnos a fuego el SEO (Search Experience Optimization) e ir olvidando la optimizacion pura y dura para el motor de busqueda. Gracias por el aporte, ahora a trabajar los ¡alt! Saludos.
Rocío García Algora
Profesional

Formula excelentes preguntas y suministra respuestas brillantes.

Ismael González
Hola Ismael, muchísimas gracias por tu comentario. La verdad es que cuando empecé a investigar sobre qué enfoque dar al artículo y revisar páginas propias y ajenas, pronto me di cuenta que hablamos mucho de UX y usabilidad y pocos (no encontré ningún ejemplo realmente) hacemos uso adecuado del atributo alt.
Cuando hablamos de usuarios estamos dejando fuera a un segmento de la población importante a quiénes muchas veces mareamos con nuestras palabras clave por poner el foco únicamente en el buscador.
Estoy totalmente de acuerdo contigo, la E de SEO debe ser más de Experience y menos de Engine.
Un abrazo y feliz fin de semana.
Elección del editor
Ismael González
Entusiasta

En ocasiones participa en las conversaciones.

Rocío García Algora
Elección del editor
Es que es algo muy sencillo y a la vez muy razonable lo que cuentas en el post y la gran mayoría (entre los que me incluyo) lo hemos obviado.
Si hablamos de SEO-Onpage y optimización imágenes, además de las personas con ciertas discapacidades visuales, es razonable pensar que le estamos indicando a Google de que trata la imagen. Si ponemos "gato negro" pues, jajaja.. anda que no habrá indexado gatos negros. Así que un factor más a tener en cuenta para la optimización, y gracias por el aporte, me ha parecido muy práctico de verdad.

Saludetes! Y Alt="¡Buen fin de semana para Rocio también!"

Enviar feedback

Your feedback must contain at least 3 words (10 characters).

Sólo usaremos tu dirección de correo para dar respuesta a tu feedback. Política de privacidad

Thank you for your feedback!

Sistema de ranking de la comunidad

Nuestro ranking de la comunidad de SEMrush refleja el nivel de reconocimiento profesional de nuestra comunidad. Valoramos las contribuciones de calidad, por ello los miembros con mayor ranking recibirán valiosos incentivos. Participa en los debates, escribe posts y diserta en los webinars, sé amable y atento y, eventualmente, llegarás a la cima.

  • Novato
    Se ha registrado recientemente o es demasiado tímido para comentar.
  • Entusiasta
    En ocasiones participa en las conversaciones.
  • Buen samaritano
    Miembro con experiencia que siempre está dispuesto a ayudar.
  • Maestro
    Miembro veterano de la comunidad.
  • Profesional
    Formula excelentes preguntas y suministra respuestas brillantes.
  • Experto
    Brinda información valiosa y añade sustancia a la conversación.
  • Gurú
    Portador de sabiduría de marketing digital.
  • Superestrella
    Sabe todo... bueno, casi todo.
  • Leyenda
    ¡Llegar hasta aquí no es nada fácil!