Vous souhaitez rendre votre site Angular accessible à tous ? Vous êtes au bon endroit !
Rendre votre application accessible signifie que tous les utilisateurs, y compris ceux ayant des besoins spécifiques, peuvent l'utiliser et comprendre son contenu. Selon le Rapport sur la santé dans le monde, plus d'un milliard de personnes, soit environ 15 % de la population mondiale, présentent une forme de 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 compilation 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 qui repose sur TSLint et qui vérifie si les projets Angular TypeScript respectent un ensemble de règles de linting. Les projets configurés avec l'interface de ligne de commande (CLI) Angular incluent codelyzer par défaut.
codelyzer comporte plus de 50 règles permettant de vérifier si une application Angular respecte les bonnes pratiques. Parmi celles-ci, une dizaine de règles permettent d'appliquer les critères d'accessibilité. Pour en savoir plus sur les différentes vérifications d'accessibilité fournies par codelyzer et leurs raisons d'être, 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 populaires. Pour l'utiliser avec VS Code, 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 pop-up s'affiche pour indiquer les erreurs d'accessibilité dans les fichiers TypeScript ou les modèles intégrés pendant que vous codez :
Pour effectuer le linting sur l'ensemble du projet (y compris les modèles externes), utilisez la commande ng lint :
Compléter codelyzer
Lighthouse est un autre outil que vous pouvez utiliser pour appliquer les 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 statiquement l'application au moment du développement, sans l'exécuter. Cela signifie que, pendant le développement, vous pouvez obtenir des commentaires directs dans votre éditeur de texte ou dans le terminal. En revanche, Lighthouse exécute réellement votre application et effectue un certain nombre de vérifications à l'aide de l'analyse dynamique.
Ces deux outils peuvent être utiles dans votre processus de développement. Lighthouse offre une meilleure couverture grâce aux vérifications qu'il effectue, tandis que codelyzer vous permet d'itérer plus rapidement en obtenant un feedback constant dans votre éditeur de texte.
Appliquer des vérifications d'accessibilité dans votre intégration continue
L'intégration de vérifications statiques de l'accessibilité dans votre intégration continue (CI) peut améliorer considérablement 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 passer à la revue du code, votre CI peut vous indiquer s'il existe des cas de non-respect de l'accessibilité.
Conclusion
Pour améliorer l'accessibilité de votre application Angular :
- Activez les règles d'accessibilité expérimentales dans codelyzer.
- Effectuez un linting d'accessibilité sur l'ensemble de votre projet à l'aide de l'interface de ligne de commande Angular.
- Corrigez tous les problèmes d'accessibilité signalés par codelyzer.
- Envisagez d'utiliser Lighthouse pour les audits d'accessibilité au moment de l'exécution.