accessibility

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

You make UI usable by people with disabilities — blind and low-vision users with screen readers and magnification, keyboard and switch users, people with motor, hearing, vestibular, and cognitive disabilities. The target is WCAG 2.2 level AA, applied through each platform's own accessibility APIs.

你的目标是让残障人士能够使用 UI，包括使用屏幕阅读器和放大功能的盲人及低视力用户、键盘与开关控制用户，以及患有运动、听觉、前庭和认知障碍的人群。目标为 WCAG 2.2 AA 级，并通过各平台自身的无障碍 API 实现。

1. Pick the Mode

1. 选择模式

Decide from the request; do not ask.

Build mode — the task creates or changes UI. Apply the rules as constraints while writing the code: semantic elements, labels, focus, contrast, scaling. Mention a rule only when it changed a decision, in one line. No report.
Audit mode — the user asks to review, audit, or check accessibility, or prepares a release. Produce the report in Step 4.

根据请求直接决定，不要询问。

构建模式——任务涉及创建或修改 UI。编写代码时将这些规则作为约束条件应用：语义元素、标签、焦点、对比度和缩放。仅当某项规则影响了决策时，用一行说明。不要生成报告。
审计模式——用户要求审查、审计或检查无障碍能力，或正在准备发布。此时按照步骤 4 生成报告。

2. Detect the Platform

2. 检测平台

Read the manifest as prose and load only the matching guide:

Platform	Detected by	Load
Web	`package.json` with a web framework, or HTML templates	`references/web.md`
React Native / Expo	`package.json` with `expo` or `react-native`	`references/cross-platform.md`
Apple platforms	`*.xcodeproj` , `Package.swift` with an app target	`references/apple.md`
Android (Compose)	`build.gradle(.kts)` with Compose	`references/android.md`

React Native/Expo: add

references/apple.md

references/android.md

when behaviour differs per OS (screen reader focus, announcements, system settings). Expo web output also loads

references/web.md

. Flutter and other stacks:

references/cross-platform.md

将 manifest 作为文本读取，并且只加载匹配的指南：

平台	检测方式	加载
Web	包含 Web 框架的 `package.json` ，或 HTML 模板	`references/web.md`
React Native / Expo	`package.json` 中包含 `expo` 或 `react-native`	`references/cross-platform.md`
Apple 平台	`*.xcodeproj` ，或包含 app target 的 `Package.swift`	`references/apple.md`
Android（Compose）	包含 Compose 的 `build.gradle(.kts)`	`references/android.md`

React Native/Expo：当不同 OS 的行为存在差异时（屏幕阅读器焦点、播报、系统设置），额外加载

references/apple.md

或

references/android.md

。Expo Web 输出还需加载

references/web.md

。Flutter 和其他技术栈：加载

references/cross-platform.md

。

3. Rules

3. 规则

Each rule file has When building constraints, When auditing checks, and the WCAG success criteria it covers. Read a rule when the UI in front of you involves what its "Applies to" column names.

Rule	Impact	Applies to	File
Semantics, names, and roles	CRITICAL	every interactive element, custom controls, headings	`rules/semantics.md`
Keyboard and focus	CRITICAL	web, iPad/Mac/Android with keyboards, modals, menus	`rules/keyboard-focus.md`
Text alternatives	HIGH	images, icons, icon buttons, charts, maps	`rules/text-alternatives.md`
Contrast and colour	HIGH	text, icons, borders of controls, status colours	`rules/contrast-color.md`
Text scaling and reflow	HIGH	all text, layouts, fixed-height containers	`rules/text-scaling.md`
Forms and errors	HIGH	inputs, validation, sign-in, multi-step flows	`rules/forms.md`
Touch targets and gestures	HIGH	buttons, icons, drag, swipe, multi-finger gestures	`rules/targets-gestures.md`
Motion, flashing, and time	HIGH	animation, carousels, autoplay, timeouts	`rules/motion-time.md`
Announcements and status	MEDIUM	toasts, loading, live updates, async results	`rules/announcements.md`
Media	MEDIUM	video, audio, podcasts, animated explainers	`rules/media.md`

每个规则文件都包含构建时约束、审计时检查项及其涵盖的 WCAG 成功准则。当当前 UI 涉及某项规则的“适用范围”列中列出的内容时，读取该规则。

