Ominaisuus Widgetin tila

`aria-valuenow`

Aluewidgetin nykyinen numeerinen arvo — liukusäädin, edistymispalkki, pyöristyspainike, vierityspalkki. Yhdistä aria-valuemin- ja aria-valuemax-arvoihin, jotta avustava teknologia voi ilmoittaa merkityksellisen sijainnin. Käytä aria-valuetext-ominaisuutta ei-numeerisille nimikkeille.

Milloin käyttää

Missä tahansa mukautetussa widgetissä, joka edustaa arvoa alueen varrella: role="slider", role="progressbar", role="spinbutton", role="scrollbar". Attribuutti välittää nykyisen numeerisen arvon. Lähes aina yhdistetään aria-valuemin- ja aria-valuemax-attribuutteihin, jotka yhdessä antavat avustavalle teknologialle mahdollisuuden laskea ja ilmoittaa prosenttiosuuden ja absoluuttisen arvon.

Tätä ei yleensä tarvita natiivin <input type="range">- tai <progress>-elementin kanssa — selain välittää arvon automaattisesti. Turvaudu aria-valuenow-attribuuttiin, kun widget on rakennettu mukautetusta merkinnästä.

Miten se toimii

Arvo on numero (kokonaisluku tai desimaali). Avustava teknologia ilmoittaa sen widgetin nykyisenä sijaintina, usein yhdessä prosenttiosuuden kanssa min–max-alueesta: “Äänenvoimakkuus, liukusäädin, 7 / 10, 70 prosenttia.”

Jos widgetin arvo on merkityksellisempi nimikkeenä kuin numerona — “Perjantai” päivävalitsimen liukusäätimessä, “Keskisuuri” kolmiasentoisen valitsimen kohdalla — anna aria-valuetext ihmisluettavalla nimikkeellä. Avustava teknologia lukee aria-valuetext-arvon aria-valuenow-arvon sijaan, kun taas avustava teknologia, joka ohittaa valuetext-arvon, saa edelleen numeerisen varajärjestelmän. Aseta aina molemmat.

progressbar-elementissä aria-valuenow voidaan jättää pois määrittelemättömän edistymisen tapauksessa (ns. pyörinen tila). slider-elementissä attribuutti on pakollinen.

Yleiset virheet

aria-valuenow-arvon asettaminen ilman aria-valuemin- ja aria-valuemax-arvoja. Avustavalla teknologialla ei ole aluetta, joten se ilmoittaa pelkän numeron ilman kontekstia.
Visuaalisen sijainnin päivittäminen CSS-muunnosten avulla ilman aria-valuenow-arvon päivittämistä. Ruudunlukuohjelman käyttäjät kuulevat alkuperäisen arvon loputtomiin.
Arvo min/max-alueen ulkopuolella — aria-valuenow="150" kun maksimi on 100. Avustava teknologia joko rajaa arvon tai ilmoittaa sen sellaisenaan; kummassakin tapauksessa kyseessä on virhe.
aria-valuetext-ominaisuuden unohtaminen ei-numeerisilla asteikoilla. Käyttäjät kuulevat “3 / 5”, kun asteikko on todellisuudessa “Matala / Matala-keski / Keski / Keski-korkea / Korkea”.
aria-valuenow-ominaisuuden käyttäminen elementissä, joka ei ole aluewidget — tavallinen painike, kuvake. Attribuutilla ei ole vaikutusta tuettujen roolien ulkopuolella.
Näppäimistömallin pitäminen synkronoimatta. Widgetin täytyy reagoida nuolinäppäimiin, Home, End, Page Up, Page Down — pelkkä attribuutti ei hoida näppäimistötukea.

Esimerkki

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