ARIA toggle fields have an accessible name

Rule ID: aria-toggle-field-name
User Impact: Serious
WCAG: 4.1.2

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

Requirement(s)

  • Not specified, or not applicable

WCAG Success Criteria

  • 4.1.2 Name, Role, Value

Section 508 Guidelines

  • Not specified, or not applicable

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.