Utilisation de l'Axe DevTools Linter avec SonarQube

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Comment intégrer Axe DevTools Linter avec SonarQube pour contrôler l’accessibilité du code

Not for use with personal data

Vous pouvez intégrer Axe DevTools Linter avec SonarQube pour contrôler votre code afin de détecter les problèmes d'accessibilité. Vous pouvez utiliser les idées présentées ici pour intégrer les systèmes CI/CD avec SonarQube. Dans la documentation de SonarQube, consultez le Vue d'ensemble de l'intégration CI pour obtenir des informations sur l'utilisation de GitLab CI/CD, GitHub Actions, Azure Pipelines ou Bitbucket Pipelines.

Vue d'ensemble de l'intégration avec SonarQube

L'élément clé pour l'intégration avec SonarQube est l'outil en ligne de commande, Connecteur Axe DevTools Linter. Cet outil scanne vos fichiers et crée un rapport qui est ensuite téléchargé sur SonarQube via l'outil SonarScanner CLI. Les étapes détaillées incluent :

Scan des fichiers dans vos répertoires locaux.
Envoi des fichiers au serveur Axe DevTools Linter pour l’analyse ou l’analyse des fichiers localement.
Collecte des résultats de l’analyse sous forme de rapport JSON compatible avec SonarQube.
Exécution de SonarScanner CLI sur ce rapport pour envoyer les problèmes à SonarQube en tant que problèmes externes. L'outil SonarScanner ne scanne pas réellement vos fichiers dans ce cas. Il se contente de rapporter les problèmes trouvés par Axe DevTools Linter comme problèmes externes.

Les trois premières étapes sont effectuées par Axe DevTools Connector, et la dernière étape est effectuée par le SonarScanner CLI.

Votre propre intégration CI/CD personnalisée doit effectuer ces actions :

Lancez Axe DevTools Linter Connector avec les arguments de ligne de commande appropriés pour analyser les fichiers de votre projet et produire un rapport JSON compatible avec SonarQube.
Démarrez le SonarScanner CLI pour envoyer les résultats de l’analyse à SonarQube.

Exigences

Connecteur Axe DevTools Linter : Voir Utiliser le Connecteur Axe DevTools Linter pour les instructions de configuration et d'utilisation.
SonarQube : Cette intégration a été testée avec SonarQube Community Build 26.4. SonarQube a modifié son Format d'importation des problèmes génériques dans la version 10.3, et les versions futures pourraient nécessiter le format mis à jour. Si vous rencontrez des avertissements ou des problèmes d'importation, vérifiez que vos versions de Axe DevTools Linter Connector et SonarQube sont compatibles.
SonarScanner CLI : Voir SonarScanner CLI pour plus d'informations sur le téléchargement de cet outil.

Configurer SonarQube

Pour configurer SonarQube, créez un profil, puis supprimez les règles redondantes du profil pour les désactiver (certaines règles dans les profils nouvellement créés dans SonarQube se chevauchent avec les règles vérifiées par Axe DevTools Linter, entraînant des erreurs en double). Vous pouvez supprimer les règles qui se chevauchent dans l'interface d'administration de SonarQube. Les sections suivantes décrivent comment procéder.

Créer un nouveau profil de qualité

Pour modifier les règles, cliquez sur Profils de qualité en haut du site d'administration de SonarQube. Cliquez ensuite sur le menu déroulant Filtrer les profils par : et sélectionnez HTML. Vous devriez maintenant voir le profil HTML intégré de SonarQube. Vous devez dupliquer ce profil en cliquant sur le menu déroulant d'engrenage à droite du profil et en choisissant Copier. SonarQube vous demandera de nommer le nouveau profil copié. Nommez le nouveau profil Axe Linter et cliquez sur le bouton Copier.

Vous avez maintenant un nouveau profil de qualité HTML appelé Axe Linter. Choisissez le menu déroulant d'engrenage pour le profil Axe Linter et choisissez Définir comme par défaut afin que ce profil soit utilisé pour vérifier tous les fichiers HTML.

Supprimer les règles redondantes

L'étape suivante consiste à supprimer les règles redondantes du profil de qualité Axe Linter que vous avez créé. Dans la liste des règles HTML, il devrait y avoir deux profils. Le profil Axe Linter et le profil Sonar way. Cliquez sur le profil Axe Linter pour accéder à la page de configuration du profil. Sur la partie gauche de l'écran, vous devriez voir une liste des différents types de règles dans le profil. Cliquez sur le chiffre en haut à droite de Total et dans la colonne Actif pour modifier les règles actives.

Sur le côté droit de l'affichage se trouve une liste des règles activées dans le profil HTML Axe Linter. Désactivez les règles redondantes indiquées ci-dessous :

