Axe DevTools Linter gebruiken met 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

Hoe Axe DevTools Linter te integreren met SonarQube om code te controleren op toegankelijkheidsproblemen

Not for use with personal data

U kunt Axe DevTools Linter integreren met SonarQube om uw code te controleren op toegankelijkheidsproblemen. U kunt de hier gegeven ideeën gebruiken om CI/CD-systemen te integreren met SonarQube. In de SonarQube-documentatie, zie de Overzicht van CI-integratie voor informatie over het gebruik van GitLab CI/CD, GitHub Actions, Azure Pipelines of Bitbucket Pipelines.

Overzicht van SonarQube-integratie

Het belangrijkste element voor integratie met SonarQube is het opdrachtregelprogramma, Axe DevTools Linter Connector. De tool scant uw bestanden en maakt een rapport dat vervolgens via het SonarScanner CLI-programma naar SonarQube wordt geüpload. De stappen in detail zijn als volgt:

Bestanden in je lokale mappen scannen.
De bestanden verzenden naar de Axe DevTools Linter Server voor linting of de bestanden lokaal linten.
De lintingresultaten verzamelen als een JSON-rapport dat compatibel is met SonarQube.
SonarScanner CLI uitvoeren over dit rapport om problemen naar SonarQube te sturen als externe problemen. De SonarScanner-tool scant in dit geval geen van uw bestanden. Het rapporteert simpelweg de problemen die Axe DevTools Linter heeft gevonden als externe problemen.

De eerste drie stappen worden uitgevoerd door Axe DevTools Connector, en de laatste stap wordt uitgevoerd door de SonarScanner CLI.

Je eigen aangepaste CI/CD-integratie moet deze acties uitvoeren:

Start Axe DevTools Linter Connector met de juiste command-line argumenten om de bestanden van je project te scannen en een SonarQube-compatibel JSON-rapport te produceren.
Start de SonarScanner CLI om de lintingresultaten naar SonarQube te sturen.

Vereisten

Axe DevTools Linter Connector: Zie Het gebruik van Axe DevTools Linter Connector voor installatie- en gebruiksinstructies.
SonarQube: Deze integratie is getest met SonarQube Community Build 26.4. SonarQube heeft zijn Generiek Probleemimportformaat veranderd in versie 10.3, en toekomstige versies vereisen mogelijk het bijgewerkte formaat. Als u importwaarschuwingen of problemen tegenkomt, controleer dan of uw versies van Axe DevTools Linter Connector en SonarQube compatibel zijn.
SonarScanner CLI: Zie SonarScanner CLI voor meer informatie over het downloaden van deze tool.

SonarQube instellen

Om SonarQube in te stellen, maak je een profiel aan en verwijder je overtollige regels uit het profiel om ze uit te schakelen (sommige regels in nieuw aangemaakte profielen in SonarQube overlappen met de regels die door Axe DevTools Linter worden gecontroleerd, wat resulteert in dubbele fouten). Je kunt de overlappende regels verwijderen in de SonarQube-beheerdersinterface. In de volgende secties wordt beschreven hoe je dit kunt doen.

Een nieuw kwaliteitsprofiel maken

Om de regels te wijzigen, klikt u op Kwaliteitsprofield bovenaan de SonarQube-beheerwebsite. Klik vervolgens op het Profielen filteren op: dropdown-menu en selecteer HTML. U zou nu het ingebouwde SonarQube HTML-profiel moeten zien. U moet dat profiel dupliceren door op het tandwiel-dropdownmenu aan de rechterkant van het profiel te klikken en Kopiëren te kiezen. SonarQube zal u vragen de nieuw gekopieerde profiel een naam te geven. Noem het nieuwe profiel Axe Linter en klik op de knop Kopiëren.

U heeft nu een nieuw HTML-kwaliteitsprofiel genaamd Axe Linter. Kies de tandwiel-dropdown voor het Axe Linter profiel en kies Instellen als standaard zodat dit profiel wordt gebruikt voor het controleren van alle HTML-bestanden.

Redundante regels verwijderen

De volgende stap is om overbodige regels te verwijderen uit het Axe Linter Kwaliteitsprofiel dat u heeft gemaakt. In de lijst met HTML-regels zouden er twee profielen moeten zijn. Het Axe Linter profiel en het Sonar way profiel. Klik op het Axe Linter profiel om naar de profielconfiguratiepagina te gaan. Aan de linkerkant van het scherm zou u een lijst met verschillende soorten regels in het profiel moeten zien. Klik op het nummer rechtsboven bij Totaal en in de Actief kolom om de actieve regels te bewerken.

Aan de rechterkant van het scherm staat een lijst met regels die zijn ingeschakeld in het Axe Linter HTML-profiel. Schakel de hieronder aangegeven overbodige regels uit:

