accessibility-audit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Accessibility Audit Skill

无障碍审计技能

Fast, high-signal accessibility triage for pages, components, or PRs. This is a lightweight check, not a full compliance audit.
针对页面、组件或PR的快速、高精准度无障碍问题分诊。这是轻量级检查,而非完整合规审计。

When to Use This Skill

何时使用该技能

  • Quick accessibility triage before releases
  • Component-level a11y verification
  • PR review for accessibility regressions
  • Smoke checks for WCAG compliance
  • Validating keyboard navigation on new features
  • 发布前的快速无障碍问题分诊
  • 组件级别的a11y验证
  • PR评审中的无障碍回归检查
  • WCAG合规性冒烟测试
  • 新功能的键盘导航验证

Quick Audit Checklist

快速审计清单

1. Automated Snapshot (Recommended)

1. 自动化快照(推荐)

Run one of these automated tools first:
  • npx @axe-core/cli <url>
    - Quick axe-core scan
  • npx pa11y <url> --standard WCAG2AA
    - Pa11y audit
  • Lighthouse Accessibility score (Chrome DevTools > Lighthouse > Accessibility)
首先运行以下任一自动化工具:
  • npx @axe-core/cli <url>
    - 快速axe-core扫描
  • npx pa11y <url> --standard WCAG2AA
    - Pa11y审计
  • Lighthouse无障碍评分(Chrome开发者工具 > Lighthouse > 无障碍)

2. Keyboard Basics

2. 键盘基础检查

CheckExpected
All interactive elements reachable via TabYes
Focus indicator always visibleYes
No keyboard trapsYes
Logical tab orderYes
Skip link works for long pagesYes
检查项预期结果
所有交互元素可通过Tab键访问
焦点指示器始终可见
无键盘陷阱
合理的Tab键顺序
长页面的跳转链接可正常工作

3. Semantics and Labels

3. 语义化与标签

CheckExpected
Single, descriptive H1Yes
Logical heading order (no large jumps)Yes
Form inputs have visible labels or aria-labelYes
Buttons and links have clear namesYes
Images have meaningful alt text (or empty for decorative)Yes
检查项预期结果
单个、描述性的H1标题
合理的标题层级(无大幅跳跃)
表单输入框有可见标签或aria-label
按钮和链接有清晰名称
图片有意义的替代文本(装饰性图片用空文本)

4. Visual Contrast

4. 视觉对比度

ElementMinimum Ratio
Normal text4.5:1
Large text (18pt+ or 14pt bold+)3:1
UI components (inputs, buttons, focus rings)3:1
元素最小对比度
普通文本4.5:1
大文本(18pt+ 或14pt加粗+)3:1
UI组件(输入框、按钮、焦点环)3:1

5. Motion and Updates

5. 动效与内容更新

CheckExpected
Respects
prefers-reduced-motion
Yes
Dynamic updates announced (aria-live)Yes
检查项预期结果
遵循
prefers-reduced-motion
设置
动态更新内容通过aria-live播报

Output Format

输出格式

After running the audit, report findings as:
markdown
undefined
完成审计后,按以下格式报告结果:
markdown
undefined

Accessibility Audit: [Component/Page Name]

Accessibility Audit: [Component/Page Name]

Result: [Pass | Needs Fixes | Escalate to Full Audit]

Result: [Pass | Needs Fixes | Escalate to Full Audit]

Findings

Findings

SeverityIssueLocationFix Guidance
Critical[Description][Selector/Line][How to fix]
Major[Description][Selector/Line][How to fix]
Minor[Description][Selector/Line][How to fix]
SeverityIssueLocationFix Guidance
Critical[Description][Selector/Line][How to fix]
Major[Description][Selector/Line][How to fix]
Minor[Description][Selector/Line][How to fix]

Escalation Recommendation

Escalation Recommendation

[If applicable, explain why a full audit is needed]
undefined
[If applicable, explain why a full audit is needed]
undefined

Escalate to Full Audit When

何时升级为完整审计

  • New or changed navigation structure
  • Complex forms or authentication flows
  • Custom widgets or advanced interactions (modals, accordions, tabs)
  • Public releases or compliance requirements
  • Significant page structure changes
  • Failed automated scans with multiple critical issues
  • 导航结构新增或变更
  • 复杂表单或认证流程
  • 自定义组件或高级交互(模态框、折叠面板、标签页)
  • 公开发布或合规要求
  • 页面结构重大变更
  • 自动化扫描发现多个严重问题

Notes

注意事项

  • This smoke check targets WCAG 2.2 AA by default
  • If a different compliance level is required, state it explicitly
  • Automated tools catch ~30-40% of issues; manual testing is essential
  • Test with actual screen readers (VoiceOver, NVDA) for comprehensive coverage
  • 本冒烟检查默认以WCAG 2.2 AA为标准
  • 若需其他合规级别,请明确说明
  • 自动化工具可检测约30-40%的问题;手动测试必不可少
  • 使用实际屏幕阅读器(VoiceOver、NVDA)进行全面覆盖