Les balises <fieldset> devraient contenir un <legend>
Les liens ne doivent pas cibler directement les images
Les balises d'image, de zone et de bouton avec images doivent avoir un attribut "alt"
Les balises <th> devraient avoir des attributs id ou scope
Les cellules du tableau devraient référencer leurs en-têtes
Les balises <object> doivent fournir un contenu alternatif
Les balises <strong> et <em> devraient être utilisées
Les balises <table> devraient avoir une description
Les vidéos doivent avoir des sous-titres
Les cartes d'image côté serveur (attribut ismap) ne devraient pas être utilisées
L'élément <html> devrait avoir un attribut de langue
<frames> devrait avoir un attribut title
Le HTML <table> ne devrait pas être utilisé à des fins de mise en page
Les tables utilisées pour la mise en page ne devraient pas inclure de balisage sémantique
Les attributs aria-label ou aria-labelledby devraient être utilisés pour différencier des éléments similaires
Les tableaux devraient avoir des en-têtes

Ces règles sont mentionnées à l'étape 5 de cet article de support Deque.

important

Vous aurez besoin d'un compte Deque pour accéder à l'article de support qui inclut les règles redondantes. Voir cet article pour plus d'informations sur le Centre d'aide et l'obtention d'un compte.

Créer un fichier de configuration SonarQube

Vous devez créer un fichier de configuration pour le CLI SonarScanner de SonarQube. Voici un exemple de fichier de configuration, sonar-project.properties.

sonar.projectKey=Test-Deque
sonar.externalIssuesReportPaths=axe-linter-report.json

Le sonar.projectKey est le nom du projet dans SonarQube où vous souhaitez que SonarScanner rapporte les résultats.

Générer un jeton de sécurité SonarQube

Le Scanner SonarQube doit pouvoir se connecter à SonarQube afin de rapporter les résultats. Vous pouvez le faire en créant un jeton de connexion dans l'interface web d'administration de SonarQube.

Pour créer un jeton de connexion, cliquez sur Administration en haut au centre de l'écran dans l'interface web d'administration de SonarQube. Puis cliquez sur le menu déroulant Sécurité près du haut de l'écran et choisissez Utilisateurs. Choisissez un utilisateur pour rapporter les résultats à SonarQube et cliquez sur l'icône sous Jetons pour créer un jeton de sécurité pour cet utilisateur. Sous Générer un jeton dans la fenêtre popup, tapez le nom du jeton et cliquez sur Générer. Sauvegardez la valeur de ce jeton (une chaîne hexadécimale de 32 bits) car il n'est pas possible de l'afficher à nouveau après la fermeture de la fenêtre Jeton. (Cependant, vous pouvez générer un nouveau jeton à tout moment.)

Le CLI SonarScanner utilise ce jeton pour rapporter les résultats au serveur. Il doit être défini dans la variable d'environnement SONAR_TOKEN.

Exécuter l'intégration

Une fois que vous avez configuré les règles SonarQube, créé un fichier de configuration et généré un jeton de sécurité, vous pouvez exécuter l'intégration. Le processus se déroule en deux étapes :

Exécutez le connecteur Axe DevTools Linter pour scanner vos fichiers de projet et générer un rapport compatible avec SonarQube.
Exécutez le CLI SonarScanner pour télécharger le rapport sur SonarQube.

Générer le rapport du linter

Exécutez Connecteur Axe DevTools Linter depuis le même répertoire que votre fichier sonar-project.properties :

axe-linter-connector -s . -d .

Cela produit axe-linter-report.json dans le répertoire courant. Voir Utilisation du connecteur Axe DevTools Linter pour les options de serveur, d'authentification et autres options en ligne de commande.

important

Le connecteur doit être exécuté depuis le répertoire de base du projet SonarScanner afin que les chemins de fichiers dans le rapport correspondent aux fichiers attendus par SonarQube.

Télécharger le rapport sur SonarQube

Définissez la variable d'environnement SONAR_TOKEN sur le jeton de sécurité que vous avez généré, puis exécutez l'interface en ligne de commande SonarScanner :

export SONAR_TOKEN=<your-sonarqube-token>
sonar-scanner -Dsonar.host.url=<sonarqube-server-url>

Remplacez <sonarqube-server-url> par l'URL de votre serveur SonarQube (par exemple, http://localhost:9000).

L'interface en ligne de commande SonarScanner lit le fichier sonar-project.properties, trouve le rapport spécifié dans sonar.externalIssuesReportPaths, et télécharge les problèmes sur SonarQube en tant que problèmes externes.

Voir les résultats

Tous les problèmes détectés par Axe DevTools Linter s'afficheront lorsque vous cliquerez sur Problèmes dans l'interface web de SonarQube pour votre projet. Les problèmes de Axe DevTools Linter sont identifiés par AXE-LINTER-MD pour les fichiers Markdown et par AXE-LINTER-HTML pour les fichiers HTML.

Le rapport

Le connecteur Axe DevTools Linter génère un rapport JSON qui suit le Format d'importation des problèmes génériques de SonarQube.

Vous pouvez modifier certaines des options du rapport en utilisant les options de ligne de commande du connecteur Axe DevTools Linter. Voir Options de ligne de commande facultatives pour plus d'informations.