Axe DevTools Linter GitHubアクションの使用

この記事では、DequeのAxe DevTools Linter GitHubアクションを使用して、GitHubのプルリクエストを作成するときにコードのアクセシビリティエラーをチェックする方法を紹介します。アクションが実行されると、プルリクエストにはコミットされたファイルのアクセシビリティエラーを示すコメントが含まれます。

以下のセクションでは、このGitHubアクションをリポジトリに設定する手順を示します。

ステップ1: APIキーの取得 (SaaSのみ)

Axe DevTools Linter SaaSでは、APIキーを取得する必要があります。手順に従うことで入手できます Axe DevTools Linter SaaS APIキーの取得、または既存のAPIキーを使用することもできます 設定ページ からAxeアカウント用に。APIキーを取得する際に問題がある場合は、 Dequeのヘルプデスクに連絡してください。

ステップ2: リポジトリシークレットの作成 (SaaSのみ)

Axe DevTools Linter SaaSを使用している場合、APIキーをリポジトリのシークレットに追加する必要があります。これを行うには、リポジトリの 設定 ページに移動します。詳細については、 リポジトリの暗号化されたシークレットの作成 をGitHubドキュメントで参照してください。

次のステップで例示されるワークフローについて、シークレットは次の名前であるべきです:

• AXE_LINTER_API_KEY はAPIキー用

ステップ3: ワークフローの作成

次に、ファイルのアクセシビリティエラーをチェックするためのワークフローを作成する必要があります。という名前のファイルを作成できます axe-linter.yml リポジトリの .github/workflows ディレクトリに。

このファイルは、リポジトリのウェブページ上で「 アクション 」タブの下で新しいワークフローとしてオンラインで作成するか (「 自分でワークフローを設定 」をクリックして GitHub Actionsを始める セクションの上部で アクション ページ)、ローカルで作成してリポジトリにコミットすることもできます。

axe-linter-action は、プルリクエストが作成されたときにワークフローで呼び出されます (on: [pull_request])。ワークフローでは、2つの依存関係が使用されます:

• actions/checkout@v4
• dequelabs/axe-linter-action@v1

次のセクションでは、 .github/workflows/axe-linter.yml SaaSまたはオンプレミスバージョンのAxe DevTools Linterに使用できる例を示しています:

SaaSの場合

ワークフローのSaaSバージョンには、 api_key パラメータが含まれますが、 axe_linter_url パラメータは含まれません:

name: Linting for accessibility issues

on: [pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - uses: dequelabs/axe-linter-action@v1
        with:
          api_key: ${{ secrets.AXE_LINTER_API_KEY }}          github_token: ${{ secrets.GITHUB_TOKEN }}

オンプレの場合

ワークフローのオンプレミスバージョンには、 axe_linter_url パラメータが含まれていますが、 api_key パラメータは含まれていません:

name: Linting for accessibility issues

on: [pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - uses: dequelabs/axe-linter-action@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          axe_linter_url: $AXE_LINTER_URL

この例では、 axe_linter_url の値は、シェル環境から次のように読み込まれます AXE_LINTER_URL。

Axe DevTools Linterのオンプレミスバージョンでは、APIキーは必要ありませんが、GitHubワークフローがネットワーク接続を介してAxe DevTools Linterのインスタンスに到達可能である必要があります。

GitHubアクションのパラメータ

この dequelabs/axe-linter-action は、（上記のサンプルの with 節に指定された）次のパラメータを使用します:

ワークフローの結果

次のスクリーンショットは、アクセシビリティエラーを含むファイルでプルリクエストを作成した結果を示しています。そのファイル、 bad-file.mdでは、レベル2を飛ばして、見出しレベル1から3までの見出しが含まれており、これはアクセシビリティエラーです。

トラブルシューティング

GitHubアクションでの問題のデバッグは、エラーメッセージがしばしば根本的な問題を正確に表していないため、困難な場合があります。このセクションには、見られる可能性のあるエラーの例がいくつか含まれています。

シークレット名の間違い（SaaSのみ）

APIキーシークレットの名前がワークフロー内の名前と一致しない場合、キーが定義されていないというエラーではなく、コマンドが欠落しているというエラーを受け取る可能性があります:

... line 41: Missing: command not found

権限エラー

GitHubアクションの多くの場所で、権限が間違っていることがあります。例えば、公開されていないリポジトリを uses 節で参照する場合、アクセス権がないのではなく、リポジトリが見つからなかったというエラーを受け取ることがよくあります:

fatal: repository 'name' not found

Error: Resource not accessible by integration

エラーでワークフローの実行に失敗した場合は、 Resource not accessible by integration、以下の権限をワークフローに追加することで修正できます:

permissions:
  contents: read
  pull-requests: read 

完全なワークフローは次のようになります:

on: [pull_request]

permissions:
  contents: read
  pull-requests: read

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - uses: dequelabs/axe-linter-action@v1
        with:
          api_key: ${{ secrets.AXE_LINTER_API_KEY }}
          github_token: ${{ secrets.GITHUB_TOKEN }}

アクションでチェックされるファイル

次の拡張子を持つファイルは、アクセシビリティエラーがないかどうかチェックされます:

• .js
• .jsx
• .tsx
• .html
• .vue
• .md
• .markdown

次のステップ

Axe DevTools Linterがコードをチェックするために使用するルールについての情報は、 アクセシビリティルールを参照してください。Gitにアクセシビリティエラーのあるファイルがコミットされないようにする方法について知りたい場合は、 Gitプリコミットフックの使用を参照してください。