Standardy · ARIA

Rola Widget

slider

Oznacza element jako kontrolkę wybierającą wartość z zakresu. Najpierw użyj <input type="range">; sięgaj po role="slider" tylko gdy potrzebujesz własnego toru — na przykład dla suwaka z dwoma uchwytami, którego natywny element nie obsługuje.

Kiedy używać

Użyj <input type="range">. Natywny element zapewnia obsługę klawiatury, gesty dotykowe, znaczniki przez <datalist> oraz value przesyłaną z formularzem.

role="slider" przeznaczony jest dla niestandardowych kontrolek, których natywny element nie potrafi wyrazić:

  • Suwaki z dwoma uchwytami (cena min/max).
  • Skale nieliniowe (logarytmiczne, krokowe palety kolorów).
  • Suwaki stylizowane w sposób, którego natywny input nie może osiągnąć w danym systemie projektowania.

Obsługa klawiatury i kontrakt fokusu

Zgodnie z wzorcem APG dla suwaka:

  • Tab przenosi fokus na uchwyt suwaka.
  • Strzałka w prawo / w górę zwiększa wartość o jeden krok; strzałka w lewo / w dół zmniejsza.
  • Page Up / Page Down skaczą o większy przyrost (zazwyczaj 10%).
  • Home skacze do aria-valuemin; End do aria-valuemax.

MUSISZ ustawić aria-valuenow, aria-valuemin i aria-valuemax. Jeśli wartość numeryczna nie jest sama w sobie zrozumiała („3” — trzy czego?), dodaj aria-valuetext="3 gwiazdki", aby czytniki ekranu ogłaszały sensowny opis.

W przypadku suwaków z dwoma uchwytami renderuj dwa oddzielne elementy role="slider", każdy z własnym zakresem min/max odzwierciedlającym pozycję drugiego uchwytu.

Typowe błędy

  • Brak aria-valuenow przy pierwszym renderowaniu. Suwak nie ma ogłaszanej wartości.
  • Wartość suwaka nie jest aktualizowana po przeciągnięciu. Czytniki ekranu na zawsze raportują oryginalną wartość.
  • Suwak głośności „od 0 do 100” bez aria-valuetext — użytkownik słyszy „47” bez jednostki.
  • Zbyt gruby krok klawiatury. Suwak 0–100 skaczący co 10 uniemożliwia użytkownikom czytników ekranu wybranie wartości 53.
  • Suwaki z dwoma uchwytami renderowane jako jeden element z aria-valuetext="20 do 80". Użytkownik nie może niezależnie regulować żadnej z granic.

Przykład

<!-- Preferowane -->
<label for="vol">Głośność</label>
<input id="vol" type="range" min="0" max="100" value="50">

<!-- Niestandardowy suwak -->
<div id="brightnessLabel">Jasność</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 procent"
></div>