¿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 de la Salud, más de mil millones de personas (cerca del 15% de la población mundial) tienen algún tipo de discapacidad. Por eso, 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 de una app de Angular. Este enfoque te permite detectar errores de accesibilidad directamente en tu editor de texto mientras escribes código.
Usa 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 análisis con lint. Los proyectos configurados con la interfaz de línea de comandos (CLI) 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 ellos, hay alrededor de 10 reglas para hacer cumplir los criterios de accesibilidad. Para obtener más información sobre las diversas verificaciones de accesibilidad que proporciona el codificador y sus lógicas, 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 habilitarlos, agrégalos 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 comprobaciones de accesibilidad de Codelyzer configuradas, aparecerá una ventana emergente con errores de accesibilidad en archivos de 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:
Complementa el codificador de código
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 el momento en que se realizan las verificaciones. Codelyzer analiza estáticamente la aplicación en el momento del desarrollo, sin ejecutarla. Esto significa que, durante el desarrollo, puedes obtener comentarios directos en el editor de texto o en la terminal. Por el contrario, Lighthouse ejecuta tu aplicación y realiza varias verificaciones mediante análisis dinámico.
Ambas herramientas pueden ser partes útiles de tu flujo de desarrollo. Lighthouse ofrece una mejor cobertura a partir de las verificaciones que realiza, mientras que el codificador de código te permite iterar más rápido gracias a los 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 el codificador de código, puedes aplicar con facilidad ciertas reglas de accesibilidad o alguna otra práctica si ejecutas ng lint en cada modificación del código (por ejemplo, por cada solicitud de extracción nueva).
De esta manera, incluso antes de que continúes con la revisión de código, tu CI puede decirte si hay algún incumplimiento de accesibilidad.
Conclusión
Sigue estos pasos para mejorar la accesibilidad de tu app de Angular:
- Habilita las reglas de accesibilidad experimentales en Codelyzer.
- Realiza un análisis con lint de accesibilidad en todo tu proyecto con la CLI de Angular.
- Se corrigieron todos los problemas de accesibilidad informados por Codelyzer.
- Considera usar Lighthouse para las auditorías de accesibilidad durante el tiempo de ejecución.