Ensure Every ARIA Toggle Field Has an Accessible Name

Yotam Flohr
Researcher
Blind Low vision Hearing Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

WCAG requires all toggle fields to have an accessible name. 

Why It Matters

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:

  • checkbox
  • menu
  • menuitemcheckbox
  • menuitemradio
  • radio
  • radiogroup
  • switch

Fixing the Issue

Developers need to check that every ARIA toggle field has an accessible name.

Good Code Example

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

Code example
<!-- 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

Bad Code Example

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

Code example
<!-- 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

Test Cases

For more examples, visit W3C’s GitHub’s ATC Rules library