¿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, puedan usarla y comprender el contenido. Según el Informe de la Salud Mundial, 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 verificaciones de accesibilidad de codelyzer al proceso de compilación para una app de Angular. Este enfoque te permite detectar errores de accesibilidad directamente en tu editor de texto a medida que escribes el código.
Usar codelyzer para detectar elementos inaccesibles
codelyzer es una herramienta que se ubica sobre TSLint y verifica si los proyectos de Angular TypeScript siguen un conjunto de reglas de análisis con lint. Los proyectos configurados con la interfaz de línea de comandos (CLI) de Angular incluyen un codificador de forma predeterminada.
codelyzer tiene más de 50 reglas para verificar si una aplicación de Angular sigue las prácticas recomendadas. De ellas, existen alrededor de 10 reglas para aplicar de manera forzosa criterios de accesibilidad. Para obtener más información sobre las distintas verificaciones de accesibilidad que proporciona Codelyzer y sus razones, 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 VSCode, 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, verás una ventana emergente que muestra errores de accesibilidad en archivos TypeScript o plantillas intercaladas a medida que escribes el código:
Para realizar un análisis con lint en todo el proyecto (incluidas las plantillas externas), usa el comando ng lint:
Complemento de Codelyzer
Lighthouse es otra herramienta que puedes usar para aplicar las prácticas de accesibilidad en tu aplicación de Angular. La principal diferencia entre Codelyzer y Lighthouse es cuándo se realizan las verificaciones. Codelyzer analiza de forma estática la aplicación durante el desarrollo, sin ejecutarla. Esto significa que, durante el desarrollo, puedes obtener comentarios directos en tu editor de texto o en la terminal. Por el contrario, Lighthouse en realidad ejecuta tu aplicación y realiza muchas verificaciones a través del análisis dinámico.
Ambas herramientas pueden ser partes útiles de tu flujo de desarrollo. Lighthouse tiene una mejor cobertura dadas las verificaciones que realiza, mientras que Codelyzer te permite iterar más rápido al obtener comentarios constantes en tu editor de texto.
Aplica verificaciones de accesibilidad en tu integración continua
La incorporación de 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 u otras prácticas. Para ello, ejecuta ng lint en cada modificación del código (por ejemplo, para cada nueva solicitud de extracción).
De esta manera, incluso antes de continuar con la revisión de código, la CI puede indicarte si hay algún incumplimiento 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 análisis con lint de accesibilidad en todo tu proyecto con la CLI de Angular.
- Solucionar todos los problemas de accesibilidad que informa Codelyzer
- Considera usar Lighthouse para las auditorías de accesibilidad durante el tiempo de ejecución.