Signatur
Beschreibung
Die Eigenschaft ariaSetSize gehört zum ARIAMixin und ist daher an jedem Element verfügbar. Sie spiegelt das Inhaltsattribut aria-setsize wider. Beim Lesen erhältst du den Attributwert als String. Beim Schreiben wird das Attribut gesetzt, beim Zuweisen von null wird es entfernt.
aria-setsize gibt an, wie viele Elemente die aktuelle Menge insgesamt enthält. Das ist dann wichtig, wenn nicht alle Einträge im DOM stehen, etwa bei virtualisierten Listen, Endlos-Scrolling, seitenweise geladenen Ergebnissen oder Bäumen, deren Knoten erst beim Aufklappen geladen werden. Ohne diese Angabe berechnen Hilfstechnologien die Anzahl aus den vorhandenen DOM-Knoten, und das Ergebnis stimmt dann nicht.
Normalerweise verwendest du die Eigenschaft zusammen mit ariaPosInSet (aria-posinset). Ein Bildschirmleser kann dann zum Beispiel „Eintrag 5 von 1000“ ansagen. Sinnvoll ist das Attribut bei Elementen mit den Rollen listitem, option, treeitem, row (in treegrid), tab, menuitem, menuitemcheckbox, menuitemradio, radio, article und comment.
Ist die Gesamtzahl unbekannt, setzt du laut ARIA 1.2 den Wert "-1".
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | null | Nur beim Schreiben: die Gesamtzahl der Elemente der Menge als String, z. B. "42". "-1" bedeutet, dass die Anzahl unbekannt ist. null entfernt das Attribut. |
Rückgabewert
aria-setsize als String oder null, wenn das Attribut nicht gesetzt ist.Beispiele
Wert lesen und ändern
// <li id="eintrag" role="option" aria-setsize="20" aria-posinset="3">Banane</li>
const eintrag = document.getElementById('eintrag');
console.log(eintrag.ariaSetSize);
eintrag.ariaSetSize = '25';
console.log(eintrag.getAttribute('aria-setsize'));Virtualisierte Liste: „Eintrag X von Y“ korrekt ansagen
const gesamt = 1000;
const liste = document.querySelector('[role="listbox"]');
// Nur die sichtbaren Einträge 101–120 werden gerendert
const renderFenster = (start, anzahl) => {
liste.replaceChildren();
for (let i = start; i < start + anzahl; i++) {
const option = document.createElement('div');
option.role = 'option';
option.textContent = `Artikel ${i}`;
option.ariaPosInSet = String(i);
option.ariaSetSize = String(gesamt);
liste.append(option);
}
};
renderFenster(101, 20);
console.log(liste.firstElementChild.ariaSetSize);Unbekannte Gesamtzahl bei Endlos-Scrolling
const feed = document.querySelector('[role="feed"]');
const artikelHinzufuegen = (titel, position, gesamtBekannt) => {
const artikel = document.createElement('article');
artikel.textContent = titel;
artikel.ariaPosInSet = String(position);
// -1 = Gesamtzahl unbekannt (ARIA 1.2)
artikel.ariaSetSize = gesamtBekannt ? String(gesamtBekannt) : '-1';
feed.append(artikel);
return artikel;
};
const a = artikelHinzufuegen('Neuer Beitrag', 1, null);
console.log(a.ariaSetSize);
// Attribut wieder entfernen
a.ariaSetSize = null;
console.log(a.hasAttribute('aria-setsize'));// Wichtig · Fallstricke
- Immer ein String: Die Eigenschaft liefert keine Zahl. Zum Rechnen musst du umwandeln, z. B. mit
Number(el.ariaSetSize). Weist du eine Zahl zu, wird sie automatisch in einen String umgewandelt. - Keine Prüfung des Werts: Der Browser prüft nicht, ob der Wert gültig ist. Ungültige Angaben wie
"abc"oder"0"werden übernommen, führen bei Hilfstechnologien aber zu falschen oder fehlenden Ansagen. - Einheitlich setzen: Alle Elemente derselben Menge sollten denselben Wert für
aria-setsizehaben. Setze das Attribut außerdem immer zusammen mitaria-posinset. - Nur bei Bedarf: Stehen alle Einträge im DOM, berechnet der Browser die Werte selbst. Das Attribut ist dann überflüssig und veraltet leicht, wenn sich die Liste ändert.
- Browser-Kompatibilität: Firefox unterstützt die ARIA-Reflexion erst ab Version 119. Für ältere Browser verwendest du
setAttribute('aria-setsize', …). Das funktioniert überall.