Verwendung der GitHub Action für Axe Developer Hub

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

Automatische Überprüfung von PRs und Commits auf Barrierefreiheitsfehler

Not for use with personal data

Erfordert:

note

Für andere CI/CD-Pipelines (wie GitLab, Bitbucket oder CircleCI) oder bei Verwendung von Axe DevTools für Web-APIs/CLI können Sie den Axe Developer Hub Commit-Status API als Grundlage für Ihre eigene Integration verwenden.

Übersicht

Die Axe Developer Hub GitHub Action ermöglicht es Ihnen, GitHub-Workflows für Webprojekte einzurichten, die Axe Watcher integrieren, um Commits und Pull Requests zu blockieren, wenn sie Zugänglichkeitsfehler enthalten.

Wenn Ihr modifizierte Testsuite läuft, wird es die Ergebnisse der Zugänglichkeitsprüfung mit einem Git-Commit SHA assoziieren und diese Informationen an die Server von Deque senden. Die GitHub Action läuft nach Ihre Testsuite läuft und fragt die Server von Deque nach den Zugänglichkeitsprüfenswerten ab, die mit dem neuesten Commit SHA des aktuellen Branches verbunden sind.

Die neuen und gelösten Problemmeldungen, die die Action berichtet, verwenden die Baseline vom vorherigen Commit, das einen Scan auf demselben Branch hat, nicht auf dem Standardbranch. Nur Commits, gegen die Ihre Testsuite tatsächlich lief, haben einen Scan, sodass das Baseline-Commit möglicherweise einige Commits zurückliegt. Wenn dieses Commit einen anderen Testsatz ausgeführt hat, spiegeln die Zählungen den Abdeckungsunterschied wider und nicht eine echte Änderung; siehe Beste Praktiken für genaue Vergleiche.

Einrichtung

  1. Erstellen Sie eine Umgebungsvariable für Ihre Projekt-ID - Wir empfehlen, Ihre Projekt-ID in einer Umgebungsvariablen oder einer anderen GitHub-Variablen zu speichern. Für dieses Beispiel speichern wir die Projekt-ID als Umgebungsvariable mit dem Namen PROJECT_ID.

  2. Erstellen Sie ein Geheimnis für Ihren API-Schlüssel - In diesem Beispiel wird das erstellte Geheimnis AXE_DEV_HUB_API_KEY genannt, mit Ihrem persönlichen API-Schlüssel als Wert. Sie können das Geheimnis nach Belieben benennen. Es muss allerdings im Workflow-Job mit demselben Namen referenziert werden. Ihr API-Schlüssel ist eine Berechtigungsnachweis: Speichern Sie ihn immer als GitHub Actions-Geheimnis, anstatt ihn im Workflow-Dokument fest einzugeben.

  3. Fügen Sie Ihrer Testsuite Zugänglichkeitsprüfungen hinzu - Stellen Sie sicher, dass Sie die Schritte in Projekteinrichtung abgeschlossen haben, um Zugänglichkeitsprüfungen in der Testsuite zu integrieren, die in Ihrer (Axe Watcher) CI/CD-Pipeline verwendet wird.

  4. Ändern Sie Ihren aktuellen Workflow - Sie müssen Ihren aktuellen Testrunner-Workflow in .github/workflows ändern und die GitHub Action nach dem Job hinzufügen, der Ihre Testsuite ausführt.

Beispiel-Job

Der Job, der Ihrer Testsuite-Action folgt, sollte die Axe Developer Hub GitHub Action ausführen. Beachten Sie folgendes Beispiel:

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 }}

Der axe-dev-hub Job im Beispiel hängt von dem Job ab, der Ihre Testsuite ausführt, spezifiziert mit der needs: your-CI-test Zeile. Stellen Sie sicher, dass Sie diese Zeile aktualisieren, um den Namen des Jobs anzupassen, der Ihre Testsuite ausführt.

Sie können mehrere Eingabeparameter für die GitHub Action verwenden. Beispielsweise können Sie die a11y-Schwelle aktivieren, indem Sie enable_a11y_threshold: true verwenden. Eine vollständige Liste der Eingabeparameter finden Sie im Axe Developer Hub GitHub Action README.

note

Sie müssen den server_url-Parameter nicht festlegen, wenn Sie Ihr Projekt auf axe.deque.com erstellt haben. Wenn Ihre Organisation eine regionale Instanz, eine private Cloud oder eine On-Premises-Bereitstellung von Axe Developer Hub verwendet, müssen Sie server_url auf die Basis-URL dieser Instanz setzen (zum Beispiel, https://axe-eu.deque.com).

Ergebnisse

Die GitHub-Action setzt mehrere Ausgabeparameter, einschließlich einer Zählung der nachgewiesenen Zugänglichkeitsprobleme, der gelösten Probleme und der Probleme, die die a11y-Schwelle überschreiten.

Wenn Sie die a11y-Schwelle nicht aktiviert haben, schlägt die GitHub Action fehl, sobald mehr als null Zugänglichkeitsfehler vorhanden sind. Wenn aktiviert, verursachen nur diejenigen Verstöße, die die a11y-Schwelle überschreiten, dass die GitHub Action fehlschlägt. Erfahren Sie mehr über die Verwendung der a11y-Schwelle, um Axe Developer Hub daran anzupassen, was Ihre Organisation priorisieren möchte.

Ein Fehler der GitHub Action fügt Ihrem Pull Request einen Kommentar hinzu, der dem unten gezeigten ähnlich ist, und kann das Zusammenführen blockieren.

Eine Beispielnachricht, die die GitHub Action einem Push-Request anhängt, wenn Zugänglichkeitsfehler gefunden wurden.

Klicken Sie auf den Link im Kommentar des Pull Requests, um Informationen zu Zugänglichkeitsfehlern für diesen Commit im Axe Developer Hub zu überprüfen.

Fehlerbehebung

Es kann ein Fehler wie folgt auftreten:

Error: Resource not accessible by integration

Überprüfen Sie, ob Sie die erforderlichen Berechtigungen auf der Einstellungsseite für Actions haben. Sie benötigen Lese-und- und Schreibberechtigungen, damit die Action Kommentare zu Pull Requests hinzufügen kann. Für mehr Granularität können Sie einen anderen GITHUB_TOKEN für die GitHub-Action verwenden. Fügen Sie diesen Wert dem github_token-Eingabeparameter hinzu.

Beispiel-Workflow

Wenn Sie noch keinen Workflow haben, der Ihre Testsuite ausführt, können Sie den Beispiel-Workflow als Ausgangspunkt verwenden, um Ihren eigenen Testrunner zu erstellen.

Der Beispiel-Workflow heißt Tests (tests.yml) und wird bei jedem Commit oder Pull Request ausgeführt. Der Job, der die modifizierte Testsuite ausführt, cypress, zeigt, wie man eine Cypress-Testsuite ausführt. Der folgende Job im Beispiel, axe-dev-hub, ist ein Aufruf der Axe Developer Hub GitHub-Aktion.

Ihr Testsuite-Job sollte immer vor der Axe Developer Hub GitHub-Aktion laufen.

tip

Das Beispielverzeichnis enthält ein komplettes Testprojekt, mit dem Sie experimentieren können.

Referenzen

Is this page helpful?

Help us improve this page

Still need help?