Live-alue

Live-alue on osa DOM:ia, joka — kun sen sisältö muuttuu — ilmoitetaan ruudunlukuohjelman käyttäjille automaattisesti ilman kohdistuksen siirtämistä, ilman että käyttäjää vaaditaan navigoimaan siihen, eikä heidän tarvitse päivittää sivua.

Live-alueet ovat mekanismi jokaisen “Toast: Tuote lisätty ostoskoriin” -ilmoituksen, jokaisen lomakevalidoinnin “Virhe: Sähköposti vaaditaan” -viestin ja jokaisen hakutulosmäärän päivityksen takana, jonka ruudunlukuohjelman käyttäjä tosiasiassa kuulee.

Perusattribuutti

Yksinkertaisin live-alue on div-elementti, jolla on aria-live="polite":

<div aria-live="polite" id="status">
  <!-- tänne lisätty sisältö ilmoitetaan muuttuessaan -->
</div>

Kun JavaScript lisää tekstiä #status-elementtiin, ruudunlukuohjelma ilmoittaa uuden tekstin seuraavassa luonnollisessa tauossa — keskeyttämättä mitä käyttäjä sillä hetkellä lukee.

Polite ja assertive

aria-live-attribuutilla on kaksi toiminnallista arvoa:

• polite — odota kunnes käyttäjä on jouten, sitten ilmoita. Käytä useimmissa ilmoituksissa: vahvistukset, hakumäärät, tilaviestit.
• assertive — keskeytä käyttäjän nykyinen lukeminen ja ilmoita välittömästi. Käytä vain aidosti kiireellisiin viesteihin: kriittiset virheet, istunnon vanhenemisvaroitukset, aikarajoitteiset hälytykset.

Runsas assertive-käyttö on yksittäinen yleisin live-alueen virhekuvio. Jokainen pienikin toast-ilmoitus assertive-tilassa tekee ruudunlukuohjelmasta jatkuvan keskeyttäjän, ja käyttäjä oppii poistamaan live-alueen käytöstä kokonaan.

ARIA-johdetut vaihtoehdot

Useat ARIA-roolit sisältävät aria-live-toiminnallisuuden automaattisesti:

• role="alert" → toimii kuten aria-live="assertive".
• role="status" → toimii kuten aria-live="polite".
• role="log" → polite-tila, käsitteellisellä vihjeellä vain-lisäys-lokista (chat-historia, konsolin tulosteet).
• role="timer" → polite-tila, lähtölaskureille.

Roolin valinta on usein selkeämpää kuin aria-live-arvon suora valinta — se dokumentoi alueen tarkoituksen.

Mitä käytännössä menee pieleen

• Live-alue lisätään samaan aikaan sisällön kanssa. ARIA ilmoittaa vain muutokset live-alueisiin, jotka jo olivat DOM:ssa. <div aria-live="polite">Ladattu</div> lisääminen yhtenä lohkona ei ilmoita — alue ja sisältö saapuivat yhdessä. Korjaus: pidä tyhjä live-alue DOM:ssa sivun latauksesta lähtien, täytä se myöhemmin.
• Liian nopeat päivitykset. Tekstin lisääminen live-alueeseen useita kertoja sekunnissa tyhjentää edellisen ilmoituksen ennen kuin se valmistuu. Käyttäjä kuulee katkelmia. Rajoita tai viivästä (debounce) päivityksiä.
• Modaalinhallitut ilmoitukset, joissa pitäisi käyttää kohdistusta. Jos käyttäjän tahallinen toiminta laukaisi viestin, kohdistuksen siirtäminen viestiin (tai siihen liittyvään ohjaimeen) on usein parempi kuin live-alueen ilmoitukseen luottaminen. Live-alueet ovat passiivisia ilmoituksia varten.
• Koristeellinen kohina live-alueella. Live-alue, joka sisältää latausspinnereitä, kuvakkeita ja aikaleimoja viestin lisäksi, saa ruudunlukuohjelman lukemaan kaiken jokaisen päivityksen yhteydessä. Pidä alueen sisältö vain viestissä.