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 :