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

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描述afieldset,就像label描述单个字段一样.

应该使用字段集将语义相关的字段组合在一起(例如,"地址"字段集可能具有街道,城市和国家的输入字段).

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

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

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

如果您正在使用额外的元素来附加CSS规则或Javascript事件,那么最好使用类似的通用元素div,span这样就不会混淆文本到语音和其他非可视用户代理.

即,在可访问性/语义方面(无意义)与滥用语义元素(即使只是轻微地,如在这种情况下)相比,放入div或者span实际上是中立的,这可能具有误导性.想象一下在文本到语音浏览器中布局的最佳情况:文本大声朗读两次,一次作为图例,一次作为标签 - 为什么有人想要"我希望信息"这句话大声朗读他们两次？特别是因为它只在select控制选择的背景下才有意义.