南宁企业的询价表可能同时询问产品资料类型与服务支持类型,两组里都有“其他”。如果只靠颜色或边框区分,用户可能不知道选择属于哪个问题。语义分组与清楚的组标题应共同表达关系,后台接收也要保留这种区别。
先确定每一组回答哪个问题
W3C表单分组教程介绍使用fieldset关联一组控件,并以legend提供组标题。这里借其基本语义设计一个自拟示例,重点是关系可理解,不假设所有表单都需要同样结构,也不代表添加标签就完成全部无障碍验收。
<fieldset>
<legend>希望了解的资料类型</legend>
<label><input type="checkbox" name="material" value="overview">产品概览</label>
<label><input type="checkbox" name="material" value="other">其他资料</label>
</fieldset>
<fieldset>
<legend>希望讨论的支持类型</legend>
<label><input type="checkbox" name="support" value="clarify">需求澄清</label>
<label><input type="checkbox" name="support" value="other">其他支持</label>
</fieldset>同名选项需要上下文
| 位置 | 核查关系 | 不能只检查 |
|---|---|---|
| 组标题 | 说明这组在问什么 | 字号或边框颜色 |
| 选项标签 | 准确代表选择含义 | 是否有勾选动画 |
| 字段标识 | 保留不同问题的答案 | 只看其他二字 |
| 接收结果 | 可分辨用户选择属于哪组 | 页面上看起来正常 |
测试要从输入走到阅读结果
- 用键盘进入各组,检查焦点与标签。
- 检查控件的可访问名称和所属分组。
- 组合勾选不同答案,核对测试接收结果。
- 提示错误时明确相关问题和修正方式。
- 检查移动端分组标题是否仍可理解。
样式已经有大标题,还要检查代码关系吗?
需要。视觉分组与程序可识别关系可能不同,应分别检查。
用了fieldset就能省略每项标签吗?
不能。组标题与具体控件标签承担不同任务。
1理解读者知道每组在问什么。
2操作各选项可到达并选择。
3接收答案保留正确关系。
4处理承接者能够继续任务。
交付时保存代表输入与预期接收结果,使用测试资料并在适当环境进行。避免把测试内容混进真实询盘台账。业务新增一组选项时,也应重新检查原字段是否重名或被覆盖,而不是只复制一块相似的界面。