Accessibility Quick Check
Fixing an Unlabeled Slider
A practical accessibility review showing how an unlabeled slider can expose its current value but still lack a clear purpose for screen reader users.
Demonstration showing how an accessible name was added to the decade slider so screen readers can announce both the purpose and current value of the control.
What Is It?
The decade slider already exposed its current value using aria-valuetext, but it was missing an accessible name.
Why It Matters
Without an accessible name, assistive technologies can identify the selected decade but not the purpose of the control.
How To Test
- Load the page.
- Run Lighthouse or Axe.
- Inspect the slider control.
- Confirm the slider has an accessible name.
- Verify the value is announced correctly.
Fix
- Add a hidden label for the slider.
- Connect the label using aria-labelledby.
- Keep aria-valuetext for the current decade value.
Related Skills
- Accessibility Testing
- Screen Reader Support
- ARIA Labels
- Manual QA