买家点开放大图,却找不到关闭方式,或者关闭后失去原来位置,都会打断阅读。临沂企业建设产品网站时,应把放大、切换和返回作为同一个任务测试。本文不要求所有图库使用相同组件,实际交互需按选用模式核对。

先明确浮层是不是模态

W3C的模态对话框模式说明焦点应进入对话框、操作保持合理边界,并提供关闭与返回安排。不能只给普通div加一层遮罩就认为完成无障碍。若采用不同模式,应核对对应行为,不把本文当成可直接部署的完整实现。

  1. 从一张实际缩略图打开。
  2. 确认能识别当前图片与图注。
  3. 使用键盘操作可用功能并找到关闭。
  4. 关闭后回到合理位置,继续原任务。

图像内容与操作内容分别检查

图库验收卡
维度检查方向常见遗漏
对象图注与型号、配置对应换图后仍是上张说明
焦点打开、操作与返回合理焦点掉到背景或消失
关闭可理解控件与适用键盘行为只能精确点遮罩边缘
手机图像与控件不互相遮挡横竖屏或长图无法查看

把最困难的素材放进测试

样本清单
宽图、竖图和长图:
长型号与长图注:
关键细节在边缘的图片:
只有一张图及多张图:
无法加载的受控样本:
关闭后的焦点与页面位置:

图片无法加载时,也应保留理解对象和返回的路径。不要让无限加载动效遮住关闭按钮。具体错误处理需结合组件实现;测试可使用受控样本,不修改真实产品原件来制造故障。图注与文字替代帮助理解,但也不能补造图中没有的功能。

1内容审核图片、图注与资料范围一致。
2基本操作打开、切换、关闭符合预期。
3替代操作键盘与窄屏条件下仍可完成。
4异常与返回失败有说明,离开后能继续阅读。
交付路线
加上关闭按钮就完成了吗?

还需检查焦点、操作、返回和真实内容。单个控件存在不代表整条路径可用。

可不可以直接链接原图?

可按任务选择,但应让目标与返回行为清楚,不让用户误以为仍在原图库交互。