status

Wanneer gebruiken

Voor niet-urgente adviesberichten: “Opgeslagen”, “12 resultaten”, “Artikel toegevoegd aan winkelwagen”, “Verbinding maken…”. role="status" is gelijkwaardig aan aria-live="polite" plus een impliciete aria-atomic="true" — de schermlezer wacht tot de huidige uiting is afgerond en leest dan de wijziging voor.

De meeste geslaagde formulierverzendingen, zoekresultatentellingen, laadvoltooiingen en toastmeldingen horen hier thuis. Reserveer role="alert" voor echte onderbrekingen.

Het native <output>-element draagt automatisch role="status" — nuttig voor rekenmachine-achtige resultaten in combinatie met <form>-invoer. Voor toast- en statusmeldingen buiten formuliercontext is <div role="status"> het standaard­patroon.

Net als alle live-regio’s MOET het statuselement in de DOM aanwezig zijn voordat het bericht erin wordt geplaatst. Render <div role="status"></div> leeg en werk vervolgens de tekstinhoud bij. Het element van nul af toevoegen met al aanwezige inhoud is onbetrouwbaar.

Afwegingen live-regio

• aria-live="off" — geen aankondiging. Standaard voor gewone inhoud.
• aria-live="polite" (≡ role="status") — aangekondigd bij de volgende pauze. Standaard voor statusberichten.
• aria-live="assertive" (≡ role="alert") — onderbreekt huidige spraak. Alleen gebruiken voor urgente berichten.

WCAG 4.1.3 (Statusberichten, AA) vereist dat statusberichten via een live-regio worden blootgesteld, zodat hulptechnologie ze kan aankondigen zonder een focuswijziging af te dwingen.

Veelvoorkomende fouten

• Statuselement dynamisch aangemaakt met tekst al erin. Veel schermlezers missen de aankondiging.
• Statusinhoud bijwerken met opgemaakt HTML (<span>s en <strong>s). Sommige schermlezers lezen de opmaak letterlijk; houd statusinhoud plat.
• Meerdere updates snel achter elkaar — latere berichten overschrijven eerdere zonder aankondiging.
• role="status" gebruiken voor echt urgente fouten (gebruik dan role="alert").
• Visueel verborgen status zonder aria-atomic-overweging wanneer de tekst zowel stabiele als veranderende delen bevat. De standaard aria-atomic="true" op status leest de hele regio elke keer voor, wat storend kan zijn.

Voorbeeld

<!-- Leeg renderen bij het laden van de pagina -->
<div role="status" id="cartStatus"></div>

<script>
  // Wanneer de winkelwagen wordt bijgewerkt:
  document.getElementById('cartStatus').textContent =
    'Added to cart. 3 items, $42.00 total.';
</script>

<!-- Native equivalent -->
<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>