Egenskab Widgettilstand

`aria-valuenow`

Den aktuelle numeriske værdi for en range-widget — slider, progressbar, spinbutton, scrollbar. Par med aria-valuemin og aria-valuemax, så hjælpeteknologi kan annoncere en meningsfuld position. Brug aria-valuetext til ikke-numeriske labels.

Hvornår skal det bruges

På enhver tilpasset widget, der repræsenterer en værdi langs et interval: role="slider", role="progressbar", role="spinbutton", role="scrollbar". Attributten bærer den aktuelle numeriske værdi. Den parres næsten altid med aria-valuemin og aria-valuemax, som tilsammen giver hjælpeteknologien mulighed for at beregne og annoncere en procentdel og en absolut værdi.

Du behøver typisk ikke dette på et native <input type="range"> eller <progress> — browseren eksponerer værdien automatisk. Brug aria-valuenow når du har bygget widgetten fra tilpasset markup.

Sådan fungerer det

Værdien er et tal (heltal eller decimaltal). Hjælpeteknologien annoncerer det som widgettens aktuelle position, ofte sammen med en procentdel af vejen gennem min-maks-intervallet: “Lydstyrke, slider, 7 af 10, 70 procent.”

Hvis din widgets værdi er mere meningsfuld som et label end som et tal — “Fredag” på en dagvælger-slider, “Middel” på en tre-positions-vælger — angiv aria-valuetext med det menneskelæsbare label. Hjælpeteknologien læser aria-valuetext i stedet for aria-valuenow, mens teknologi der ignorerer valuetext stadig har den numeriske reserve. Sæt altid begge.

For progressbar kan du udelade aria-valuenow ved ubestemt fremdrift (spinner-tilfældet). For slider er attributten påkrævet.

Typiske fejl

aria-valuenow sat uden aria-valuemin og aria-valuemax. Hjælpeteknologien har intet interval og annoncerer et nøgent tal uden kontekst.
Opdatering af den visuelle position via CSS-transforms uden at opdatere aria-valuenow. Skærmlæserbrugere hører den oprindelige værdi for evigt.
En værdi uden for min/maks-intervallet — aria-valuenow="150" når maks er 100. Hjælpeteknologien begrænser den eller annoncerer den ordret; begge dele er en fejl.
Glemme aria-valuetext for ikke-numeriske skalaer. Brugere hører “3 af 5”, når skalaen egentlig er “Lav / Middel-lav / Middel / Middel-høj / Høj”.
Brug af aria-valuenow på noget, der ikke er en range-widget — en almindelig knap, et ikon. Attributten har ingen effekt uden for dens understøttede roller.
Manglende synkronisering af tastaturmodellen. Widgetten skal reagere på piletaster, Home, End, Page Up, Page Down — attributten alene er lydløs om tastaturunderstøttelse.

Eksempel

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