Saltar al contenido

wA11y plugin para mejorar la accesibilidad de WordPress.

[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”

wA11y plugin para mejorar la accesibilidad de WordPress

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)

wA11y plugin para mejorar la accesibilidad de WordPress captura del repositorio de plugins

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.

wA11y en el menú de ajustes de WordPress

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.

Activación de wA11y plugin para mejorar la accesibilidad de WordPress

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.

Botón de wA11Y

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)

Botón de wA11y en Elementor

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…”

Opciones del plugin wA11y

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.

Evaluación de encabezados de wA11y plugin para mejorar la accesibilidad de WordPress

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.

Contraste de color del plugin wA11y plugin para mejorar la accesibilidad de WordPress

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… 😉

Análisis Link text wA11y

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

Análisis de etiqueta ALT en plugin wA11y

Landmarks

Nos muestra los atributos que definen distintas áreas del contenido, como por ejemplo contenido principal, navegación, etc.

LandMarks plugin wA11y

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.

Screen Reader Wand wA11y

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.

wA11y activo 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.

Publicado enAccesibilidad

Un comentario

  1. 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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *