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

Not for use with personal data

Je kunt Axe DevTools Linter integreren met SonarQube om je code te monitoren op toegankelijkheidsproblemen. Je kunt de ideeën hier gebruiken om CI/CD-systemen met SonarQube te integreren. Zie in de SonarQube-documentatie 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 de command-line tool, Axe DevTools Linter Connector. De tool scant je bestanden en maakt een rapport dat vervolgens via de SonarScanner CLI-tool naar SonarQube wordt geüpload. De gedetailleerde stappen zijn:

Bestanden in je lokale mappen scannen.
De bestanden naar de Axe DevTools Linter Server sturen voor linting of de bestanden lokaal linten.
De lintingresultaten verzamelen als een JSON-rapport dat compatibel is met SonarQube.
De SonarScanner CLI uitvoeren over dit rapport om problemen naar SonarQube te sturen als externe problemen. De SonarScanner-tool scant in dit geval eigenlijk geen van je 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 Axe DevTools Linter Connector gebruiken 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 kunnen het bijgewerkte formaat vereisen. Als je importwaarschuwingen of -problemen tegenkomt, controleer dan of je 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, klik je op Kwaliteitsprofield bovenaan de beheerwebsite van SonarQube. Klik daarna op de Profielen filteren op: dropdown en selecteer HTML. Je zou nu het ingebouwde SonarQube HTML-profiel moeten zien. Je moet dat profiel dupliceren door op het tandwiel in de dropdown rechts van het profiel te klikken en Kopiërente kiezen. SonarQube zal je vragen om het nieuw gekopieerde profiel een naam te geven. Noem het nieuwe profiel Axe Linter en klik op Kopiëren knop.

U heeft nu een nieuw HTML-kwaliteitsprofiel genaamd Axe Linter. Kies de tandwielkiezer 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 redundante regels te verwijderen uit het Axe Linter kwaliteitsprofiel dat u hebt 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 ziet u een lijst van verschillende soorten regels in het profiel. Klik op het nummer rechtsboven van 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 vermelde redundante regels uit:

<fieldset> tags moeten een <legend>
Links mogen geen directe afbeeldingstargets hebben
Afbeeldingen, gebieden en knoppen met afbeeldingslabels moeten een „alt“-attribuut hebben
<th> tags moeten een 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> mag niet voor lay-out doeleinden worden gebruikt
Tabellen gebruikt voor lay-out mogen geen semantische markup bevatten
aria-label of aria-labelledby attributen moeten worden gebruikt om soortgelijke elementen te onderscheiden
Tabellen moeten headers hebben

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

important

Je hebt een Deque-account nodig om toegang te krijgen tot het ondersteuningsartikel met de overbodige regels. Zie dit artikel voor meer informatie over het Helpcentrum en het verkrijgen van een account.

Creëer een SonarQube-configuratiebestand

Je moet een configuratiebestand maken voor de SonarScanner CLI van SonarQube. Het volgende toont een voorbeeld van een configuratiebestand, sonar-project.properties.

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

De sonar.projectKey is de projectnaam in SonarQube waar je wilt dat SonarScanner de resultaten rapporteert.

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, klik op Administratie bovenaan in het midden van het scherm in de SonarQube-beheersinterface. Klik vervolgens op de Beveiliging -dropdown nabij de bovenkant van het scherm en kies Gebruikers. Kies een gebruiker voor het rapporteren van resultaten aan SonarQube en klik op het pictogram onder Tokens om een beveiligingstoken voor die gebruiker te maken. Onder Token genereren in het pop-upvenster, typ de naam van het token en klik op Genereer. Sla de waarde van dit token op (een 32-bits hexadecimale reeks) omdat er geen manier is om het opnieuw te tonen nadat je het Token -venster sluit. (Je kunt echter wel 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 je sonar-project.properties bestand:

axe-linter-connector -s . -d .

Dit levert axe-linter-report.json op 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 beveiligingstoken dat je hebt gegenereerd, 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> met de URL van uw SonarQube-server (bijvoorbeeld, http://localhost:9000).

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

Resultaten Bekijken

Eventuele problemen gevonden door Axe DevTools Linter worden weergegeven wanneer u klikt op **Issues** in de SonarQube-webinterface voor uw project. Problemen van Axe DevTools Linter 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 het [SonarQube Generic Issue Import Format]volgt.

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