Stan Stan globalny

`aria-busy`

Oznacza region jako będący w trakcie aktualizacji, dzięki czemu technologie wspomagające wstrzymują tymczasowe komunikaty. Ustaw na „true" podczas ładowania lub gdy trwają duże zmiany w DOM; przełącz z powrotem na „false", gdy region jest stabilny.

Kiedy używać

Gdy region jest asynchronicznie przebudowywany — lista wyników wyszukiwania strumieniowana na bieżąco, tabela ponownie sortująca się, panel czatu oczekujący na odpowiedź sieciową. Bez aria-busy czytniki ekranu podłączone do regionu live mogą ogłaszać każdy stan pośredni w miarę jego pojawiania się, co jest hałaśliwe i często mylące.

Wzorzec wygląda następująco:

Ustaw aria-busy="true" na kontenerze przed rozpoczęciem jego modyfikacji.
Wykonaj pracę (wyczyść potomków, pobierz dane, ponownie wyrenderuj).
Ustaw aria-busy="false" po ustabilizowaniu się DOM.

Jeśli kontener jest również regionem live (aria-live="polite" lub aria-live="assertive"), czytnik ekranu wstrzymuje komunikaty podczas aria-busy="true" i wydaje jeden spójny komunikat po przełączeniu aria-busy z powrotem.

Poza regionem live atrybut nadal jest przydatny: sygnalizuje technologiom wspomagającym, że użytkownik nie powinien jeszcze działać na zawartości, i dobrze współdziała ze wskaźnikami postępu.

Jak utrzymywać synchronizację

Prawidłowe wartości to "true" i "false". Domyślnie stosuj "false" (lub pomijaj).

Atrybut musi obejmować całą mutację. Typowym błędem jest ustawienie aria-busy="true", modyfikacja DOM i zapomnienie o przywróceniu wartości — region wydaje się wówczas stale „ładować” dla technologii wspomagających, mimo że wizualnie wszystko wygląda prawidłowo.

Połącz z widocznym wskaźnikiem ładowania (spinner, skeleton, tekst postępu), aby wzrokowi użytkownicy otrzymywali ten sam sygnał. Atrybut aria-busy jest przeznaczony wyłącznie dla technologii wspomagających; sam w sobie nic nie renderuje.

Typowe błędy

Ustawienie aria-busy="true" i nigdy nieprzywrócenie wartości "false".
Ustawienie aria-busy po tym, jak mutacja już nastąpiła — za późno, tymczasowe komunikaty zostały już wysłane.
Użycie aria-busy samodzielnie, bez aria-live i bez widocznego spinnera. Wzrokowi użytkownicy nic nie widzą; użytkownicy technologii wspomagających nic nie słyszą.
Ustawienie aria-busy na całym <body> przez cały czas życia aplikacji. Zakres powinien odpowiadać regionowi, który faktycznie się zmienia.
Użycie aria-busy zamiast role="progressbar" dla determistycznego wskaźnika postępu. Oba są komplementarne, nie alternatywne.
Zapomnienie o wyłączeniu interaktywnych kontrolek wewnątrz zajętego regionu — wzrokowi użytkownicy nadal je widzą i mogą klikać.

Przykład

<section
  id="results"
  aria-live="polite"
  aria-busy="true"
>
  <p>Ładowanie wyników…</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>