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

Vous souhaitez rendre votre site Angular accessible à tous ? C'est le bon endroit !

Minko Gechev

Zama Khan Mohammed

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

Dans ce post, vous allez apprendre à ajouter des vérifications d'accessibilité de codelyzer au processus de compilation d'une application Angular. Cette approche vous permet de détecter les bugs d'accessibilité directement dans votre éditeur de texte lorsque 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 le codelyzer par défaut.

Codelyzer dispose de plus de 50 règles pour vérifier si une application Angular respecte les bonnes pratiques. Il existe environ 10 règles pour appliquer les critères d'accessibilité. Pour en savoir plus sur les différents contrôles d'accessibilité fournis par le 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 sont 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 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 contrôles d'accessibilité configurés de Codelyzer, un pop-up affiche les erreurs d'accessibilité dans les fichiers TypeScript ou les modèles intégrés pendant que vous codez:

</ph>

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

Compléter le codelyser

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 du développement, sans l'exécuter. Cela signifie que pendant le développement, vous pouvez obtenir des commentaires directement 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 être des éléments utiles de votre processus de développement. Lighthouse offre une meilleure couverture grâce aux vérifications effectuées, tandis que Codelyzer vous permet d'effectuer des itérations plus rapidement en obtenant un retour constant dans votre éditeur de texte.

Appliquer des contrôles d'accessibilité dans votre intégration continue

L'introduction de contrôles d'accessibilité statiques dans votre intégration continue (CI) peut être une excellente amélioration pour votre flux de développement. Codelyzer vous permet d'appliquer facilement 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).

De cette façon, avant même de procéder à la révision du code, votre intégration continue peut vous indiquer s'il y a des violations de l'accessibilité.

Conclusion

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

1. Active 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. Corrigez tous les problèmes d'accessibilité signalés par Codelyzer.
4. Pensez à utiliser Lighthouse pour les audits d'accessibilité au moment de l'exécution.