---

name: accessibility description: 使用 WCAG 2.2 AA 级标准设计、实现和审计无障碍数字产品。使用此技能为 Web 和原生平台（iOS/Android）生成语义化 ARIA 和无障碍特性。 origin: ECC

无障碍（WCAG 2.2）

此技能确保数字界面对所有用户都是可感知的、可操作的、可理解的和健壮的（POUR），包括使用屏幕阅读器、开关控制或键盘导航的用户。它专注于 WCAG 2.2 成功标准的技术实现。

何时使用

• 为 Web、iOS 或 Android 定义 UI 组件规范时。
• 审计现有代码的无障碍障碍或合规差距时。
• 实现新的 WCAG 2.2 标准，如目标尺寸（最小值）和焦点外观时。
• 将高级设计需求映射到技术属性（ARIA 角色、特性、提示）时。

核心概念

• POUR 原则：WCAG 的基础（可感知、可操作、可理解、健壮）。
• 语义映射：使用原生元素而非通用容器以提供内置无障碍性。
• 无障碍树：辅助技术实际"读取"的 UI 表示。
• 焦点管理：控制键盘/屏幕阅读器光标的顺序和可见性。
• 标签与提示：通过 aria-label、accessibilityLabel 和 contentDescription 提供上下文。

工作原理

步骤 1：识别组件角色

确定功能用途（例如，这是按钮、链接还是标签页？）。在使用自定义角色之前，优先使用最语义化的原生元素。

步骤 2：定义可感知属性

• 确保文本对比度满足 4.5:1（正常文本）或 3:1（大文本/UI）。
• 为非文本内容（图片、图标）添加文本替代。
• 实现响应式重排（放大至 400% 不丢失功能）。

步骤 3：实现可操作控件

• 确保最小 24x24 CSS 像素的目标尺寸（WCAG 2.2 SC 2.5.8）。
• 验证所有交互元素可通过键盘到达并具有可见的焦点指示器（SC 2.4.11）。
• 为拖拽操作提供单指替代方案。

步骤 4：确保可理解的逻辑

• 使用一致的导航模式。
• 提供描述性错误消息和纠正建议（SC 3.3.3）。
• 实现"冗余输入"（SC 3.3.7）以防止重复要求相同数据。

步骤 5：验证健壮的兼容性

• 使用正确的 Name、Role、Value 模式。
• 为动态状态更新实现 aria-live 或实时区域。

无障碍架构图

flowchart TD
  UI["UI Component"] --> Platform{Platform?}
  Platform -->|Web| ARIA["WAI-ARIA + HTML5"]
  Platform -->|iOS| SwiftUI["Accessibility Traits + Labels"]
  Platform -->|Android| Compose["Semantics + ContentDesc"]

  ARIA --> AT["Assistive Technology (Screen Readers, Switches)"]
  SwiftUI --> AT
  Compose --> AT

跨平台映射

| 特性 | Web (HTML/ARIA) | iOS (SwiftUI) | Android (Compose) | | :--- | :--- | :--- | :--- | | 主标签 | aria-label / <label> | .accessibilityLabel() | contentDescription | | 辅助提示 | aria-describedby | .accessibilityHint() | Modifier.semantics { stateDescription = ... } | | 操作角色 | role="button" | .accessibilityAddTraits(.isButton) | Modifier.semantics { role = Role.Button } | | 实时更新 | aria-live="polite" | .accessibilityLiveRegion(.polite) | Modifier.semantics { liveRegion = LiveRegionMode.Polite } |

示例

Web：无障碍搜索

<form role="search">
  <label for="search-input" class="sr-only">Search products</label>
  <input type="search" id="search-input" placeholder="Search..." />
  <button type="submit" aria-label="Submit Search">
    <svg aria-hidden="true">...</svg>
  </button>
</form>

iOS：无障碍操作按钮

Button(action: deleteItem) {
    Image(systemName: "trash")
}
.accessibilityLabel("Delete item")
.accessibilityHint("Permanently removes this item from your list")
.accessibilityAddTraits(.isButton)

Android：无障碍开关

Switch(
    checked = isEnabled,
    onCheckedChange = { onToggle() },
    modifier = Modifier.semantics {
        contentDescription = "Enable notifications"
    }
)

应避免的反模式

• Div 按钮：使用 <div> 或 <span> 处理点击事件而不添加角色和键盘支持。
• 仅颜色表意：仅通过颜色变化指示错误或状态（例如将边框变红）。
• 未约束的模态焦点：模态框不捕获焦点，允许键盘用户跳出对话框。
• 缺失替代文本：图片没有 alt 属性或装饰性图片未标记为 aria-hidden="true"。
• 自动播放媒体：未提供暂停/停止控件的自动播放音频或视频。