[no_toc]
Seguro que ya sabéis que estoy haciendo mi doctorado en accesibilidad web, (y si no, ahora lo sabéis jaja), pues hoy voy a escribir sobre accesibilidad, concretamente sobre un plugin para mejorar la accesibilidad de WordPress.
Perdonadme, pero antes de seguir con este tema tengo que contaros (o recordaros) un par de cosillas, la primera de ellas es que no existe el 100 de accesibilidad, siempre va a haber algo que se nos escape, así que por ese tema no os agobiéis, (ojo, que no se pueda alcanzar un 100% no significa que no haya que intentar alcanzar el máximo)
La siguiente cosa que os quiero recordar es que ningún plugin, herramienta o app va a hacer de manera automática (o con pocos clics) que vuestro sitio sea accesible, (ni con WordPress ni con señales de humo).
Antes de nada, me gustaría darle los créditos necesarios a la autora de este plugin para mejorar la accesibilidad en WordPress, Rachel Cherry consultora especializada en accesibilidad y el nombre es un juego de palabras que utiliza el acrónimo A11y que os comentaba cuando escribí sobre el proyecto A11y.
Una vez dicho esto, quiero hablar de wA11y, o como dicen ellos “la caja de herramientas de accesibilidad web”
Y en este caso es totalmente cierto, wA11y es un plugin que te ayuda a visualizar problemas de accesibilidad relativos al contenido de tu web, lo puedes utilizar mientras estás creando una entrada, o una página, o para revisar webs de clientes que os piden una revisión de la accesibilidad.
Pero ¿Qué hace exactamente este plugin para mejorar la accesibilidad de WordPress?
Pues ahora os lo enseño, pero vamos a ir paso por paso, lo primero es instalarlo desde el repositorio de WordPress wA11y – La caja de herramientas de accesibilidad web (Para este ejemplo he hecho una instalación limpia de WordPress, con Astra y una de las plantillas que tiene)
Hasta aquí todo normal, se instala y se activa, después, os aparecerá una nueva opción en ajustes, y ya podemos empezar a jugar.
Pulsamos esa opción del menú de ajustes y lo primero que hay que hacer es marcar la casilla de “Activar tota11y, pulsar en guardar los cambios (abajo del todo) y podremos comenzar a usarlo.
El plugin tiene varias opciones de configuración, pero ahora lo que me interesa es empezar a tocar, aunque luego volveré a la configuración.
Cuando el plugin está activo ejecuta un JavaScript que coloca un botón abajo a la izquierda.
Como curiosidad tengo que deciros que, si estás editando la página con Gutenberg, durante la edición no se muestra el botón, por lo que tienes que ver los errores en vista previa e ir corrigiendo en la edición, por el contrario si trabajas con Elementor, sí que puedes ver el botón mientras editas con elementor, por lo que puedes corregir los problemas más rápido, (y no voy a entrar en el debate si Elementor es el demonio para la accesibilidad o no lo es, lo dejamos para unas cañas)
Y ahora viene lo bueno, cuando pulsamos el botón de las gafas se nos abre lo que Marisol llamaría “Un mundo de luz y de coloooor…”
Que tiene 7 opciones:
Encabezados
Esto nos analiza si estamos utilizando o no el orden correcto de encabezados en esa página, o si por el contrario estamos haciendo lo que nos da la gana pasando, por ejemplo, de un H2 a un H4 solo porque nos gusta más como queda el tamaño de la letra.
Al pulsarlo aparece un recuadro que nos indica los errores que tenemos, pero si marcamos la casilla de anotar, además, los podemos ver en la web.
Contraste
Esta opción analiza el contraste entre elementos, y nos marca la ratio de contraste, que para que sea suficiente desde el punto de vista de la accesibilidad no puede ser inferior al 4,5, igual que antes, si marcamos la opción anotar, podemos ver en la página los elementos que no tienen el contraste correcto.
Link text
Nos sirve para analizar que los textos del enlace tengan sentido para los lectores de pantalla, aunque aquí hay que tener algo de cuidado porque a veces se come algún “pincha aquí”, pero si seguís usando el “pincha aquí” el problema no lo tiene el plugin… 😉
Etiquetas
Identifica elementos sin etiquetas (no os pongo capturas porque en el ejemplo eso está bien)
Etiqueta Alt de las imágenes
Nos detecta si las imágenes tienen o no etiqueta Alt, y las que encuentra vacía las marca como decorativas, luego ya nos toca a nosotros ver si es decorativa o no
Landmarks
Nos muestra los atributos que definen distintas áreas del contenido, como por ejemplo contenido principal, navegación, etc.
Screen Reader Wand
Esto es algo como una varita mágica para el lector de pantalla, al pasar por encima de una sección o texto nos muestra lo que “ve” el lector de pantalla, y nos ayuda a detectar posibles errores.
Y con esto habríamos visto las opciones que trae este plugin a la hora de revisar posibles errores de accesibilidad, pero antes os comentaba que volveríamos a la configuración y me quedan dos cositas que contaros.
La primera es que podemos seleccionar que roles pueden ver el botón de wA11y, esto está super bien si tenéis a una persona encargada de la accesibilidad, pero lo suyo sería que esto lo vea todo el mundo que haga cualquier tipo de contenido porque la accesibilidad es cosas de todos.
La siguiente opción que mola es que también puedes activar el plugin en la administración, por si por lo que sea necesitáis controlar temas de accesibilidad en el escritorio de WordPress.
La última opción interesante es que podemos activar WAVE, una herramienta de evaluación de accesibilidad bastante potente, y tenerla integrada en nuestro WordPress es una autentica maravilla, aunque WAVE da para otro post, que ya escribiré en otro momento.
En fin, al principio os comentaba que no existía ningún plugin para mejorar la accesibilidad de WordPress con pocos clics y este tampoco lo hace, pero nos ayuda mucho a no dejarnos “cosas de accesibilidad” pendientes cuando estamos creando un contenido.
Tener esta pequeña chuleta a mano nos puede resultar de gran ayuda y sobre todo hace desaparecer la excusa de que solamente puedes hacer “cosas de accesibilidad web” si eres programador”
Probadlo y contadme cómo os ha ido y si conocéis alternativas estaría genial escribir sobre ellas.
Tengo muchas preguntas sobre la publicación de imágenes en las páginas de mi sitio. ¿Dónde puedo conseguir una foto, qué tamaño y peso debe tener la foto? Después de este artículo, descubrí cómo nombrar la foto correctamente. ¡Gracias!