Auditer l'accessibilité de votre application Angular avec un codelyzer

Vous souhaitez rendre votre site Angular accessible à tous ? Vous êtes au bon endroit !

Minko Gechev

Zama Khan Mohammed

Si vous rendez votre application accessible, tous les utilisateurs, y compris ceux ayant des besoins particuliers, peuvent l'utiliser et en comprendre le contenu. Selon le Rapport mondial sur la santé, plus d'un milliard de personnes, soit environ 15% de la population mondiale, souffrent d'un handicap. L'accessibilité est donc une priorité pour tout projet de développement.

Dans cet article, vous allez apprendre à ajouter les vérifications d'accessibilité de codelyzer au processus de création d'une application Angular. Cette approche vous permet de détecter les bugs d'accessibilité directement dans votre éditeur de texte pendant que vous codez.

Utiliser Codelyzer pour détecter les éléments inaccessibles

codelyzer est un outil situé au-dessus de TSLint et qui vérifie si les projets Angular TypeScript suivent un ensemble de règles d'analyse lint. Les projets configurés avec l'interface de ligne de commande (CLI) Angular incluent un codelyzer par défaut.

Codelyzer propose plus de 50 règles pour vérifier si une application Angular respecte les bonnes pratiques. Parmi elles, il existe environ 10 règles d'application de critères d'accessibilité. Pour en savoir plus sur les différentes vérifications d'accessibilité fournies par Codelyzer et leurs logiques, consultez l'article Nouvelles règles d'accessibilité dans Codelyzer.

Actuellement, toutes les règles d'accessibilité sont expérimentales et désactivées par défaut. Vous pouvez les activer en les ajoutant au fichier de configuration 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 fonctionne avec tous les éditeurs de texte et IDE les plus courants. Pour l'utiliser avec VSCode, installez le plug-in TSLint. Dans WebStorm, TSLint est activé par défaut. Pour les autres éditeurs, consultez le fichier README de TSLint.

Une fois les vérifications d'accessibilité de Codelyzer configurées, une fenêtre contextuelle affiche les erreurs d'accessibilité dans les fichiers TypeScript ou les modèles intégrés pendant le codage:

Pour effectuer des fonctions d'analyse lint sur l'ensemble du projet (y compris les modèles externes), utilisez la commande ng lint:

Codelyzer complémentaire

Lighthouse est un autre outil que vous pouvez utiliser pour appliquer des pratiques d'accessibilité dans votre application Angular. La principale différence entre codelyzer et Lighthouse réside dans le moment où leurs vérifications sont effectuées. Codelyzer analyse l'application de manière statique au moment de son développement, sans l'exécuter. Cela signifie qu'au cours du développement, vous pouvez obtenir des commentaires directs dans votre éditeur de texte ou dans le terminal. En revanche, Lighthouse exécute votre application et effectue de nombreuses vérifications à l'aide d'une analyse dynamique.

Ces deux outils peuvent constituer des parties utiles du processus de développement. Lighthouse offre une meilleure couverture compte tenu des vérifications qu'il effectue, tandis que Codelyzer vous permet d'effectuer des itérations plus rapidement en obtenant constamment des commentaires dans votre éditeur de texte.

Appliquer des vérifications d'accessibilité dans votre intégration continue

L'introduction de vérifications d'accessibilité statiques dans votre intégration continue (CI) peut être une grande amélioration de votre flux de développement. Avec Codelyzer, vous pouvez facilement appliquer certaines règles d'accessibilité ou d'autres pratiques en exécutant ng lint sur chaque modification de code (par exemple, pour chaque nouvelle demande d'extraction).

Ainsi, avant même de procéder à l'examen du code, votre CI peut vous indiquer s'il y a des violations d'accessibilité.

Conclusion

Pour améliorer l'accessibilité de votre application Angular:

1. Activer les règles d'accessibilité expérimentales dans Codelyzer
2. Effectuez un linting d'accessibilité sur l'ensemble de votre projet à l'aide de la CLI Angular
3. Correction de tous les problèmes d'accessibilité signalés par Codelyzer.
4. Envisagez d'utiliser Lighthouse pour les audits d'accessibilité lors de l'exécution.