Normen · ARIA

Rol Widget

slider

Markeert een element als invoer die een waarde uit een bereik selecteert. Gebruik eerst <input type="range">; kies role="slider" alleen voor maatwerk — bijvoorbeeld een twee-duim-bereikkiezer, die het native element niet ondersteunt.

Wanneer gebruiken

Gebruik <input type="range">. Het native element biedt toetsenbordondersteuning, aanraakgebaren, maatstreepjes via <datalist> en een value die met het formulier wordt meegestuurd.

role="slider" is bedoeld voor maatwerkelementen die het native element niet kan uitdrukken:

  • Twee-duim-bereikkiezers (minimum/maximum prijs).
  • Niet-lineaire schalen (logaritmisch, gestapt kleuren­keuzepalet).
  • Schuifregelaars met een vormgeving die het native element in een bepaald ontwerpsysteem niet kan bereiken.

Toetsenbord + focuscontract

Volgens het APG slider-patroon:

  • Tab verplaatst de focus naar de duim van de schuifregelaar.
  • Pijl rechts/omhoog verhoogt de waarde met één stap; pijl links/omlaag verlaagt deze.
  • Page Up / Page Down springen een grotere stap (doorgaans 10%).
  • Home springt naar aria-valuemin; End naar aria-valuemax.

aria-valuenow, aria-valuemin en aria-valuemax zijn verplicht. Als de numerieke waarde niet zelfverklarend is (“3” — drie wat?), voeg dan aria-valuetext="3 sterren" toe zodat schermlezers de betekenisvolle versie aankondigen.

Gebruik bij twee-duim-schuifregelaars twee afzonderlijke role="slider"-elementen, elk met een eigen min/max die de positie van de andere duim weerspiegelt.

Veelvoorkomende fouten

  • aria-valuenow ontbreekt bij de eerste render. De schuifregelaar heeft geen aangekondigde waarde.
  • Sliderwaarde niet bijgewerkt na slepen. Schermlezers melden de oorspronkelijke waarde voorgoed.
  • Een volumeregelaar van 0 tot 100 zonder aria-valuetext — de gebruiker hoort “47” zonder eenheid.
  • Toetsenboordstap te grof. Een schuifregelaar 0-100 die in stappen van 10 springt, maakt het schermlezergebruikers onmogelijk om 53 te kiezen.
  • Twee-duim-schuifregelaars als één enkel element weergegeven met aria-valuetext="20 tot 80". De gebruiker kan geen van beide grenzen afzonderlijk aanpassen.

Voorbeeld

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

<!-- Maatwerk schuifregelaar -->
<div id="brightnessLabel">Helderheid</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 percent"
></div>