accessibility-audit
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseAccessibility Audit Skill
可访问性审计技能
This skill produces a structured accessibility audit based on WCAG 2.2 guidelines. It covers visual, motor, cognitive, and screen reader accessibility — with prioritised remediation for each issue found.
本技能基于WCAG 2.2指南生成结构化的可访问性审计报告，涵盖视觉、操作、认知及屏幕阅读器可访问性，并为发现的每个问题提供优先级修复方案。
Required Inputs
必填输入信息
Ask the user for these if not provided:
- What is being audited (screen, component, full product, design spec)
- Description or image of the UI
- Target WCAG level (A / AA / AAA — default to AA, which is the legal standard in most jurisdictions)
- Known assistive technology users? (Yes/No — if yes, which: screen reader / switch access / voice control / magnification)
- Platform (Web / iOS / Android / Desktop app)
若用户未提供以下信息，请向其询问：
- 审计对象（页面、组件、完整产品、设计规范）
- UI的描述或图片
- 目标WCAG等级（A / AA / AAA — 默认采用AA级，这是大多数地区的法定标准）
- 是否存在已知的辅助技术使用者？（是/否 — 若是，请说明类型：屏幕阅读器 / 切换控制 / 语音控制 / 放大功能）
- 平台（网页 / iOS / Android / 桌面应用）
Output Structure
输出结构
Accessibility Audit: [Component or Screen Name]
可访问性审计：[组件或页面名称]
Target standard: WCAG 2.2 Level [AA]
Platform: [Platform]
Date: [Date]
目标标准： WCAG 2.2 [AA]级
平台： [平台]
日期： [日期]
Audit Summary
审计摘要
| Category | Issues Found | Critical | Moderate | Minor |
|---|---|---|---|---|
| Perceivable | ||||
| Operable | ||||
| Understandable | ||||
| Robust | ||||
| Total |
Overall compliance status: ✅ Compliant / 🟡 Minor issues / 🔴 Fails AA standard
| 类别 | 发现的问题 | 严重 | 中等 | 轻微 |
|---|---|---|---|---|
| 可感知 | ||||
| 可操作 | ||||
| 可理解 | ||||
| 健壮性 | ||||
| 总计 |
整体合规状态： ✅ 合规 / 🟡 存在轻微问题 / 🔴 未达到AA级标准
Perceivable
可感知
1.1 Text Alternatives
1.1 文本替代方案
- All images have descriptive alt text (not filename or "image")
- Decorative images have to be skipped by screen readers
alt="" - Icons without visible labels have accessible names
- Complex images (charts, diagrams) have extended descriptions
Issues found: [List specific issues or "None"]
- 所有图片均配有描述性alt文本（而非文件名或“image”）
- 装饰性图片使用，以便屏幕阅读器跳过
alt="" - 无可见标签的图标具备可访问名称
- 复杂图片（图表、示意图）配有扩展描述
发现的问题： [列出具体问题或“无”]
1.3 Adaptable
1.3 适应性
- Content structure uses semantic HTML (headings, lists, landmarks) — not just visual formatting
- Reading order in DOM matches visual order
- Form inputs have associated labels (not placeholder text as label)
- Data tables have proper headers and scope
Issues found:
- 内容结构使用语义化HTML（标题、列表、地标）—— 而非仅依赖视觉格式
- DOM中的阅读顺序与视觉顺序一致
- 表单输入项关联了标签（不使用占位符文本作为标签）
- 数据表格具备正确的表头和作用域
发现的问题：
1.4 Distinguishable
1.4 可区分性
- Text contrast ratio ≥ 4.5:1 (normal text) or ≥ 3:1 (large text 18px+)
- UI component contrast ratio ≥ 3:1 against background
- Information is not conveyed by colour alone
- Text can be resized to 200% without loss of content
- No content that auto-plays audio
Issues found:
- 文本对比度≥4.5:1（常规文本）或≥3:1（大文本18px+）
- UI组件与背景的对比度≥3:1
- 信息并非仅通过颜色传递
- 文本可放大至200%且不丢失内容
- 无自动播放音频的内容
发现的问题：
Operable
可操作
2.1 Keyboard Accessible
2.1 键盘可访问性
- All interactive elements are reachable by keyboard (Tab key)
- No keyboard traps
- Custom components have keyboard interactions (arrow keys for menus, Escape to close modals)
- Skip navigation link available for pages with repeated navigation
Issues found:
- 所有交互元素均可通过键盘（Tab键）访问
- 无键盘陷阱
- 自定义组件具备键盘交互逻辑（菜单使用箭头键，模态框可按Escape关闭）
- 对于包含重复导航的页面，提供跳转导航链接
发现的问题：
2.4 Navigable
2.4 可导航性
- Focus is visible at all times (not removed with without replacement)
outline: none - Focus order is logical and predictable
- Page/screen has a descriptive title
- Link text is descriptive (not "click here" or "read more")
- Headings are hierarchical (H1 → H2 → H3, no skips)
Issues found:
- 焦点始终可见（未通过移除焦点样式且无替代方案）
outline: none - 焦点顺序符合逻辑且可预测
- 页面/屏幕具备描述性标题
- 链接文本具备描述性（而非“点击此处”或“阅读更多”）
- 标题层级清晰（H1 → H2 → H3，无层级跳跃）
发现的问题：
2.5 Input Modalities
2.5 输入方式
- Touch targets are at least 44x44px
- No functionality requires complex gestures (pinch, multi-touch) without a simple alternative
- Motion or dragging interactions have button alternatives
Issues found:
- 触摸目标尺寸至少为44x44px
- 无需要复杂手势（捏合、多点触控）且无简单替代方案的功能
- 滑动或拖拽交互具备按钮替代方案
发现的问题：
Understandable
可理解
3.1 Readable
3.1 可读性
- Language of the page is set (attribute)
lang - Unusual words, abbreviations, or jargon are explained
- 设置了页面语言（属性）
lang - 对生僻词汇、缩写或行话进行了解释
3.2 Predictable
3.2 可预测性
- Navigation is consistent across screens
- Components behave consistently (same button does the same thing)
- No unexpected context changes on focus or input
- 导航在各页面间保持一致
- 组件行为一致（同一按钮执行相同操作）
- 聚焦或输入时无意外的上下文切换
3.3 Input Assistance
3.3 输入辅助
- Error messages identify the field and describe the error in plain language (not just "Invalid input")
- Required fields are labelled (not just with colour or asterisk alone)
- Forms provide suggestions for correcting errors where possible
Issues found:
- 错误消息明确指出字段并以平实语言描述错误（而非仅显示“无效输入”）
- 必填字段有明确标记（不仅通过颜色或星号标记）
- 表单尽可能提供错误修正建议
发现的问题：
Robust
健壮性
4.1 Compatible
4.1 兼容性
- HTML is valid and well-structured
- ARIA roles and attributes are used correctly (not to fix broken semantics)
- Status messages (success, error, loading) are announced to screen readers without focus change
Issues found:
- HTML有效且结构良好
- ARIA角色和属性使用正确（不用于修复语义化缺陷）
- 状态消息（成功、错误、加载）无需切换焦点即可被屏幕阅读器读取
发现的问题：
Prioritised Remediation List
优先级修复清单
| Priority | Issue | WCAG Criterion | Fix | Effort |
|---|---|---|---|---|
| 🔴 Critical | [Issue] | [e.g. 1.4.3 Contrast] | [Specific fix] | [Low/Med/High] |
| 🟡 Moderate | [Issue] | |||
| 🟢 Minor | [Issue] |
Priority definitions:
- 🔴 Critical: Blocks access for users with disabilities. Legal risk. Fix before launch.
- 🟡 Moderate: Significant friction. Fix in next sprint.
- 🟢 Minor: Best practice. Address in roadmap.
| 优先级 | 问题 | WCAG准则 | 修复方案 | 工作量 |
|---|---|---|---|---|
| 🔴 严重 | [问题] | [例如：1.4.3 对比度] | [具体修复方案] | [低/中/高] |
| 🟡 中等 | [问题] | |||
| 🟢 轻微 | [问题] |
优先级定义：
- 🔴 严重：阻碍残障用户访问，存在法律风险，需在上线前修复。
- 🟡 中等：造成显著使用障碍，需在下一个迭代中修复。
- 🟢 轻微：最佳实践建议，可在路线图中安排处理。
Quick Wins (Fix in < 1 hour)
快速修复（耗时<1小时）
[List any issues that are trivially fixable — e.g. adding alt text, fixing contrast with a colour swap, adding a attribute. These are easy to ship immediately.]
lang[列出可轻松修复的问题——例如添加alt文本、更换颜色修复对比度、添加属性。这些可立即上线。]
langTesting Recommendations
测试建议
- Manual keyboard test: Tab through the entire flow. Can you complete every task without a mouse?
- Screen reader test: VoiceOver (Mac/iOS), NVDA or JAWS (Windows). Is every piece of content and every action accessible?
- Colour contrast check: Use Stark (Figma plugin) or WebAIM Contrast Checker
- Automated scan: Axe DevTools or Lighthouse accessibility audit (catches ~30% of issues automatically)
- 手动键盘测试： 按Tab键遍历整个流程，无需鼠标即可完成所有任务吗？
- 屏幕阅读器测试： 使用VoiceOver（Mac/iOS）、NVDA或JAWS（Windows）。所有内容和操作是否均可访问？
- 颜色对比度检查： 使用Stark（Figma插件）或WebAIM对比度检查工具
- 自动化扫描： 使用Axe DevTools或Lighthouse可访问性审计（可自动检测约30%的问题）
Quality Checks
质量检查
- Issues are mapped to specific WCAG criteria
- Every critical issue has a specific fix recommendation
- Quick wins are separated from larger fixes
- Effort estimates are included for prioritisation
- Testing recommendations are included
- 问题已映射至具体WCAG准则
- 每个严重问题均有具体修复建议
- 快速修复与大型修复已区分开
- 包含工作量估算以辅助优先级排序
- 包含测试建议
Example Trigger Phrases
触发示例语句
- "Audit this design for accessibility"
- "Check WCAG compliance for [screen/component]"
- "Give me an a11y audit of [UI description]"
- "What accessibility issues does this design have?"
- “审计此设计的可访问性”
- “检查[页面/组件]的WCAG合规性”
- “为[UI描述]提供a11y审计报告”
- “此设计存在哪些可访问性问题？”