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 volgens de setup-instructies in Axe Developer Hub

Een GitHub-workflow die je testsuite uitvoert wanneer iemand commit naar je repository

note

Voor andere CI/CD-pijplijnen (zoals die op GitLab, Bitbucket of CircleCI) of bij het gebruik van Axe DevTools voor Web API's/CLI, kunt u de Axe Developer Hub REST-service gebruiken als basis voor uw eigen integratie.

Overzicht

De Axe Developer Hub GitHub Actie stelt je in staat om GitHub-workflows 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 wordt uitgevoerd na je test suite draait, en het vraagt bij de servers van Deque de toegankelijkheidsresultaten op die zijn gekoppeld aan de laatste commit SHA van de huidige branch.

Setup

Creeër 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.
Creeër een Geheim voor je API-sleutel - Voor dit voorbeeld is het gecreëerde geheim genaamd AXE_DEV_HUB_API_KEY, met je persoonlijke API-sleutel als waarde, maar je mag het geheim noemen zoals je wilt. Het moet met dezelfde naam worden gerefereerd in de workflowtaak.
Voeg Toegankelijkheidscontroles toe aan je Testsuite - Zorg ervoor dat je de stappen hebt voltooid in projectsetup om toegankelijkheidscontroles te integreren in de test suite die wordt gebruikt in je (Axe Watcher) CI/CD-pijplijn.
Wijzig je Huidige Workflow - Je moet je huidige testrunner-workflow wijzigen in .github/workflows en de GitHub-actie na de taak die je test suite uitvoert toevoegen.

Voorbeeld Taak

De taak na je testsuite-actie zou de Axe Developer Hub GitHub-actie moeten uitvoeren. Raadpleeg 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 is afhankelijk van de taak die je test suite uitvoert, gespecificeerd met de needs: your-CI-test regel. Zorg ervoor dat je deze regel bijwerkt om overeen te komen met de naam van de taak die je test suite uitvoert.

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

note

You do not need to set the server_url parameter if you created your project on axe.deque.com. If your organization uses a regional instance, private cloud, or on-premises deployment of Axe Developer Hub, you must set server_url to the base URL of that instance (for example, https://axe-eu.deque.com).

Resultaten

De GitHub-actie stelt verschillende uitvoerparameters in, waaronder 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. Indien ingeschakeld, zullen alleen overtredingen die de a11y-drempel overschrijden de GitHub-actie laten falen. Leer meer over het gebruik van de a11y-drempel om de Axe Developer Hub aan te passen aan wat jouw organisatie wil prioriteren.

Bij een mislukking van de GitHub-actie wordt een bericht vergelijkbaar met het onderstaande aan uw pull-aanvraag toegevoegd en kan dit het samenvoegen blokkeren.

Klik op de link in het pull-aanvraagcommentaar om toegangsdefectinformatie voor die commit in Axe Developer Hub te bekijken.

Probleemoplossing

U kunt een foutmelding ontvangen zoals de volgende:

Error: Resource not accessible by integration

Controleer of je de benodigde rechten hebt op de instellingenpagina voor acties. Je hebt lees- en schrijfpermissies nodig om de actie toe te staan opmerkingen toe te voegen aan pull requests. Voor meer granulariteit kun je ervoor kiezen om een andere GITHUB_TOKEN voor de GitHub-actie te gebruiken. Voeg deze waarde toe aan de github_token invoerparameter.

Voorbeeldworkflow

Als je nog geen workflow hebt die je test suite uitvoert, kun je de voorbeeldworkflow gebruiken als uitgangspunt om je eigen testrunner te maken.

The example workflow is called Tests (tests.yml) and runs on any commit or pull request. The job that runs the modified test suite, cypress, shows how to run a Cypress test suite. The following job in the example, axe-dev-hub, is an invocation of the Axe Developer Hub GitHub action.

Je test suite-taak moet altijd draaien voordat de Axe Developer Hub GitHub-actie.

tip

De voorbeeldmap bevat een compleet testproject waarmee je kunt experimenteren.

Referenties

Hoofdrepository voor de Axe Developer Hub GitHub Actie
- The README has information about the input and output parameters
- Find metadata for the GitHub Action in action.yml
- Controleer regelmatig de voorbeeldaanroep in de GitHub-actie repo voor de nieuwste taakconfiguratie
Vind meer informatie over onderwerpen op deze pagina in de documentatie van GitHub