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

Posted 2023-02-16

【中文标题】在图例元素中包装标签元素

【英文标题】：Wrapping a label element within a legend element

【发布时间】：2010-09-19 08:01:27

【问题描述】：

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

这就是我想做的事情：

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

【参考方案1】：

你的</fieldset>在哪里？

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

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

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

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

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

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

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

【讨论】：

投了赞成票。 RE：最后一段 - ...如果字段集中还有其他字段，那么这些字段的图例也会公布，这可能是不可取的。

关闭 FIELDSET 标记被文本编辑器咀嚼。我去添加它，它仍然存在，但不在代码块中。感谢您的回复 - 正是我希望的深思熟虑的输入。我在篱笆上，你雄辩地说服了我。谢谢！

附带说明，LEGEND 元素有点难以用 css 控制。我打算使用绝对定位，但遇到了问题。最后，我决定放弃 LEGEND 元素并使用带有特殊类的 LABEL。

酷，很高兴它有帮助......我只是不确定没有 是否还有更多字段。我也发现自己不时会滥用 html 元素。 :)

好吧，对于单选按钮组，建议使用字段集和图例组合，以使其符合 WCAG 并与屏幕阅读器配合使用。这有点棘手，因为您不能在其中使用 标签的图例上使用 wicket:for，所以我不确定屏幕阅读器将如何处理图例中的标签，如示例所示原始海报，因为这似乎是使用该组合的唯一方法。

【参考方案2】：

好吧，标签元素本身看起来不错——它是“formInfo”元素的描述，所以不用担心。然而，从语义上讲，legend 元素是什么意思？它应该是整个字段集的标题......