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