accessibility-ux

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Accessibility & UX/UI Design

技能：无障碍与UX/UI设计

When to Use

适用场景

Trigger when designing UI layouts, building components, reviewing user experience, or ensuring WCAG compliance in Code Apps, Canvas Apps, or PCF controls.

适用于在Code Apps、Canvas Apps或PCF控件中设计UI布局、构建组件、评估用户体验或确保WCAG合规性的场景。

⚠️ REQUIRED: Load Sub-Files Before Implementation

⚠️ 重要要求：实施前请加载子文件

SKILL.md is a summary only — it is NOT sufficient for implementation.

The detailed content (complete payloads, XML templates, working examples, edge-case handling) lives in sub-files in the same directory as this SKILL.md. Before writing any code, you MUST use

read_file

on the sub-files relevant to your task:

WCAG 2.2 AA Requirements — perceivable, operable, understandable, robust criteria with implementation guidance; contrast ratios
React Accessibility Patterns — semantic HTML, focus management, skip links, live regions, form a11y, dialogs, data tables, reduced motion; shadcn/ui + Radix notes
UX Patterns — loading/empty/error states, form design, navigation, toasts; typography, spacing, and dark mode design tokens
Visual Design Patterns — page composition recipes (dashboard, list, detail, form), visual hierarchy, spacing rhythm, color usage (60-30-10 rule), surface elevation, typography rules, border/divider guidance, interactive states, common visual mistakes
Component Recipes — component-level styling specifications (KPI cards, data cards, form fields, table headers/rows, badges, dialogs, navigation items, page headers, empty states, skeletons, toasts, toolbars) with exact token values, states, and makeStyles examples
Responsive Design — breakpoints, enterprise app responsive patterns (mobile / tablet / desktop)
Accessibility Testing — automated testing (axe-core, eslint-plugin-jsx-a11y, Lighthouse), manual checklist, Playwright pattern, top 10 failures

For Fluent UI V9 component accessibility (built-in ARIA, focus management via Tabster, high-contrast theme support), see code-apps/fluent-ui.md.

SKILL.md仅为摘要内容——不足以支撑实施工作。

详细内容（完整负载、XML模板、可用示例、边缘情况处理）存放在与本SKILL.md相同目录的子文件中。编写代码前，必须对与任务相关的子文件执行

read_file

操作：

WCAG 2.2 AA 要求 — 可感知、可操作、可理解、健壮性准则及实施指南；对比度比例
React无障碍设计模式 — 语义化HTML、焦点管理、跳转链接、实时区域、表单无障碍（a11y）、对话框、数据表、减少动画；shadcn/ui + Radix相关说明
UX设计模式 — 加载/空状态/错误状态、表单设计、导航、提示框；排版、间距及深色模式设计标记
视觉设计模式 — 页面布局方案（仪表盘、列表、详情页、表单）、视觉层级、间距节奏、色彩使用（60-30-10法则）、表面层级、排版规则、边框/分隔线指南、交互状态、常见视觉错误
组件实现方案 — 组件级样式规范（KPI卡片、数据卡片、表单项、表头/表行、徽章、对话框、导航项、页面标题、空状态、骨架屏、提示框、工具栏），包含精确的标记值、状态及makeStyles示例
响应式设计 — 断点、企业应用响应式模式（移动端/平板端/桌面端）
无障碍测试 — 自动化测试（axe-core、eslint-plugin-jsx-a11y、Lighthouse）、手动检查清单、Playwright测试模式、十大常见错误

关于Fluent UI V9组件的无障碍特性（内置ARIA、通过Tabster实现焦点管理、高对比度主题支持），请查看code-apps/fluent-ui.md。

Anti-Patterns

反模式

Using
```
<div>
```
or
```
<span>
```
as interactive elements (buttons, links) — not keyboard accessible, not announced by screen readers. Use semantic
```
<button>
```
and
```
<a>
```
elements instead.
Adding
```
role="button"
```
to a
```
<div>
```
instead of using
```
<button>
```
— you then need to manually handle Enter, Space, focus, and disabled states. Native elements get these for free.
Color as the only indicator of state (error = red, success = green) — invisible to colorblind users. Always pair color with icons, text, or patterns. All color-coded states must have a visible legend. Users will guess meanings based on common conventions (yellow = warning/draft, red = error). If your color means something domain-specific (e.g., yellow = non-billable), make it explicit with a legend or label — don't rely on color alone.
Missing skip-to-main-content link — keyboard users must tab through the entire navigation on every page. Add a visually-hidden skip link as the first focusable element.
Placeholder text as the only label — disappears on input, not reliably announced by screen readers. Always use a visible
```
<label>
```
element.
Auto-playing animations without respecting
```
prefers-reduced-motion
```
— causes motion sickness for vestibular disorder users. Wrap all animations in a media query check.
Generic link text ("Click here", "Read more") — meaningless out of context for screen reader users who navigate by links. Use descriptive text: "View project details".
Missing
```
aria-live
```
regions for dynamic content — screen readers miss toast notifications, status updates, and inline validation messages. Use
```
aria-live="polite"
```
for status,
```
aria-live="assertive"
```
for errors.

使用
```
<div>
```
或
```
<span>
```
作为交互元素（按钮、链接）——无法通过键盘访问，屏幕阅读器也不会播报。请改用语义化的
```
<button>
```
和
```
<a>
```
元素。
给
```
<div>
```
添加
```
role="button"
```
而非使用
```
<button>
```
——这种情况下需要手动处理回车键、空格键、焦点及禁用状态。原生元素默认具备这些功能。
仅用颜色作为状态标识（如错误=红色、成功=绿色）——色盲用户无法识别。务必将颜色与图标、文本或图案搭配使用。所有颜色编码的状态必须配有可见的图例说明。 用户会根据通用惯例猜测含义（如黄色=警告/草稿、红色=错误）。如果颜色代表特定领域含义（例如黄色=非计费项），请通过图例或标签明确说明——不要仅依赖颜色。
缺少“跳转到主内容”链接——键盘用户每次访问页面都必须按Tab键遍历整个导航栏。请添加一个视觉隐藏的跳转链接作为第一个可聚焦元素。
仅用占位符文本作为标签——输入时占位符会消失，且屏幕阅读器无法可靠播报。请始终使用可见的
```
<label>
```
元素。
未考虑
```
prefers-reduced-motion
```
便自动播放动画——会导致前庭功能障碍用户出现晕动症。请将所有动画包裹在媒体查询检查中。
使用通用链接文本（如“点击此处”、“阅读更多”）——对于通过链接导航的屏幕阅读器用户来说，脱离上下文后这些文本毫无意义。请使用描述性文本，例如“查看项目详情”。
动态内容缺少
```
aria-live
```
区域——屏幕阅读器会错过提示框通知、状态更新及内联验证消息。状态更新请使用
```
aria-live="polite"
```
，错误提示请使用
```
aria-live="assertive"
```
。