Checkbox > Separate help text from label

Problem

• Help text is part of the label. Help text should be in its own <span> and associated with the input via aria-describedby.
• Help text not announced by VoiceOver (announced as part of the label in NVDA).

VoiceOver announces help text as "one more item" instead of actual content

Solution

Help text should be in its own <span> and associated with the input via aria-describedby.

For example:

<input type="checkbox" id="inputID" aria-describedby="helpText">
<label for="inputID">Input label</label>
<span id="helpText" class="help-text">Help text for the checkbox</span>

Produces:

Correct VoiceOver announcement

View example in Codepen →