Rooli Widget

`progressbar`

Merkitsee elementin edistymisindikaattoriksi. Käytä ensin <progress>-elementtiä — se tarjoaa semantiikan, määritetyn visuaalin ja arvoattribuutit natiivisti. Käytä role="progressbar" vain kun natiivin elementtiin ei pysty tyylittelemään riittävästi.

Milloin käyttää

Käytä <progress value="42" max="100">. Natiivi elementti on vaikea tyylitellä johdonmukaisesti eri selaimissa, mikä on pääsyy käyttää role="progressbar" mukautetussa <div>-elementissä sen sijaan.

Kaksi muotoa:

Määritetty — kokonaismäärä on tiedossa. Aseta aria-valuemin, aria-valuemax ja päivitä aria-valuenow työn edetessä.
Määrittämätön — kokonaismäärä ei ole tiedossa. Jätä aria-valuenow pois (tai älä aseta sitä). Ruudunlukuohjelma ilmoittaa “kiireinen” / “ladataan” ilman prosenttia.

Aseta aria-valuetext, kun pelkkä numero ei ole merkityksellinen — esimerkiksi aria-valuetext="Ladataan kuvaa 3 / 8" on parempi kuin “37 prosenttia”.

Edistymispalkki EI ole live-alue — ruudunlukuohjelmat eivät ilmoita jokaista aria-valuenow-muutosta. Jos muutos täytyy puhua ääneen, käytä myös role="status" kumppanielementissä, jossa on luettava edistymisteksti.

Yleiset virheet

role="progressbar" pyörijässä ilman aria-label-attribuuttia. Rooli ilmoitetaan, mutta tehtävälle ei ole nimeä.
role="progressbar" käyttö määrittämättömässä pyörijässä JA aria-valuenow="0" asettaminen. Se ilmoittaa “0 prosenttia valmis” ikuisesti.
Unohtaa poistaa edistymispalkki (tai sen aria-busy) kun työ on valmis. Jotkut ruudunlukuohjelmat jatkavat kyselyä.
Edistymispalkin yhdistäminen visuaalisesti piilossa olevaan prosenttiin ilman kummankin päivittämistä latauksen pysähtyessä. Käyttäjät saavat jumittuneen tilan ilman ilmoitusta.
role="progressbar" asettaminen sekä kääre-säiliöön että sisäiseen täyttöpalkkiin. Päällekkäiset roolit; valitse yksi.

Esimerkki

<!-- Suosittu tapa -->
<label for="upload">Uploading</label>
<progress id="upload" value="42" max="100">42%</progress>

<!-- Mukautettu määritetty -->
<div id="uploadLabel">Uploading photo 3 of 8</div>
<div
  role="progressbar"
  aria-labelledby="uploadLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="37"
></div>