De Axe Developer Hub GitHub Action gebruiken

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

Controleer automatisch PR's en commits op toegankelijkheidsgebreken

Not for use with personal data

Vereist:

Een webproject met Axe Watcher integratie

Axe Developer Hub Project ID

Axe Developer Hub API-sleutel

Een testsuite die je hebt aangepast door de setup-instructies in Axe Developer Hub te volgen

Een GitHub-werkstroom die je testsuite uitvoert telkens wanneer iemand een commit aan je repo toevoegt

note

Voor andere CI/CD-pijplijnen (zoals die op GitLab, Bitbucket of CircleCI) of bij gebruik van Axe DevTools voor Web-API's/CLI, kun je de Axe Developer Hub Commit Status API gebruiken als basis voor je eigen integratie.

Overzicht

De GitHub-actie van Axe Developer Hub stelt je in staat om GitHub-werkstromen op te zetten voor webprojecten die Axe Watcher integreren, om commits en pull requests te blokkeren als ze toegankelijkheidsfouten bevatten.

Wanneer je aangepaste testsuite draait, koppelt het toegankelijkheidsresultaten aan een Git commit SHA en stuurt die informatie naar de servers van Deque. De GitHub-actie draait na je testsuite draait en het raadpleegt de servers van Deque voor de toegankelijkheidsresultaten die horen bij de laatste commit SHA van de huidige tak.

De nieuwe en opgeloste probleemtelling die de actie rapporteert, gebruikt de baseline van de vorige commit die een scan heeft op diezelfde tak, niet de standaardtak. Alleen commits waartegen je testsuite daadwerkelijk draaide, hebben een scan; die baseline-commit kan dus enkele commits terug liggen. Als die commit een andere set tests draaide, zullen de tellingen het dekkingsverschil weerspiegelen in plaats van een echte verandering; zie Best practices voor nauwkeurige vergelijkingen.

Setup

Maak een omgevingsvariabele voor je project-ID - We raden aan om je project-ID op te slaan in een omgevingsvariabele of een andere GitHub-variabele. Voor dit voorbeeld slaan we het project-ID op als een omgevingsvariabele genaamd PROJECT_ID.
Maak een geheim voor je API-sleutel - Voor dit voorbeeld heet het gemaakte geheim AXE_DEV_HUB_API_KEY, met je persoonlijke API-sleutel als waarde, maar je kunt het geheim elke gewenste naam geven. Het moet worden gerefereerd met dezelfde naam in de werkstroomtaak. Je API-sleutel is een referentie: sla deze altijd op als een GitHub Actions-geheim in plaats van deze hardgecodeerd in het werkstroombestand te zetten.
Voeg toegankelijkheidscontroles toe aan je testsuite - Zorg ervoor dat je de stappen in projectsetup hebt voltooid om toegankelijkheidscontroles te integreren in de testsuite die wordt gebruikt in je (Axe Watcher) CI/CD-pijplijn.
Wijzig je huidige werkstroom - Je moet je huidige testrunner-werkstroom aanpassen in .github/workflows en de GitHub-actie na toevoegen aan de taak die je testsuite uitvoert.

Voorbeeldtaak

De taak na je testsuite-actie zou de GitHub-actie van Axe Developer Hub moeten uitvoeren. Verwijs naar het volgende voorbeeld:

jobs:

# ...
# your-CI-test
# ...

# Add the following new job:
# Be sure to replace <choose_latest_tag> with the appropriate version tag
  axe-dev-hub:
    runs-on: ubuntu-latest
    needs: your-CI-test
    steps:
      - uses: actions/checkout@v5
      - uses: dequelabs/axe-devhub-action@<choose_latest_tag>
        with:
          api_key: ${{ secrets.axe_DEV_HUB_API_KEY }}
          project_id: ${{ env.PROJECT_ID }}

De axe-dev-hub-taak in het voorbeeld hangt af van de taak die je testsuite uitvoert, gespecificeerd met de needs: your-CI-test regel. Zorg ervoor dat je deze regel bijwerkt zodat deze overeenkomt met de naam van de taak die je testsuite uitvoert.

Je kunt meerdere invoerparameters gebruiken voor de GitHub-actie. Bijvoorbeeld, je kunt de a11y-drempel inschakelen door enable_a11y_threshold: true te gebruiken. Een volledige lijst van invoerparameters is te vinden in de README van de GitHub-actie van Axe Developer Hub.

note

Je hoeft de server_url-parameter niet in te stellen als je je project op axe.deque.com hebt aangemaakt. Als je organisatie een regionale instantie, private cloud of on-premises implementatie van Axe Developer Hub gebruikt, moet je server_url instellen op de basis-URL van die instantie (bijvoorbeeld https://axe-eu.deque.com).

Resultaten

De GitHub-actie stelt verschillende uitvoerparameters in, inclusief een telling van gedetecteerde toegankelijkheidsproblemen, opgeloste problemen en problemen die de a11y-drempel overschrijden.

Als je de a11y-drempel niet hebt ingeschakeld, zal de GitHub-actie falen wanneer er meer dan nul toegankelijkheidsfouten aanwezig zijn. Als ingeschakeld, zullen alleen overtredingen die de a11y-drempel overschrijden de GitHub-actie doen falen. Meer lezen over het gebruik van de a11y-drempel om Axe Developer Hub aan te passen aan wat je organisatie als prioriteit wil stellen.

Bij een mislukking van de GitHub-actie wordt een opmerking geplaatst, vergelijkbaar met de onderstaande, aan je pull request toegevoegd, en kan samenvoegen blokkeren.

Klik op de link in de opmerking in je pull request om informatie over toegankelijkheidsfouten voor die commit in Axe Developer Hub te bekijken.

Probleemoplossing

Je kunt een foutmelding ontvangen zoals de volgende:

Error: Resource not accessible by integration

Controleer of je de benodigde permissies hebt op de instellingenpagina voor acties. Je hebt lees en schrijfrechten nodig om de actie opmerkingen aan pull requests te laten toevoegen. Voor meer granulariteit kun je ervoor kiezen om een ander GITHUB_TOKEN te gebruiken voor de GitHub-actie. Voeg deze waarde toe aan de github_token invoerparameter.

Voorbeeldwerkstroom

Als je nog geen werkstroom hebt die je testsuite uitvoert, kun je de voorbeeldwerkstroom gebruiken als uitgangspunt om je eigen testrunner te maken.

De voorbeeldworkflow heet Tests (tests.yml) en wordt uitgevoerd bij elke commit of pull request. De taak die de gewijzigde testsuite uitvoert, cypress, toont hoe een Cypress-testsuite moet worden uitgevoerd. De volgende taak in het voorbeeld, axe-dev-hub, is een aanroep van de Axe Developer Hub GitHub-actie.

Uw testsuitetaak moet altijd voor de Axe Developer Hub GitHub-actie uitvoeren.

tip

De voorbeeldmap bevat een compleet testproject waarmee u kunt experimenteren.

Referenties

Hoofdrepository voor de Axe Developer Hub GitHub-actie
- De README bevat informatie over de invoer- en uitvoerparameters
- Vind metadata voor de GitHub-actie in action.yml
- Controleer periodiek de voorbeeldaanroep in de GitHub-actie-repo voor de nieuwste taakconfiguratie
Vind meer informatie over onderwerpen op deze pagina in de GitHub-documentatie