AI Skills
accessibility

accessibility

热门

使用 WCAG 2.2 Level AA 标准设计、实现和审计包容性数字产品。利用此技能为 Web 生成语义 ARIA，为 Web 和原生平台（iOS/Android）生成无障碍特性。

23万Star
3.5万Fork
更新于 2026/7/21
获取 Skill源代码

相关 Skills

frontend-skill8.4万frontend-ui-engineering7.7万oversized-cursor3.6万
SKILL.md
readonly只读
name
accessibility
description

使用 WCAG 2.2 Level AA 标准设计、实现和审计包容性数字产品。利用此技能为 Web 生成语义 ARIA，为 Web 和原生平台（iOS/Android）生成无障碍特性。

无障碍（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 组件"] --> Platform{平台?}
  Platform -->|Web| ARIA["WAI-ARIA + HTML5"]
  Platform -->|iOS| SwiftUI["无障碍特性 + 标签"]
  Platform -->|Android| Compose["语义 + 内容描述"]

  ARIA --> AT["辅助技术（屏幕阅读器、开关）"]
  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">搜索产品</label>
  <input type="search" id="search-input" placeholder="搜索..." />
  <button type="submit" aria-label="提交搜索">
    <svg aria-hidden="true">...</svg>
  </button>
</form>

iOS：无障碍操作按钮

Button(action: deleteItem) {
    Image(systemName: "trash")
}
.accessibilityLabel("删除项目")
.accessibilityHint("从列表中永久删除此项目")
.accessibilityAddTraits(.isButton)

Android：无障碍开关

Switch(
    checked = isEnabled,
    onCheckedChange = { onToggle() },
    modifier = Modifier.semantics {
        contentDescription = "启用通知"
    }
)

应避免的反模式

  • Div 按钮：使用 <div> 或 <span> 处理点击事件，但未添加角色和键盘支持。
  • 仅用颜色表示含义：仅通过颜色变化（例如将边框变红）指示错误或状态。
  • 未限制模态框焦点：模态框未限制焦点，导致键盘用户在模态框打开时仍可导航背景内容。焦点必须被限制，并且可以通过 Escape 键或显式关闭按钮退出（WCAG SC 2.1.2）。
  • 冗余替代文本：在 alt 文本中使用“图像...”或“图片...”（屏幕阅读器已宣布角色“图像”）。

最佳实践检查清单

  • [ ] 交互元素满足 24x24px（Web）或 44x44pt（原生）的目标尺寸。
  • [ ] 焦点指示器清晰可见且高对比度。
  • [ ] 模态框在打开时限制焦点，并在关闭时干净释放（Escape 键或关闭按钮）。
  • [ ] 下拉菜单和菜单在关闭时将焦点恢复到触发元素。
  • [ ] 表单提供基于文本的错误建议。
  • [ ] 所有仅图标的按钮都有描述性文本标签。
  • [ ] 内容在文本缩放时正确重排。

参考

相关技能

  • frontend-patterns
  • design-system
  • liquid-glass-design
  • swiftui-patterns