R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Accessible Name for ARIA Toggle Fields

  • Home
  • Blog
  • Accessible Name for ARIA Toggle Fields
  • June 1, 2025

Accessible Name for ARIA Toggle Fields

Rule ID: aria-toggle-field-name
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549

How to Fix the Problem

ARIA toggle fields—like checkboxes, radio buttons, switches, and menu items—must have accessible names so that assistive technologies can describe them properly to users. This can be done using aria-label, aria-labelledby, or visible text that can be programmatically determined.

Below are correct implementations for common roles:

✅ Correct Markup Patterns

1. Checkbox

html
<div id="pass1" role="checkbox">Newspaper</div>

A visible label (“Newspaper”) is used as the accessible name.

2. Menu Item Checkbox

html
<ul role="menu">
<li id="pass2" role="menuitemcheckbox" aria-label="Word wrap" aria-checked="true"></li>
</ul>

The aria-label explicitly provides a name.

3. Menu Item Radio

html
<p id="pass3Label">Sans-serif</p>
<ul role="menu">
<li id="pass3" role="menuitemradio" aria-labelledby="pass3Label" aria-checked="true"></li>
</ul>

Uses aria-labelledby to reference a visible label.

4. Radio

html
<div role="radiogroup">
<div id="pass4" role="radio" aria-checked="false" tabindex="0" title="Regular Crust"></div>
</div>

The title attribute acts as the accessible name.

5. Switch

html
<div id="pass5" role="switch" aria-checked="true" aria-label="Toggle blue light:">
<span>off</span>
<span>on</span>
</div>

Here, aria-label is used for clarity, since the state indicators (“off”/”on”) alone are not sufficient.

Why it Matters

Users who rely on screen readers or other assistive technologies need a clear understanding of each toggle control’s purpose and state. Without accessible names:

  • Controls may be announced as “unlabeled” or “unknown,” which is confusing.

  • Users cannot effectively interact with toggles.

  • It disrupts user flow, increases error rates, and severely hinders accessibility compliance.

Providing accessible names ensures all users, including those with visual impairments, can understand and operate toggle components just as effectively as sighted users.

Rule Description

Every ARIA toggle control—like role="checkbox", role="radio", or role="switch"—must have an accessible name. This name may come from visible text or be provided programmatically via ARIA attributes like aria-label or aria-labelledby.

The Algorithm (in Simple Terms)

  1. Find any element with one of the toggle roles (e.g., checkbox, radio, switch).

  2. Check if it has an accessible name from:

    • aria-label

    • aria-labelledby

    • Inner text content

    • title attribute

  3. If no accessible name is found, the element fails this rule.

Tags:
Share:

Leave A Comment