ci-integration

スキル：CI 統合

分野： CI/CD アクセシビリティパイプラインの設定
このスキルを使用するエージェント： ci-accessibility、web-accessibility-wizard、accessibility-lead

---

目的

自動アクセシビリティスキャンを CI/CD パイプラインに統合するためのパターン、テンプレート、リファレンスデータです。axe-core CLI、Lighthouse CI、SARIF 出力、ベースライン管理、マルチプラットフォームの設定を扱います。

---

axe-core CLI リファレンス

インストール

npm install --save-dev @axe-core/cli

WCAG 2.2 AA タグセット

npx axe <url> --tags wcag2a,wcag2aa,wcag21a,wcag21aa,wcag22aa

出力形式

フラグ	出力
--reporter json	JSON の結果を標準出力に出力
--reporter sarif	コードスキャン用の SARIF 形式
--reporter html	人が読みやすい HTML レポート
--save <file>	結果をファイルに保存

終了コード

コード	意味
0	違反は見つかりませんでした
1	違反が見つかりました
2	スキャンの実行中にエラーが発生しました

---

ベースラインのパターン

目的

ベースラインがないと、既存のすべての違反によって CI が失敗し、既存アプリへの導入が不可能になります。ベースラインを設定すると、CI のゲートで回帰のみを防止できます。

ベースラインファイルのスキーマ（axe-baseline.json）

{
  "version": "1.0",
  "timestamp": "2026-03-22T00:00:00Z",
  "tool": "@axe-core/cli",
  "tags": "wcag2a,wcag2aa,wcag21a,wcag21aa,wcag22aa",
  "violations": {
    "color-contrast": { "count": 12, "pages": ["index.html", "about.html"] },
    "image-alt": { "count": 3, "pages": ["gallery.html"] },
    "label": { "count": 5, "pages": ["contact.html", "signup.html"] }
  },
  "total": 20
}

比較ロジック

current_violations = run_axe_scan()
baseline = load("axe-baseline.json")

new_violations = current_violations - baseline
if new_violations.count > 0:
    FAIL PR — "N new accessibility violations introduced"
else:
    PASS — "No new violations (M existing in baseline)"

---

GitHub Actions テンプレート

name: Accessibility Check
on:
  pull_request:
    paths: ['**/*.html', '**/*.jsx', '**/*.tsx', '**/*.vue', '**/*.svelte']

jobs:
  a11y:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22 }
      - run: npm ci
      - run: npx axe $(git diff --name-only HEAD~1 --diff-filter=ACMR -- '*.html' | tr '\n' ' ') --tags wcag2a,wcag2aa,wcag21a,wcag21aa,wcag22aa --reporter json --save results.json
      - name: Check results
        run: |
          violations=$(jq '[.[].violations[]] | length' results.json)
          echo "Found $violations violations"
          if [ "$violations" -gt 0 ]; then exit 1; fi

---

SARIF 統合

SARIF（静的解析結果交換フォーマット）を使用すると、GitHub の PR 差分にインライン注釈を表示できます。

アップロード手順

- uses: github/codeql-action/upload-sarif@v3
  with:
    sarif_file: results.sarif
    category: accessibility

メリット

• 違反箇所が PR 差分の該当行にインライン注釈として表示されます
• 結果は「Security」→「Code Scanning」タブで確認できます
• 違反の傾向を時系列で追跡できます
• 誤検出を却下するワークフローに対応しています

---

ゲート戦略

戦略	ブロック条件	最適な用途
厳格	あらゆる違反（すべての重要度）	新規のグリーンフィールドプロジェクト
標準	クリティカルおよび重大な違反のみ	アクセシビリティのベースラインが良好な進行中のプロジェクト
ベースライン	新たな違反のみ（回帰）	既存コードベースへの導入
警告	ブロックせず、コメントのみ	認知を高める段階、段階的な導入

---

マルチプラットフォームテンプレート

Azure DevOps

trigger:
  paths:
    include: ['**/*.html', '**/*.jsx', '**/*.tsx']

pool:
  vmImage: 'ubuntu-latest'

steps:
  - task: NodeTool@0
    inputs: { versionSpec: '22.x' }
  - script: npm ci && npx axe $(Build.SourcesDirectory)/index.html --tags wcag2a,wcag2aa
    displayName: 'Accessibility Scan'

GitLab CI

accessibility:
  image: node:22
  script:
    - npm ci
    - npx axe $CI_PROJECT_DIR/index.html --tags wcag2a,wcag2aa
  only:
    changes: ['**/*.html', '**/*.jsx', '**/*.tsx']

---

重要度のマッピング

axe-core の影響度	CI の優先度	対応
critical	p1-blocker	マージを必ずブロック
serious	p2-high	マージをブロックすることを推奨
moderate	p3-medium	PR コメントで警告
minor	p4-low	情報のみ