# ¿Tienes conocimientos sobre accesibilidad web? ¿Nos ayudas a mejorar nuestros contenidos? **URL:** \ **Category:** Colabora\ **Tags:** desarrollo, a11y\ **Created:** [24 Junio, 2020 16:55 UTC](https://comunidad.civio.es/t/tienes-conocimientos-sobre-accesibilidad-web-nos-ayudas-a-mejorar-nuestros-contenidos/1458 "2020-06-24T16:55:55Z")\ **Posts on this page:** 1\ **Showing post:** 4
**Author:** ![carmen](https://comunidad.civio.es/user_avatar/comunidad.civio.es/carmen/32/15_2.png) [@carmen](https://comunidad.civio.es/u/carmen)\ **Post date:** [10 Julio, 2020 11:07 UTC](https://comunidad.civio.es/t/tienes-conocimientos-sobre-accesibilidad-web-nos-ayudas-a-mejorar-nuestros-contenidos/1458/4 "2020-07-10T11:07:39Z")
De parte del equipo Civio queremos darle las gracias de nuevo a [Ramón Corominas](https://twitter.com/tinitun) 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](https://civio.es/ayudas-sociales-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](https://www.coolfields.co.uk/2011/04/accessible-forms-checkboxes-and-radio-buttons/), 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. --- _[View the full topic](https://comunidad.civio.es/t/tienes-conocimientos-sobre-accesibilidad-web-nos-ayudas-a-mejorar-nuestros-contenidos/1458)._