验收响应式网站时,应走完放大后的完整流程,不能只看窄屏截图。先约定有效视口变小时,文字、导航、询盘控件及必须二维呈现的数据怎样工作。
官方依据及事实范围
WCAG重排指导对纵向阅读使用等效320CSS像素宽度,并对确需二维布局的内容设例外。 原始参考 · 2026年10月17日读取.
已填写的验收例子
合成教学情景,不是真实客户、平台实测或业务结果。窄屏可横向滚动案例表。
| 合成测试条件 | 任务 | 预期观察 |
|---|---|---|
| 1280CSS像素视口放大400% | 阅读服务说明 | 等效约320CSS像素宽,不丢文字 |
| 同一放大上下文 | 开导航并找到询盘 | 控件可达,不被浮层挡住 |
| 必需数据表 | 读取长行 | 表格局部滚动,周边正文重排 |
| 出现验证错误 | 修改字段并重新提交 | 错误及修改控件仍可见可达 |
按步骤执行的交付程序
- 选择含长标题、导航、表单错误和密集数据的代表内容,记录浏览器、视口和缩放;设备像素不等于CSS像素。
- 在放大视图用键盘完成任务,区分必须二维的组件与普通文字;整个页面过宽不能统称例外。
- 记录失败状态及最终数据反馈,字体、横幅或固定控件变更后复测;放大与手机宽度测试互补。
怎样解释结果
页面适配390像素,也可能在放大后菜单遮住最后一条链接。必要表格可局部滚动,但不能因此让每段正文横向滚动。验收单位是信息不丢失的完整读者任务。
明确的验收终点
记录各步骤能否操作、重要内容是否仍可获取;视口算式只是测试设置,不是合规结果。
适用范围及未验证项目
教学矩阵,不是冻结首页审计或完整WCAG评估。浏览器界面及设备设置会影响有效视口,须实际记录。
下载已填写的双语验收记录 — 包含本页输入、步骤、预期及边界;是教学资料,不是执行程序。