Verwendung von Axe DevTools Linter mit 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

So integrieren Sie Axe DevTools Linter mit SonarQube, um den Code auf Barrierefreiheitsprobleme zu überwachen

Not for use with personal data

Sie können Axe DevTools Linter mit SonarQube integrieren, um Ihren Code auf Barrierefreiheitsprobleme zu überwachen. Sie können die hier vorgestellten Ideen nutzen, um CI/CD-Systeme mit SonarQube zu integrieren. In der SonarQube-Dokumentation finden Sie die Übersicht zur CI-Integration, um Informationen über die Nutzung von GitLab CI/CD, GitHub Actions, Azure Pipelines oder Bitbucket Pipelines zu erhalten.

Übersicht über die SonarQube-Integration

Das Schlüsselelement für die Integration mit SonarQube ist das Kommandozeilen-Tool Axe DevTools Linter Connector. Das Tool scannt Ihre Dateien und erstellt einen Bericht, der dann über das SonarScanner CLI Tool an SonarQube hochgeladen wird. Die Schritte im Detail umfassen:

Scannen von Dateien in Ihren lokalen Verzeichnissen.
Senden der Dateien an den Axe DevTools Linter Server zum Linting oder die Dateien lokal linten.
Sammeln der Linting-Ergebnisse als JSON-Bericht, der mit SonarQube kompatibel ist.
Ausführen des SonarScanner CLI über diesen Bericht, um Probleme als externe Probleme an SonarQube zu senden. Das SonarScanner-Tool scannt in diesem Fall keine Ihrer Dateien. Es berichtet einfach die von Axe DevTools Linter gefundenen Probleme als externe Probleme.

Die ersten drei Schritte werden von Axe DevTools Connector durchgeführt, und der letzte Schritt wird vom SonarScanner CLI ausgeführt.

Ihre eigene benutzerdefinierte CI/CD-Integration muss diese Aktionen ausführen:

Starten Sie Axe DevTools Linter Connector mit den richtigen Kommandozeilenargumenten, um die Dateien Ihres Projekts zu scannen und einen SonarQube-kompatiblen JSON-Bericht zu erstellen.
Starten Sie das SonarScanner CLI, um die Linting-Ergebnisse an SonarQube zu senden.

Anforderungen

Axe DevTools Linter Connector: Siehe Verwendung des Axe DevTools Linter Connector für Setup- und Verwendungshinweise.
SonarQube: Diese Integration wurde mit SonarQube Community Build 26.4 getestet. SonarQube hat sein Generisches Importformat für Probleme in Version 10.3 geändert, und zukünftige Versionen könnten das aktualisierte Format erfordern. Sollten Sie Importwarnungen oder -probleme feststellen, überprüfen Sie, ob Ihre Versionen des Axe DevTools Linter Connector und von SonarQube kompatibel sind.
SonarScanner CLI: Siehe SonarScanner CLI für weitere Informationen zum Herunterladen dieses Werkzeugs.

SonarQube einrichten

Um SonarQube einzurichten, erstellen Sie ein Profil und löschen Sie dann redundante Regeln aus dem Profil, um sie zu deaktivieren (einige Regeln in neu erstellten Profilen in SonarQube überschneiden sich mit den von Axe DevTools Linter geprüften Regeln, was zu doppelten Fehlern führt). Sie können die überlappenden Regeln in der SonarQube-Administrationsoberfläche löschen. Die folgenden Abschnitte beschreiben, wie Sie dies tun.

Ein neues Qualitätsprofil erstellen

Um die Regeln zu ändern, klicken Sie auf Qualitätsprofile oben auf der SonarQube-Administrationswebsite. Klicken Sie dann auf das Dropdown-Menü Profile filtern nach: und wählen Sie HTML. Sie sollten nun das eingebaute SonarQube-HTML-Profil sehen. Sie müssen dieses Profil duplizieren, indem Sie auf das Zahnrad-Dropdown auf der rechten Seite des Profils klicken und Kopieren wählen. SonarQube wird Sie auffordern, das neu kopierte Profil zu benennen. Benennen Sie das neue Profil Axe Linter und klicken Sie auf die Schaltfläche Kopieren.

Sie haben nun ein neues HTML-Qualitätsprofil mit dem Namen Axe Linter. Wählen Sie das Zahnrad-Dropdown des Axe Linter-Profils und wählen Sie Als Standard festlegen, damit dieses Profil für die Überprüfung aller HTML-Dateien verwendet wird.

Redundante Regeln entfernen

Der nächste Schritt besteht darin, redundante Regeln aus dem von Ihnen erstellten Axe Linter-Qualitätsprofil zu entfernen. In der Liste der HTML-Regeln sollten zwei Profile zu sehen sein. Das Axe Linter-Profil und das Sonar Weg-Profil. Klicken Sie auf das Axe Linter-Profil, um zur Profilkonfigurationsseite zu gelangen. Auf der linken Seite des Bildschirms sollten Sie eine Liste verschiedener Regeltypen im Profil sehen. Klicken Sie auf die Nummer oben rechts von Gesamt und in der Aktiv-Spalte, um die aktiven Regeln zu bearbeiten.

Auf der rechten Seite des Displays befindet sich eine Liste der im Axe Linter HTML-Profil aktivierten Regeln. Deaktivieren Sie die unten angegebenen redundanten Regeln:

