Tilstand Global tilstand

`aria-busy`

Markerer en region som midt i en opdatering, så hjælpeteknologi undertrykker midlertidige annonceringer. Sæt til "true" under indlæsning eller ved store DOM-ændringer; skift tilbage til "false", når regionen er stabil.

Hvornår bruges den

Når en region genopbygges asynkront — en søgeresultatliste, der streamer ind, en tabel, der sorterer sig selv, et chatpanel, der venter på et netværkssvar. Uden aria-busy kan skærmlæsere tilknyttet en live-region annoncere hvert delvist tilstand, efterhånden som det vises, hvilket er støjende og ofte forvirrende.

Mønsteret er:

Sæt aria-busy="true" på beholderen inden du begynder at mutere den.
Udfør arbejdet (ryd børn, hent data, re-render).
Sæt aria-busy="false", når DOM’en er stabil.

Hvis beholderen også er en live-region (aria-live="polite" eller aria-live="assertive"), tilbageholder skærmlæseren annonceringer, mens aria-busy="true" er aktiv, og producerer én sammenhængende annoncering, efter at aria-busy skifter tilbage.

Uden for en live-region er attributten stadig nyttig: den signalerer til hjælpeteknologi, at brugeren endnu ikke bør handle på indholdet, og den fungerer godt sammen med fremskridtsindikatorer.

Sådan holdes den synkroniseret

Gyldige værdier er "true" og "false". Standard er "false" (eller udelad).

Attributten skal omfavne mutationen. Den hyppige fejl er at sætte aria-busy="true", mutere DOM’en og glemme at sætte den tilbage — regionen fremstår derefter permanent “indlæser” for hjælpeteknologi, selv om alt visuelt ser fint ud.

Par den med en synlig indlæsningsindikator (spinner, skelet, fremskridtstekst), så seende brugere får det samme signal. aria-busy-attributten er kun for hjælpeteknologi; den renderer intet i sig selv.

Hyppige fejl

Sætte aria-busy="true" og aldrig sætte den tilbage til "false".
Sætte aria-busy efter mutationen allerede er sket — for sent, de midlertidige annonceringer er allerede affyret.
Bruge aria-busy alene uden nogen aria-live og ingen synlig spinner. Seende brugere ser intet; hjælpeteknologi-brugere hører intet.
Sætte aria-busy på hele <body> for hele appens levetid. Omfanget bør matche den region, der faktisk ændres.
Bruge aria-busy i stedet for role="progressbar" til en determineret fremskridtsindikator. De to supplerer hinanden; de er ikke alternativer.
Glemme at deaktivere interaktive kontroller inden i den optagne region — seende brugere kan stadig se og klikke på dem.

Eksempel

<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>