Accessibility

ARIA toggle fields have an accessible name

Makes certain that each ARIA toggle field has an accessible name.

The ARIA switch role is identical to the checkbox role, except instead of being "checked" or "unchecked", it is either "on" or "off". Like the checkbox role, the aria-checked attribute is required. The two possible values are true and false. Unlike an or role="checkbox", there is no indeterminate or mixed state. The switch role does not support the value mixed for the aria-checked attribute; assigning a value of mixed to a switch instead sets the value to false.

Fixing the problem

The aria-toggle-field-name contains five markup patterns that pass testing criteria:

<!-- checkbox -->
<div id="pass1" role="checkbox">Newspaper</div>
<!-- menuitemcheckbox -->
<ul role="menu">
<li id="pass2"  role="menuitemcheckbox"  aria-label="Word wrap"  aria-checked="true"></li>
</ul>
<!-- menuitemradio -->
<p id="pass3Label">Sans-serif</p>
<ul role="menu">
<li id="pass3"  role="menuitemradio"  aria-labelledby="pass3Label"  aria-checked="true"></li>
</ul>
<!-- radio -->
<div role="radiogroup">
<div id="pass4"  role="radio"  aria-checked="false"  tabindex="0"  title="Regular Crust"></div>
</div>
<!-- switch -->
<div id="pass5"  role="switch"  aria-checked="true"  aria-label="Toggle blue light:">
<span>off</span>
<span>on</span>
</div>

Incorrect markup solutions

The aria-toggle-field-label contains five markup patterns that fail testing criteria:

<!-- checkbox -->
<div id="fail1" role="checkbox" aria-labelledby="does-not-exist"></div>
<!-- menuitemcheckbox -->
<ul role="menu">
<li id="fail2" role="menuitemcheckbox" aria-checked="true"></li>
</ul>  #3
<!-- menuitemradio -->
<ul role="menu">
<li id="fail3" role="menuitemradio" aria-checked="true"></li>
</ul>  #4
<!-- radio -->
<div role="radiogroup">
<div id="fail4" role="radio" aria-checked="false" tabindex="0"></div>
</div>  #5
<!-- switch -->
<div id="fail5" role="switch" aria-checked="true">
<span></span>
<span></span>
</div>