ci-integration

技能：CI 集成

领域： CI/CD 无障碍访问流水线配置
使用此技能的 Agent： 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 差异中的确切行上
• 可在“安全性 → 代码扫描”选项卡中查看结果
• 跟踪违规趋势随时间的变化
• 支持针对误报的忽略工作流

---

门禁策略

策略	阻止条件	适用场景
严格	任何违规（所有严重级别）	新建项目
标准	仅严重和较严重违规	无障碍访问基线良好的活跃项目
基线	仅新增违规（回归）	现有应用的采用过程、遗留代码库
警告	从不阻止，仅添加评论	认知阶段、逐步采用

---

多平台模板

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	仅提供信息