无障碍 (WCAG 2.2) 是做什么的？
本技能确保数字界面对于所有用户（包括使用屏幕阅读器、开关控制或键盘导航的用户）具有可感知性、可操作性、可理解性和鲁棒性（POUR）。它专注于 WCAG 2.2 成功标准的技术实现。
使用时机
- 定义 Web、iOS 或 Android 的 UI 组件规范。
- 审核现有代码中的无障碍障碍或合规性差距。
- 实现新的 WCAG 2.2 标准，如目标尺寸（最小）和焦点外观。
- 将高级设计需求映射到技术属性（ARIA 角色、特性、提示）。
核心概念
- 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），避免重复询问相同数据。
第五步：验证鲁棒兼容性
- 使用正确的
名称、角色、值模式。 - 为动态状态更新实现
aria-live或活动区域。
无障碍架构图
flowchart TD
UI["UI 组件"] --> Platform{平台?}
Platform -->|网页| ARIA["WAI-ARIA + HTML5"]
Platform -->|iOS| SwiftUI["无障碍特性 + 标签"]
Platform -->|安卓| Compose["语义 + 内容描述"]
ARIA --> AT["辅助技术（屏幕阅读器、开关）"]
SwiftUI --> AT
Compose --> AT
跨平台映射
| 功能 | 网页 (HTML/ARIA) | iOS (SwiftUI) | 安卓 (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 } |
示例
网页：无障碍搜索
<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)
安卓：无障碍开关
Switch(
checked = isEnabled,
onCheckedChange = { onToggle() },
modifier = Modifier.semantics {
contentDescription = "启用通知"
}
)
应避免的反模式
- Div-按钮：使用
<div>或<span>处理点击事件，但未添加角色和键盘支持。 - 仅靠颜色传达含义：仅通过颜色变化（例如将边框变红）来指示错误或状态。
- 模态框焦点未受限：模态框未能限制焦点，导致键盘用户在模态框打开时可以导航到背景内容。焦点必须被包含在模态框内，并且可以通过
Escape键或显式的关闭按钮退出（WCAG SC 2.1.2）。 - 冗余替代文本：在替代文本中使用“...的图片”或“...的图像”（屏幕阅读器已经宣布“图像”角色）。
最佳实践检查清单
- 交互元素满足 24x24px（网页）或 44x44pt（原生）的目标尺寸。
- 焦点指示器清晰可见且高对比度。
- 模态框在打开时 包含焦点，并在关闭时干净地释放焦点（
Escape键或关闭按钮）。 - 下拉菜单和弹出框在关闭时将焦点恢复到触发元素。
- 表单提供基于文本的错误建议。
- 所有仅图标的按钮都有描述性文本标签。
- 文本缩放时内容能正确重排。
参考
相关技能
frontend-patternsdesign-systemliquid-glass-designswiftui-patterns