https://www.paradigmadigital.com/dev/herramientas-mejorar-accesibilidad
Por Noe Medina:
Los errores más comunes son:
- No cumplir con el mínimo de contraste de color: 83,6%.
- Imágenes sin descripciones (descripciones de verdad, no el título del jpg que estamos pintando): 58,2%.
- Links vacíos: 50,1%.
- Inputs sin labels asociadas: 45,9%.
- Botones vacíos: 27,5%.
- Ausencia del idioma en el tag html: 18,6%.
El W3C tiene un proyecto (WAI - Web Accesibility Initiative) en el que cuentan con un apartado donde ofrecen de manera “open source” un montón de documentación para formarte, tanto como desarrollador como diseñador y, lo más interesante, una pequeña librería de componentes completamente accesibles que utilizamos en nuestro día a día con un correcto uso de aria-labels, que es nuestro talón de Aquiles en muchas ocasiones:
VSCode cuenta con la extensión Web Accessibility que, si bien en el propio “market place” nos avisan de que no recoge todas las normas, sí que recoge las básicas. Creo que como una primera toma de contacto, nada intrusiva para ir haciéndonos una idea de las cosas a mejorar, está muy bien.
Existen muchas librerías que se pueden incluir como dependencias de nuestros linters y generalmente están orientadas a los frameworks más utilizados.
Para LitElement tenemos este plugin de eslint que nos va a ayudar con las reglas más básicas de accesibilidad. Si comprobamos el listado de reglas nos validará prácticamente todos los errores más comunes que las estadísticas sobre accesibilidad web nos indican que se repiten más.
Axe es un conjunto de herramientas de testing para accesibilidad buenísima que podemos utilizar en muchos momentos de nuestro desarrollo.
Por último, también relacionado con Axe, existe una dependencia para incluirlo en Jest.
Pa11y es otra herramienta de testing que podemos utilizar para nuestros desarrollos. Igual que Axe, tiene una opción para correr el testing de cualquier url de internet y también de urls en local.
Si hemos llegado a un compromiso de calidad del equipo, estos tests automatizados se pueden incluir en nuestro proceso de CI/CD.
Las devtools de los navegadores también nos ofrecen algunas herramientas interesantes para comprobar nuestra accesibilidad. Por ejemplo, en Chrome al inspeccionar un elemento e irnos al apartado de “Accessibility” obtendremos la información del árbol de accesibilidad de dicho elemento en las propiedades computadas.
Accessibility Insights es una herramienta de Microsoft que podemos utilizar en modo extensión en Chrome y en Edge o como app de escritorio en Windows.
MagentaA11y es una herramienta online que nos provee de criterios de aceptación a nivel de accesibilidad para distintos elementos que aparecen en nuestros productos.