aria-toggle-field-name
ARIA toggle fields have an accessible name
Description
Native radio buttons and checkboxes cannot be directly styled with CSS,
so developers often choose to use non-semantic elements to produce their stylized versions
(e.g. <div role="radio"></div>
). It is important to make sure that the radio buttons and checkboxes
defined by the role
attribute have an accessible name.
This refers to any element whose role attribute's value is checkbox
,
menuitemcheckbox
, radio
, menuitemradio
or switch
.
Quick Fixes
1<!-- Use text node -->2<div role="radiogroup"3 aria-label="gender"4 <div role="radio"5 aria-checked="true">Female</div>6 <div role="radio"7 aria-checked="false">Male</div>8</div>910<!-- Use "aria-label" -->11<div role="switch"12 aria-checked="false"13 aria-label="get notifications">14</div>151617<!-- Use "aria-labelledby" -->18<p id="app-check">Approve</p>19<div role="checkbox"20 aria-labelledby="app-check"21 aria-checked="false"></div>22
How Users Are Affected
The accessible name is used by assistive technologies to label, announce and trigger actions of interactable UI elements (e.g. buttons, links, input fields, etc.). When interactable elements don’t have a valid accessible name, assistive technologies lack the hook they are designed to use in order to parse and read the content accurately.
WCAG Success criteria
This issue might cause elements to fail one or more of the following Success criteria:
4.1.2 Name, Role, Value (A)
Recommended Reading
- Understanding Name, Role, Value
- Accessible Nmes - Evinced KB