Tilaviestit

Mitä vaaditaan

Kun sivu kertoo käyttäjälle, että jotakin tapahtui — “Tuote lisätty ostoskoriin”, “3 tulosta löydetty”, “Yhteys katkesi”, “Tallennetaan…” — viestin on tavoitettava ruudunlukuohjelman käyttäjät ilman, että kohdistus pakotetaan siirtymään. Tiedon on oltava ohjelmallisesti määritettävissä tilaksi, jotta avustava teknologia pystyy poimimaan ja ilmoittamaan sen.

WCAG:n esiin nostamat kolme luokkaa:

• Onnistuminen / valmistuminen — “Profiili tallennettu”, “Sähköposti lähetetty.”
• Toiminnon tulokset — “12 tulosta”, “Ei osumia.”
• Sovelluksen tila — “Tallennetaan…”, “Yhdistetään uudelleen”, “Lataus 40 %.”

Vaatimustenmukaisuuden saavuttaminen

• Sijoita live-alue DOM:iin sivun latauksen yhteydessä — tyhjä elementti, jolla on role="status" (kohteliaan) tai role="alert" (assertiivinen). Päivityksen yhteydessä kirjoita uusi teksti siihen.
• Ei-kriittisille vahvistuksille ja tulosten määrille käytä role="status" tai aria-live="polite". Ruudunlukuohjelmat odottavat käyttäjän olevan jouten ja ilmoittavat sitten.
• Kriittisille viesteille — lomakkeen lähetysvirheet, yhteyden katkeaminen, istunto vanhenee pian — käytä role="alert" tai aria-live="assertive". Ilmoitus keskeyttää.
• Ponnahdusviestit tarvitsevat live-alueen. Ponnahdusviestisäilön tulisi olla DOM:issa ennen kuin ponnahdusviesti ilmestyy, aria-live asetettuna, ja ponnahdusviestiteksti injektoituna lapseksi.
• Pariuta aria-live aria-atomic="true":lla, jos haluat koko alueen luettavan uudelleen jokaisen päivityksen yhteydessä eikä vain muuttuneiden solmujen.
• Lomakevirheille inline-virheviestiä voidaan käyttää role="alert":lla, tai kohdistus voidaan siirtää yhteenvetoon lomakkeen yläosassa — mutta älä tee molempia; käyttäjien tarvitsee kuulla se vain kerran.

Yleiset virheet

• Ponnahdusviestit renderöitynä elementtiin, jota ei ollut olemassa ennen ponnahdusta — live-alueen kuuntelija ei koskaan kiinnity, mitään ei ilmoiteta.
• Onnistumisbanneri, joka lisätään mutta joka sijaitsee minkään aria-live-alueen ulkopuolella — näkyvä näkeville käyttäjille, näkymätön ruudunlukuohjelman käyttäjille.
• Hakutulosten määrä (“Näytetään 12 / 340”), joka päivittyy hiljaa suodattamisen jälkeen. Käyttäjät siirtyvät tuloksiin tietämättä, muuttuiko mitään.
• Lomakevalidointi, joka päivittää inline-<span class="error">-elementin ilman role="alert":ia tai aria-live:ta — virhe ilmestyy, ruudunlukuohjelma pysyy hiljaisena.
• aria-live="assertive":n käyttö jokaiselle tilapäivitykselle. Jatkuvat keskeytykset; ruudunlukuohjelman käyttäjät poistavat sivun käytöstä.
• Kohdistuksen siirtäminen tilaviestiin, joka ei ole otsikko eikä interaktiivinen — kohdistus laskeutuu ei-taulutettavaan elementtiin ja näppäimistön käyttäjät menettävät sijaintinsa.
• “Tallennetaan…” / “Tallennettu” -indikaattorit, jotka vaihtavat CSS-luokkaa mutta eivät koskaan päivitä tekstisisältöä live-alueessa.

Miksi tämä on tärkeää

Tilaviestit ovat kohta, jossa modernit yhden sivun sovellukset epäonnistuvat. Sivu ei koskaan lataudu uudelleen, kohdistus siirtyy harvoin, joten käyttäjän ainoa merkki siitä, että jotakin tapahtui, on visuaalinen muutos — turha kaikille, jotka eivät katso näyttöä. 4.1.3 pakottaa tasavertaisuuden: jos näkevä käyttäjä voi nähdä “Lisätty ostoskoriin”, ruudunlukuohjelman käyttäjä voi kuulla sen. Korjaus on lähes aina halpa (yksi live-alue, täytetty päivityksen yhteydessä) ja sen puuttuminen katkaisee lähes aina ydintoiminnot — kassaprosessi, haku, lomakkeen lähetys, reaaliaikainen chat.