Състояние Глобално състояние

`aria-busy`

Отбелязва дадена област като намираща се в процес на обновяване, така че помощните технологии да потиснат междинните съобщения. Задава се на "true" при зареждане или при мащабни промени в DOM; превключва се на "false", когато областта е стабилна.

Кога да се използва

Когато дадена област се изгражда асинхронно — списък с резултати от търсене, зареждащ се поточно, таблица, която се пренарежда сама, панел за чат, изчакващ мрежов отговор. Без aria-busy екранните четци, свързани с активна област, могат да обявяват всяко частично състояние при появата му, което е шумно и често объркващо.

Моделът е следният:

Задайте aria-busy="true" на контейнера преди да започнете да го мутирате.
Извършете работата (изчистете дъщерните елементи, заредете данните, пререндирайте).
Задайте aria-busy="false", след като DOM е стабилен.

Ако контейнерът е и активна област (aria-live="polite" или aria-live="assertive"), екранният четец задържа съобщенията, докато aria-busy="true" е активен, и произвежда едно цялостно съобщение след като aria-busy се превключи обратно.

Извън активната област атрибутът остава полезен: сигнализира на помощните технологии, че потребителят не трябва да взаимодейства с съдържанието все още, и се съчетава добре с индикатори за напредък.

Как да се поддържа синхронизиран

Допустимите стойности са "true" и "false". Подразбиращата се стойност е "false" (или атрибутът се пропуска).

Атрибутът трябва да обхваща мутацията. Честата грешка е да се зададе aria-busy="true", да се мутира DOM и да се забрави да се върне обратно — областта тогава изглежда постоянно в режим „зареждане” за помощните технологии, дори ако визуално всичко е наред.

Съчетайте го с видим индикатор за зареждане (въртящ се елемент, скелетен изглед, текст за напредъка), за да получат зрящите потребители същия сигнал. Атрибутът aria-busy е само за помощни технологии; сам по себе си не визуализира нищо.

Чести грешки

Задаване на aria-busy="true" и никога не връщане на "false".
Задаване на aria-busy след като мутацията вече е приключила — прекалено късно, междинните съобщения вече са изпратени.
Използване на aria-busy самостоятелно без aria-live и без видим въртящ се елемент. Зрящите потребители не виждат нищо; потребителите на помощни технологии не чуват нищо.
Задаване на aria-busy върху целия <body> за целия живот на приложението. Обхватът трябва да съответства на областта, която реално се променя.
Използване на aria-busy вместо role="progressbar" за детерминиран индикатор за напредък. Двете са допълващи се, а не алтернативни.
Забравяне да се деактивират и интерактивните контроли в заетата област — зрящите потребители все още ги виждат и могат да кликват върху тях.

Пример

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