Use explicit labeling for checkbox labelling in Discussion forums


Location: 06 Discussion - Add Post

Severity: 10

Description: The "follow this post" and "post anonymously" checkboxes are not properly labeled. Implicit labeling is used by putting the checkbox and the on-screen label in a label element. However, the label does not have a for attribute that corresponds to the ID of the input field. The checkbox is rendered without a label with JAWS 18 in IE11.

Pattern: None

Auditor Note: Developers must add a for attribute in the label element which equals to the ID of the input checkbox field that it labels. This will explicitly associate the label to the checkbox.
Compliant example:
<label for="follow" class="field-label label-inline">
<input id="follow" name="follow" class="field-input input-checkbox" checked="" type="checkbox">
<span class="field-input-label">
<span class="icon fa fa-star" aria-hidden="true"></span>follow this post

Internal Note: I initially considered this a bug with JAWS and IE since all other screen reader/browser combos have handled implicit labels on checkboxes forever. However, this condition is warned against in old accessibility specifications, so we must fix it.

Steps to Reproduce


Current Behavior


Expected Behavior


Reason for Variance


Release Notes


User Impact Summary



Farhanah Sheets
November 30, 2017, 2:17 PM

This was rolled to Prod on 11/22

Farhanah Sheets
November 20, 2017, 7:59 PM

After looking at WAI tutorials for labeling controls, I named the for/id the same as the "name" attribute that already existed. Tested locally with VoiceOver - need to sync up with to test on JAWS/IE.


Farhanah Sheets
November 20, 2017, 4:49 PM

Assuming that I should add in the id/for attributes directly to the checkboxes/labels here:

how explicit do these need to be - i.e "follow" like the example from above, or more specific with "follow this post"? Or something else entirely

Alexander Dusenbery
November 15, 2017, 4:47 PM

The trickiest part of this is coming up with a unique id for the input element. This is called "explicit labeling".

Your pinned fields
Click on the next to a field label to start pinning.


Farhanah Sheets


Mark Sadecki

Story Points