Ensure Every ARIA Toggle Field Has an Accessible Name
Blind
Low vision
Hearing
Mobility
WCAG 2.1 Level A
WCAG requires all toggle fields to have an accessible name.
It’s essential for every element with a semantic role to also have an accessible name to aid users who rely on assistive technologies. Semantic roles include:
Developers need to check that every ARIA toggle field has an accessible name.
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>
Copy
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>
Copy
For more examples, visit W3C’s GitHub’s ATC Rules library.