ARIA toggle fields have an accessible name
Rule ID:
aria-toggle-field-name
User Impact:
Serious
WCAG:
4.1.2
Rule Description
Ensures every ARIA toggle field has an accessible name.
Why it Matters
Ensures every element with a semantic role also has an accessible name. Semantic roles include:
- checkbox
- menu
- menuitemcheckbox
- menuitemradio
- radio
- radiogroup
- switch
How to Fix 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>
The Algorithm (in simple terms)
ARIA toggle fields have an accessible name.