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

必要条件:

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

概要

Axe Developer Hub GitHub Actionにより、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. テストスイートにアクセシビリティチェックを追加 - テストスイートにおけるアクセシビリティチェックをプロジェクトのセットアップの手順に従って統合したことを確認してください。

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アクション用に異なるGITHUB_TOKENを使用することを選択できます。この値をgithub_token入力パラメータに追加します。

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

テストスイートを実行するワークフローがまだない場合は、自分自身のテストランナーを作成する出発点として例のワークフローを使用できます。

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

テストスイートジョブは常に前にAxe Developer Hub GitHubアクションの後に実行されるべきです。

のメインリポジトリ

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