Signatur
Beschreibung
Die Eigenschaft ariaBusy gehört zu den ARIA-Reflexionseigenschaften der Element-Schnittstelle. Sie liest und setzt den Wert des HTML-Attributs aria-busy. Einen setAttribute()-Aufruf braucht man dafür nicht. Ist der Wert "true", wissen Screenreader und andere Hilfstechnologien, dass der Inhalt des Elements gerade aktualisiert wird. Sie können dann warten, bis die Änderung fertig ist, und erst danach vorlesen.
Typische Fälle sind Live-Regionen (aria-live), die in mehreren Schritten gefüllt werden, Listen, die per fetch() nachgeladen werden, und Bereiche mit Ladeanzeigen. Setzt man ariaBusy vor der Aktualisierung auf "true" und danach auf "false", hört der Nutzer keine halbfertigen Zwischenstände.
Die Eigenschaft ist ein String und kein Boolean. Gültige Werte sind "true" und "false". Fehlt das Attribut, liefert die Eigenschaft null. Setzt man null, wird das Attribut entfernt.
Rückgabewert
"true", wenn das Element gerade verändert wird, "false", wenn nicht. null, wenn das Attribut aria-busy nicht gesetzt ist.Beispiele
Wert lesen und setzen
// <div id="clock" role="timer" aria-busy="false">12:00</div>
const el = document.getElementById('clock');
console.log(el.ariaBusy);
el.ariaBusy = 'true';
console.log(el.getAttribute('aria-busy'));Live-Region beim Nachladen als beschäftigt markieren
// <ul id="feed" aria-live="polite"></ul>
const feed = document.getElementById('feed');
const loadFeed = async () => {
feed.ariaBusy = 'true';
try {
const res = await fetch('/api/news');
const items = await res.json();
feed.replaceChildren(...items.map(({ title }) => {
const li = document.createElement('li');
li.textContent = title;
return li;
}));
} finally {
// Erst jetzt liest der Screenreader die fertige Liste vor
feed.ariaBusy = 'false';
}
};
loadFeed();Attribut entfernen und Fallstrick beim String-Vergleich
const box = document.createElement('section');
console.log(box.ariaBusy); // Attribut fehlt
box.ariaBusy = 'false';
// Achtung: 'false' ist ein nicht leerer String und damit truthy!
console.log(Boolean(box.ariaBusy));
console.log(box.ariaBusy === 'true');
box.ariaBusy = null; // entfernt das Attribut
console.log(box.hasAttribute('aria-busy'));// Wichtig · Fallstricke
- String statt Boolean:
if (el.ariaBusy)ist auch bei"false"wahr. Vergleiche deshalb immer ausdrücklich mit=== 'true'. - Weist man einen Boolean zu (
el.ariaBusy = true), wird er in den String"true"umgewandelt. Klarer ist es, gleich Strings zu verwenden. - Denke daran,
ariaBusynach dem Laden wieder auf"false"zu setzen, am besten in einemfinally-Block. Sonst bleibt der Inhalt für Hilfstechnologien möglicherweise dauerhaft stumm. aria-busyersetzt keinen sichtbaren Ladeindikator. Es ändert nur, wie Hilfstechnologien den Inhalt ansagen.- Kompatibilität: Firefox unterstützt die ARIA-Reflexionseigenschaften erst ab Version 119. Für ältere Browser nimm
setAttribute('aria-busy', 'true'), das überall funktioniert.