AgentSkillsCN

accessibility-review

针对WCAG 2.1 AA标准进行全面合规性审计，涵盖键盘导航、ARIA使用、色彩对比度以及屏幕阅读器支持等关键领域。适用于构建UI组件、审查表单，或在新功能上线前检测其无障碍适配性。

SKILL.md
--- frontmatter
name: accessibility-review
description: Audit for WCAG 2.1 AA compliance including keyboard navigation, ARIA usage, color contrast, and screen reader support. Use when building UI components, reviewing forms, or checking accessibility of new features.

Accessibility Review

Audit components and pages for WCAG 2.1 AA compliance as specified in AGENTS.md.

Scope

Review the specified files for:

1. Semantic HTML

  • •Proper heading hierarchy (h1 -> h2 -> h3, no skipping)
  • •Use of semantic elements (nav, main, article, section, aside)
  • •Lists for list content (ul, ol, dl)
  • •Buttons for actions, links for navigation
  • •Tables with proper headers and scope

2. Keyboard Accessibility

  • •All interactive elements focusable
  • •Logical tab order
  • •Visible focus indicators (check for outline-none without replacement)
  • •No keyboard traps
  • •Skip links for navigation
  • •Escape key closes modals/dialogs

3. ARIA Usage

  • •ARIA only when semantic HTML insufficient
  • •Proper ARIA roles, states, and properties
  • •ARIA labels on icon-only buttons
  • •Live regions for dynamic content
  • •Proper dialog/modal ARIA patterns

4. Forms

  • •Labels associated with inputs (htmlFor/id or wrapping)
  • •Error messages linked to fields (aria-describedby)
  • •Required fields indicated (aria-required)
  • •Fieldset/legend for radio/checkbox groups
  • •Autocomplete attributes where appropriate

5. Visual Design

  • •Color contrast ratios (4.5:1 text, 3:1 UI components)
  • •Not relying on color alone for meaning
  • •Respects prefers-reduced-motion
  • •Respects prefers-color-scheme
  • •Text resizable to 200% without loss

6. Images & Media

  • •Alt text on images (empty alt="" for decorative)
  • •Captions/transcripts for video/audio
  • •No auto-playing media with sound

7. Component-Specific (shadcn/Radix)

  • •Radix primitives used correctly (they handle a11y)
  • •Custom overrides don't break accessibility
  • •Tooltips accessible to keyboard users
  • •Dropdown menus with proper ARIA

Output Format

For each finding:

code
[WCAG: 1.1.1|2.1.1|etc] [LEVEL: A|AA|AAA]
File: path/to/component.tsx:lineNumber
Issue: Brief description
Impact: Who is affected and how
Fix: Code example or recommendation

Actions

  1. •Read component files in scope
  2. •Check for Radix/shadcn primitive usage
  3. •Verify keyboard interaction patterns
  4. •Analyze color usage and contrast
  5. •Review form patterns

Post-Review

Generate:

  • •Findings grouped by WCAG principle (Perceivable, Operable, Understandable, Robust)
  • •Priority fixes (Level A before AA)
  • •Component-specific recommendations
  • •Testing checklist for manual verification