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>
9
10<!-- Use "aria-label" -->
11<div role="switch"
12     aria-checked="false"
13     aria-label="get notifications">
14</div>
15
16
17<!-- 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