À propos de Axe DevTools Linter
Aperçu de Axe DevTools Linter et de ce site de documentation
Qu'est-ce que le Linting ?
Le linting est le processus automatisé d'analyse du code source pour détecter les problèmes avant de l'exécuter. Un linter est un outil qui lit votre code et signale les problèmes, qu'il s'agisse d'erreurs de syntaxe, de fautes de frappe, d'incohérences stylistiques ou de bugs potentiels.
Le terme provient d'un outil Unix appelé lint, qui vérifiait à l'origine les programmes C pour les constructions suspectes. Aujourd'hui, des analyseurs existent pour pratiquement tous les langages de programmation et servent de première ligne de défense pour la qualité du code.
Pensez à un linter comme à un correcteur orthographique pour le code, sauf qu'au lieu de se limiter aux fautes de frappe, il détecte également les erreurs logiques, applique les règles de style et vous alerte sur les motifs susceptibles de provoquer des bugs.
Qu'est-ce qu'un Linter d'Accessibilité ?
Un linter d'accessibilité vérifie les mauvaises pratiques potentielles en matière d'accessibilité, vous fournissant des commentaires pendant que vous développez au lieu d'attendre que votre site Web ou application soit construit et fonctionnel.
Ce que fait Axe DevTools Linter
Axe DevTools Linter effectue une analyse statique de vos fichiers source. Il lit votre code et le compare à règles de Deque pour identifier les motifs susceptibles de causer des problèmes d'accessibilité. Par exemple, il peut détecter :
- Des images sans texte alternatif
- Des champs de formulaires sans étiquettes
- Des attributs ARIA incorrects ou manquants
- Des problèmes de structure des titres
Parce qu'il analyse le code source plutôt qu'une application en cours d'exécution, Axe DevTools Linter peut détecter ces problèmes tôt, avant que le code ne soit fusionné, déployé ou même compilé.
Ces vérifications ne se limitent pas aux éléments HTML natifs. La plupart des équipes créent des interfaces à partir d'un système de design ou de leur propre bibliothèque de composants, et Axe DevTools Linter peut également vérifier ces composants. Voir Linting de vos propres composants ci-dessous.
Ce que Axe DevTools Linter ne peut pas faire
Parce que Axe DevTools Linter est un outil d'analyse statique, il ne peut pas :
- Tester le comportement d'exécution de votre application, comme le contenu chargé dynamiquement ou les modifications de l'interface utilisateur pilotées par JavaScript.
- Identifier tous les problèmes d'accessibilité ; l'analyse statique couvre un sous-ensemble de défauts détectables, et certains problèmes nécessitent un test basé sur le navigateur ou une révision manuelle.
- Remplacer les tests d'accessibilité manuels ou les outils basés sur le navigateur.
- Vérifiez le balisage qui est intégré dans un fichier d'un type différent. Voir Technologies prises en charge ci-dessous.
Technologies prises en charge
Axe DevTools Linter peut vérifier les types de fichiers suivants :
| Technologie | Extensions de fichier |
|---|---|
| React | .js, .jsx, .tsx |
| Vue | .vue |
| Angular | .component.html |
| HTML | .html, .htm, .xhtml |
| LiquidJS | .liquid |
| HTL (Adobe Experience Manager) | .htl |
| Markdown | .md, .markdown |
| React Native | Voir Axe DevTools Linter pour React Native |
Axe DevTools Linter choisit un linter par fichier, en fonction de l'extension de ce dernier, et il vérifie uniquement le balisage écrit dans la langue propre à ce fichier. Le balisage intégré dans une autre langue à l'intérieur du fichier n'est pas vérifié. Par exemple, dans un fichier .html, les éléments que JavaScript crée à l'intérieur d'un bloc <script> ne sont pas analysés, et dans un fichier .js ou .tsx, le HTML assemblé à l'intérieur d'un littéral de template ou d'une chaîne n'est pas analysé.
Linting de vos propres composants
Les fichiers sources dans une base de code moderne contiennent rarement beaucoup de HTML brut. Le balisage est écrit en termes de système de design ou de bibliothèque de composants interne, donc un fichier source contient <DqButton> ou <custom-image> là où le navigateur reçoit finalement un <button> ou un <img>. Un linter qui ne comprendrait que les éléments natifs aurait très peu à examiner.
Axe DevTools Linter vérifie ces composants une fois que vous lui indiquez comment chacun d'eux se rapporte à un élément HTML natif. Un mappage est constitué de quelques lignes de configuration, et il peut :
- Mapper votre composant à un élément natif.
- Mapper les attributs de votre composant aux attributs de cet élément, y compris les renommer.
- Transformer l'un des attributs de votre composant en contenu textuel de l'élément.
- Faire passer chaque attribut ARIA avec un seul caractère générique plutôt que de les lister un par un.
- Choisir quel élément est émis en fonction de la valeur d'un attribut, pour les composants qui se rendent différemment selon les situations.
Une fois qu'un mappage existe, les règles d'accessibilité qui s'appliquent à l'élément natif s'appliquent à votre composant. Un <DqButton> mappé à <button> doit avoir un nom accessible ; un <custom-image> mappé à <img> doit avoir un texte alternatif.
Deque propose des mappages préconfigurés pour certaines bibliothèques de composants largement utilisées, donc selon ce avec quoi vous construisez, vous n'aurez peut-être pas besoin de créer vous-même des mappages.
Pour commencer, lisez Linting des composants personnalisés pour un aperçu, puis suivez le tutoriel pour VS Code et JetBrains ou le point de terminaison REST. Bibliothèques de Composants Préconfigurées liste les bibliothèques que Axe DevTools Linter connaît déjà.
Moyens d'utiliser Axe DevTools Linter
Axe DevTools Linter peut être utilisé de plusieurs manières selon votre flux de travail :
Extensions IDE fournissent des retours en temps réel pendant que vous écrivez du code. Les extension VS Code (également disponibles pour les IDE AI compatibles avec VS Code comme Cursor et Windsurf) et plugin JetBrains (WebStorm et IntelliJ IDEA Ultimate) indiquent les problèmes d'accessibilité directement dans votre éditeur au fur et à mesure que vous tapez.
Le Connecteur est un outil en ligne de commande pour l'analyse de fichiers par lots, dans des scripts ou dans le cadre d'une chaîne CI/CD. Voir Utiliser Axe DevTools Linter Connector.
L'Action GitHub vérifie les fichiers qui ont changé dans une demande de tirage et signale les problèmes d'accessibilité. Voir L'Action GitHub Axe DevTools Linter.
Autres intégrations CI/CD incluent Jenkins, SonarQube et les hooks Git pre-commit.
Où l'analyse est exécutée
Analyse locale : L'extension VS Code, le plugin JetBrains et le Connecteur (avec l'option --local) effectuent tous l'analyse d'accessibilité sur votre propre machine. Le contenu des fichiers ne quitte jamais votre ordinateur.
Analyse sur serveur : Le Connecteur peut également envoyer vos fichiers à un serveur Axe DevTools Linter pour analyse. C'est l'approche utilisée par l'Action GitHub. Il y a deux options de serveur :
- SaaS hébergé par Deque : Le serveur cloud de Deque. Nécessite une clé API ; aucune configuration de serveur n'est nécessaire.
- Sur site : Un serveur que vous exécutez au sein de votre propre infrastructure. Voir Installation et Sécurité.
Pour des conseils sur le choix entre l'analyse locale et basée sur serveur avec le Connecteur, voir Analyse Locale.
Aperçu de la Documentation
Choisir la bonne configuration de l'outil de lintage Axe DevTools vous aide à décider quel modèle de déploiement, quelles intégrations et quelle configuration conviennent au flux de travail de votre équipe.
Obtenir une clé API SaaS Axe DevTools Linter vous montre comment obtenir une clé pour accéder au service d'analyse basé sur le cloud de Deque.
Règles d'Accessibilité liste toutes les règles que Axe DevTools Linter vérifie, avec des liens vers des informations détaillées sur Deque University.
Configuration de Axe DevTools Linter couvre les options de configuration disponibles dans l'extension VS Code, le plugin JetBrains, le Connecteur Axe DevTools Linter et l'API REST /lint-source.
Installation et Sécurité contient des articles sur l'installation du serveur en local et sa sécurisation avec NGINX en tant que proxy inverse.
Utilisation de Axe DevTools Linter couvre les diverses intégrations : le plugin JetBrains, extension VS Code, CLI du Connecteur, GitHub Action, hook pre-commit, Jenkins et SonarQube.
Linting des composants personnalisés discute du support d'Axe DevTools Linter pour les composants personnalisés, avec des tutoriels pour VS Code et JetBrains et utilisateurs de l'endpoint REST, ainsi qu'un article sur bibliothèques de composants préconfigurées.
Développement avec les APIs REST décrit comment accéder à Axe DevTools Linter de manière programmée en utilisant son interface REST.
Crédits fournit des informations d'attribution et de licence pour les logiciels tiers utilisés par Axe DevTools Linter.
Note: It is never necessary to use Deque's software or services in a way that collects, stores, or shares personal data. Do not use the software or services in a manner that collects, stores, or shares personal data.