Cómo crear imágenes accesibles en Wordpress

Hace un tiempo, os hablaba en el blog, sobre cómo publicar imágenes accesibles en redes sociales, con el fin de facilitar la comunicación de la marca con personas que sufren limitaciones visuales. En las siguientes líneas, veremos cómo crear imágenes accesibles en WordPress de forma muy sencilla.

Gracias a esta acción, que podemos realizar en escasos segundos, las personas podrán acceder a la descripción a través de diversas tecnologías como Screen reader, Voice Over, Jaws o el lector de pantalla NVDA entre otros. Es importante tener en cuenta, que estas descripciones únicamente se podrán escuchar si el usuario tiene el correspondiente lector de pantalla. No obstante, esta acción ya la deberíamos estar realizando de forma habitual, ya que no debes olvidar que es importante de cara al posicionamiento de nuestra marca en buscadores.

Y sobre todo, si usas Google Chrome, puede instalar ChromeVox que, te permitirá tener un simulador de lector de pantalla para poder conocer como está viendo la página un usuario que utilice esta tecnología.

Cómo crear imágenes accesibles en WordPress

El primer paso será el añadir la correspondiente imagen a nuestra galería de medios. Lo puedes hacer de dos maneras:

Dentro de la entrada o página, haciendo click en el botón añadir objeto.
Desde la sección de Medios, que encontrarás en el menú lateral de tu WordPress (es lo que yo utilizo siempre)

Una vez que cargues la imagen, podrás ver un menú asociado a la derecha, que contiene los siguientes items:

Título
Texto alternativo o atributo ‘ALT’
Leyenda
Descripción

Recuerda un tema importante, si rellenamos de forma completa todos los apartados con idéntica información, el lector de pantalla va a repetir una y otra vez lo mismo, el usuario va a quedar muy mareado y seguramente huirá de la página. Así que debes hacer uso de la creatividad para lograr ofrecer mayor valor al usuario.

Título

En primer lugar nos encontramos con el título de la imagen. Quizás es el menos interesante, ya que el propio sintetizador no lo va a leer, pero debes rellenarlo para reconocer la imagen en la galería de medios.

Ojo, cuando hablo de este título no me refiero al nombre de la imagen como tal. Recuerda que de forma previa a subir la imagen a WordPress, es necesario ponerle un nombre adecuado que nos permita mejorar el SEO. Una vez subas la imagen, este apartado se rellena de forma automática aunque es editable.

Texto alternativo o atributo ‘ALT’

Quizás el apartado más importante, tanto por ser el primer ítem que el sintetizador puede leer, como porque es el que los navegadores y buscadores utilizan para reconocer y entender mejor la imagen. Se debe describir tanto el aspecto como la función que tiene la imagen en la página.

Evidentemente no toda imagen es importante para el usuario, si su función es puramente decorativa se puede obviar este ponto y tanto solo rellenar el título para que el lector lo lea una única vez. En el caso de rellenar los dos apartados, el lector lo repetirá y por tanto no es nada operativo.

Debo recordarte que este atributo también nos permitirá:

Que los motores de búsqueda entiendan de forma más positiva las imágenes publicadas en nuestra web.
Mejorar nuestro posicionamiento gracias a las palabras clave.
Ofrecer información añadida cuando la web no cargue directamente.

Pero de la importancia del posicionamiento en WordPress hablaremos en una próxima ocasión.

Leyenda o pie de foto

Siguiendo nuestro camino nos encontramos con la leyenda o pie de foto. Esta permitirá incluir una pequeña frase tal y como aparece en los periódicos. Lo podemos utilizar para aportar más información, pero recuerda que el sintetizador también lo va a leer. De todos los apartados que estamos viendo, es el único que se puede ver de forma pública.

Descripción de imagen

Y por último, podemos optar por rellenar el campo destinado a la descripción de la imagen. Es un espacio donde podremos extendernos un poco más que en el anterior apartado. Eso si, con creatividad y sin superar los 150 caracteres.

WP Accesibility

En relación con este tema, te recomiendo utilizar el plugin WP Accesibility. Una de las cuestiones más interesante es que te hace un estudio de todas las imágenes para que puedas validar si en todas se describe de forma correcta lo anteriormente explicado.