¿Quieres que tu sitio de Angular sea accesible para todos? ¡Este es el lugar correcto!
Hacer que tu app sea accesible significa que todos los usuarios, incluidos aquellos con necesidades especiales, pueden usarla y comprender el contenido. Según el Informe Mundial sobre la Salud, más de mil millones de personas (alrededor del 15% de la población mundial) tienen alguna forma de discapacidad. Por lo tanto, la accesibilidad es una prioridad para cualquier proyecto de desarrollo.
En esta publicación, aprenderás a agregar las verificaciones de accesibilidad de codelyzer al proceso de compilación de una app de Angular. Este enfoque te permite detectar errores de accesibilidad directamente en tu editor de texto mientras escribes código.
Cómo usar Codelyzer para detectar elementos inaccesibles
codelyzer es una herramienta que se basa en TSLint y verifica si los proyectos de Angular TypeScript siguen un conjunto de reglas de lint. Los proyectos configurados con la interfaz de línea de comandos (CLI) de Angular incluyen codelyzer de forma predeterminada.
Codelyzer tiene más de 50 reglas para verificar si una aplicación de Angular sigue las prácticas recomendadas. De esas, hay alrededor de 10 reglas para aplicar los criterios de accesibilidad. Para obtener información sobre las diversas verificaciones de accesibilidad que proporciona Codelyzer y sus fundamentos, consulta el artículo Nuevas reglas de accesibilidad en Codelyzer.
Actualmente, todas las reglas de accesibilidad son experimentales y están inhabilitadas de forma predeterminada. Para habilitarlas, agrégalas al archivo de configuración de TSLint (tslint.json):
{
"rulesDirectory": [
"codelyzer"
],
"rules": {
...,
"template-accessibility-alt-text": true,
"template-accessibility-elements-content": true,
"template-accessibility-label-for": true,
"template-accessibility-tabindex-no-positive": true,
"template-accessibility-table-scope": true,
"template-accessibility-valid-aria": true,
"template-click-events-have-key-events": true,
"template-mouse-events-have-key-events": true,
"template-no-autofocus": true,
"template-no-distracting-elements": true
}
}
TSLint funciona con todos los IDE y editores de texto populares. Para usarlo con VS Code, instala el complemento TSLint. En WebStorm, TSLint está habilitado de forma predeterminada. Para otros editores, consulta el archivo README de TSLint.
Con las verificaciones de accesibilidad de Codelyzer configuradas, aparecerá una ventana emergente que muestra los errores de accesibilidad en los archivos de TypeScript o en las plantillas intercaladas mientras codificas:
Para realizar el análisis de lint en todo el proyecto (incluidas las plantillas externas), usa el comando ng lint:
Complementa codelyzer
Lighthouse es otra herramienta que puedes usar para aplicar prácticas de accesibilidad en tu aplicación de Angular. La principal diferencia entre Codelyzer y Lighthouse es el momento en que se realizan sus verificaciones. Codelyzer analiza la aplicación de forma estática durante el desarrollo, sin ejecutarla. Esto significa que, durante el desarrollo, puedes obtener comentarios directos en tu editor de texto o en la terminal. En cambio, Lighthouse ejecuta tu aplicación y realiza una serie de verificaciones con análisis dinámico.
Ambas herramientas pueden ser partes útiles de tu flujo de desarrollo. Lighthouse tiene una mejor cobertura gracias a las verificaciones que realiza, mientras que Codelyzer te permite iterar más rápido, ya que recibes comentarios constantes en tu editor de texto.
Cómo aplicar verificaciones de accesibilidad en tu integración continua
Incorporar verificaciones de accesibilidad estáticas en tu integración continua (CI) puede ser una gran mejora para tu flujo de desarrollo. Con Codelyzer, puedes aplicar fácilmente ciertas reglas de accesibilidad o prácticas ejecutando ng lint en cada modificación de código (por ejemplo, para cada nueva solicitud de extracción).
De esta manera, incluso antes de proceder a la revisión del código, tu CI puede indicarte si hay incumplimientos de accesibilidad.
Conclusión
Para mejorar la accesibilidad de tu app de Angular, haz lo siguiente:
- Habilita las reglas de accesibilidad experimentales en Codelyzer.
- Realiza el análisis de accesibilidad en todo tu proyecto con la CLI de Angular.
- Corrige todos los problemas de accesibilidad que informa Codelyzer.
- Considera usar Lighthouse para realizar auditorías de accesibilidad en el tiempo de ejecución.