题
我从来没有理由将标签元素放在图例元素中(从未真正考虑过它或看过它)。但是根据我正在实施的设计,这很有吸引力。
这是我很想做的事情:
<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
元素的说法是什么?它应该是整个字段集的标题....