规则	影响	适用范围	文件
语义、名称与角色	严重	所有交互元素、自定义控件、标题	`rules/semantics.md`
键盘与焦点	严重	Web、iPad/Mac/Android 键盘操作、模态框、菜单	`rules/keyboard-focus.md`
文本替代内容	高	图片、图标、图标按钮、图表、地图	`rules/text-alternatives.md`
对比度与颜色	高	文本、图标、控件边框、状态颜色	`rules/contrast-color.md`
文本缩放与重排	高	所有文本、布局、固定高度容器	`rules/text-scaling.md`
表单与错误	高	输入框、验证、登录、多步骤流程	`rules/forms.md`
触控目标与手势	高	按钮、图标、拖拽、滑动、多指手势	`rules/targets-gestures.md`
动态效果、闪烁与时间限制	高	动画、轮播、自动播放、超时	`rules/motion-time.md`
播报与状态	中	Toast、加载、实时更新、异步结果	`rules/announcements.md`
媒体	中	视频、音频、播客、动态动画讲解	`rules/media.md`

4. Audit Mode

4. 审计模式

Scope: the files or screens named; otherwise every user-facing screen. In Claude Code, hand a whole-app or multi-screen audit to the
```
a11y-audit
```
agent when it is available, so the files it reads stay out of the main context.
Run the platform's automated checks first (listed in each platform guide) — then review by hand. Automated tools find only part of WCAG failures; most problems with names, focus order, and meaning need a person (or you, reading the code)
Check each screen against the rules whose "Applies to" matches it
Report, grouped by impact (CRITICAL first):

undefined

范围：指定的文件或屏幕；如果未指定，则涵盖所有面向用户的屏幕。在 Claude Code 中，如果可以使用
```
a11y-audit
```
agent，则将全应用或多屏审计交给它处理，使其读取的文件不会占用主上下文。
首先运行平台提供的自动化检查（各平台指南中均有列出），然后进行人工审查。自动化工具只能发现部分 WCAG 失败问题；名称、焦点顺序和含义方面的大多数问题都需要人工判断，或者由你通过阅读代码来判断。
根据每条规则的“适用范围”，逐屏检查所有匹配的规则。
按影响程度分组生成报告（严重问题优先）：

undefined

CRITICAL — Semantics

严重 — 语义

app/settings.tsx:58 — icon-only "trash" button has no accessible name → accessibilityLabel="Delete project" (WCAG 4.1.2)


End with the counts per impact and this limit, stated plainly: a code review cannot prove accessibility. Recommend testing the primary flows with the platform screen reader (VoiceOver, TalkBack, NVDA/JAWS), keyboard only, and the largest text size — and, where possible, with disabled users.

Fix nothing in audit mode unless asked; when asked, fix in impact order.

app/settings.tsx:58 — 仅含图标的“trash”按钮没有无障碍名称 → accessibilityLabel="Delete project"（WCAG 4.1.2）


最后给出各影响等级的问题数量，并明确说明这一限制：代码审查无法证明产品具备无障碍能力。建议使用平台屏幕阅读器（VoiceOver、TalkBack、NVDA/JAWS）、仅使用键盘以及最大文本尺寸测试主要流程；在可行的情况下，还应让残障用户参与测试。

除非用户明确要求，否则在审计模式下不要修复问题；收到修复要求时，按影响程度顺序处理。

Why It Matters

为什么这很重要

Around one in six people live with a significant disability (WHO), and accessible design helps everyone — captions in a noisy room, large targets on a moving train. It is also law in many markets: the European Accessibility Act applies to many digital products and services sold in the EU, and US courts and regulators apply the ADA to websites and apps. Both reference WCAG.

约每六人就有一人患有严重残疾（WHO），而无障碍设计也能帮助所有人——例如在嘈杂环境中提供字幕，或在行驶的列车上提供更大的点击目标。在许多市场中，无障碍设计还属于法律要求：European Accessibility Act 适用于许多在 EU 销售的数字产品和服务，美国法院与监管机构则将 ADA 应用于网站和 apps。两者都参考了 WCAG。

Boundaries

边界

UX psychology (cognitive load, decisions, persuasion) belongs to
```
ux-psychology
```
; this skill covers access. They overlap at target size, colour-only signals, and clear errors — follow whichever is stricter.
Legal compliance depends on jurisdiction and contract; this skill names the standards, it is not legal advice.

UX 心理学（认知负荷、决策、说服）属于
```
ux-psychology
```
；本 skill 专注于无障碍访问。二者在目标尺寸、仅依赖颜色的信号和清晰的错误提示等方面存在重叠——遵循其中更严格的要求。
法律合规取决于司法辖区和合同；本 skill 仅列举相关标准，不构成法律建议。