Repository navigation
USWDS - Bug: Range slider focus improvements #6117
Description
Describe the bug
We found two potential issues in the range slider audit:
-
The current version of the range slider receives keyboard focus around the entire component. The only interactive element is the button which also receives focus. The dual focused elements doesn't seem intuitive as the slider bar isn't the interactive part.
-
Also, the focus indicator on the button is quite small. We recommend increasing it at the very least to match closer to what W3C offers in their examples.
Steps to reproduce the bug
- Go to https://designsystem.digital.gov/components/range-slider/
- Keyboard tab into the range slider
- Note that the entire element receives focus.
- Note also how small and nearly imperceptible the focus indicator is on the button. It's a small blue outline and not offset or larger. The touch target may not meet the enhanced size.
Expected Behavior
See an example of other range sliders where focus is only on the button:
https://carbondesignsystem.com/components/slider/usage/#feedback
https://www.w3.org/WAI/ARIA/apg/patterns/slider/examples/slider-color-viewer/ <<the entire component receives focus but the button's focus is much clearer. The other slider examples from W3 only show the button receiving focus.
Related code
No response
Screenshots
No response
System setup
PC, Chrome
Additional context
No response
Code of Conduct
- I agree to follow this project's Code of Conduct.
- I checked the current issues for duplicate bug reports.
Activity
amyleadem commentedon Oct 31, 2024
Note
This might be something we can work into #6116
Next steps
15 remaining items
amycole501 commentedon Mar 14, 2025
Would like to get @juliaelman to review this and estimate an effort for getting this done before the May deliverables deadline.
amycole501 commentedon Mar 14, 2025
Feedback from Dave Stenger, 508 lead for the USA site:
The range slider is built on native elements (typically an ) that include a focus indicator by default which ensures it’s both clearly visible and compliant with WCAG 2.2’s focus requirements (specifically WCAG 2.4.7 – Focus Visible).
Key Points
Because the component is based on a native range input, it benefits from built‑in focus management. USWDS adds custom styling to make the focus state stand out.
USWDS generally applies a distinct outline or box-shadow when the range slider receives focus. This styling is designed to meet contrast and size guidelines so that keyboard users can easily see which element is active.
My recommendations for developers
Ensure that any custom CSS does not diminish the default focus indicator provided by USWDS. The focus indicator should be visible against the background with sufficient contrast.
Although USWDS is designed to be robust, always test the component in multiple browsers and assistive technologies to verify that the focus styling appears consistently.
Do not remove the focus outline for aesthetic reasons. If you need to modify it, ensure that the new styling meets WCAG 2.2’s contrast and visibility standards.
My conclusion
When used as provided, the USWDS range slider does pass the visible focus guidelines outlined in WCAG 2.2. As long as you maintain or enhance the default focus styles, it will remain accessible to keyboard users and compliant with the standards.
AND
I would recommend the actual slider have thicker lines. With the bigger blue outline focus gives a user with low vision the ability to see where they are but the thinner lines inside I think should be the same size or just a hair smaller. (my personal recommendation)
ethangardner commentedon Sep 11, 2026
Closing this spike as resolved. Research confirmed that native
<input type="range">focus handling satisfies WCAG requirements, and the actionable track/thumb contrast and visible focus styling improvements were implemented under sub-issue #6444 and merged intodevelopvia PR #6659. Documentation updates were also completed inuswds-site#3239.