Standardit · ARIA

Rooli Widget

slider

Merkitsee elementin liukukontrolliksi, joka valitsee arvon vaihteluväliltä. Käytä ensin <input type="range">; turvaudu role="slider"-rooliin vain mukautetuissa tilanteissa — esimerkiksi kaksinapainen aluevalitsin, jota natiivielementti ei tue.

Milloin käyttää

Käytä <input type="range">. Natiivielementti tarjoaa näppäimistötuen, kosketuseleeet, <datalist>-välimerkinnät ja lomakkeella lähettyvän value-arvon.

role="slider" sopii mukautettuihin kontrolleihin, joita natiivielementti ei pysty ilmaisemaan:

  • Kaksinapa-aluevalitsimet (hintaväli min/max).
  • Epälineaariset asteikot (logaritmiset, askelletut värinvalitsimet).
  • Liukukontrollit, joita ei voida toteuttaa natiivielementillä tietyssä suunnittelujärjestelmässä.

Näppäimistö- ja kohdistussopimus

APG:n liukukontrollikaavan mukaan:

  • Tab siirtää kohdistuksen liukukontrollin napaan.
  • Oikea/Ylös-nuoli kasvattaa arvoa askelella; Vasen/Alas vähentää.
  • Page Up / Page Down hyppää suuremmalla askeleella (tyypillisesti 10 %).
  • Home hyppää aria-valuemin-arvoon; End hyppää aria-valuemax-arvoon.

aria-valuenow, aria-valuemin ja aria-valuemax TÄYTYY asettaa. Jos numeerinen arvo ei ole itsestään selvä (“3” — kolme mitä?), lisää aria-valuetext="3 tähteä", jotta ruudunlukuohjelma ilmoittaa merkityksellisen version.

Kaksinapaisia liukukontrolleja varten renderöi kaksi erillistä role="slider"-elementtiä, joilla on omat min/max-arvonsa toisen navan sijainnin mukaan.

Yleiset virheet

  • Puuttuva aria-valuenow ensimmäisessä renderöinnissä. Liukukontrollilla ei ole ilmoitettavaa arvoa.
  • Liukukontrollin arvo ei päivity vedon jälkeen. Ruudunlukuohjelmat ilmoittavat alkuperäisen arvon loputtomasti.
  • “0–100”-äänenvoimakkuusliukusäädin ilman aria-valuetext-attribuuttia — käyttäjä kuulee “47” ilman yksikköä.
  • Näppäimistöaskel liian karkea. 0–100-liukusäädin, joka hyppää 10 yksikön askelin, estää ruudunlukuohjelman käyttäjää valitsemasta arvoa 53.
  • Kaksinapainen liukusäädin toteutettu yhtenä elementtinä aria-valuetext="20 to 80" — käyttäjä ei voi säätää kumpaakaan rajaa erikseen.

Esimerkki

<!-- Suositeltava -->
<label for="vol">Äänenvoimakkuus</label>
<input id="vol" type="range" min="0" max="100" value="50">

<!-- Mukautettu liukukontrolli -->
<div id="brightnessLabel">Kirkkaus</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 percent"
></div>