aria-live

Wanneer te gebruiken

Wanneer een deel van de pagina asynchroon bijwerkt en schermlezersgebruikers dit moeten weten zonder te verstoren wat ze op dat moment lezen. Formuliervalidatiesamenvattingen, zoekresultaataantallen, toast-meldingen, chatberichten en winkelwagentellers zijn de gebruikelijke gevallen.

Kies het beleefdsheidsniveau bewust:

• aria-live="polite" — wacht tot de gebruiker inactief is voordat de aankondiging plaatsvindt. Gebruik dit voor bijna alles. Statusberichten, geladen resultaten, item aan winkelwagen toegevoegd.
• aria-live="assertive" — onderbreek de gebruiker onmiddellijk. Reserveer dit voor echt urgente informatie — sessie verloopt over 30 seconden, formulierverzending mislukt, betaling geweigerd. Overmatig gebruik maakt de pagina als opdringerig.
• aria-live="off" (de standaard) — geen aankondigingen.

De native rollen role="status" (impliciet polite) en role="alert" (impliciet assertive) bundelen aria-live met verstandige standaarden. Geef de voorkeur aan die wanneer ze van toepassing zijn; gebruik aria-live op een aangepaste container wanneer dat niet het geval is.

Synchronisatie behouden

De cruciale regel: de live-regio moet bij de initiële render in de DOM aanwezig zijn. Browsers en hulptechnologieën stellen de “bewaking” van de regio in wanneer deze voor het eerst in de toegankelijkheidsstructuur verschijnt. Als de regio wordt aangemaakt en er inhoud in wordt geplaatst in dezelfde JavaScript-tick, wordt de aankondiging vaak gemist.

Het patroon is:

<div id="status" aria-live="polite"></div>

Render de lege container bij het laden van de pagina. Schrijf later via JavaScript tekst erin. De schermlezer kondigt de wijziging aan.

Overige regels:

• Werk bij via textContent; het vervangen van de volledige buitenste HTML van de regio kan de bewaking verbreken.
• Voor herhaalde aankondigingen is een inhoudswijziging nodig — hetzelfde tekenreeks tweemaal schrijven levert vaak geen tweede aankondiging op. Voeg een teller, een tijdstempel toe of wis de regio kort.
• Combineer met aria-busy="true" tijdens meerstappige updates om gedeeltelijke aankondigingen te vermijden.
• Combineer met aria-atomic om te bepalen of het verschil of de gehele regio wordt aangekondigd.

Veelvoorkomende fouten

• De live-regio aanmaken in dezelfde tick als de inhoud — geen aankondiging.
• aria-live="assertive" voor alles gebruiken. Gebruikers dempen het tabblad.
• aria-live instellen op een focusbaar besturingselement. Live-regio’s zijn bedoeld voor statusupdates, niet voor interactieve widgets.
• De live-regio verbergen met display: none. CSS-verborgen regio’s zijn ook verborgen in de toegankelijkheidsstructuur en produceren geen aankondiging; gebruik in plaats daarvan de visueel-verborgen techniek (clip / sr-only).
• Zeer lange inhoud (alinea’s tekst) in één keer in een live-regio plaatsen — de gebruiker kan niet scannen.
• Vergeten de regio te wissen nadat het bericht is gelezen, zodat identieke vervolgsupdates niets opleveren.

Voorbeeld

<form>
  <label for="zip">Postcode</label>
  <input id="zip" name="zip" />
  <button type="submit">Opzoeken</button>
</form>

<!-- Altijd aanwezig vanaf de initiële render -->
<div id="lookup-status" aria-live="polite" class="sr-only"></div>

<script>
  document.querySelector('form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const status = document.getElementById('lookup-status');
    status.textContent = 'Locatie opzoeken…';
    const place = await lookup(document.getElementById('zip').value);
    status.textContent = `Locatie: ${place}`;
  });
</script>