La accesibilidad web se rige por los lineamientos establecidos en las Pautas de Accesibilidad para el Contenido Web (WCAG). Estas proveen sugerencias para hacer que el contenido web pueda ser consumido por la mayor cantidad posible de personas. Ya hablamos previamente sobre accesibilidad web en videoconferencias y extensiones accesibles para el navegador de Chrome, pero en lo que refiere a desarrollo web accesible, no todas las personas que desarrollan sitios saben de la WCAG.
Hoy reseñamos algunas extensiones de Chrome que ayudan a asegurar que se cumplan todas las pautas de accesibilidad en nuestros sitios web. Lamentablemente, todas están en idioma inglés, pero el lenguaje que utilizan es conocido en el rubro de programación, por lo que consideramos que son útiles de todas formas.
1. Accessibility Insights for Web
Accessibility Insights for Web ofrece varias modalidades. Destacamos en primer lugar el modo “Fast pass” que rápidamente detecta errores de accesibilidad. Señala en qué lugar del código está el problema y da sugerencias sobre cómo resolverlo. También resalta en pantalla qué partes del sitio presentan problemas.
En segundo lugar, tiene “Tab stops”, que muestra el recorrido que se hace en pantalla cuando se utiliza la tecla tab para navegar en lugar del mouse.
Y por último, contiene guías para chequear manualmente todos los elementos del sitio según lineamientos WCAG, función muy útil por si “Fast pass” omitió algún error. Una extensión muy interesante y práctica si recién nos estamos adentrando en la temática de desarrollo web accesible.
2. Lighthouse
Lighthouse es la opción más sencilla visualmente. Presenta una sola función organizada de manera muy clara. Utilizando la URL de la página web, realiza un informe completo y dispone los resultados bajo cinco categorías con puntuaciones para cada una:
- Desempeño
- Accesibilidad
- Mejores prácticas
- SEO
- Aplicación web progresiva (PWA)
Detalla qué partes del código presentan errores, cómo resolverlos y clasifica los problemas según su importancia. Recomendamos Lighthouse si se busca analizar la calidad de nuestro sitio de forma más íntegra, pero es recomendable ya contar con cierta familiaridad respecto a las normas de accesibilidad.
3. Access Assistant
Access Assistant presenta funciones similares a Accessibility Insights for Web. Su función “Quick test” organiza errores según criterios de accesibilidad, muestra qué parte del código contiene el problema y lo destaca en pantalla. Ofrece, además de soluciones, una descripción muy detallada de porqué se detectó ese elemento como error.
Cuenta también con “Review modes”, una guía que equipos de desarrollo pueden usar para detectar dificultades en la accesibilidad del sitio manualmente. No tiene un diseño sencillo y el contenido es más bien técnico, por lo que sugerimos tener conocimientos avanzados para usarla y aprovecharla al máximo.
4. WAVE Evaluation Tool
WAVE Evaluation Tool realiza una evaluación del sitio y organiza en una lista todos los errores y alertas. Estos también quedan resaltados en el sitio web con íconos que se refieren a cada uno de los criterios de accesibilidad y su definición detallada. Además, ofrece una lista de elementos que sí cumplen con las pautas WCAG.
No recomendamos esta extensión para sitios con muchos componentes, ya que se dificulta visualizar todos los errores en pantalla debido a los íconos que utiliza.
Esperamos que este contenido haya sido de utilidad e incentive a tu organización no gubernamental a crear sitios web más inclusivos. También te invitamos a leer sobre más extensiones de Chrome sobre accesibilidad.
Queremos conocerte y conversar sobre todo lo que podemos lograr en conjunto utilizando la tecnología. ¡Escribinos!