uswds/uswds

USWDS - Bug: Introduce visual instruction for range slider

Open

#6 614 ouverte le 20 avr. 2026

Voir sur GitHub
 (1 commentaire) (0 réactions) (1 assigné)CSS (5 611 stars) (795 forks)batch import
A11Y Audit FindingsA11y AuditAffects: Accessibility 🟡Good first issueHelp wantedNeeds: ConfirmationPackage: Range Slider

Description

Describe the bug

The range slider component should have instructions to ensure visual users know how to operate the slider.

In partnership with VA teams (including @coforma-jamie, @artsymartha68), we are re-describing minor issues with range slider under this issue and closing out a prior issue, in order to avoid confusion. This issue closes and replaces #6443 and is related to #6116.

Steps to reproduce the bug

  1. Go to https://designsystem.digital.gov/components/range-slider/
  2. Note there's no visual instruction indicating how to operate the component

Expected Behavior

The range slider component and example on the USWDS website should both have visual instruction indicated through a hint in the component example:

  1. The instruction should read: “Move the slider to change the value”
  2. The color of this text can be presented in the dark grey class="usa-hint", which is used in both character count and date range picker components.

Related code

No response

Screenshots

No response

System setup

No response

Additional context

Full instruction on how to operate a range slider is available to screen reader users through a screen reader's inherent behavior navigating semantic HTML. Using both VoiceOver and JAWS screen readers, we verified they each describe how to use the range slider as-is, when no hints or ARIA are added on. Because instruction slightly differs across screen readers, we want to ensure we aren't overly prescriptive in applying screen reader-only hints (excess ARIA was removed in #5413).

Code of Conduct

Guide contributeur

Stack technique
htmlcssjavascript
Domaine
frontendaccessibility
Type d'issue
bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 hours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
blocked
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
Aucun
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
25
Direction de recherche
Locate the range slider component template in the USWDS repository (likely under src/components/range slider). Add a hint element with class 'usa hint' and text 'Move the slider to change the value' immediately after the range input. Ensure the hint inherits styling from the existing usa hint class used in character count and date range picker components. Reference those components for implementation details. No changes to ARIA attributes are needed as screen readers already announce slider controls.