En el episodio 44 de mi podcast te hablaba sobre la importancia de hacer WordPress accesible para cualquier persona. Hoy quiero completarlo, explicándote cómo hacer las imágenes accesibles en WordPress.
La importancia de la accesibilidad
Cuando creamos un sitio web, prestamos mucha importancia a la optimización, la usabiliad, el SEO, pero en muchas ocasiones dejamos «para más adelante» todo lo relacionado a la accesibilidad.
Sencillamente (y me incluyo en este grupo) no nos ponemos en el lugar de aquellas personas que, cuando entran a nuestro sitio web, no pueden ver o percibir lo mismo que nosotros cuando estamos creando el contenido.
En este artículo me voy a centrar en las imágenes accesibles y, por tanto, irán dirigidas a aquellas persona que tienen algún tipo de limitación en su capacidad visual que le impida ver en la pantalla el contenido de nuestro sitio web.
¿Qué son las imágenes accesibles?
Las imágenes accesibles son aquellas que llevan incluida una información extra, de tal forma que aquella persona que no pueda verla, pueda saber lo que representa la imagen, si lleva algún tipo de enlace hacia otro sitio, si se trata de un icono, si lleva un texto que sólo está contenido en la imagen, etc…
Por normal general, las personas que tienen algún tipo de limitación visual, utilizan un lector de pantalla (tanto en escritorio como en teléfonos móviles) y un software especial que se encarga de leer la información.
WordPress apuesta cada vez más por mejorar esa accesibilidad y en este artículo te voy a explicar cómo hacer que las imágenes que insertamos sean accesibles.
Imágenes accesibles en WordPress
Cuando subes una imagen a la galería de medios de WordPress, encontrarás una pantalla similar a esta:
A la derecha de la misma, verás que aparecen varios campos para cumplimentar:
- Texto alternativo (también llamado «alt»)
- Título
- Leyenda
- Descripción
Aunque no todos los campos implican que la imagen sea accesible, dependiendo de cada imagen, lo correcto sería uno u otro, según estos consejos.
¡Ojo! Si cumplimentas un campo, el resto debes dejarlos vacíos. En caso contrario, el sintetizador de voz leerá todo y duplicará la información, lo cual resultará muy molesto.
Texto alternativo
Este campo debes cumplimentarlo únicamente en los siguientes casos:
- Cuando sea una imagen funcional. Es decir cuando al pulsar sobre ella se realice alguna función, como por ejemplo:
- El logo de esta web, normalmente colocado arriba a la izquierda, lleva hasta la página inicial al pulsarlo, por lo que debería escribir el texto alternativo “Home WPnovatos”
- Hay sitio web que te permiten la impresión de la página pulsando un icono situado en la parte superior. En ese caso deberías escribir el texto alternativo “Imprimir esta página”
- Cuando sea una imagen de texto. Esto significa que la imagen contiene un texto que no está presente en el contenido. Algunos ejemplos:
- El eslogan de la empresa o sitio web. En este caso deberías transcribir el lema en el campo del texto alternativo.
- Expresiones matemáticas como una cifra periódica. En ese caso, hay que detallar en la imagen que la última cifra lleva un símbolo arriba para señalar un número periódico.
- Cuando sea una imagen informativa. Es aquella imagen que identifica un concepto. Por ejemplo:
- Imagen de un teléfono delante de un número. En este caso deberás añadir el texto alternativo «Teléfono:».
- Imagen con un gráfico que muestra unas instrucciones de cómo abrir una botella. El texto alternativo sería algo así como «girar el tapón en el sentido de las agujas del reloj».
- Imagen del logo de un fichero PDF junto a un enlace para avisar de la descarga de este tipo de archivo. Habría que añadir un texto alternativo “PDF”.
- En el caso de imágenes complejas: gráficos, diagramas, mapas, etc. Aquí puedes incluir tanto una descripción con texto alternativo como un enlace a otra página donde expliques detalladamente la composición del gráfico o mapa.
- Presta especial atención a resumir al máximo lo que se detalla en el gráfico y explicarlo con palabras fáciles de entender.
Descripción
Cuanto tu imagen no encaje en ninguno de los supuestos anteriores, debes cumplimentar el campo «descripción». Está pensado para descripciones un poco más largas, pero limitado a 150 caracteres.
De esta forma podrás realizar la descripción con más detalle que en el campo del texto alternativo.
En cualquier caso, intenta ser claro en la descripción, con palabras sencillas y, por supuesto, sin faltas de ortografía.
Título
Por defecto, el campo título aparecerá cumplimentado con el nombre que tiene el archivo de la imagen (sin extensión).
Este campo no será leído por los sinterizadores de voz de webs, pero sí que será indexado en los buscadores, por lo que muy importante también que lo rellenes.
También es posible que si utilizas algún plugin para añadir efectos light a las imágenes, el título aparezca justo debajo de la imagen al ampliarla a pantalla completa.
Ten en cuenta también que este campo, a priori, no admite etiquetas HTML. Si quieres incluirlas, una vez subida la imagen a la galería de medios, puedes editarla y buscar el campo «atributo de título»
Leyenda
El campo de leyenda mostrará información al pie de la imagen, tal y como aparece en libros o revistas impresas.
La leyenda debe ser una frase corta que resuma al máximo lo que se puede ver en la imagen. Algunos ejemplos serían:
- Panel de control del hosting
- Pantalla del editor por bloques de WordPress
- Buscador de plugins de WordPress
- Etc
Imágenes accesibles en Twitter
Afortunadamente, cada vez es más frecuente encontrar Apps que adaptan su contenido para hacerlo accesible a todos. Sin embargo, no tienes que olvidar que gran parte del trabajo para que funcione bien, depende del usuario.
Twitter ya permite que las imágenes que sube un usuario al escribir un tuit sean accesibles (aunque todavía no se puede hacer lo mismo con vídeos ni con los gifs) simplemente añadiendo una descripción en el campo correspondiente.
Para activar la opción en la versión de escritorio, debes seguir estos pasos (en versiones IOS o Android puede variar ligeramente).
- Hacer clic sobre el icono con los tres puntos
- Seleccionar «Configuración y privacidad»
- Pulsar en «Accesibilidad»
- Activar la casilla que hay en la opción de «Visión»
A partir de ese momento, cuando escribas un nuevo tuit con una imagen adjunta, te aparecerá una pantalla similar a esta.
Al añadir la fotografía, te aparecerá una nueva opción debajo de ella que pone «Agregar descripción» y será aquí donde tienes que escribir un máximo de 420 caracteres para explicar qué se ve en la fotografía.
Conclusión
Sin duda, hacer que las imágenes sean accesibles en WordPress es fácil aunque también laborioso. Tienes que tener los conceptos muy claros y, sobre todo, tratar de que la información no aparezca repetida en los campos de la imagen.
A la hora de hacerlo, simplemente piensa que estás manteniendo una conversación telefónica con un amigo y que tienes que describirle lo que ves en la pantalla. Esto te va a ayudar a saber qué poner y dónde hacerlo.
En Twitter no hay lugar a confusión, pues sólo tienes un campo para añadir la información y el voice-over del lector está preparado para leer la descripción después de leer el tuit.
¿Y tú qué opinas? ¿Trabajas con la accesibilidad cuando creas tu contenido? Deja tu comentario debajo y comparte tu experiencia con otros usuarios.
