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

StackOverflow https://stackoverflow.com/questions/238996

  •  04-07-2019
  •  | 
  •  

题

我从来没有理由将标签元素放在图例元素中（从未真正考虑过它或看过它）。但是根据我正在实施的设计，这很有吸引力。

这是我很想做的事情：

<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中按预期工作（点击标签聚焦相应的输入）并通过验证，但我只是想知道是否有任何已知的原因（可访问性？语义？浏览器问题）为什么不应该这样做

有帮助吗？

解决方案

你的</fieldset>在哪里？

从语义上讲， legend描述fieldset ，就像label描述单个字段一样。

字段集应该用于将语义相关的字段组合在一起（例如，<！> quot; address <！>; fieldset可能包含街道，城市和国家/地区的输入字段。）

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

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

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

如果您要使用额外的元素来附加CSS规则或Javascript事件，那么最好使用像div和span这样的通用元素，这些元素不会混淆文本到语音和其他非可视用户代理。

即，输入select或<=>在可访问性/语义方面实际上是中性的（它没有任何意义）与滥用语义元素（即使只是轻微地，如在这种情况下），这可能会产生误导。想象一下，即使是文本到语音浏览器中布局的最佳情况场景：文本大声朗读两次，一次作为图例，一次作为标签 - 为什么有人想要短语<！ >“我想了解<！>”的信息;大声朗读给他们两次？特别是因为它只适用于<=>控制中的选择。

其他提示

好吧，标签元素本身似乎很好 - 它是<！> quot; formInfo <！>的描述;元素，所以不用担心。然而，在语义上，关于legend元素的说法是什么？它应该是整个字段集的标题....

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top