Egenskap Widgettillstånd

`aria-valuenow`

Aktuellt numeriskt värde för en intervallwidget — slider, progressbar, spinbutton, scrollbar. Kombinera med aria-valuemin och aria-valuemax så att hjälpmedel kan annonsera en meningsfull position. Använd aria-valuetext för icke-numeriska etiketter.

När ska du använda detta

På en anpassad widget som representerar ett värde längs ett intervall: role="slider", role="progressbar", role="spinbutton", role="scrollbar". Attributet bär det aktuella numeriska värdet. Kombineras nästan alltid med aria-valuemin och aria-valuemax, vilket tillsammans låter hjälpmedlet beräkna och annonsera ett procenttal och ett absolut värde.

Vanligtvis behöver du inte detta på en native <input type="range"> eller <progress> — webbläsaren exponerar värdet automatiskt. Använd aria-valuenow när du har byggt widgeten med anpassad uppmärkning.

Hur det fungerar

Värdet är ett tal (heltal eller decimaltal). Hjälpmedlet annonserar det som widgetens aktuella position, ofta tillsammans med en procentandel av vägen genom min–max-intervallet: “Volym, slider, 7 av 10, 70 procent.”

Om din widgets värde är mer meningsfullt som en etikett än som ett tal — “Fredag” på en dagväljar-slider, “Medel” på ett tre-positionsval — ange aria-valuetext med den läsbara etiketten. Hjälpmedlet läser aria-valuetext i stället för aria-valuenow, medan hjälpmedel som ignorerar valuetext fortfarande har den numeriska reservvarianten. Ange alltid båda.

För progressbar kan du utelämna aria-valuenow vid obestämt förlopp (spinnerfallet). För slider är attributet obligatoriskt.

Vanliga fel

Att ange aria-valuenow utan aria-valuemin och aria-valuemax. Hjälpmedlet har inget intervall och annonserar ett bart tal utan kontext.
Att uppdatera den visuella positionen via CSS-transformationer utan att uppdatera aria-valuenow. Skärmläsaranvändare hör alltid initialvärdet.
Ett värde utanför min/max-intervallet — aria-valuenow="150" när max är 100. Hjälpmedlet klipper antingen värdet eller annonserar det verbatim; hur som helst är det ett fel.
Att glömma aria-valuetext för icke-numeriska skalor. Användare hör “3 av 5” när skalan egentligen är “Låg / Medel-Låg / Medel / Medel-Hög / Hög”.
Att använda aria-valuenow på något som inte är en intervallwidget — en vanlig knapp, en ikon. Attributet har ingen effekt utanför sina stödda roller.
Att inte hålla tangentbordsmodellen synkroniserad. Widgeten måste svara på piltangenter, Home, End, Page Up, Page Down — attributet ensamt säger inget om tangentbordsstöd.

Exempel

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