Semantically appropriate way to handle IDs with groups of checkboxes

Question

I am making a lengthy form which contains, among other things, questions where users may check multiple answers. The basic code is the following (I am using Semantic UI for basic styling):

<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>

I want to apply my labels using for/id for accessibility reasons.

In this case, the top label ("What fruits do you like?") refers to the entire set of check-boxes. If this were a select/option set, I understand you would apply the ID to the containing <select> tag. I see there being three possible solutions.

Put all the checkboxes in a <div>, and give it the same ID as the for value in the "What fruits do you like?" label. Give each checkbox label an ID that matches its input. This leaves Semantic UI's existing styling for checkboxes alone, but I don't know semantic it is.
Put all the checkboxes in a <fieldset> tag, and give it the same ID as the for value in the "What fruits do you like?" label. Give each checkbox label an ID that matches its input. This seems more semantic to me, but since Semantic UI gives <fieldset> a style, I then need to override that style.
Wrap the "What fruits do you like?" label around the entire set of checkboxes, as shown in Method 1 here.

Research:

Searched for questions containing "multiple checkboxes", but most deal with cases where each checkbox is distinct, not part of a larger group, or with how to select them
Searched in general for "best practices checkbox group id" and did come up with this, which suggests putting a <legend> inside a <fieldset>. However, I'd prefer not to use <label> for all my other inputs, and switch to a <legend> tag solely for checkbox groups.

Is there a generally accepted "best practice" in this scenario?

JSFiddle here

There is no *best practice* when comes to semantic, it seems you're on the right track though, keep reading - https://www.w3.org/WAI/tutorials/forms/ — Stickers, Feb 05 '18 at 21:32

Jon P · Accepted Answer · 2018-02-05T23:08:57.623

From a semantic viewpoint, your research has already given you the answer.

Use fieldset and legend.

When it comes to semantics ignore default styling, be it native HTML or any css framework you are using.

The fieldset and legend tags are designed for exactly this purpose. If you want to be pedantic, theoretically the entire contents of the form should also be wrapped in a fieldset tag with a legend as that is you "superset" of fields.

Making minimal changes to your HTML you would want something like:

<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>

Now you need to tweak the CSS to something that works for you.

Now comes the tricky part. Web development and programming in general is a balancing act. It's good to know what are considered "best practices", but it's also important to know these are guidelines, not rules. It's up to you to work out what to keep and what to ignore from these guidelines in order to keep your work maintainable and deliverable.

What would I do? Given the info provided, use fieldset and legend.

Semantically appropriate way to handle IDs with groups of checkboxes

1 Answers1