跳到主要内容
知知仓学习社ZHICANG

ui-a11y

Audit a component or page for accessibility issues and fix them

不碰外部（只输出文字）无严重或高危命中sickn33/agentic-awesome-skills

它会碰到什么

扫了多少1 个文本文件，4 KB
它会碰到什么不碰外部（只输出文字）
命中总数0 处
命中统计严重 0 · 高 0 · 中 0 · 低 0

这一栏是扫描器报的事实，不是结论。命中多不等于有毒（安全工具、规则库、示例脚本本来就会包含危险写法），命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系，需要你自己看。

技能内容

Accessibility Audit

When to Use

Use this skill when you need audit a component or page for accessibility issues and fix them.

When NOT to use

  • For general design system compliance review → use /ss-review
  • For Nielsen UX heuristics → use /ss-audit
  • For non-StyleSeed code (no data-slot, no semantic tokens) — assumes StyleSeed conventions
  • For runtime testing — this is a static code audit, not a screen-reader simulation

Target: $ARGUMENTS

Audit Criteria

WCAG 2.2 AA Compliance

1. Perceivable

  • Color contrast: Text must meet 4.5:1 (normal) or 3:1 (large/bold text)
  • Check text-muted-foreground (#717182) on bg-background (#FFFFFF) = 4.6:1 (passes)
  • Check text-brand on white (verify contrast with your skin's brand color)
  • Flag any custom colors that don't meet ratio
  • Non-text contrast: UI controls/graphics must meet 3:1
  • Text alternatives: All <img> need alt, icons need aria-label when meaningful
  • Color independence: Don't convey info by color alone (add icons/text)

2. Operable

  • Touch targets: Minimum 44x44px (min-h-11 min-w-11)
  • Common violation: h-9 (36px) buttons — should be h-11
  • Icon buttons need explicit size: w-11 h-11
  • Keyboard navigation: All interactive elements must be keyboard-accessible
  • Tab order should be logical
  • focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
  • Motion: Animations must respect prefers-reduced-motion
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

3. Understandable

  • Labels: Form inputs must have visible labels or aria-label
  • Error messages: Form errors must be programmatically associated (aria-describedby)
  • Language: <html lang="en"> (or appropriate language code for your project)

4. Robust

  • Semantic HTML: Use appropriate elements (<button>, <nav>, <main>, <header>)
  • ARIA: Use Radix UI components (they handle ARIA automatically)
  • Roles: Custom interactive elements need proper role attributes

Design System Token Reference

| Token | Minimum Contrast | Note |

|-------|-----------------|------|

| --foreground | 7:1+ | Body text — verify with your skin |

| --muted-foreground | 4.5:1+ | Secondary text — verify with your skin |

| --brand | 4.5:1+ | Accent — verify with your skin's brand color |

| --destructive | 4.5:1+ | Error — verify with your skin |

| --success | 3:1+ | Large text/icons only — verify with your skin |

| --warning | 4.5:1+ | Warning text — some skins need a darker variant |

Output

  1. Issues found: List with severity (Critical/Major/Minor)
  2. Auto-fixes: Apply fixes directly where possible
  3. Manual review needed: Flag items that need human judgment

Example

User request:

> Audit a component or page for accessibility issues and fix them.

Limitations

  • Use this skill only when the task clearly matches its upstream source and local project context.
  • Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
  • Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

想直接用这个技能？

本站把开放许可（MIT / Apache 等）的技能按仓库打包整理到网盘，点一下转存到你自己的网盘，不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接，不打包。

去原始仓库

它属于哪个仓库

仓库sickn33/agentic-awesome-skills
星标★ 46,490
本站分层T1
该仓技能数6676
原文件路径plugins/agentic-awesome-skills/skills/ui-a11y/SKILL.md

同一个仓库里的其他技能

看这个仓库的全部 6676 个技能

同名技能的其他版本

有 6 个不同仓库或目录里都有叫 ui-a11y 的技能。它们内容并不相同，别混用：