accessibility

核心能力

WCAG 2.2 全平台无障碍设计与合规审计

围绕 POUR 四大原则（Perceivable 可感知、Operable 可操作、Understandable 可理解、Robust 健壮），为 Web、iOS、Android 平台提供组件级无障碍设计规范、代码实现指引及合规性审计。支持从需求定义到代码落地的完整无障碍工作流。

适用场景

• 定义 Web / iOS / Android 组件的无障碍规格
• 审计现有代码中的无障碍障碍与合规缺口
• 实施 WCAG 2.2 新标准（如 Target Size Minimum、Focus Appearance）
• 将高层设计需求映射为技术属性（ARIA roles、accessibility traits、hints）

POUR 四大核心原则

原则	核心要求	典型实践
Perceivable（可感知）	信息可被所有用户感知	文本对比度 ≥ 4.5:1、图片替代文本、400% 缩放不失真
Operable（可操作）	界面可被所有用户操作	键盘可达、可见焦点、最小 24×24px 点击区域、拖拽替代方案
Understandable（可理解）	内容和操作逻辑清晰	一致的导航模式、描述性错误提示、避免重复输入
Robust（健壮）	兼容各类辅助技术	正确的 Name/Role/Value、aria-live 动态更新

五步法工作流

Step 1 — 识别组件角色

确定组件的功能语义（按钮、链接、选项卡等），优先使用最原生的语义化元素，避免过度依赖自定义 role。

Step 2 — 定义可感知属性

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

Step 3 — 实现可操作控件

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

Step 4 — 确保可理解逻辑

• 使用一致的导航模式
• 提供描述性错误信息和修正建议（SC 3.3.3）
• 实现"冗余输入"（SC 3.3.7），避免重复询问相同数据

Step 5 — 验证健壮兼容性

• 使用正确的 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 }

反模式检查清单

• Div-Buttons — 使用 <div> / <span> 模拟按钮但未添加 role 和键盘支持
• 纯颜色语义 — 仅用颜色变化（如红色边框）表示错误或状态
• 焦点逃逸的模态框 — 模态框未捕获焦点，允许键盘用户在后台导航（必须同时满足焦点捕获与 Escape / 关闭按钮退出）
• 冗余替代文本 — 在 alt 中使用"图片 of..."（屏幕阅读器已自动播报"图片"角色）

最佳实践检查清单

• [ ] 交互元素满足 24×24px（Web）或 44×44pt（Native）目标尺寸
• [ ] 焦点指示器清晰可见且对比度足够
• [ ] 模态框捕获焦点并在关闭时正确释放（Escape 键或关闭按钮）
• [ ] 下拉菜单和弹出面板关闭后将焦点还原到触发元素
• [ ] 表单提供基于文本的错误提示和建议
• [ ] 纯图标按钮有描述性文本标签
• [ ] 内容在文本缩放时正确重排

平台示例

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"
  }
)