Signatur
Beschreibung
Die Eigenschaft ariaRowCount der Schnittstelle ElementInternals entspricht dem ARIA-Attribut aria-rowcount. Sie gibt die Gesamtanzahl der Zeilen einer Tabelle (role="table"), eines Rasters (role="grid") oder eines Baumrasters (role="treegrid") an. Der Wert ist ein String mit einer Ganzzahl, z. B. "250". "-1" bedeutet, dass die Gesamtzahl unbekannt ist.
Wichtig ist das vor allem bei virtualisierten oder paginierten Tabellen, bei denen nur ein Teil der Zeilen im DOM liegt. Ohne aria-rowcount würden Screenreader nur die tatsächlich gerenderten Zeilen zählen. Die Position einer einzelnen Zeile gibt man ergänzend mit aria-rowindex an.
Anders als Element.ariaRowCount setzt die Variante über ElementInternals kein sichtbares Attribut im DOM. Sie legt eine semantische Voreinstellung für ein Custom Element fest, die im Barrierefreiheitsbaum erscheint. Setzt die Seite, die das Element verwendet, selbst ein aria-rowcount-Attribut am Host-Element, hat dieses Vorrang. Das Objekt bekommst du innerhalb der Komponente über this.attachInternals().
Rückgabewert
"1000" oder "-1" für unbekannt) oder null, wenn kein Wert gesetzt ist. Beim Setzen wird der Wert in einen String umgewandelt; mit null entfernst du die Voreinstellung wieder.Beispiele
Virtualisiertes Raster mit fester Gesamtzeilenzahl
class DataGrid extends HTMLElement {
#internals;
constructor() {
super();
this.#internals = this.attachInternals();
this.#internals.role = 'grid';
// Nur 20 Zeilen werden gerendert, insgesamt gibt es aber 5000
this.#internals.ariaRowCount = '5000';
}
get rowCountForA11y() {
return this.#internals.ariaRowCount;
}
}
customElements.define('data-grid', DataGrid);
const grid = document.createElement('data-grid');
document.body.append(grid);
console.log(grid.rowCountForA11y);
console.log(grid.getAttribute('aria-rowcount'));Zeilenzahl nach dem Laden von Daten aktualisieren
class LazyTable extends HTMLElement {
#internals = this.attachInternals();
connectedCallback() {
this.#internals.role = 'table';
// Gesamtzahl noch unbekannt
this.#internals.ariaRowCount = '-1';
this.load();
}
async load() {
// Simulierter Server-Aufruf
const total = await new Promise((r) => setTimeout(() => r(1234), 100));
// +1 für die Kopfzeile
this.#internals.ariaRowCount = String(total + 1);
console.log('aria-rowcount:', this.#internals.ariaRowCount);
}
}
customElements.define('lazy-table', LazyTable);
document.body.append(document.createElement('lazy-table'));Voreinstellung entfernen und Feature-Erkennung
class SimpleGrid extends HTMLElement {
#internals = this.attachInternals();
connectedCallback() {
this.#internals.role = 'grid';
if ('ariaRowCount' in this.#internals) {
this.#internals.ariaRowCount = '42';
// Später wieder entfernen, wenn alle Zeilen im DOM liegen
this.#internals.ariaRowCount = null;
console.log(this.#internals.ariaRowCount);
} else {
// Rückfall: sichtbares Attribut setzen
this.setAttribute('aria-rowcount', '42');
}
}
}
customElements.define('simple-grid', SimpleGrid);
document.body.append(document.createElement('simple-grid'));// Wichtig · Fallstricke
- Die Kopfzeile zählt mit:
aria-rowcountumfasst alle Zeilen, also auch Kopf- und Fußzeilen. Das ist eine häufige Fehlerquelle, durch die die Zahl um eins zu niedrig ist. - Nur setzen, wenn nicht alle Zeilen im DOM liegen. Sind alle vorhanden, berechnet der Browser die Anzahl selbst. Ein falscher Wert verwirrt Screenreader-Nutzer.
- Zusammen mit
aria-rowcountsollte jede gerenderte Zeile einaria-rowindexhaben, damit Hilfstechnologien die Position korrekt ansagen. - Die Eigenschaft wirkt nur bei passender Rolle (
table,grid,treegrid), z. B. überinternals.role. - Ein am Host-Element gesetztes
aria-rowcount-Attribut überschreibt den Wert ausElementInternals. attachInternals()darf pro Element nur einmal aufgerufen werden, sonst wird einNotSupportedErrorgeworfen.- Browserunterstützung: Chromium seit Version 81, Safari seit 16.4, Firefox seit 119. In älteren Browsern mit
'ariaRowCount' in internalsprüfen und bei Bedarf auf ein Attribut ausweichen.