Checkbox Example: Inconsistency between labeling guidance and implementation

[mcking65]

Bart Simons bart@anysurfer.be wrote in a post to the public ARIA mailing list:

The checkbox design pattern (http://www.w3.org/TR/wai-aria-practices-1.1/#checkbox) indicates to use aria-labelledby to provide an accesssible label for the checkbox:
"The checkbox has an accessible label, preferably provided by a visible label associated using aria-labelledby.".

In the example (http://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html) is written "The accessible name comes the child text content of the div[role="checkbox"] element."
and aria-labelledby is not applied in this example.

A quick test with JAWS17/18:

• in IE11: labels are not recognised correctly. Aria-labelledby would be better.
• in firefox: the content of the div-element with role="checkbox" is indeed recognised as the label

Suggestion is to align the example with the design pattern:

• eitehr remove the suggestion of aria-labelledby from the design pattern
• or update the example to include aria-labelledby:
  <li><div role="checkbox" aria-checked="false" tabindex= "0" aria-labelledby="sand1">
<span id="sand1">Lettuce</span>
</div></li>
  and similar for the other three check boxes.

[jongund]

I think what the design pattern says is that the grouping element should have a aria-labelledby:

        <h3 id="group_label">Sandwich Condiments</h3>
        <div>
          <ul class="checkboxes" aria-labelledby="group_label">
            <li><div role="checkbox" aria-checked="false" tabindex= "0">Lettuce</div></li>
            <li><div role="checkbox" aria-checked="true"  tabindex= "0">Tomato</div></li>
            <li><div role="checkbox" aria-checked="false" tabindex= "0">Mustard</div></li>
            <li><div role="checkbox" aria-checked="false" tabindex= "0">Sprouts</div></li>
          </ul>
        </div>

[mcking65]

Related feedback from @devarshipant in issue #454:

http://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/#checkbox

Under 'WAI-ARIA Roles, States, and Properties' --

One of the list items read:

The checkbox has an accessible label, preferably provided by a visible label associated using aria-labelledby.

Note that using only aria-labelledby does not give additional clickable area to mouse users. There are other valid techniques to create programmatic relationships besides labelledby.

[mcking65]

@devarshipant, with commit 951e018, the labeling guidance in the checkbox pattern now says:

• The checkbox has an accessible label provided by one of the following:
  • Visible text content contained within the element with role checkbox.
  • A visible label referenced by the value of aria-labelledby set on the element with role checkbox.
  • aria-label set on the element with role checkbox.

[devarshipant]

Great! Much better now. Thanks @mcking65.