aria-valuenow

Quando utilizzarlo

Su qualsiasi widget personalizzato che rappresenta un valore lungo un intervallo: role="slider", role="progressbar", role="spinbutton", role="scrollbar". L’attributo contiene il valore numerico corrente. Viene quasi sempre abbinato ad aria-valuemin e aria-valuemax, che insieme consentono alla tecnologia assistiva di calcolare e annunciare sia una percentuale sia un valore assoluto.

Di norma non è necessario su un <input type="range"> o <progress> nativi — il browser espone il valore automaticamente. Si ricorre ad aria-valuenow quando il widget è stato costruito con markup personalizzato.

Come funziona

Il valore è un numero (intero o float). La tecnologia assistiva lo annuncia come posizione corrente del widget, spesso insieme alla percentuale percorsa nel range min–max: «Volume, slider, 7 di 10, 70 percento.»

Se il valore del widget è più significativo come etichetta che come numero — «Venerdì» su uno slider per la selezione del giorno, «Medio» su un selettore a tre posizioni — occorre fornire aria-valuetext con l’etichetta leggibile. La tecnologia assistiva leggerà aria-valuetext al posto di aria-valuenow, mentre le tecnologie assistive che ignorano valuetext dispongono comunque del valore numerico come fallback. Si consiglia di impostare sempre entrambi.

Per progressbar, è possibile omettere aria-valuenow in caso di avanzamento indeterminato (il caso dello spinner). Per slider, l’attributo è obbligatorio.

Errori comuni

• Impostare aria-valuenow senza aria-valuemin e aria-valuemax. La tecnologia assistiva non dispone di un intervallo di riferimento e annuncia un numero privo di contesto.
• Aggiornare la posizione visiva tramite trasformazioni CSS senza mai aggiornare aria-valuenow. Gli utenti di screen reader continueranno a sentire il valore iniziale.
• Un valore fuori dal range min/max — aria-valuenow="150" quando il massimo è 100. La tecnologia assistiva lo limita al massimo oppure lo annuncia verbatim; in entrambi i casi si tratta di un errore.
• Dimenticare aria-valuetext per scale non numeriche. Gli utenti sentiranno «3 di 5» quando la scala è in realtà «Basso / Medio-basso / Medio / Medio-alto / Alto».
• Utilizzare aria-valuenow su elementi che non sono widget a intervallo — un pulsante comune, un’icona. L’attributo non ha effetto al di fuori dei ruoli supportati.
• Non mantenere il modello da tastiera sincronizzato. Il widget deve rispondere ai tasti freccia, Home, End, Pagina Su, Pagina Giù — l’attributo da solo non fornisce alcun supporto alla tastiera.

Esempio

<div
  role="slider"
  tabindex="0"
  aria-label="Volume"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuenow="7"
  aria-valuetext="7 out of 10"
>
  <div class="slider-thumb" style="left: 70%"></div>
</div>