Live region

Een live region is een deel van de DOM dat, wanneer de inhoud ervan wijzigt, automatisch wordt aangekondigd aan schermlezers-gebruikers — zonder de focus te verplaatsen, zonder dat de gebruiker er naartoe hoeft te navigeren, en zonder dat de pagina hoeft te worden vernieuwd.

Live regions vormen het mechanisme achter elke melding “Toast: Item toegevoegd aan winkelwagen”, elk formuliervalidatiebericht “Fout: E-mailadres is vereist” en elke update van het aantal zoekresultaten dat een schermlezers-gebruiker daadwerkelijk hoort.

Het basisattribuut

De eenvoudigste live region is een div met aria-live="polite":

<div aria-live="polite" id="status">
  <!-- inhoud hier wordt aangekondigd wanneer deze wijzigt -->
</div>

Wanneer JavaScript tekst in #status invoegt, kondigt de schermlezer de nieuwe tekst aan bij de eerstvolgende natuurlijke pauze — zonder te onderbreken wat de gebruiker op dat moment leest.

Polite versus assertive

aria-live heeft twee operationele waarden:

• polite — wacht totdat de gebruiker inactief is en kondigt dan aan. Gebruik voor de meeste meldingen: bevestigingen, aantallen zoekresultaten, statusberichten.
• assertive — onderbreekt het huidige lezen en kondigt onmiddellijk aan. Gebruik uitsluitend voor echt urgente berichten: kritieke fouten, waarschuwingen over verlopen sessies, tijdgevoelige meldingen.

Overmatig gebruik van assertive is de meest voorkomende live-region-fout. Elke kleine toast die assertive activeert, maakt de schermlezer tot een constante onderbreker en traint de gebruiker om de live region volledig uit te schakelen.

Op ARIA gebaseerde alternatieven

Verschillende ARIA-rollen impliceren aria-live automatisch:

• role="alert" → gedraagt zich als aria-live="assertive".
• role="status" → gedraagt zich als aria-live="polite".
• role="log" → polite, met de conceptuele aanduiding van een alleen-toevoegen-log (chatgeschiedenis, console-uitvoer).
• role="timer" → polite, voor afteltimers.

Het kiezen van een rol is vaak duidelijker dan het rechtstreeks kiezen van een aria-live-waarde — het documenteert het doel van de regio.

Wat in de praktijk fout gaat

• Live region tegelijk toegevoegd met de inhoud. ARIA kondigt alleen wijzigingen aan in live regions die al in de DOM bestonden. Het invoegen van <div aria-live="polite">Geladen</div> als één blok kondigt niets aan — de regio en de inhoud zijn samen aangekomen. Oplossing: houd de lege live region in de DOM vanaf het laden van de pagina, en vul deze later in.
• Te snelle updates. Tekst meerdere keren per seconde in een live region invoegen spoelt de vorige aankondiging weg voor deze is afgerond. De gebruiker hoort fragmenten. Beperk of debounce de updates.
• Aankondigingen via modals die focus zouden moeten gebruiken. Als de intentionele actie van de gebruiker het bericht heeft veroorzaakt, is het verplaatsen van de focus naar het bericht (of een gerelateerd besturingselement) vaak beter dan vertrouwen op een live-region-aankondiging. Live regions zijn bedoeld voor passieve meldingen.
• Decoratieve ruis in de live region. Een live region die naast het bericht ook laadanimaties, pictogrammen en tijdstempels bevat, zorgt ervoor dat de schermlezer dit alles bij elke update voorleest. Beperk de inhoud van de regio tot uitsluitend het bericht.