accessibility

用途

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

适用场景包括：

为 Web、iOS 或 Android 定义 UI 组件规范。
审计现有代码中的无障碍障碍或合规缺口。
实现 WCAG 2.2 新标准，如最小目标尺寸（Target Size）和焦点外观（Focus Appearance）。
将高层设计需求映射为技术属性（ARIA 角色、traits、hints）。

核心概念

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

使用方式（工作步骤）

识别组件角色：确定功能用途（按钮、链接还是标签页？），优先使用最语义化的原生元素，再考虑自定义角色。
定义可感知属性：文本对比度满足 4.5:1（普通）或 3:1（大号/UI）；为非文本内容（图片、图标）添加文本替代；实现响应式重排（最高 400% 缩放不丢失功能）。
实现可操作控件：确保最小 24x24 CSS 像素目标尺寸（WCAG 2.2 SC 2.5.8）；验证所有交互元素可通过键盘到达并有可见焦点指示（SC 2.4.11）；为拖拽操作提供单指针替代方案。
确保可理解逻辑：使用一致的导航模式；提供描述性错误消息与修正建议（SC 3.3.3）；实现“冗余输入”（SC 3.3.7）避免重复索取同一数据。
验证健壮兼容性：使用正确的 Name、Role、Value 模式；为动态状态更新实现 aria-live 或实时区域。

跨平台映射

功能	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> 处理点击事件，却不添加角色和键盘支持。
仅靠颜色传达含义：只用颜色变化（如边框变红）表示错误或状态。
模态框焦点未约束：模态框打开时未捕获焦点，键盘用户可导航到背景内容。焦点必须被约束，并可通过 Escape 键或显式关闭按钮退出（WCAG SC 2.1.2）。
冗余替代文本：在 alt 文本中使用“Image of...”或“Picture of...”（屏幕阅读器已会播报“图像”角色）。

最佳实践清单

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

参考

WCAG 2.2 Guidelines
WAI-ARIA Authoring Practices
iOS Accessibility Programming Guide
iOS Human Interface Guidelines - Accessibility
Android Accessibility Developer Guide

技能介绍

用途

核心概念

使用方式（工作步骤）

跨平台映射

示例

应避免的反模式

最佳实践清单

参考

相关技能