12. ♿ 可访问性 Accessibility ★★★★★ Web 专属

🌏 Web 网页规范

  • 无障碍标准: WCAG 2.1 AAA 级 / WAI-ARIA 规范定义
  • 焦点控制: `tabindex` 顺次聚焦、`:focus-visible` 高亮
  • 屏幕阅读: 原生 NVDA / JAWS / VoiceOver 解析网页 DOM
  • 键盘控制: 全按键支持，多级快捷键映射配置

📱 App 移动端规范

  • 无障碍标准: 系统级无障碍服务规范 (iOS Accessibility)
  • 焦点控制: 屏幕辅助手势顺序扫视聚焦、无障碍元素标签
  • 屏幕阅读: 原生 iOS VoiceOver / Android TalkBack 朗读
  • 键盘控制: 外接实体键盘 / 大字号模式与高对比度开关

无障碍焦点控制环、语义化与 ARIA 标记

Focus Rings & Web ARIA Standards

好的设计服务于全人类。可访问性要求禁止直接隐藏 `:focus` 蓝圈，应通过 `focus-visible` 实现专为键盘用户准备的双环指示，并合理搭载 `aria-label` 让视障人群的屏幕阅读器可清晰解构界面。

LIVE PLAYGROUND: 键盘导航焦点指示环与 ARIA 属性可视化 切换环形态后，按 Tab 键聚焦测试；点击 ARIA 按钮可视化渲染
https://web.meta-ui.edu/accessibility

WAI-ARIA 常用无障碍标注提示 (ARIA Highlights)

提示1 aria-label

给无文字图标添加可读标签，屏幕阅读器识别按钮功能

提示2 aria-hidden

隐藏纯装饰图标，避免读屏软件读取无关符号

提示3 aria-live

实时播报动态更新内容，如表单提交结果、弹窗提示

📋 大模型统一 Prompt (LLM Prompt)