Tools
移动端无障碍检查清单
专为 iOS 和 Android 设备设计 · 基于 WCAG 2.1 AA / Section 508 标准
- 01 移动网页 触控目标、缩放与读屏手势
- 02 先自查 适合 H5 / 响应式站点
- 03 原生 APP 不支持上传安装包,走专家走查
移动端优化
7项核心测试
测试指南
0 / 7 项完成
0%
移动端无障碍核心测试
推荐测试工具
自动化测试
- axe DevTools Mobile - Android/iOS 自动扫描
- Chrome DevTools - 远程调试真机
手动测试
- VoiceOver (iOS) - 设置 → 辅助功能 → VoiceOver
- TalkBack (Android) - 设置 → 辅助功能 → TalkBack
调试工具
- iOS: 控制中心 → 屏幕录制
- Android: 快速设置 → 录屏
5步测试流程
- 开启屏幕阅读器 - 验证朗读顺序
- 用手指滑动浏览 - 检查焦点跳跃
- 测试触控目标 - 用 44×44px 网格覆盖检查
- 旋转屏幕 - 验证布局、弹窗、输入框
- 放大文字 - iOS/Android 系统设置中调整
常见移动端无障碍缺陷(Top 5)
❌ 触控目标太小
按钮 < 40px
修复: min-height: 44px; padding: 12px;
❌ 键盘遮挡输入框
弹出键盘后按钮被遮
修复: viewport-fit=cover + padding-bottom
❌ 焦点不可见
键盘焦点无边框
修复: button:focus { outline: 2px solid #0066cc; }
❌ 朗读顺序错乱
DOM 顺序 ≠ 视觉顺序
修复: 调整 HTML 顺序或用 aria-hidden
❌ 手势无替代
仅支持滑动切换
修复: 加「上一步」「下一步」按钮