ui-accessibility-check-guide

**UI 无障碍检查操作手册** --- ### 一、准备阶段 1. **明确检查目标** - 确定本次检查的页面或功能范围（如登录页、商品详情页等）。 - 明确目标用户群体（如视障、听障、色盲、运动障碍等）。 2. **了解无障碍标准** - 学习并熟悉 WCAG 2.1（Web Content Accessibility Guidelines）A/AA 级标准。 - 重点掌握四大原则：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）、健壮（Robust）。 3. **准备检查工具** - 安装无障碍检测工具： - 浏览器插件：axe DevTools、WAVE、Lighthouse（Chrome） - 屏幕阅读器：NVDA（Windows）、VoiceOver（Mac/iOS）、TalkBack（Android） - 颜色对比度检测工具：WebAIM Contrast Checker、Color Contrast Analyzer - 准备测试设备：不同操作系统（Windows、macOS、iOS、Android）、不同屏幕尺寸。 4. **组建检查团队** - 至少包含前端开发、UI/UX 设计师、产品经理。 - 如有条件，邀请残障用户参与测试。 --- ### 二、执行阶段 #### 步骤 1：视觉无障碍检查 - [ ] 检查所有图片是否包含有意义的 `alt` 属性（装饰性图片设为 `alt=""`）。 - [ ] 验证文本与背景的对比度是否 ≥ 4.5:1（大文本 ≥ 3:1）。 - [ ] 确保信息不依赖颜色单独传达（如错误提示需加图标或文字）。 - [ ] 检查字体大小是否可缩放至 200% 而不影响布局。 #### 步骤 2：键盘可操作性检查 - [ ] 使用 Tab 键遍历所有交互元素（按钮、链接、表单等），确保顺序合理。 - [ ] 确认所有功能均可通过键盘完成（如下拉菜单、模态框）。 - [ ] 检查焦点可见性：焦点框清晰可见，无样式隐藏。 - [ ] 避免键盘陷阱（如陷入弹窗无法退出）。 #### 步骤 3：屏幕阅读器兼容性测试 - [ ] 使用 NVDA/VoiceOver 朗读页面，验证内容逻辑顺序是否合理。 - [ ] 检查表单控件是否有正确的标签（`<label>` 或 `aria-label`）。 - [ ] 验证动态内容（如 AJAX 加载）是否通过 `aria-live` 通知用户。 - [ ] 确保标题结构（`<h1>` 到 `<h6>`）层级清晰、无跳级。 #### 步骤 4：交互与反馈检查 - [ ] 所有错误提示清晰、具体，并提供修正建议。 - [ ] 操作反馈及时（如提交按钮 loading 状态）。 - [ ] 避免闪烁内容（频率 > 3Hz 可能引发癫痫）。 - [ ] 提供跳过导航链接（Skip to Content）。 #### 步骤 5：移动端无障碍检查 - [ ] 触控目标尺寸 ≥ 44×44px（iOS）或 48×48dp（Android）。 - [ ] 确保手势操作有替代方案（如滑动可点击按钮替代）。 - [ ] 测试 VoiceOver/TalkBack 在移动端的朗读体验。 --- ### 三、自检与修复阶段 1. **记录问题清单** - 按优先级分类：严重（阻塞使用）、高（影响体验）、中（建议优化）、低（细节改进）。 - 附截图、代码片段、复现步骤。 2. **修复与验证** - 开发/设计团队根据清单修复问题。 - 修复后重新运行工具检测 + 手动测试。 - 重点验证键盘与屏幕阅读器场景。 3. **生成无障碍报告** - 输出检查摘要：通过率、主要问题、改进建议。 - 附上 WCAG 对应条款（如 1.4.3 对比度）。 - 提供无障碍声明（Accessibility Statement）模板。 4. **建立长效机制** - 将无障碍检查纳入开发流程（如 PR 合并前必检）。 - 定期培训团队无障碍意识。 - 每季度进行一次全面复查。 --- **附：快速检查清单（每日可用）** ✅ 所有图片有 alt ✅ 颜色对比度达标 ✅ 键盘可操作全部功能 ✅

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本