Element.ariaRowCount — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaRowCount

Beschreibung

Die Eigenschaft ariaRowCount gehört zur ARIA-Reflexion (ARIAMixin) der Element-Schnittstelle. Sie spiegelt das HTML-Attribut aria-rowcount als String wider. Lesen gibt den aktuellen Attributwert zurück, Schreiben setzt das Attribut. Eine direkte Manipulation mit setAttribute() ist also nicht nötig.

Gebraucht wird aria-rowcount, wenn im DOM nicht alle Zeilen einer Tabelle vorhanden sind, etwa bei virtuellem Scrollen, Paginierung oder Lazy Loading. Assistive Technologien wie Screenreader erfahren darüber, wie viele Zeilen es insgesamt gibt, und können z. B. „Zeile 51 von 1000“ ansagen. Die Position einzelner Zeilen gibt man dazu mit aria-rowindex bzw. ariaRowIndex an.

Gültige Werte sind ganze Zahlen als String. Mit "-1" zeigt man an, dass die Gesamtzahl unbekannt ist. Das Attribut gehört auf das Element mit der Rolle table, grid oder treegrid (bzw. auf ein natives <table>). Wenn alle Zeilen im DOM stehen, lässt man es weg, denn dann berechnet der Browser die Anzahl selbst.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null		Beim Setzen: Gesamtzahl der Zeilen als String (z. B. `"1000"`) oder `"-1"`, wenn sie unbekannt ist. Mit `null` wird das Attribut entfernt.

Rückgabewert

Typ

string | null

Beschreibung

Der aktuelle Wert von aria-rowcount als String oder null, wenn das Attribut nicht gesetzt ist.

Beispiele

Wert lesen und setzen

// <table id="kunden" aria-rowcount="250">...</table>
const tabelle = document.getElementById('kunden');
console.log(tabelle.ariaRowCount);

tabelle.ariaRowCount = '300';
console.log(tabelle.getAttribute('aria-rowcount'));

250 300

Virtuelles Scrollen: Gesamtzahl und Zeilenindex melden

const grid = document.querySelector('[role="grid"]');

const renderSeite = (daten, gesamt, offset) => {
  grid.ariaRowCount = String(gesamt + 1); // +1 für die Kopfzeile
  grid.querySelectorAll('[role="row"].daten').forEach((r) => r.remove());

  daten.forEach((eintrag, i) => {
    const zeile = document.createElement('div');
    zeile.role = 'row';
    zeile.className = 'daten';
    zeile.ariaRowIndex = String(offset + i + 2); // 1-basiert, Kopfzeile = 1
    const zelle = document.createElement('div');
    zelle.role = 'gridcell';
    zelle.textContent = eintrag.name;
    zeile.append(zelle);
    grid.append(zeile);
  });
};

renderSeite([{ name: 'Anna' }, { name: 'Ben' }], 1000, 50);
console.log(grid.ariaRowCount);

1001

Unbekannte Gesamtzahl beim Nachladen

const liste = document.querySelector('#feed[role="grid"]');

const ladeMehr = async (seite) => {
  const res = await fetch(`/api/eintraege?seite=${seite}`);
  const { total } = await res.json();
  // Gibt die API keine Gesamtzahl zurück, -1 setzen
  liste.ariaRowCount = Number.isInteger(total) ? String(total) : '-1';
};

ladeMehr(1);

Attribut entfernen, wenn alle Zeilen im DOM sind

const tabelle = document.querySelector('table');
tabelle.ariaRowCount = null;
console.log(tabelle.hasAttribute('aria-rowcount'));

false

// Wichtig · Fallstricke

Typ ist immer String: Zugewiesene Zahlen werden in Strings umgewandelt, und beim Lesen kommt ebenfalls ein String zurück. Zum Rechnen daher Number(el.ariaRowCount) verwenden.
Kopfzeilen zählen mit: aria-rowcount umfasst alle Zeilen, auch Kopf- und Fußzeilen. Die Werte von aria-rowindex beginnen bei 1 und müssen dazu passen.
Nicht setzen, wenn alles gerendert ist: Ist der Wert falsch, bekommen Screenreader-Nutzer falsche Angaben. Wenn alle Zeilen im DOM stehen, das Attribut besser weglassen.
Nur auf passenden Rollen wirksam: table, grid und treegrid. Auf anderen Elementen wird es ignoriert.
Kompatibilität: Firefox unterstützt die ARIA-Reflexion erst ab Version 119. Für ältere Browser setAttribute('aria-rowcount', …) als Rückfallebene nutzen. Die Eigenschaft ändert nur die Semantik im Barrierefreiheitsbaum, nicht die Darstellung.

Siehe auch

Element.ariaRowIndex Element.ariaColCount Element.ariaRowSpan Element.role Element.setAttribute() HTMLTableElement Element.ariaReadOnly