Skip to content

Commit

Permalink
Checkbox Pattern: Update Labeling Guidance
Browse files Browse the repository at this point in the history
For issue #456, changed the roles, states, and properties subsection in aria-practices.html.

Changed the labeling guidance to say:

> * 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.
  • Loading branch information
mcking65 committed Nov 6, 2017
1 parent c583e9e commit 951e018
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion aria-practices.html
Original file line number Diff line number Diff line change
Expand Up @@ -538,7 +538,14 @@ <h4>Keyboard Interaction</h4>
<h4>WAI-ARIA Roles, States, and Properties</h4>
<ul>
<li>The checkbox has role <a href="#checkbox" class="role-reference">checkbox</a>.</li>
<li>The checkbox has an accessible label, preferably provided by a visible label associated using <a href="#aria-labelledby" class="property-reference" >aria-labelledby</a>.</li>
<li>
The checkbox has an accessible label provided by one of the following:
<ul>
<li>Visible text content contained within the element with role <code>checkbox</code>.</li>
<li>A visible label referenced by the value of <a href="#aria-labelledby" class="property-reference" >aria-labelledby</a> set on the element with role <code>checkbox</code>.</li>
<li><a href="#aria-label" class="property-reference">aria-label</a> set on the element with role <code>checkbox</code>.</li>
</ul>
</li>
<li>When checked, the checkbox element has state <a href="#aria-checked" class="state-reference" >aria-checked</a> set to <code>true</code>.</li>
<li>When not checked, it has state <a href="#aria-checked" class="state-reference" >aria-checked</a> set to <code>false</code>.</li>
<li>When partially checked, it has state <a href="#aria-checked" class="state-reference" >aria-checked</a> set to <code>mixed</code>.</li>
Expand Down

0 comments on commit 951e018

Please sign in to comment.