accessibility

原文涵盖的主题

• 无障碍性（WCAG 2.2）
• 使用时机
• 核心概念
• 工作原理
• 步骤 1：识别组件角色
• 步骤 2：定义可感知属性
• 步骤 3：实现可操作控件
• 步骤 4：确保可理解逻辑

本技能确保数字界面对于所有用户（包括使用屏幕阅读器、开关控制或键盘导航的用户）具有可感知性、可操作性、可理解性和健壮性（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），避免重复询问相同数据。 使用正确的 Name, Role, Value 模式。 为动态状态更新实现 aria-live 或活动区域。 | 特性 | Web (HTML/ARIA) | iOS (SwiftUI) | Android (Compose) | | :--------------- | :----------------------- | :----------------------------------- | :---------------------------------------------------------- | | 主标签 | aria-label / | .accessibilityLabel() | contentDescription | | 辅助提示 | aria-describedby | .accessibilityHint() | Modifier.semantics { stateDescription = ... } | | 操作角色 | role="button" | .accessibilityAddTraits(.isButton) | Modifier.

这里只展示节选，请以完整原文和当前要求为准。