home / skills / protagonistss / ithinku-plugins / ui-design-a11y

ui-design-a11y skill

safe

/plugins/ui-design/skills/ui-design-a11y

This skill helps you audit and fix web accessibility issues for WCAG compliance, providing actionable code fixes and guidance.

npx playbooks add skill protagonistss/ithinku-plugins --skill ui-design-a11y

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.1 KB

---
name: ui-design-a11y
description: 无障碍设计审查与修复能力。
---

# Accessibility (A11y) Skill

## 技能描述
专注于 Web 无障碍标准 (WCAG) 的检查与修复。帮助开发者发现潜在的访问性问题并提供修复代码。

## ♿ 常用指令

### 1. 快速审查 (Audit)
```bash
/ui-design 审查这段代码的无障碍问题
# 关注点:
# - 语义化标签 (nav, main, aside)
# - ARIA 属性使用
# - 键盘可访问性 (tabindex, focus)
# - 图片 Alt 文本
```

### 2. 对比度检查 (Contrast)
```bash
/ui-design 检查这个配色的对比度是否符合 WCAG AA 标准
```

### 3. 修复建议 (Fix)
```bash
/ui-design 修复这个表单的 Label 关联和 ARIA 描述问题
/ui-design 为这个模态框添加 Focus Trap (焦点陷阱) 功能
```

## ✅ Self-Checklist (自查清单)

在提交代码前，请检查：
- [ ] 所有的 `<img>` 都有 `alt` 属性吗？
- [ ] 所有的表单输入框都有对应的 `<label>` 吗？
- [ ] 按钮是否有清晰的文字描述（避免仅图标）？
- [ ] 页面是否可以仅用键盘顺畅操作？
- [ ] 颜色对比度是否足够清晰？

Overview

This skill provides focused web accessibility (A11y) audits and repair guidance based on WCAG best practices. It helps developers find semantic, ARIA, keyboard, and contrast issues and delivers actionable code-level fixes. The goal is to make interfaces more usable for people with disabilities while simplifying developer review workflows.

How this skill works

The skill inspects HTML, CSS, and common UI components to detect semantic tag misuse, missing ARIA attributes, keyboard navigation gaps, and insufficient color contrast. It reports specific failures, prioritizes issues by impact, and generates concrete remediation steps or code snippets (labels, alt text, ARIA roles, focus management, contrast adjustments). It can also propose keyboard-focus traps for modals and fixes for form-label associations.

When to use it

Pre-merge code reviews to catch accessibility regressions early
When validating color palettes or ensuring WCAG AA contrast compliance
During UI component development (buttons, forms, modals, nav) to enforce semantics
Before product launches to perform a final a11y audit and remediation pass
When onboarding design or dev teams to establish accessible patterns

Best practices

Prefer native semantic elements (nav, main, header, button) over role-only solutions
Ensure every non-decorative image has a meaningful alt attribute
Associate labels with inputs using for/id or <label> wrapping, and provide aria-describedby when needed
Validate keyboard order and focus visibility; implement focus trap for modals and restore focus on close
Test color contrast against WCAG AA standards and provide text alternatives for color-coded information

Example use cases

Audit a form to link labels and inputs, fix ARIA descriptions, and output corrected JSX/HTML
Check a new color theme for WCAG AA contrast and suggest adjusted hex values
Add a focus trap and keyboard handling to a custom modal component with code examples
Review a navigation component for proper semantic structure and keyboard access
Scan pages for missing alt text and generate suggested alt strings for images

FAQ

Which WCAG levels does the skill target?

The skill focuses primarily on WCAG 2.1 AA recommendations, with checks that surface issues related to A and AA where applicable.

Can it provide code snippets for different frameworks?

Yes. It provides framework-agnostic HTML guidance and can generate examples in TypeScript/JSX or vanilla HTML/CSS on request.