binary-control-name-present
Binary controls have an accessible name
Checks that checkbox, radio, and switch controls expose a non-empty accessible name.
Applies to. Applies to elements whose role attribute resolves to checkbox, radio or switch (the first token naming a known role, matched case-insensitively, so role="foo switch" and role="SWITCH" count) that are included in the accessibility tree. A native <input type="checkbox">/<input type="radio"> is in scope only when it carries one of those roles explicitly; without a role attribute it belongs to form-control-programmatic-label-present. A custom element whose ElementInternals give it one of those roles (this.attachInternals().role), with no role attribute naming another, is in scope too: that is its default role, and no other rule checks it.
Expectation. The control has a non-empty accessible name from aria-label, from an aria-labelledby that resolves to non-empty text, or from title. A native checkbox or radio additionally accepts an associated <label>, the labels API, a wrapping <label>, or label[for], with at most four labels read for determinism, and any other element accepts its own subtree text, those roles being name-from-content.
Examples
<div role="switch" tabindex="0" aria-checked="false" aria-label="Bluetooth"></div>
aria-label gives the switch an accessible name.
<div role="switch" tabindex="0" aria-checked="false"></div>
The switch has no name from any supported mechanism.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
name_internals
- Inspect the control the report names, a custom element, and note its role.
- Open the Accessibility pane in the browser's developer tools and read the element's accessible name.
- With a screen reader, move to the element and listen to the name announced.
Pass. The accessibility tree shows a name for the control, set through its internals or otherwise, and the screen reader announces it.
Fail. The control has no name in the accessibility tree and the screen reader announces only its role, which fails WCAG 4.1.2.