下载掌阅APP，畅读海量书库
立即打开
先从案例入手，实现一个图3-32所示带有多个选择项的问答布局。
图3-32 问答布局效果示意
一定有很多人会使用如下所示的HTML结构：
对于以视觉为主要感官的用户群体来讲，上述代码的最终视觉呈现是没有问题的，上面有问题信息，下面有单选选项。但是，对于以触摸为主的盲人用户，上述代码就有问题。因为最开始的问题和下面的两个单选选项是有关联的，或者说带有“组”的关系，而上述HTML代码并未建立起对应的联系。此时，当用户触摸（移动端交互方式）两个单选按钮的时候，听到的仅仅是<label>元素中的“有”和“没有”两个词，至于对应的问题是什么，不得而知，或者是触摸到了问题，但是并不知道对应的选项是什么，这时用户体验就不好。
那么，如何解决这个问题呢？
使用<fieldset>元素和<legend>元素，HTML代码如下：
其中，<fieldset>元素表示组的意思，专门用在<form>表单元素中，表示一组内容；<legend>元素表示这个组的标题，在这个例子中，就是问题内容。
此时，再使用Tab键导航（桌面端交互方式）<form>表单（单选按钮聚焦，屏幕阅读识别），就会清晰读出“你有港澳通行证吗？”。这样，用户就能清楚地知道，下面的“有”和“没有”对应的到底是什么，就不会有困扰了。
根据我使用桌面端VoiceOver（现在叫作“旁白”）的实地测试结果，聚焦并选中第二个单选项的时候，朗读的内容是“没有，已选择，单选按钮，第2项（共2项），你有港澳通行证吗？，组”（如图3-33所示），是不是非常好理解？（注意，随着软件的升级迭代，朗读的文本内容会有所变化。）
图3-33 <fieldset>和<legend>元素应用下的旁白朗读效果
当然，并不是说只要有表单就一定要使用<fieldset>元素和<legend>元素。那么，什么时候需要使用，什么时候不需要使用呢？
核心要点就是表单中的内容中有没有“分组”的概念，例如要实现一个搜索输入框表单，就没必要使用<fieldset>元素和<legend>元素，但是类似于外卖或网购的收货地址的填写就非常适合使用它们，因为省、市、区这三个下拉框和最后的详细地址输入框都属于“地址”这个主题，案例如下：
