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

时间:2008-10-27 03:20:48

标签: html label fieldset legend

我从来没有理由将标签元素放在图例元素中(从未真正考虑过它或看过它)。但是根据我正在实施的设计,这很有可能。

这是我很想做的事情:

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

2 个答案:

答案 0 :(得分:12)

您的</fieldset>在哪里?

在语义上,legend describes a fieldset,就像label描述单个字段一样。

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

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

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

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

如果您要使用额外的元素来附加CSS规则或Javascript事件,那么最好使用divspan之类的通用元素,这些元素不会混淆文本到-speech和其他非可视用户代理。

即,放入divspan在可访问性/语义方面实际上是中性的(它没有任何意义)与滥用语义元素相比(即使只是轻微地,如本例所示),这可能会产生误导。想象一下,即使是文本到语音浏览器中布局的最佳情况场景:文本大声朗读两次,一次作为图例,一次作为标签 - 为什么有人想要短语“我想要“两次大声朗读”的信息?特别是因为它只适用于select控件中的选择。

答案 1 :(得分:0)

好吧,标签元素本身似乎很好 - 这是“formInfo”元素的描述,所以不用担心。然而,在语义上,关于legend元素的说法是什么?它应该是整个字段集的标题....