MasterClassAccesibilidad — Imágenes y el objetivo del alt.

¿Quién no ha buscado una imagen por internet?¿Quién no ha encontrado una imagen de fondo ideal para el móvil o para el ordenador?¿Quién no ha buscado gifs de los Simpson?

Buscamos, buscamos y siempre encontramos algo que sea de nuestro gusto. Los motores de búsqueda están preparados para que cualquier palabra que escribas en el buscador te muestre una inmensa cantidad de imágenes relacionadas de distintos tamaños, colores, formatos… ¿Alguien se ha preguntado alguna vez cuantas imágenes puede haber en Google?

Aunque la tecnología de Google haya evolucionado para reconocer imágenes, es importante que nuestras imágenes implementadas en nuestras webs sean descriptivas ya que juegan un papel importante en el mundo de la accesibilidad y en el mundo SEO.

La accesibilidad web ayuda a que cualquier persona pueda acceder a nuestra web independientemente de la diversidad funcional que tenga, sin embargo en el mundo del SEO, ayuda a que la web se posicione en Google para recibir más visitas. Dependiendo de ambos mundos, las imágenes juegan un papel importante.

Empecemos por algo simple y que seguro que sabes. El tag html que usamos para añadir imágenes en nuestro sitio web se llama <img> y se usa de la siguiente manera:

<img src="cachorro.jpg" alt="cachorro">

• src: especifica la ruta a la imagen.
• alt: especifica un texto alternativo para la imagen.

El alt es el que vamos a hablar hoy, pero antes de ello… Contéstame a la siguiente pregunta: En el ámbito de imágenes en tu web ¿Eres más de SEO o eres más de accesibilidad Web?.

Es complicado ¿Verdad?. Es complicado llevar ambos mundos en sincronía ya que cada uno tiende por distintos caminos.

En la practica diaria de SEO se usa el atributo alt para objetivos de posicionamiento olvidándose por completo del objetivo de la accesibilidad web. En este mundo, el alt ha sido uno de los atributos más castigados ya que se ha usado para añadir palabras clave interminables que interesan que se posicionen mejor en los primeros sitios de búsqueda de Google. Ejemplo:

<img src="camisetas.png" alt="camisetas comprar camisetas camisetas pequeñas camisetas grandes camisetas temporada camisetas online camisetas xl camisetas xxl camisetas azules camisetas rojas camisetas blancas camisetas de temporada camisetas 2022">

El anterior ejemplo, puede provocar beneficio en SEO haciendo que la imagen este bien posicionada ayudando a tener mas tráfico entrante. Pero en el ámbito de la accesibilidad provoca lo siguiente:

https://youtu.be/iZsjBnDa1bU

En la practica diaria de la accesibilidad web se usa el atributo alt para añadir una descripción clara para los usuarios que no pueden ver imágenes en las páginas web, como los que emplean lectores de pantalla o los que tienen conexiones lentas.

Aplicar malas técnicas en los atributos alt, pueden provocar mala experiencia en los usuarios que ingresan en nuestra Web e incluso que Google tome nuestro sitio web como spam.

Como he comentado, hay que buscar un equilibrio en ambos mundos, mi trabajo esta mas orientado en la accesibilidad Web y te daré unos tips para tener en cuenta para que tus imágenes sean accesibles y también se posicionen de forma correcta en los buscadores. ¡Vamos allá!

Buenas practicas con el uso del atributo alt

Empecemos por la parte de accesibilidad:

• El atributo alt siempre debe de existir en todas las etiquetas img. Si no existe y usamos herramientas de validación w3c dará fallo en la validación.

Se muestra un error en el tag img indicando que se debe añadir un atributo alt en la imagen

• Respecto al caso anterior, si no necesitamos una descripción en la imagen ya que es una imagen “decorativa”, se añade el alt sin contenido y para mejorar el uso de los lectores de pantalla ocultamos el img con un aria-hidden=”true”, ya que si no es necesario dar una explicación, nos aseguramos que la imagen este oculta para que los lectores de pantalla no pasen por ella.

<img src="topinfo_bg.png" alt="" aria-hidden="true">

• Si la imagen esta complementada con el contenido y es necesaria dar una explicación en la imagen, hay que aplicar una descripción clara y descriptiva. Con una descripción buena ayudamos a que gente que navegue con un lector de pantalla pueda saber qué hay en esa imagen y también si no se descarga la imagen por error o conexión lenta, se mostrará el alt en texto en la Web.

<img src="camisetaxlazul.png" alt="Camiseta de talla xl y de color azul">

• Imágenes con gráficos. Hay que aplicar una descripción que explique lo que hay en ese gráfico. Recuerda que es fácil mirar a la pantalla, pero hay personas que usando un lector de pantalla necesitan saber que es lo que contiene ese gráfico

Parte de SEO:

• Asegúrate que la imagen esta posicionada sobre texto relevante y con contenido que este relacionado con la imagen. Por ejemplo, si tenemos una imagen de una camiseta roja, intentar complementarlo con el encabezado que hable de camisetas rojas y con un texto que hable de ellas. (Marcado html correcto plis!)
• El nombre del archivo puede dar pistas a Google sobre la temática de la imagen. Por ejemplo, camiseta-roja.png es mejor que IMG0034.png
• Evitar el keyword stuffing (palabras masivas clave para posicionar tu web) puede producir el efecto inverso, que Google trate nuestra Web como spam y caiga en picado en visitas.
• Ayuda a Google a descubrir tus imágenes usando un Sitemap de tu sitio.
• Optimiza las imágenes. Las imágenes son el principal causante de que la web sea lenta y pesada al cargar. Optimiza el tamaño y usa el formato correcto de imagen.

Estos son algunos de los trucos que aplico en el trabajo para que la web sea accesible y el SEO sea correcto respecto a las imágenes.
Tendríamos que acostumbrarnos a no trabajar para los motores de búsqueda sino para las personas, cada vez Google penaliza mas las webs que no aplican reglas correctas de SEO y que la accesibilidad no sea buena.

Muchas gracias por llegar hasta aquí. Como siempre me gustaría recibir feedback, podrás hacerlo a través de mis canales:

Youtube: https://www.youtube.com/channel/UCPTKqt3lKhm9NhX7phBvrKA/featured (Subo videos de accesibilidad, solución de bugs, tutoriales…)

Twitter: https://twitter.com/FranWeb1990 (Comparto cosas interesantes de accesibilidad)

Linkedin: https://www.linkedin.com/in/francisco-marquez-duro-3b1b0969/

¡Muchas gracias nuevamente y un saludo!