处理带有复选框组的 ID 的语义适当方式

Question

我正在制作一个冗长的表单，其中包含用户可以检查多个答案的问题。基本代码如下（我使用 Semantic UI 进行基本样式设置）：

<form class="ui form new-form" action="#" method="get">
    <div class="ui form">
        <label>What fruits do you like?</label>
        <div class="field">
            <div class="ui checkbox">
                <input type="checkbox" tabindex="0" name="fruits" value="apples">
                <label>apples</label>
            </div>
        </div>
        <div class="field">
            <div class="ui checkbox">
                <input type="checkbox" tabindex="0" name="fruits" value="bananas">
                <label>bananas</label>
            </div>
        </div>
        <div class="field">
            <div class="ui checkbox">
                <input type="checkbox" tabindex="0" name="fruits" value="dylan-carty">
                <label>pears</label>
            </div>
        </div>
    </div>
</form>

我想使用 for/id for accessibility reasons 应用我的标签。

在这种情况下，顶部标签（“你喜欢什么水果？”）指的是整个复选框。如果这是一个选择/选项集，我知道您会将 ID 应用于包含 <select> 标记。我看到有三种可能的解决方案。

1. 将所有复选框放入<div>，并为其赋予与“你喜欢什么水果？”中for 值相同的ID标签。给每个复选框标签一个与其输入相匹配的 ID。这留下了 Semantic UI 现有的复选框样式，但我不知道它是语义。
2. 将所有复选框放入<fieldset> 标签中，并为其赋予与“你喜欢什么水果？”中for 值相同的ID标签。给每个复选框标签一个与其输入相匹配的 ID。这对我来说似乎更具语义性，但由于语义 UI 为 <fieldset> 提供了一种样式，因此我需要覆盖该样式。
3. 包装“你喜欢什么水果？”整个复选框周围的标签，如方法1here所示。

研究：

• 搜索了包含“多个复选框”的问题，但大多数处理的是每个复选框都是不同的、不属于较大组的一部分或如何选择它们的情况
• 一般搜索“最佳实践复选框组 id”并确实提出了this，这表明将<legend> 放入<fieldset> 中。但是，我不希望将<label> 用于我的所有其他输入，而仅将<legend> 标记用于复选框组。

在这种情况下是否存在普遍接受的“最佳实践”？

JSFiddle here

Answer 1

从语义的角度来看，您的研究已经给出了答案。

使用fieldset 和legend。

当涉及到语义时，忽略默认样式，无论是原生 HTML 还是您正在使用的任何 css 框架。

fieldset 和legend 标签正是为此目的而设计的。如果你想学究气，理论上表单的全部内容也应该包含在带有legend 的fieldset 标记中，因为那是字段的“超集”。

对你的 HTML 做一些最小的改变，你会想要这样的东西：

<form class="ui form new-form" action="#" method="get">
  <div class="ui form">
    <fieldset>
      <legend>What fruits do you like?</legend>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" tabindex="0" name="fruits" value="apples" id="fruit_apples">
          <label for="fruit_apples">apples</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" tabindex="0" name="fruits" value="bananas" id="fruit_bananas">
          <label for="fruit_bananas">bananas</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" tabindex="0" name="fruits" value="dylan-carty" id="fruit_pears">
          <label for="fruit_pears">pears</label>
        </div>
      </div>
    </fieldset>
  </div>
</form>

现在您需要将 CSS 调整为适合您的内容。

现在是棘手的部分。 Web 开发和编程通常是一种平衡行为。知道什么被认为是“最佳实践”很好，但知道这些是指导方针而不是规则也很重要。您可以根据这些准则确定要保留哪些内容以及要忽略哪些内容，以保持您的工作可维护和可交付。

我会怎么做？根据提供的信息，使用fieldset 和legend。