slider-name-present
Sliders have an accessible name
Checks that elements with role="slider" expose a non-empty accessible name. A native <input type="range"> is checked by form-control-programmatic-label-present.
Applies to. Applies to elements whose role attribute resolves to slider (the attribute is a fallback list: its first known, non-abstract token, in any case, is the role, so role="foo slider" counts and role="link slider" does not) that are included in the accessibility tree. An element with the matching implicit role but no role attribute is out of scope. A native <input type="range"> without the role belongs to form-control-programmatic-label-present. A custom element whose ElementInternals give it the role (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 element has a non-empty accessible name from aria-label, from an aria-labelledby that resolves to non-empty text, or from title. role="slider" is name-from-author-only, so subtree text is never accepted: text sitting inside a custom slider widget is not reliably exposed as its name. On a labelable element (<input role="slider">) an associated <label> counts as well. On a text-like <input> or a <textarea>, the placeholder counts last (HTML-AAM's final name source): a placeholder-only label is a 3.3.2 question, not a missing name.
Examples
<div role="slider" tabindex="0" aria-label="Volume" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>
aria-label names the slider. A native <input type="range"> is not in this rule's scope; form-control-programmatic-label-present checks it.
<div role="slider" tabindex="0" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>
No accessible 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 slider 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 slider, set through its internals or otherwise, and the screen reader announces it.
Fail. The slider has no name in the accessibility tree and the screen reader announces only its role, which fails WCAG 4.1.2.