Tillstånd Globalt tillstånd

`aria-busy`

Markerar en region som mitt i en uppdatering så att hjälpmedelsteknik undertrycker interimistiska meddelanden. Sätt till "true" under laddning eller när stora DOM-ändringar pågår; växla tillbaka till "false" när regionen är stabil.

När du ska använda det

När en region byggs om asynkront — en sökresultatlista som streamas in, en tabell som sorteras om, en chattpanel som väntar på ett nätverkssvar. Utan aria-busy kan skärmläsare kopplade till en direktsänd region meddela varje delvis tillstånd när det visas, vilket är störande och ofta förvirrande.

Mönstret är:

Sätt aria-busy="true" på behållaren innan du börjar ändra den.
Utför arbetet (rensa barn, hämta data, rendera om).
Sätt aria-busy="false" när DOM är stabil.

Om behållaren också är en direktsänd region (aria-live="polite" eller aria-live="assertive") håller skärmläsaren tillbaka meddelanden medan aria-busy="true" är aktivt och ger ett enda sammanhängande meddelande efter att aria-busy växlats tillbaka.

Utanför en direktsänd region är attributet ändå användbart: det signalerar till hjälpmedelsteknik att användaren inte bör agera på innehållet ännu, och det fungerar väl tillsammans med förloppsindikatorer.

Hur du håller det i synk

Giltiga värden är "true" och "false". Standard är "false" (eller utelämna det).

Attributet måste omsluta mutationen. Det vanliga felet är att sätta aria-busy="true", mutera DOM och glömma att sätta tillbaka det — regionen verkar sedan permanent “laddas” för hjälpmedelsteknik även om allt ser bra ut visuellt.

Para ihop det med en synlig laddningsindikator (spinner, skelett, förloppsttext) så att seende användare får samma signal. Attributet aria-busy är bara för hjälpmedelsteknik; det renderar inget på egen hand.

Vanliga fel

Sätter aria-busy="true" och sätter aldrig tillbaka det till "false".
Sätter aria-busy efter att mutationen redan skett — för sent, de interimistiska meddelandena har redan utlösts.
Använder aria-busy utan aria-live och utan synlig spinner. Seende användare ser ingenting; hjälpmedelsanvändare hör ingenting.
Sätter aria-busy på hela <body> under hela appens livstid. Omfånget bör matcha den region som faktiskt ändras.
Använder aria-busy i stället för role="progressbar" för en bestämd förloppindikator. De två kompletterar varandra, de är inte alternativ.
Glömmer att också inaktivera interaktiva kontroller inuti den aktiva regionen — seende användare kan fortfarande se och klicka på dem.

Exempel

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