En esta publicación hablaremos de las imágenes accesibles en WordPress, en concreto, trataremos los aspectos que hacen que una imagen sea accesible y cómo aplicarlos. Gracias a estas acciones, las personas podrán acceder a la descripción de las imágenes mediante tecnologías como Screen reader, Voice Over, Jaws o el lector de pantalla NVDA, entre otros. Es cierto que estas descripciones únicamente se podrán escuchar si el usuario tiene el lector de pantalla adecuado. Pero aun así, son acciones que ya deberíamos estar haciendo de manera habitual, porque también son importantes de cara al posicionamiento de tu web de cara a los buscadores. ¡Empezamos!.
¿Qué es la accesibilidad en los sitios web?
Para entrar en materia, primero debemos ponerte en contexto. Según la Organización Mundial de la Salud, aproximadamente unos 285 millones de personas tienen problemas de visión y alrededor del 15% de la población mundial, viven con discapacidades.
A medida que los sitios web y las aplicaciones móviles se han ido desarrollando, se han vuelto menos accesibles para estos usuarios. La accesibilidad en los sitios web significa que la página cuenta con elementos que todo el mundo puede usar y entender, independientemente del hardware, software o de la discapacidad sensorial o física que padezca la persona que intenta acceder.
Es tu responsabilidad como dueño de esa web hacer que tu sitio web sea accesible para todas las personas, por eso, en este artículo queremos darte las claves para que optimices las imágenes de tu web en WordPress.
¿Cómo mostrar imágenes accesibles en tu sitio web?
El primer paso será elegir WordPress como sistema de gestión de contenidos. Los desarrolladores de WordPress se toman muy en serio la accesibilidad web. Es más, el equipo de accesibilidad de WordPress cuenta con un blog oficial de accesibilidad de WordPress.
WordPress es un CMS compatible con la accesibilidad y puedes encontrar muchos plugins y temas para crear sitios web preparados para la accesibilidad desde cero. Por ejemplo, WP Accessibility es un plugin gratuito y actualizado que ayuda con una variedad de problemas comunes de accesibilidad en los temas de WordPress.
Por otro lado, también puedes facilitar la accesibilidad escogiendo temas preparados para ello. Los temas predeterminados de WordPress (como el Twenty Twenty) son excelentes ejemplos para aprender a crear temas de WordPress accesibles.
Sabiendo esto, puedes seguir haciendo algunas cosas imprescindibles para optimizar las imágenes que utilices en tu web. Para ello, lo primero será añadir la imagen a la galería de medios. Tienes dos formas de hacerlo:
- Al crear una entrada o página, haciendo clic.
- Desde la sección de Medios, que se encuentra en el menú de la izquierda de tu sitio web WordPress.
Cuando cargues las imágenes que quieras, verás un menú a la derecha, que contiene los siguientes apartados:
- Texto alternativo (atributo “ALT”)
Este es posiblemente el apartado más importante para hacer tus imágenes accesibles, tanto por ser el primer ítem que el lector de pantalla puede leer, siendo el que los navegadores y buscadores usan para poder entender mejor la imagen. Deberás describir tanto el aspecto (lo que se ve), como la función que tiene la imagen en la página (para qué sirve).
No todas las imágenes son importantes para los usuarios. Si la función de la fotografía es solamente decorativa puedes ignorar este apartado y solo rellenar el título para que el lector de pantallas lo pueda leer una sola vez.
Por otro lado, este apartado también te permitirá:
- Hacer que los motores de búsqueda entiendan las imágenes que publicas en tu web, mejorando aspectos relacionados con el SEO.
- Al beneficiar el SEO, mejorarás el posicionamiento, gracias al uso de las palabras clave.
- Aportar información extra cuando la web no cargue o tarde demasiado en hacerlo.
- Títulos de la imagen
Debemos hablar de dos aspectos relacionados con el título. En el primer caso, debemos decir que no es tan importante de cara al lector de pantalla que utilice el usuario, pero sí es importante otorgarle un nombre para al menos tú mismo reconocer la imagen en tu galería de medios.
Este título no es parte de los apartados rellenables para la accesibilidad. Nos estamos refiriendo simplemente al nombre de la imagen como tal. Recuerda que antes de subir la imagen a WordPress, tendrás que colocarle un nombre adecuado para mejorar el SEO. Cuando subas la imagen a tu biblioteca de WordPress, este apartado se rellena de manera automática, pero aun así lo podrás editar.
Sin embargo, en el otro apartado de “Título” a completar que sí verás claramente en la ventana del menú de la imagen, deberás rellenarlo ofreciendo información adicional sobre la imagen para cualquier usuario, no solo para quienes no puedan acceder a la imagen, por ello no hay que repetir el texto del alt en el mismo, tal y como te hemos adelantado en el punto anterior.
- Leyenda
El siguiente atributo que nos encontraremos para rellenar será la leyenda o el pie de foto. La puedes completar incluyendo una pequeña frase (fijarte en cómo lo hacen los periódicos te será de gran ayuda). Lo podrás usar para añadir más información, pero recuerda que el lector de pantalla del usuario también lo va a leer. De todos los apartados que estamos comentando, este es el único que se puede ver de manera pública.
- Descripción
Finalmente, te encontrarás el apartado de “descripción”. Si llegas a ese punto con suficiente creatividad, puedes rellenar este campo describiendo la imagen. Es un espacio donde te puedes extender un poco más que en el resto. Eso sí, con creatividad y sin superar los 150 caracteres permitidos.
Algo que sí debes tener en cuenta es que si completas todos los apartados con la misma información, el lector de pantalla que utilice el usuario repetirá lo mismo todo el rato, con lo cual no estás aportando la información accesible que la persona espera, por lo que podría abandonar la página. Así que te recomendamos hacer uso de la creatividad para ofrecer información de valor a tus usuarios.
La accesibilidad web sigue siendo la asignatura pendiente de muchos sitios online, por lo que es importante tomar consciencia y poner los medios necesarios para colaborar. ¿Utilizas todos estos apartados cuando añades una imagen a tu sitio web? ¿Lo harás a partir de ahora? ¿Tienes alguna duda sobre los puntos que hemos tratado? ¡Cuéntanos en los comentarios tu experiencia!
