南宁企业的询价表可能同时询问产品资料类型与服务支持类型,两组里都有“其他”。如果只靠颜色或边框区分,用户可能不知道选择属于哪个问题。语义分组与清楚的组标题应共同表达关系,后台接收也要保留这种区别。

先确定每一组回答哪个问题

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处理承接者能够继续任务。
验收路径

交付时保存代表输入与预期接收结果,使用测试资料并在适当环境进行。避免把测试内容混进真实询盘台账。业务新增一组选项时,也应重新检查原字段是否重名或被覆盖,而不是只复制一块相似的界面。