适合发布前验收。目标不是让每个状态看起来完全相同,而是让内容、操作和位置感在不同能力条件下保持等价。
| 维度 | 检查 | 通过标准 |
|---|---|---|
| 360px 移动端 | 导航变抽屉、表格局部滚动 | 正文无截断和横向溢出 |
| 键盘 | Tab、Enter、方向键、Esc | 焦点顺序与视觉顺序一致 |
| 读屏 | 标题、标签、状态、替代文本 | 不依赖颜色和位置描述 |
| 减少动态 | 关闭自动旋转与非必要过渡 | 状态变化仍可理解 |
| 打印 | 隐藏工具栏与浮层 | 保留标题、图注、表格和来源 |
一次移动端检查
- 01
从顶部进入
检查品牌、搜索和知识树触发器是否拥挤。
- 02
读完整篇正文
检查代码、表格、Mermaid 和媒体只在自身区域扩展。
- 03
打开所有浮层
确认居中、可关闭、焦点受控且背景不误触。
- 04
切换系统偏好
验证深色、减少动态和打印样式。
<button type="button" aria-expanded="false" aria-controls="chapter-navigation">
打开本文导航
</button>内容优先于交互成功
关键结论不得只在 hover、动画完成、Canvas 或 JavaScript 成功后出现。