Kun toiminnon suorittamiseen kuluva aika on pitkä, voit näyttää etenemisen edistymispalkissa.
Edistymispalkki kertoo, että toiminto on käynnistetty ja prosessi etenee. Sen avulla käyttäjä voi saada myös arvion siitä, kuinka kauan prosessin suorittaminen kestää. Tämä lisää luottamusta järjestelmää kohtaan.
Edistymispalkki sopii käytettäväksi pitkäkestoisen toiminnon yhteydessä, jossa käyttäjä joutuu odottamaan toiminnon valmistumista. Tällaisia toimintoja ovat esimerkiksi tiedostojen lataaminen ja ohjelmistoasennukset.
Tee näin
Käytä toiminnoille, joiden valmistuminen kestää pidempään kuin 10 sekuntia.
Näytä edistymispalkki heti, kun odotusta vaativa toiminto on käynnistynyt.
Näytä palkin yhteydessä etenemistä havainnollistava tekstivastine.
Älä tee näin
Älä käytä toiminnoille, joiden valmistuminen kestää vain muutaman sekunnin. Käytä tällöin mieluummin Spinneriä tai Skeletonia.
Älä käytä kuvaamaan sellaisen prosessin edistymistä, jossa vaaditaan käyttäjän toimenpiteitä (esim. hakemuksen täyttäminen).
Saavutettavuus
Komponentti toteuttaa saavutettavan edistymispalkin lisäämällä sille role="progressbar" roolin ja muut tarvittavat aria-attribuutit.
Edistymispalkki ei ole interaktiviinen elementti, joten siihen ei pääse käsiksi tabulaattorilla.
Edistymispalkille tulee antaa näkyvä nimilappu labelText-propilla tai ei-näkyvä nimilappu aria-label-attribuutilla. Lisäksi sille annetaan edistymistä kuvaava teksti.
Ruudunlukijat saattavat myös ilmoittaa edistymisestä äänimerkillä. NVDA ilmoittaa edistymisen äänimerkillä ainoastaan, jos valueText (aria-valuetext) on numeerinen. Muut ruudunlukijat ilmoittavat äänimerkillä edistymisestä silloin kun virtuaalikursori on edistymispalkin kohdalla.
Edistymisestä viestiminen ruudunlukijalle sopivin väliajoin jää sovelluksen toteutettavaksi. Sopiva aikaväli riippuu toteutuksesta. Tärkeää on että edistymisestä kerrotaan, mutta ei liian usein.
Alla on esimerkki, jossa edistymisen tila luetaan kuuden sekunnin välein. Lisäksi edistymisprosentti ilmoitetaan, kun edistyminen alkaa ja päättyy.
Anna edistymiselle aina tekstivastine. Tekstivastineen tulisi kertoa mahdollisimman selkeästi siitä, minkä verran prosessi on edistynyt tai minkälainen odotusaika on jäljellä.
<ProgressBar labelText="Tiedostojen lähetys" value={89} valueText="89 %">
<ProgressBarDescription>
Jäljellä noin <ProgressBarHighlight>2</ProgressBarHighlight> minuuttia
</ProgressBarDescription>
</ProgressBar>
Edistyminen
Edistymispalkin tulee ilmestyä heti, kun käyttäjä on käynnistää toiminnon, johon odottaminen liittyy.
Edistymispalkin tulee näyttää koko ajan prosessin edistymistä, eikä se saa pysähtyä. Pitkä pysähtyminen ilman selkeää syytä saa käyttäjän epäilemään järjestelmän toimivuutta.
Jos prosessin kokonaisaikaa on vaikea arvioida toiminnon käynnistyessä, voi edistymispalkki edetä ensin hitaammin ja kiihdyttää vauhtia tarvittaessa loppua kohden. Edistymisen hidastuminen lopussa sen sijaan saa aikaan epäluottamusta.
Edistymispalkki ei sovi käytettäväksi sellaisten toimintojen yhteydessä, joiden kestosta ei voida antaa minkäänlaista arviota.
Virhetilanteet
Virhetilanteissa edistymispalkista voi näyttää punaisen version. Virhetilanteessa tulee lisäksi aina näyttää myös virheilmoitus.