<fieldset> tags moeten een <legend> bevatten
Links mogen geen directe afbeeldingstargets hebben
Afbeeldingen, gebieden en knoppen met afbeeldingslabels moeten een „alt“-attribuut hebben
<th> tags moeten id of scope attributen hebben
Tabelcellen moeten hun headers verwijzen
<object> tags moeten alternatieve inhoud bieden
<strong> en <em> tags moeten worden gebruikt
<table> tags moeten een beschrijving hebben
Video's moeten ondertitels hebben
Server-side afbeeldingskaarten (ismap attribuut) mogen niet worden gebruikt
<html> element moet een taalattribuut hebben
<frames> moet een title attribuut hebben
HTML <table> moet niet worden gebruikt voor lay-outdoeleinden
Tabellen gebruikt voor lay-out mogen geen semantische markup bevatten
aria-label of aria-labelledby attributen moeten worden gebruikt om vergelijkbare elementen te onderscheiden
Tabellen moeten headers hebben

Deze regels worden vermeld in stap 5 van dit Deque Support-artikel.

important

U heeft een Deque-account nodig om toegang te krijgen tot het ondersteuningsartikel dat de overbodige regels bevat. Zie dit artikel voor meer informatie over het Helpcentrum en het verkrijgen van een account.

Creëer een SonarQube-configuratiebestand

U moet een configuratiebestand maken voor SonarQube's SonarScanner CLI. Hieronder ziet u een voorbeeldconfiguratiebestand, **sonar-project.properties**.

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

De sonar.projectKey is de projectnaam in SonarQube waar u SonarScanner de resultaten naartoe wilt laten rapporteren.

Genereer een SonarQube-beveiligingstoken

De SonarQube Scanner moet in staat zijn om verbinding te maken met SonarQube om de resultaten te rapporteren. Dit kan je doen door een inlogtoken aan te maken in de SonarQube-beheersinterface.

Om een inlogtoken te maken, klikt u op Administratie bovenaan in het midden van het scherm in de SonarQube-beheerinterface. Klik vervolgens op het Beveiliging dropdown-menu bovenaan het scherm en kies Gebruikers. Kies een gebruiker om resultaten aan SonarQube te rapporteren en klik op het icoon onder Tokens om een beveiligingstoken voor die gebruiker te maken. Typ de naam van het token in het popup-venster onder Token genereren en klik op Genereer. Bewaar de waarde van dit token (een 32-bits hexadecimale tekenreeks) omdat er geen manier is om het opnieuw weer te geven nadat u het Token venster heeft gesloten. (U kunt echter op elk moment een nieuw token genereren.)

De SonarScanner CLI gebruikt dit token om de resultaten naar de server te rapporteren. Het moet worden ingesteld in de SONAR_TOKEN omgevingsvariabele.

Voer de integratie uit

Zodra je de SonarQube-regels hebt geconfigureerd, een configuratiebestand hebt gemaakt en een beveiligingstoken hebt gegenereerd, kun je de integratie uitvoeren. Het proces bestaat uit twee stappen:

Voer Axe DevTools Linter Connector uit om je projectbestanden te scannen en een SonarQube-compatibel rapport te genereren.
Voer SonarScanner CLI uit om het rapport naar SonarQube te uploaden.

Genereer het Linter-rapport

Voer Axe DevTools Linter Connector uit vanuit dezelfde directory als uw **sonar-project.properties** bestand:

axe-linter-connector -s . -d .

Dit produceert axe-linter-report.json in de huidige directory. Zie Het gebruik van Axe DevTools Linter Connector voor server-, authenticatie- en andere opdrachtregelopties.

important

De Connector moet worden uitgevoerd vanuit de basisdirectory van het SonarScanner-project, zodat de bestandspaden in het rapport overeenkomen met de bestanden die SonarQube verwacht.

Upload het rapport naar SonarQube

Stel de SONAR_TOKEN omgevingsvariabele in op het door u gegenereerde beveiligingstoken en voer vervolgens de SonarScanner CLI uit:

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

Vervang <sonarqube-server-url> door de URL van uw SonarQube-server (bijvoorbeeld http://localhost:9000).

De SonarScanner CLI leest het **sonar-project.properties** bestand, vindt het rapport gespecificeerd in sonar.externalIssuesReportPaths, en uploadt de problemen naar SonarQube als externe problemen.

Resultaten Bekijken

Eventuele problemen die door Axe DevTools Linter zijn gevonden, worden getoond wanneer u klikt op **Issues** in de SonarQube-webinterface voor uw project. Axe DevTools Linter-problemen worden geïdentificeerd door **AXE-LINTER-MD** voor Markdown-bestanden en door **AXE-LINTER-HTML** voor HTML-bestanden.

Het Rapport

Axe DevTools Linter Connector genereert een JSON-rapport dat voldoet aan de [SonarQube Generic Issue Import Format].

U kunt enkele opties in het rapport wijzigen door de opdrachtregelopties van Axe DevTools Linter Connector te gebruiken. Zie [Optionele Opdrachtregelopties] voor meer informatie.