<fieldset>-Tags sollten ein <legend> enthalten
Links sollten nicht direkt auf Bilder zielen
Bild-, Bereichs- und Schaltflächen mit Bild-Tags sollten ein „alt“-Attribut haben
<th>-Tags sollten id oder scope Attribute haben
Tabellenzellen sollten auf ihre Header verweisen
<object>-Tags sollten alternativen Inhalt bereitstellen
<strong>- und <em>-Tags sollten verwendet werden
<table>-Tags sollten eine Beschreibung haben
Videos sollten Untertitel haben
Serverseitige Image Maps (ismap-Attribut) sollten nicht verwendet werden
<html>-Element sollte ein Sprachattribut haben
<frames> sollte ein title-Attribut haben
HTML <table> sollte nicht für Layout-Zwecke verwendet werden
Tabellen, die für Layout-Zwecke verwendet werden, sollten keine semantischen Markups enthalten
aria-label- oder aria-labelledby-Attribute sollten verwendet werden, um ähnliche Elemente zu differenzieren
Tabellen sollten Header haben

Diese Regeln werden in Schritt 5 von diesem Deque-Support-Artikel erwähnt.

important

Sie benötigen ein Deque-Konto, um auf den Support-Artikel zuzugreifen, der die redundanten Regeln enthält. Weitere Informationen über das Help Center und wie Sie ein Konto erhalten, finden Sie in diesem Artikel.

Erstellen einer SonarQube-Konfigurationsdatei

Sie müssen eine Konfigurationsdatei für die CLI von SonarQube's SonarScanner erstellen. Im Folgenden wird eine Beispielkonfigurationsdatei gezeigt, sonar-project.properties.

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

Der sonar.projectKey ist der Projektname in SonarQube, in dem SonarScanner Ergebnisse melden soll.

Generieren eines SonarQube-Sicherheitstokens

Der SonarQube-Scanner muss eine Verbindung zu SonarQube herstellen können, um Ergebnisse zu melden. Sie können dies tun, indem Sie ein Login-Token in der SonarQube-Admin-Weboberfläche erstellen.

Um ein Login-Token zu erstellen, klicken Sie auf Verwaltung oben in der Mitte des Bildschirms in der SonarQube-Admin-Weboberfläche. Klicken Sie dann auf das Dropdown-Menü Sicherheit oben auf dem Bildschirm und wählen Sie Benutzer. Wählen Sie einen Benutzer für die Ergebnisberichterstattung an SonarQube und klicken Sie auf das Symbol unter Tokens, um ein Sicherheitstoken für diesen Benutzer zu erstellen. Geben Sie im Popup-Fenster unter Token generieren den Namen des Tokens ein und klicken Sie auf Generieren. Speichern Sie den Wert dieses Tokens (eine 32-Bit-Hexadezimalzeichenkette), da es keine Möglichkeit gibt, ihn erneut anzuzeigen, nachdem Sie das Token-Fenster geschlossen haben. (Sie können jedoch jederzeit ein neues Token generieren.)

Die SonarScanner-CLI verwendet dieses Token, um die Ergebnisse an den Server zu melden. Es sollte in der SONAR_TOKEN-Umgebungsvariable gesetzt werden.

Die Integration ausführen

Nachdem Sie die SonarQube-Regeln konfiguriert, eine Konfigurationsdatei erstellt und ein Sicherheitstoken generiert haben, können Sie die Integration ausführen. Der Prozess umfasst zwei Schritte:

Führen Sie den Axe DevTools Linter Connector aus, um Ihre Projektdateien zu scannen und einen SonarQube-kompatiblen Bericht zu erstellen.
Führen Sie die SonarScanner-CLI aus, um den Bericht an SonarQube hochzuladen.

Erstellen des Linter-Berichts

Führen Sie Axe DevTools Linter Connector aus demselben Verzeichnis wie Ihre sonar-project.properties-Datei aus:

axe-linter-connector -s . -d .

Dies erzeugt axe-linter-report.json im aktuellen Verzeichnis. Weitere Informationen zu Server-, Authentifizierungs- und anderen Kommandozeilenoptionen finden Sie in Verwendung des Axe DevTools Linter Connector.

important

Der Connector muss aus dem SonarScanner-Projektbasisverzeichnis ausgeführt werden, damit die Dateipfade im Bericht mit den von SonarQube erwarteten Dateien übereinstimmen.

Den Bericht zu SonarQube hochladen

Setzen Sie die Umgebungsvariable SONAR_TOKEN auf das von Ihnen generierte Sicherheitstoken und führen Sie dann das SonarScanner CLI aus:

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

Ersetzen Sie <sonarqube-server-url> durch die URL Ihres SonarQube-Servers (zum Beispiel http://localhost:9000).

Das SonarScanner CLI liest die sonar-project.properties Datei, findet den im sonar.externalIssuesReportPaths angegebenen Bericht und lädt die Probleme als externe Probleme zu SonarQube hoch.

Ergebnisse anzeigen

Alle von Axe DevTools Linter gefundenen Probleme werden angezeigt, wenn Sie in der SonarQube-Weboberfläche Ihres Projekts auf Probleme klicken. Axe DevTools Linter-Probleme werden durch AXE-LINTER-MD für Markdown-Dateien und durch AXE-LINTER-HTML für HTML-Dateien identifiziert.

Der Bericht

Der Axe DevTools Linter Connector erzeugt einen JSON-Bericht, der dem SonarQube Generic Issue Import Format folgt.

Sie können einige der Optionen im Bericht ändern, indem Sie die Befehlszeilenoptionen des Axe DevTools Linter Connectors verwenden. Weitere Informationen finden Sie unter Optionale Befehlszeilenoptionen.