Eigenschap Widgetstatus

`aria-valuenow`

Huidige numerieke waarde van een bereikwidget — slider, progressbar, spinbutton, scrollbar. Combineer met aria-valuemin en aria-valuemax zodat hulptechnologie een zinvolle positie kan aankondigen. Gebruik aria-valuetext voor niet-numerieke labels.

Wanneer gebruiken

Op elke aangepaste widget die een waarde langs een bereik vertegenwoordigt: role="slider", role="progressbar", role="spinbutton", role="scrollbar". Het attribuut bevat de huidige numerieke waarde. Vrijwel altijd gecombineerd met aria-valuemin en aria-valuemax, waardoor de hulptechnologie een percentage en een absolute waarde kan berekenen en aankondigen.

Doorgaans is dit niet nodig op een native <input type="range"> of <progress> — de browser geeft de waarde automatisch door. Gebruik aria-valuenow wanneer de widget is gebouwd met aangepaste opmaak.

Hoe het werkt

De waarde is een getal (integer of float). De hulptechnologie kondigt het aan als de huidige positie van de widget, vaak samen met een percentage van het min-tot-maxbereik: “Volume, slider, 7 van 10, 70 procent.”

Als de waarde van de widget zinvoller is als label dan als getal — “Vrijdag” op een dag-picker-slider, “Gemiddeld” op een drievoudige keuzeschakelaar — geef dan aria-valuetext op met het voor mensen leesbare label. Hulptechnologie leest aria-valuetext in plaats van aria-valuenow, terwijl hulptechnologie die valuetext negeert nog steeds de numerieke terugvalwaarde heeft. Stel altijd beide in.

Voor progressbar mag aria-valuenow worden weggelaten bij onbepaalde voortgang (de spinner-variant). Voor slider is het attribuut verplicht.

Veelgemaakte fouten

aria-valuenow instellen zonder aria-valuemin en aria-valuemax. De hulptechnologie heeft geen bereik en kondigt een kaal getal aan zonder context.
De visuele positie bijwerken via CSS-transformaties maar aria-valuenow nooit aanpassen. Schermlezers blijven de beginwaarde horen.
Een waarde buiten het min/maxbereik — aria-valuenow="150" terwijl het maximum 100 is. Hulptechnologie knipt de waarde bij of kondigt het letterlijk aan; in beide gevallen is dit een fout.
aria-valuetext vergeten voor niet-numerieke schalen. Gebruikers horen “3 van 5” terwijl de schaal eigenlijk “Laag / Middel-laag / Middel / Middel-hoog / Hoog” is.
aria-valuenow gebruiken op iets wat geen bereikwidget is — een gewone knop, een pictogram. Het attribuut heeft geen effect buiten de ondersteunde rollen.
Het toetsenbordmodel niet gesynchroniseerd houden. De widget moet reageren op pijltjestoetsen, Home, End, Page Up, Page Down — het attribuut alleen zegt niets over toetsenbordondersteuning.

Voorbeeld

<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>