Back to Details

a11y-audit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Skill: Accessibility Audit

Skill：无障碍审计

Evaluate against WCAG 2.2 and the project's ARIA patterns.
根据 WCAG 2.2 和项目自身的 ARIA 模式进行评估。

Steps

步骤

  1. Read 
    accessibility/wcag-checklist.md
    (POUR-organized, P0/P1/P2) and 
    accessibility/aria-patterns.md
    .
  2. Check the mandatory P0 set per component: keyboard navigable, focus visible (≥3:1), screen-reader name/role/state, contrast (4.5:1 text / 3:1 UI), target size ≥24×24, no color-only signaling.
  3. Verify WCAG 2.2 additions: Focus Not Obscured (2.4.11), Target Size (2.5.8), Accessible Authentication (3.3.8).
  4. Contrast — measure, don't eyeball. For rendered HTML, RUN the real-render gates and report their actual output (CLAUDE.md → Verification Protocol): 
    node scripts/measure_render.mjs <file> [--dark]
    (every text element) AND 
    node scripts/verify_states.mjs <file> [--dark]
    (every interactive element in default/hover/focus — catches hover-state failures). For loose color pairs, 
    python3 scripts/contrast.py "<fg>" "<bg>"
    . Never state a ratio you did not measure.
  5. Check reduced-motion handling (
    taste/motion-choreography.md
    ).
  1. 阅读 
    accessibility/wcag-checklist.md
    （按 POUR 组织，P0/P1/P2 分级）和 
    accessibility/aria-patterns.md
    。
  2. 检查每个组件的强制 P0 项：键盘可导航、焦点可见（比例≥3:1）、屏幕阅读器的名称/角色/状态、对比度（文本 4.5:1 / UI 3:1）、目标尺寸≥24×24、不使用仅靠颜色传达信息。
  3. 验证 WCAG 2.2 新增项：焦点不被遮挡（2.4.11）、目标尺寸（2.5.8）、无障碍身份验证（3.3.8）。
  4. 对比度——测量，不要用肉眼判断。 对于渲染后的 HTML，运行真实渲染门控并报告其实际输出（参见 CLAUDE.md → Verification Protocol）：
    node scripts/measure_render.mjs <file> [--dark]
    （每个文本元素）和 
    node scripts/verify_states.mjs <file> [--dark]
    （每个交互元素的默认/悬停/焦点状态——可捕获悬停状态失败）。对于单独的配色对，使用 
    python3 scripts/contrast.py "<fg>" "<bg>"
    。永远不要陈述你未实际测量的比率。
  5. 检查减少动画（
    taste/motion-choreography.md
    ）的处理。

Output

输出

A findings table: WCAG criterion (e.g. 1.4.3) · severity (P0/P1/P2) · what fails · specific fix. Confirm passes explicitly. Accessibility may never be traded for aesthetics.
发现结果表格：WCAG 标准（如 1.4.3）· 严重程度（P0/P1/P2）· 失败内容 · 具体修复方法。明确确认通过项。无障碍绝不能为了美观而牺牲。