Axe Developer Hub GitHubアクションの使用

必須条件：

• 次のものを含むWebプロジェクト： Axe Watcher との統合
• Axe Developer HubプロジェクトID
• Axe Developer Hub APIキー
• Axe Developer Hubのセットアップ手順に従って修正したテストスイート
• 誰かがリポジトリにコミットするたびにテストスイートを実行するGitHubワークフロー

概要

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

あなたの 修正済みテストスイート が実行されるとき、そのアクセシビリティ結果が GitコミットSHA と関連付けられ、その情報がDequeのサーバーに送信されます。GitHubアクションは *後で* テストスイートが実行された後に実行され、Dequeのサーバーから現在のブランチの最新のコミットSHAに関連付けられたアクセシビリティ結果を照会します。

セットアップ

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 Developer Hub 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アクションに使用できます。例えば、 a11yしきい値 を有効にするには、enable_a11y_threshold: true Axe Developer Hub GitHub Action READMEです。

注意: プロジェクトを server_url 上で作成した場合、パラメーターを設定する必要はありません。それ以外の環境を使用している場合は、プロジェクトが作成されたURLに合わせて設定する必要があります。 axe.deque.com

結果

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

a11yしきい値を有効にしていない場合は、アクセシビリティエラーが1つでも存在する際にGitHubアクションは失敗します。有効にした場合、a11yしきい値を超える違反のみがGitHubアクションを失敗させます。 a11yしきい値の使用について詳しく知る ことで、組織が優先したいものにAxe Developer Hubをカスタマイズできます。

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

プルリクエストのコメント内のリンクをクリックして、そのコミットのアクセシビリティ欠陥情報をAxe Developer Hubで確認してください。

トラブルシューティング

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

Error: Resource not accessible by integration

アクションのために設定ページで必要な権限を持っているか確認してください。プルリクエストにコメントを追加するには、読み取り および 書き込み権限が必要です。より詳細な設定のために、異なるGITHUB_TOKENをGitHubアクションで使用することもできます。この値を github_token 入力パラメーターに追加してください。

ワークフローの例

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

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

テストスイートジョブは常に Axe Developer Hub GitHubアクションの 前に

参考文献

• のメインリポジトリ Axe Developer Hub GitHub Action
  • README には、入力および出力パラメーターに関する情報があります
  • GitHubアクションのメタデータは action.yml
  • にあります 例の呼び出し GitHubアクションリポジトリ内で最新のジョブ設定のために定期的に
• このページのトピックに関する詳細情報はGitHubのドキュメントで見つかります
  • 情報を変数に格納する
  • 環境用の設定変数を作成する
  • GITHUB_TOKENの権限を修正する