Back to Details

accessibility-gate-wcag

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Accessibility Gate WCAG

无障碍检查门控（WCAG）

Run a deterministic accessibility gate for this repository's frontend work.
为当前仓库的前端工作运行确定性的无障碍检查门控。

Scope And Standards

检查范围与标准

  • Evaluate against WCAG 2.1 Level A and AA.
  • Prioritize user-impacting failures first (keyboard traps, inaccessible names, focus visibility, form errors, contrast).
  • Treat Bootstrap/RDS defaults as helpful but not automatically compliant in composed usage.
  • 依据WCAG 2.1 A级和AA级标准进行评估。
  • 优先处理影响用户的问题（如键盘陷阱、不可访问名称、焦点可见性、表单错误、对比度问题）。
  • Bootstrap/RDS默认样式仅作参考，组合使用时不自动视为合规。

Inputs To Gather

需收集的输入信息

Collect from available artifacts:
  • Changed files in 
    src/
    affecting UI or interaction.
  • Screens or URLs for changed views when available.
  • Test/lint evidence relevant to accessibility checks.
If critical artifacts are missing, continue with static review and mark 
Missing info
clearly.
从现有工件中收集：
  • src/
    目录中影响UI或交互的已修改文件。
  • 若有可用的已修改视图的屏幕截图或URL。
  • 与无障碍检查相关的测试/ lint证据。
若关键工件缺失，继续进行静态评审，并清晰标记“信息缺失”。

Audit Workflow

审计工作流程

  1. Identify affected user journeys and interactive elements (forms, modals, nav, tables, alerts, media).
  2. Run a semantic pass: landmarks, heading order, labels, names/roles/values, alt text, language.
  3. Run an interaction pass: keyboard navigation, focus order, focus visibility, skip paths, dialog behavior.
  4. Run a perception pass: color contrast, text resize/reflow, status/error messaging, motion sensitivity.
  5. Map each finding to WCAG 2.1 criterion and classify severity.
  6. Recommend the smallest viable fix with file-level guidance.
  1. 识别受影响的用户旅程和交互元素（表单、模态框、导航、表格、提示框、媒体）。
  2. 语义检查：地标、标题层级、标签、名称/角色/值、替代文本、语言设置。
  3. 交互检查：键盘导航、焦点顺序、焦点可见性、跳转路径、对话框行为。
  4. 感知检查：颜色对比度、文本缩放/重排、状态/错误提示、运动敏感性。
  5. 将每个检查结果映射到WCAG 2.1标准条目，并分类严重程度。
  6. 提供最小可行修复方案及文件级指导。

Severity Model

严重程度模型

  • Blocking
    : prevents task completion or creates severe assistive-tech failure.
  • Major
    : significant degradation for accessibility users; should be fixed before merge.
  • Minor
    : real issue with lower impact/scope.
  • Advisory
    : improvement opportunity, not a defect.
  • Blocking（阻塞）
    ：阻止任务完成或导致辅助技术严重失效。
  • Major（主要）
    ：对无障碍用户造成显著影响；应在合并前修复。
  • Minor（次要）
    ：确实存在问题，但影响范围/程度较低。
  • Advisory（建议）
    ：优化机会，不属于缺陷。

Output Format

输出格式

Return in this order:
  1. Blocking findings (highest severity first) with file references and WCAG criterion.
  2. Major findings.
  3. Minor findings.
  4. Missing info.
  5. Final gate decision: 
    Pass
    , 
    Pass with caveats
    , or 
    Fail
    with one-line rationale.
按以下顺序返回：
  1. 阻塞级检查结果（按严重程度从高到低），附带文件引用和WCAG标准条目。
  2. 主要级检查结果。
  3. 次要级检查结果。
  4. 信息缺失项。
  5. 最终门控结论：
    通过
    、
    附带条件通过
    或
    不通过
    ，并附上一行说明。

Repository Alignment

仓库适配要求

  • Follow 
    AGENTS.md
    conventions (Vue 3 + TypeScript + Vitest + Yarn).
  • Prefer fixes using existing RDS/Bootstrap patterns before introducing custom behavior.
  • For any custom UI workaround, note why RDS/Bootstrap could not satisfy the requirement.
  • For each code fix recommendation, include at least one test suggestion under 
    tests/
    mirroring 
    src/
    path.
  • 遵循
    AGENTS.md
    约定（Vue 3 + TypeScript + Vitest + Yarn）。
  • 优先使用现有RDS/Bootstrap模式进行修复，再考虑引入自定义逻辑。
  • 若使用自定义UI解决方案，需说明为何RDS/Bootstrap无法满足需求。
  • 每个代码修复建议需包含至少一个与
    src/
    路径对应的
    tests/
    目录下的测试建议。

Reference

参考文档

Use references/wcag-review-checklist.md as the baseline checklist.
以references/wcag-review-checklist.md为基础检查清单。