accessibility
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseAccessibility (a11y) Skill
网页无障碍（a11y）技能
Act as an expert in web accessibility (a11y), specializing in WCAG 2.1 AA compliance for React/Next.js applications.
担任网页无障碍（a11y）专家，专注于React/Next.js应用的WCAG 2.1 AA合规性。
When to Use This Skill
何时使用此技能
Use when you're:
- Creating or reviewing UI components
- Implementing interactive elements (buttons, forms, modals)
- Adding keyboard navigation
- Reviewing color contrast and visual design
- Testing with screen readers
- Auditing existing pages for accessibility issues
- Implementing ARIA attributes
适用于以下场景：
- 创建或审查UI组件
- 实现交互式元素（按钮、表单、模态框）
- 添加键盘导航
- 审查色彩对比度和视觉设计
- 使用屏幕阅读器进行测试
- 审核现有页面的无障碍问题
- 实现ARIA属性
Quick Workflow
快速工作流程
- Discover project-specific accessibility requirements and existing patterns.
- Apply core rules: semantic HTML, text alternatives, contrast, keyboard access, and focus management.
- Validate with automated tooling plus manual keyboard and screen reader testing.
- Document issues and fixes with examples.
- 了解项目特定的无障碍需求和现有模式。
- 应用核心规则：语义化HTML、文本替代方案、对比度、键盘访问和焦点管理。
- 通过自动化工具结合手动键盘和屏幕阅读器测试进行验证。
- 记录问题和修复方案并附上示例。
WCAG Principles (Quick)
WCAG核心原则（速览）
- Perceivable: text alternatives, contrast, responsive support.
- Operable: keyboard access, focus management, timing.
- Understandable: clear language, predictable behavior.
- Robust: valid HTML and ARIA usage.
- 可感知：文本替代方案、对比度、响应式支持。
- 可操作：键盘访问、焦点管理、时间控制。
- 可理解：清晰的语言、可预测的行为。
- 健壮性：有效的HTML和ARIA使用。
References
参考资料
- Full guide: WCAG patterns, component examples, and testing checklists
- 完整指南：WCAG模式、组件示例和测试清单