html - 在图例元素中包装标签元素

Question

我从来没有理由将标签元素放在图例元素中(从未真正考虑过或看到过)。但是对于我正在实现的设计，这样做很诱人。

这是我想做的事情:

<fieldset>
<legend><label for="formInfo">I would like information on</label></legend>
<select id="formInfo">
    <option value="Cats">Cats</option>
    <option value="Dogs">Dogs</option>
    <option value="Lolz">Lolz</option>
</select>
</fieldset>

它在 Firefox3、Safari、Opera 和 IE6/7 中按预期工作(单击标签聚焦相应的输入)并通过验证，但我只是想知道是否有任何已知原因(可访问性？语义？浏览器)问题)为什么不应该这样做

Answer 1

你的</fieldset>在哪里？

语义上， legend describes a fieldset , 正如 label描述单个字段。

字段集应该用于将语义相关的字段组合在一起(例如，“地址”字段集可能具有街道、城市和国家/地区的输入字段)。

假设您在字段集中有多个字段，那么执行您建议的操作在语义上没有意义——您需要创建单独的图例文本来描述字段集，然后为每个字段创建一个标签。

如果您只有一个字段，那么您根本不需要字段集或图例。

所以，基本上，您不应该做您正在做的事情。

如果你这样做是为了让额外的元素附加 CSS 规则或 Javascript 事件，你最好使用像 div 这样的通用元素。和 span这不会混淆文本到语音和其他非视觉用户代理。

即，输入 div或 span在可访问性/语义方面实际上是中立的(它没有任何暗示)与滥用语义元素(即使只是轻微的，如在这种情况下)，这可能会产生误导。想象一下您在文本到语音浏览器中的布局的最佳情况场景:文本被大声朗读两次，一次作为图例，一次作为标签——为什么有人想要短语“我想向他们大声朗读两遍有关的信息吗？特别是因为它仅在 select 中的选择上下文中才有意义控制。