Make sure every ARIA toggle field has an accessible name

Interactive elements with ARIA toggle roles, such as checkbox, switch, and radio, must have accessible names to ensure they are perceivable and operable by users of assistive technologies.

Why It Matters

Accessible names provide essential context to users of assistive technologies, enabling them to understand the purpose and state of interactive elements. Without accessible names, users may be unable to identify or interact with toggle controls effectively, leading to a diminished user experience.

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

Ensure that each ARIA toggle field has an accessible name by:

• Adding a visible label within the element.
• Using the aria-label attribute to provide an explicit label.
• Employing the aria-labelledby attribute to reference an existing label element.

Correct Examples

Checkbox

<div role="checkbox" aria-checked="false" aria-label="Subscribe to newsletter"></div>

Switch

<div role="switch" aria-checked="true" aria-labelledby="darkModeLabel"></div>
<label id="darkModeLabel">Enable Dark Mode</label>

Radio Button

<div role="radiogroup" aria-labelledby="pizzaCrustLabel">
  <div role="radio" aria-checked="false" aria-label="Thin Crust"></div>
  <div role="radio" aria-checked="true" aria-label="Regular Crust"></div>
</div>
<label id="pizzaCrustLabel">Choose your pizza crust:</label>

Incorrect Examples

Checkbox without Accessible Name

<div role="checkbox" aria-checked="false"></div>

Switch with Missing Label Reference

<div role="switch" aria-checked="true" aria-labelledby="nonExistentLabel"></div>

Radio Button without Accessible Name

<div role="radiogroup">
  <div role="radio" aria-checked="false"></div>
  <div role="radio" aria-checked="true"></div>
</div>

About This Rule

This rule ensures that all ARIA toggle fields have accessible names, as required by the WAI-ARIA specifications. Providing accessible names is crucial for assistive technologies to convey the purpose and state of interactive elements to users.