Axe開発者ハブGitHubアクションの使用

必要条件:

• 次のものを備えたウェブプロジェクト: Axe Watcher の統合
• Axe開発者ハブプロジェクトID
• Axe開発者ハブAPIキー
• Axe開発者ハブのセットアップ手順に従って変更したテストスイート
• 誰かがリポジトリにコミットするたびにテストスイートを実行するGitHubワークフロー

概要

この Axe開発者ハブGitHubアクション は、Axe Watcherを統合したウェブプロジェクトのGitHubワークフローをセットアップし、アクセシビリティエラーが含まれる場合、コミットやプルリクエストをブロックできます。

あなたの 変更したテストスイート が実行されると、アクセシビリティの結果が GitコミットSHA と関連付けられ、その情報がDequeのサーバーに送られます。GitHubアクションは テストスイート実行後 に実行され、現在のブランチの最新コミットSHAに関連付けられたアクセシビリティ結果をDequeのサーバーに問い合わせます。

セットアップ

1. プロジェクトIDのための環境変数を作成 - プロジェクトIDを環境変数や他のGitHub変数に保存することをお勧めします。この例では、プロジェクトIDを PROJECT_IDという名前の環境変数として保存します。

2. APIキーのためのシークレットを作成 - この例では、作成するシークレットはAXE_DEV_HUB_API_KEYという名前で、個人のAPIキーをその値として持ちますが、シークレットの名前は自由に決められます。ワークフロージョブ内で必ず同じ名前で参照する必要があります。

3. テストスイートにアクセシビリティチェックを追加 - 次の手順を プロジェクトのセットアップ で完了して、(Axe Watcher) CI/CDパイプラインで使用するテストスイートにアクセシビリティチェックを統合してください。

4. 現在のワークフローを修正 - 現在のテストランナーワークフローを .github/workflows 修正し、GitHubアクションを 実行後 に追加します。

例のジョブ

あなたのテストスイートのアクションに続くジョブがAxe開発者ハブGitHubアクションを実行する必要があります。以下の例を参照してください。

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

この axe-dev-hub ジョブは、テストスイートを実行するジョブに依存し、 needs: your-CI-test 行で指定されています。この行を、テストスイートを実行するジョブの名前に更新することを忘れないでください。

GitHubアクションには複数の入力パラメータを使用できます。例えば、 アクセシビリティしきい値 を有効にするには、 enable_a11y_threshold: trueを使用します。入力パラメータの完全なリストは Axe Developer Hub GitHub Action READMEです。

結果

GitHubアクションは、検出されたアクセシビリティの問題、解決された問題、そしてa11yのしきい値を超えた問題の数を含む、いくつかの出力パラメータを設定します。

a11yのしきい値を有効にしていない場合、アクセシビリティエラーがゼロを超えるとGitHubアクションは失敗します。有効にすると、a11yのしきい値を超える違反のみがGitHubアクションを失敗させます。 a11yのしきい値を使用して、 組織が優先したいものに合わせてAxe Developer Hubをカスタマイズする方法について学びます。

GitHubアクションが失敗すると、以下のようなコメントをプルリクエストに添付し、マージをブロックする可能性があります。

プルリクエストコメント内のリンクをクリックして、コミットに関するアクセシビリティ欠陥情報をAxe Developer Hubで確認します。

トラブルシューティング

次のようなエラーを受け取ることがあります：

Error: Resource not accessible by integration

アクションの設定ページで必要な権限があることを確認してください。コメントをプルリクエストに追加するためには、 読み取り と github_token 書き込み権限が必要です。細かく制御するためには、GitHubアクション用に異なるGITHUB_TOKENを使用することを選択できます。この値を

入力パラメータに追加してください。

例のワークフロー すでにテストスイートを実行するワークフローを持っていない場合は、 テストランナーを作成するための出発点として使用できます。

例のワークフローは Tests (tests.yml) という名前で、コミットまたはプルリクエストで実行されます。修正されたテストスイートを実行するジョブ、 cypressは、Cypressのテストスイートを実行する方法を示しています。例の次のジョブ、 axe-dev-hubは、Axe Developer Hub GitHubアクションの呼び出しです。

テストスイートジョブは常にGitHubアクションを 前に 実行する必要があります。

のメインリポジトリ

• Axe Developer Hub GitHub Action の
  • README には、入力と出力パラメータに関する情報があります。
  • GitHubアクションのメタデータは action.yml
  • GitHubアクションリポジトリで、最新のジョブ設定を定期的に確認するために 例の呼び出し を確認してください
• このページのトピックに関する詳細情報は、GitHubのドキュメントで見つけることができます
  • 情報を変数に保存する
  • 環境のために構成変数を作成する
  • GITHUB_TOKENの権限を修正する