ARIA toggle fields have an accessible name
Ensures every element with a semantic role also has an accessible name. Semantic roles include:
Fixing the problem
Correct markup solutions
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>