De parte del equipo Civio queremos darle las gracias de nuevo a Ramón Corominas por el mail que nos escribió la semana pasada lleno de consejos para mejorar la accesibilidad de nuestro Asistente de ayudas relacionadas con el coronavirus. Hemos aprendido muchas cosas nuevas, y esperamos incorporarlas desde el principio en todas las cosas nuevas que hagamos, ¡gracias!
A continuación dejo recopiladas las mejoras hechas, por si sirven de referencia. Seguramente haya más implementaciones posibles, pero estamos contentas de haber mejorado la aplicación tanto estos días gracias a las recomendaciones y consejos de la comunidad Civio. ¡Gracias por vuestra ayuda! 
Mejoras hechas (10/Julio/2020):
-
No nos habíamos dado cuenta de que, al ser heredados de otra aplicación, todos los radio inputs del asistente tenían una regla display:none para no ser visibles y eso nos rompía toda la accesibilidad de principio a fin. Los hemos ocultado correctamente con un clip-pattern como habíamos hecho con los labels y otros elementos no visibles pero importantes a nivel accesibilidad.
.a11y-visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); */* IE6, IE7 */* clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
-
Añadido su label al input tipo select de “¿En qué situación te encuentras?” del bloque laboral.
-
Añadido el atributo name a todos los inputs tipo radio agrupados bajo un mismo fieldset para que sean grupos de verdad (ej: tienes que seleccionar una de las 4 opciones del bloque laboral, y una de las 3 opciones del de vivienda). La manera en la que esos botones de radio se relacionen entre
sí como un grupo no es solo el fieldset, sino que deben compartir el mismo atributo name.
-
Mejorada la navegación con tabulador, haciendo tabulables los botones (acorde a los radio buttons reales que están ocultos) y marcando visualmente el focus y el checked.
-
La lista de resultados de ayudas posibles rehecha en modo ul, no table, porque generaba un ruido innecesario a nivel lector de pantalla. Al haber borrado otros elementos de los resultados y quedarnos con una lista unidimensional, no necesitábamos más.
-
Ramón nos recomendaba también meter un pequeño texto solo “leíble” para lectores de pantalla cuando entramos en preguntas dependientes de otras e información dinámica o de segundo nivel, para que el lector avise de ese nuevo contenido relacionado, ya que es info que un primer escaneo no habría aparecido. Hemos aprendido a hacer esto a través de aria-live tags, y los condicionales de Vue ( v-if... ) para configurar estos mensajes cada vez que al seleccionar algo que lanza una pregunta de segundo nivel relacionada, aparezca un mensaje para los lectores de pantallas que diga “Hay nuevas preguntas relacionadas con tu elección actual”.
-
De forma análoga hemos hecho otro mensaje con aria-live para los resultados, cuando los hay, indicando que “Se muestran las ayudas correspondientes. Navega mediante encabezados para ir a los resultados de nuestra guía con más información”.
-
La lista de categorías laborales que teníamos en el apartado de “Tienes una empresa” lo hemos mejorado semánticamente como lista (manteniendo su apariencia visual anterior) y lo hemos conectado a la pregunta y a las respuestas Si/No para que se “lea” todo en bloque correctamente en un lector de pantalla.
Por otra parte, hemos empezado a trastear con el Voice Over integrado en Mac para aprender a revisar y comprobar todas estas cosas antes de publicarlas, y aún estamos aprendiendo pero nos está resultando muy útil. Nos ha servido por ejemplo para detectar otro error importante:
- Todas las preguntas de segundo cuya respuestas eran booleanas (“Sí”/“No”) funcionaban mal: no tenían la preguntada asociada realmente (Ej: Nosotras leemos ¿Eres autónomo de temporada? Si/No. — El voice over solo leía las respuestas “Opción sí, marcada, opción no. Opción sí no… etc” pasando de pregunta en pregunta sin asociarles nada, solo leyendo los
labels de los inputs, que efectivamente son “Sí”/“No”. Para solucionarlo, hemos seguido esta referencia, agrupando con fielsets las preguntas mediante legends a los inputs, de forma que todo está agrupado semánticamente por bloques y accesible. De nuevo todos los inputs tipo radio comparten el atributo name para hacer la agrupación inequívoca en lectores de pantalla.
