Status Globale status

`aria-busy`

Markeert een regio als bezig met bijwerken zodat hulptechnologie tussentijdse aankondigingen onderdrukt. Stel in op "true" tijdens laden of grote DOM-wijzigingen; zet terug op "false" zodra de regio stabiel is.

Wanneer gebruiken

Wanneer een regio asynchroon wordt opgebouwd — een zoekresultatelijst die binnenstroomt, een tabel die zichzelf hersorteert, een chatvenster dat wacht op een netwerkrespons. Zonder aria-busy kunnen schermlezers die zijn gekoppeld aan een live-regio elke gedeeltelijke toestand aankondigen zodra deze verschijnt, wat storend en vaak verwarrend is.

Het patroon is:

Stel aria-busy="true" in op de container voordat de mutatie begint.
Voer het werk uit (verwijder kinderen, haal data op, render opnieuw).
Stel aria-busy="false" in zodra de DOM stabiel is.

Als de container ook een live-regio is (aria-live="polite" of aria-live="assertive"), houdt de schermlezer aankondigingen tegen terwijl aria-busy="true" actief is en produceert één coherente aankondiging nadat aria-busy is teruggezet.

Buiten een live-regio is het attribuut nog steeds nuttig: het signaleert aan hulptechnologie dat de gebruiker nog niet met de inhoud moet interageren, en het werkt goed samen met voortgangsindicatoren.

Instellen en bijhouden

Geldige waarden zijn "true" en "false". Standaard is "false" (of weglaten).

Het attribuut moet de mutatie omhullen. De veelvoorkomende fout is aria-busy="true" instellen, de DOM muteren en vergeten het terug te zetten — de regio lijkt dan permanent te “laden” voor hulptechnologie, ook al is alles visueel in orde.

Combineer het met een zichtbare laadindicator (spinner, skelet, voortgangstekst) zodat ziende gebruikers hetzelfde signaal krijgen. Het attribuut aria-busy is uitsluitend voor hulptechnologie; het rendert zelf niets.

Veelvoorkomende fouten

aria-busy="true" instellen en nooit terugzetten naar "false".
aria-busy instellen nadat de mutatie al heeft plaatsgevonden — te laat, de tussentijdse aankondigingen zijn al afgevuurd.
aria-busy gebruiken zonder aria-live en zonder zichtbare spinner. Ziende gebruikers zien niets; gebruikers van hulptechnologie horen niets.
aria-busy instellen op de volledige <body> voor de gehele levensduur van de applicatie. De scope moet overeenkomen met de regio die daadwerkelijk verandert.
aria-busy gebruiken in plaats van role="progressbar" voor een deterministische voortgangsindicator. Beide zijn aanvullend, geen alternatieven voor elkaar.
Vergeten interactieve besturingselementen binnen de bezig-regio ook uit te schakelen — ziende gebruikers kunnen ze nog steeds zien en bedienen.

Voorbeeld

<section
  id="results"
  aria-live="polite"
  aria-busy="true"
>
  <p>Loading results…</p>
</section>

<script>
  fetch('/api/search')
    .then((r) => r.json())
    .then((data) => {
      const region = document.getElementById('results');
      region.innerHTML = renderResults(data);
      region.setAttribute('aria-busy', 'false');
    });
</script>