status

Milloin käyttää

Ei-kiireellisiin tiedoteviesteihin: “Tallennettu”, “12 tulosta”, “Tuote lisätty ostoskoriin”, “Yhdistetään…”. role="status" vastaa aria-live="polite"-arvoa ja implisiittistä aria-atomic="true"-arvoa — ruudunlukuohjelma odottaa nykyisen lausuman loppumista, sitten lukee muutoksen.

Useimmat lomakkeen lähetyksen onnistumiset, hakutulosten määrät, latauksen valmistumiset ja toast-ilmoitukset kuuluvat tähän. Varaa role="alert" aitoihin keskeytyksiä vaativiin tilanteisiin.

Natiivi <output>-elementti kantaa role="status"-roolia automaattisesti — hyödyllinen laskintyylisille tuloksille <form>-syötteiden yhteydessä. Toast- ja tilaviestintään lomakekontekstin ulkopuolella <div role="status"> on vakiokuvio.

Kuten kaikissa reaaliaikaisissa alueissa, status-elementin TÄYTYY olla DOM:ssa ennen viestin lisäämistä. Renderöi <div role="status"></div> tyhjänä, sitten päivitä sen tekstisisältö. Elementin lisääminen tyhjästä sisältö jo sisällä on epäluotettavaa.

Reaaliaikaisen alueen kompromissit

• aria-live="off" — ei ilmoitusta. Oletus tavalliselle sisällölle.
• aria-live="polite" (≡ role="status") — ilmoitetaan seuraavalla tauolla. Oletus tilaviesteille.
• aria-live="assertive" (≡ role="alert") — keskeyttää nykyisen puheen. Käytä vain kiireellisiin viesteihin.

WCAG 4.1.3 (Tilaviestit, AA) edellyttää, että tilaviestit paljastetaan reaaliaikaisen alueen kautta, jotta avustava teknologia voi ilmoittaa niistä ilman kohdistuksen pakottamista muutokseen.

Yleiset virheet

• Status-elementti luodaan lennossa teksti jo sisällä. Monet ruudunlukuohjelmat eivät havaitse ilmoitusta.
• Status päivitetään merkityllä sisällöllä (<span>- ja <strong>-elementeillä). Jotkin ruudunlukuohjelmat lukevat merkinnän kirjaimellisesti; pidä status-sisältö pelkkänä tekstinä.
• Useita nopeita peräkkäisiä päivityksiä — myöhemmät viestit ylikirjoittavat aiemmat ilman ilmoitusta.
• role="status"-roolin käyttö aidosti kiireellisiin virheisiin (käytä role="alert").
• Visuaalisesti piilotettu status ilman aria-atomic-harkintaa, kun teksti sisältää sekä vakaita että muuttuvia osia. aria-atomic="true" oletusarvo status-elementissä lukee koko alueen joka kerta, mikä voi olla häiritsevää.

Esimerkki

<!-- Renderöi tyhjänä sivun latauksessa -->
<div role="status" id="cartStatus"></div>

<script>
  // Kun ostoskori päivittyy:
  document.getElementById('cartStatus').textContent =
    'Added to cart. 3 items, $42.00 total.';
</script>

<!-- Natiivi vastaava -->
<form>
  <label>a <input type="number" id="a"></label>
  <label>b <input type="number" id="b"></label>
  <output for="a b" id="sum">0</output>
</form>