Implicit labels

Just some general feedback on implicit labels, example:

<label><input type="checkbox" id="example" /> Example</label>

First and foremost, this doesn’t seem semantically correct, yet it validates fine. You would never wrap a heading tag around it’s entire content. Second, I think from an accessibility perspective, implicit shouldn’t be valid - especially in this instance where the label text is after the input. The meaningful order is disturbed which, in my mind, invalidates 1.3.2 Meaning Sequence.

Thanks.

While I agree with your point, two counter arguments are:

1. It’s widely used. Bootstrap encourages this syntax with checkboxes, so it’s used everywhere.

2. It’s convenient for dynamic content (i.e. you don’t have to generate IDs to use in the for attribute.

I see a label tag without a for attribute more like a grouping element (groups an input and text), rather than a label, but then the name doesn’t make sense. Maybe it should’ve been an entirely different element?

“First and foremost, this doesn’t seem semantically correct, yet it validates fine. You would never wrap a heading tag around it’s entire content.”

Can you explain this a little more?

“I think from an accessibility perspective, implicit shouldn’t be valid - especially in this instance where the label text is after the input. The meaningful order is disturbed which, in my mind, invalidates 1.3.2 Meaning Sequence.”

The position of the label text is unconnected with the way the <label> is associated with the <input>. The same thing could be achieved using an explicitly associated <label>:

<input type="checkbox" id="checkbox">
<label for="checkbox">Tick this</label>

When it comes to the visible label for checkboxes and radio buttons, the most common place to put it is to the right of the form field. Putting the label text after the <input> ensures that the DOM order matches the visual order, per success technique C27 for SC1.3.2.

Label text is not everything that’s inside the LABEL element. Putting a form field inside its corresponding LABEL element is just a standard-level convention for interlinking the field and the label without need for using unique identifiers to interlink them explicitly. There is nothing wrong with this, nor has this any negative impact on accessibility.

All valid points - thank you all for the response!

I’ve never thought of the label as a grouping element before. In this context, I have no issue. Thanks again!