Standarder · ARIA

Roll Widget

slider

Markerar ett element som ett inmatningsfält för att välja ett värde inom ett intervall. Använd <input type="range"> i första hand; välj role="slider" bara när du behöver ett anpassat spår — t.ex. en tvågreppig intervallväljare, som det inbyggda elementet inte stöder.

När ska du använda det

Använd <input type="range">. Det inbyggda elementet ger dig tangentbordsstöd, pekgester, bockmarkeringar via <datalist> och ett value som skickas med formuläret.

role="slider" är till för anpassade kontroller som det inbyggda elementet inte kan uttrycka:

  • Tvågreppiga intervallväljare (lägsta/högsta pris).
  • Icke-linjära skalor (logaritmiska, stegvisa färgväljare).
  • Reglage som behöver en utformning som det inbyggda elementet inte kan uppnå i ett visst designsystem.

Tangentbords- och fokuskontrakt

Enligt APG:s slider-mönster:

  • Tab flyttar fokus till slider-greppet.
  • Höger-/uppåtpil ökar värdet ett steg; vänster-/nedåtpil minskar det.
  • Page Up / Page Down hoppar ett större steg (vanligtvis 10 %).
  • Home hoppar till aria-valuemin; End hoppar till aria-valuemax.

Du MÅSTE ange aria-valuenow, aria-valuemin och aria-valuemax. Om det numeriska värdet inte är självförklarande (“3” — tre vad?), lägg till aria-valuetext="3 stars" så att skärmläsare presenterar den meningsfulla versionen.

För tvågreppiga reglage, rendera två separata role="slider"-element, vart och ett med eget min/max som speglar det andra greppets position.

Vanliga fel

  • aria-valuenow saknas vid första renderingen. Reglaget har inget presenterat värde.
  • Slider-värdet uppdateras inte efter drag. Skärmläsare rapporterar det ursprungliga värdet för evigt.
  • En volymreglage “0 till 100” utan aria-valuetext — användaren hör “47” utan enhet.
  • För grovt tangentbordssteg. Ett 0–100-reglage som hoppar i steg om 10 gör det omöjligt för skärmläsaranvändare att välja 53.
  • Tvågreppiga reglage renderade som ett enda element med aria-valuetext="20 to 80". Användaren kan inte justera varje gräns separat.

Exempel

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

<!-- Anpassat reglage -->
<div id="brightnessLabel">Ljusstyrka</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 percent"
></div>