Normative · ARIA

Ruolo Widget

slider

Segna un elemento come input che seleziona un valore da un intervallo. Utilizzare prima <input type="range">; ricorrere a role="slider" solo quando si necessita di una traccia personalizzata — ad esempio un selettore di intervallo a due cursori, che il nativo non supporta.

Quando utilizzarlo

È preferibile usare <input type="range">. L’elemento nativo offre supporto da tastiera, gesture touch, tacche tramite <datalist> e un value che viene inviato con il form.

role="slider" è indicato per controlli personalizzati che il nativo non può esprimere:

  • Selettori di intervallo a due cursori (prezzo minimo/massimo).
  • Scale non lineari (logaritmiche, selettori di colore a step).
  • Slider stilizzati in modo non raggiungibile dall’input nativo nel design system in uso.

Contratto tastiera + focus

In base al pattern slider dell’APG:

  • Tab sposta il focus sul cursore dello slider.
  • La freccia Destra/Su aumenta il valore di uno step; la freccia Sinistra/Giù lo diminuisce.
  • Pagina Su / Pagina Giù saltano di un incremento maggiore (tipicamente il 10%).
  • Home salta a aria-valuemin; End salta a aria-valuemax.

È obbligatorio impostare aria-valuenow, aria-valuemin e aria-valuemax. Se il valore numerico non è autoesplicativo («3» — tre cosa?), è necessario aggiungere aria-valuetext="3 stars" affinché gli screen reader annuncino la versione significativa.

Per gli slider a due cursori, è necessario renderizzare due elementi role="slider" separati, ciascuno con il proprio min/max che riflette la posizione dell’altro cursore.

Errori comuni

  • aria-valuenow mancante al primo rendering. Lo slider non ha alcun valore annunciato.
  • Valore dello slider non aggiornato dopo il trascinamento. Gli screen reader riportano il valore originale a tempo indeterminato.
  • Uno slider del volume «da 0 a 100» senza aria-valuetext — l’utente sente «47» senza alcuna unità.
  • Step da tastiera troppo grossolano. Uno slider 0-100 che salta con incrementi di 10 impedisce agli utenti di screen reader di selezionare 53.
  • Slider a due cursori renderizzati come un singolo elemento con aria-valuetext="20 to 80". L’utente non riesce a regolare nessuno dei due limiti in modo indipendente.

Esempio

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

<!-- Slider personalizzato -->
<div id="brightnessLabel">Brightness</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 percent"
></div>