aria-toggle-field-name
Web validation
Two-state controls that use roles such as switch, radio, menuitemradio, checkbox, or menuitemcheckbox expose their purpose and state to assistive technology through the computed accessible name. When that name is missing, people who rely on assistive technology only hear “switch,” “radio button,” or similar, with no clue about what the control changes. Always provide an accessible name with aria-label, aria-labelledby, visible text, or another valid naming method.
Pass Patterns
switch named with aria-label
This button tells assistive technology that it toggles “Dark mode.”
<button role="switch" aria-checked="false" aria-label="Dark mode"></button>menuitemcheckbox named by its text content
Here the text node supplies the name “Show line numbers.”
<div role="menu">
<div role="menuitemcheckbox" aria-checked="true">
Show line numbers
</div>
</div>Fail Patterns
Unnamed radio button
Assistive technology announces only “radio button” with no context.
<div role="radio" tabindex="0" aria-checked="false"></div>Accessible name hidden from assistive technology
The span is hidden, so the checkbox has no exposed name.
<div role="checkbox" tabindex="0" aria-checked="true">
<span aria-hidden="true">Enable notifications</span>
</div>WCAG techniques
Sufficient techniques
- ARIA16: Using aria-labelledby to provide a name for user interface controls
- ARIA14: Using aria-label to provide an accessible name where a visible label cannot be used
Failure techniques
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page, open a screen reader.
- Move to the control that you want to inspect.
- Listen to what the screen reader announces.
Expected result: It speaks the control's name.
Actual result: It announces the control’s type like “checkbox”, “switch” or “radio”, but it does not announce its purpose.
Inspecting the browser dev-tools
- Open the Accessibility Tree panel.
- Select the control on the DOM tree.
Expected result: The Name field shows the text you provided.
Actual result: If unnamed, Name is empty.
FAQ
How does this issue relate to 4.1.2 Name, role, value?
SC 4.1.2 requires every user-interface component to expose its name, role, and value to assistive technology. An unnamed two-state control fails the “name” portion, preventing users from knowing what the control does or whether it is on or off.
Why is this issue marked as Serious?
Without an accessible name, people who rely on assistive technology cannot identify the control’s function. They may change settings unintentionally or miss essential options, creating a significant accessibility barrier across browsers and assistive technologies.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 4.1.2 Name, Role, Value (A) | For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies. |
| EN 301 549 | 9.4.1.2 Name, Role, Value | Same as the WCAG text. |
| 508 Trusted Tester | 1.3.1-programmatic-label, 5.C | The combination of the accessible name, accessible description, and other programmatic associations (e.g., table column and/or row associations) describes each input field and includes all relevant instructions and cues (textual and graphical). |