跳到正文
cccskills
免费在 GitHub 公开

accessibility-review

Review a design or web page against WCAG 2.1 AA, an accessibility standard. Organize findings on contrast, keyboard access, forms, and screen reader behavior, with severity levels and practical recommendations for fixes.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff.

集成工具Figma
查看安装方法

适用场景

  • Review accessibility before design handoff
  • Check text and interface color contrast
  • Review keyboard navigation and focus behavior
  • Prioritize form and screen reader issues

包含的文件(1)

  • SKILL.md4.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

/accessibility-review

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Audit a design or page for WCAG 2.1 AA accessibility compliance.

Usage

/accessibility-review $ARGUMENTS

Audit for accessibility: @$1

WCAG 2.1 AA Quick Reference

Perceivable

  • 1.1.1 Non-text content has alt text
  • 1.3.1 Info and structure conveyed semantically
  • 1.4.3 Contrast ratio >= 4.5:1 (normal text), >= 3:1 (large text)
  • 1.4.11 Non-text contrast >= 3:1 (UI components, graphics)

Operable

  • 2.1.1 All functionality available via keyboard
  • 2.4.3 Logical focus order
  • 2.4.7 Visible focus indicator
  • 2.5.5 Touch target >= 44x44 CSS pixels

Understandable

  • 3.2.1 Predictable on focus (no unexpected changes)
  • 3.3.1 Error identification (describe the error)
  • 3.3.2 Labels or instructions for inputs

Robust

  • 4.1.2 Name, role, value for all UI components

Common Issues

  1. Insufficient color contrast
  2. Missing form labels
  3. No keyboard access to interactive elements
  4. Missing alt text on meaningful images
  5. Focus traps in modals
  6. Missing ARIA landmarks
  7. Auto-playing media without controls
  8. Time limits without extension options

Testing Approach

  1. Automated scan (catches ~30% of issues)
  2. Keyboard-only navigation
  3. Screen reader testing (VoiceOver, NVDA)
  4. Color contrast verification
  5. Zoom to 200% — does layout break?

Output

## Accessibility Audit: [Design/Page Name]
**Standard:** WCAG 2.1 AA | **Date:** [Date]

### Summary
**Issues found:** [X] | **Critical:** [X] | **Major:** [X] | **Minor:** [X]

### Findings

#### Perceivable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [1.4.3 Contrast] | 🔴 Critical | [Fix] |

#### Operable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [2.1.1 Keyboard] | 🟡 Major | [Fix] |

#### Understandable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [3.3.2 Labels] | 🟢 Minor | [Fix] |

#### Robust
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [4.1.2 Name, Role, Value] | 🟡 Major | [Fix] |

### Color Contrast Check
| Element | Foreground | Background | Ratio | Required | Pass? |
|---------|-----------|------------|-------|----------|-------|
| [Body text] | [color] | [color] | [X]:1 | 4.5:1 | ✅/❌ |

### Keyboard Navigation
| Element | Tab Order | Enter/Space | Escape | Arrow Keys |
|---------|-----------|-------------|--------|------------|
| [Element] | [Order] | [Behavior] | [Behavior] | [Behavior] |

### Screen Reader
| Element | Announced As | Issue |
|---------|-------------|-------|
| [Element] | [What SR says] | [Problem if any] |

### Priority Fixes
1. **[Critical fix]** — Affects [who] and blocks [what]
2. **[Major fix]** — Improves [what] for [who]
3. **[Minor fix]** — Nice to have

If Connectors Available

If ~~design tool is connected:

  • Inspect color values, font sizes, and touch targets directly from Figma
  • Check component ARIA roles and keyboard behavior in the design spec

If ~~project tracker is connected:

  • Create tickets for each accessibility finding with severity and WCAG criterion
  • Link findings to existing accessibility remediation epics

Tips

  1. Start with contrast and keyboard — These catch the most common and impactful issues.
  2. Test with real assistive technology — My audit is a great start, but manual testing with VoiceOver/NVDA catches things I can't.
  3. Prioritize by impact — Fix issues that block users first, polish later.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Retrieve financial data for Chinese markets and selected global markets using akshare-cli. Find stock prices, fund values, exchange rates, economic indicators, and financial news, then extract recent records or save results in common file formats.

中文简介正在准备中。当前显示英语简介。

  • Retrieve historical prices for Chinese, Hong Kong, or US stocks
  • Check fund and ETF net asset values
  • Look up exchange rates and economic indicators
TencentCloud/Octop99322026年10月18日 更新

Compare technology options, review a system design, or plan a new component from requirements and constraints. The skill organizes the reasoning into an architecture decision record, a document covering alternatives, trade-offs, consequences, and next steps.

中文简介正在准备中。当前显示英语简介。

  • Compare technologies before choosing one
  • Document the reasoning behind a design decision
  • Review a proposed system design
TencentCloud/Octop99322026年10月18日 更新

Turn existing or proposed business processes into reusable standard operating procedures. Organize steps, roles, conditions, and known exceptions while marking missing details, producing clear handover documents without inventing approvals or responsibilities.

中文简介正在准备中。当前显示英语简介。

  • Turning workflow notes into a standard operating procedure
  • Preparing process documentation for a handover
  • Clarifying assignment, execution, and review responsibilities
TencentCloud/Octop99322026年10月18日 更新

Analyze waiting, rework, and handoff waste in business processes using the facts provided. It proposes concrete improvements and, when verification is needed, defines measurement formulas and the minimum records required to assess specific issues.

中文简介正在准备中。当前显示英语简介。

  • Reviewing waiting and rework in an existing workflow
  • Requesting a fixed number of concrete improvement suggestions
  • Defining records to distinguish processing time from waiting
TencentCloud/Octop99322026年10月18日 更新

Assess operational risks in processes, projects, or suppliers using provided evidence. Separate observed facts from possible consequences, propose practical responses, and prepare concise summaries or risk registers without treating unknown controls as confirmed gaps.

中文简介正在准备中。当前显示英语简介。

  • Assess risks in business processes
  • Review operational risks in projects or suppliers
  • Prepare a risk register
TencentCloud/Octop99322026年10月18日 更新

Write reusable operating procedures for recurring business tasks and handovers. Organize prerequisites, roles, steps, success checks, and exception handling, while clearly separating approved recovery actions from decisions that still need confirmation.

中文简介正在准备中。当前显示英语简介。

  • Document a recurring business task
  • Prepare instructions for a handover
  • Clarify success checks and delivery points
TencentCloud/Octop99322026年10月18日 更新

查看 TencentCloud 的全部技能

报告此技能的问题