Standarder · ARIA

Rolle Widget

slider

Markerer et element som en inputkomponent, der vælger en værdi inden for et interval. Brug <input type="range"> i første omgang; grib kun efter role="slider" til brugerdefinerede knapper — f.eks. en to-tommers intervalvælger, som den native komponent ikke understøtter.

Hvornår bruges det

Brug <input type="range">. Den native komponent giver dig tastaturunderstøttelse, berøringsbevægelser, mærker via <datalist> og en value, der indsendes med formularen.

role="slider" er til brugerdefinerede kontroller, som den native komponent ikke kan udtrykke:

  • To-tommers intervalvælgere (min-/maksimumspris).
  • Ikke-lineære skalaer (logaritmiske, trinvise farvevælgere).
  • Skydere stylet på en måde, som den native inputkomponent ikke kan opnå i et givet designsystem.

Tastatur + fokuskontrakt

I henhold til APG slider-mønsteret:

  • Tab flytter fokus til skyderens tommelfinger.
  • Højre/Op-pil øger værdien med ét trin; Venstre/Ned mindsker den.
  • Page Up / Page Down springer med et større interval (typisk 10 %).
  • Home springer til aria-valuemin; End springer til aria-valuemax.

Du SKAL sætte aria-valuenow, aria-valuemin og aria-valuemax. Hvis den numeriske værdi ikke er selvforklarende (“3” — tre hvad?), tilføj aria-valuetext="3 stjerner", så skærmlæsere annoncerer den meningsfulde version.

For to-tommers skydere skal du rendere to separate role="slider"-elementer, hvert med sit eget min/max, der afspejler den anden tommelfingres position.

Typiske fejl

  • Manglende aria-valuenow ved første rendering. Skyderen har ingen annonceret værdi.
  • Skyderens værdi opdateres ikke efter træk. Skærmlæsere rapporterer den oprindelige værdi for altid.
  • En lydstyrkeglyder fra 0 til 100 uden aria-valuetext — brugeren hører “47” uden enhed.
  • Tastaturtrinet er for groft. En 0-100-glyder, der springer i intervaller på 10, betyder, at skærmlæserbrugere ikke kan vælge 53.
  • To-tommers skydere renderet som ét enkelt element med aria-valuetext="20 to 80". Brugeren kan ikke justere nogen af grænserne uafhængigt.

Eksempel

<!-- Foretrukket -->
<label for="vol">Lydstyrke</label>
<input id="vol" type="range" min="0" max="100" value="50">

<!-- Brugerdefineret glyder -->
<div id="brightnessLabel">Lysstyrke</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 percent"
></div>