responsive-review

响应式无障碍审查

测试界面在真实用户会遇到的各种屏幕尺寸、缩放级别和方向下，是否都能保持无障碍体验。

流程

步骤 1：视口测试

在以下视口宽度下测试界面：

• 320px（小屏手机）
• 375px（标准手机）
• 768px（平板）
• 1024px（小屏桌面／平板横屏）
• 1280px（标准桌面）
• 1440px 及以上（大屏桌面）

在每个视口下，使用 responsive-accessibility，记录：

• 溢出或隐藏的内容
• 无法触及的交互元素
• 触控视口中小于 44×44px 的触控目标
• 未能自适应的导航
• 完全消失的功能

步骤 2：缩放测试

在 1280px 视口下，测试以下缩放比例：

• 100%（基准）
• 150%（低视力用户常用）
• 200%（WCAG 要求）

记录：

• 出现水平滚动的情况
• 溢出容器的文本
• 相互重叠的元素
• 占用过多空间的粘性页眉
• 超出屏幕范围的模态框或工具提示

步骤 3：字体缩放

使用 flexible-typography，将系统字体大小设为最大值进行测试。 记录：

• 无法缩放的文本
• 裁切或截断文本的容器
• 文本变大时出现问题的布局
• 无法随内容增高的固定高度元素

步骤 4：方向测试

分别在纵向和横向下测试。记录：

• 只能在一个方向下正常显示的内容
• 阻止屏幕旋转的方向锁定
• 在某个方向下出现问题或浪费空间的布局

步骤 5：密度检查

使用 information-density，在每个视口下检查：

• 默认密度是否适合当前设备？
• 用户能否调整密度？
• 紧凑密度能否保持触控目标的最小尺寸？
• 宽松密度能否避免过多滚动？

输出

提交一份响应式无障碍报告：

1. 视口矩阵 — 标明各视口宽度下核心任务的通过／失败情况
2. 缩放结果 — 列出 150% 和 200% 缩放下的问题
3. 字体结果 — 列出文本缩放失败的情况
4. 方向结果 — 列出纵向／横向显示问题
5. 修复清单 — 按严重性排序，并按以下类别分组：
   • 影响所有视口的修复
   • 仅针对移动端的修复
   • 仅针对缩放的修复