Element.ariaRowIndex — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaRowIndex

Beschreibung

Die Eigenschaft ariaRowIndex gehört zur ARIA-Reflection der Element-Schnittstelle. Sie liest und schreibt den Inhalt des Attributs aria-rowindex als String. Das Attribut gibt an, an welcher Stelle eine Zeile (role="row") oder eine Zelle innerhalb der gesamten Zeilenzahl einer table, eines grid oder einer treegrid steht. Gezählt wird ab 1.

Gebraucht wird das vor allem bei virtualisierten oder paginierten Tabellen, bei denen nur ein Teil der Zeilen im DOM liegt. Ein Screenreader kann dann trotzdem „Zeile 512 von 10 000“ ansagen. Meist setzt man zusätzlich aria-rowcount (ariaRowCount) am Container, damit die Gesamtzahl bekannt ist. Sind alle Zeilen im DOM vorhanden, errechnet der Browser die Position selbst, und das Attribut ist überflüssig.

Der Wert ist immer ein string oder null, niemals eine Zahl. Beim Schreiben wird der Wert zu einem String umgewandelt und als Attribut gesetzt. Mit null wird das Attribut entfernt. Die Eigenschaft prüft nicht, ob der Wert gültig ist. Für eine korrekte Ansage muss die Anwendung selbst ganze Zahlen ≥ 1 setzen, die mit der Reihenfolge im DOM übereinstimmen.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null	null	Beim Schreiben: eine positive ganze Zahl als String (z. B. `"42"`), ab 1 gezählt. `null` entfernt das Attribut `aria-rowindex`.

Rückgabewert

Typ

string | null

Beschreibung

Der aktuelle Wert des Attributs aria-rowindex als String oder null, wenn das Attribut nicht gesetzt ist.

Beispiele

Zeilenindex lesen und ändern

// <div role="grid" aria-rowcount="100">
//   <div role="row" id="r1" aria-rowindex="7">…</div>
// </div>
const row = document.getElementById('r1');
console.log(row.ariaRowIndex);          // "7"
console.log(typeof row.ariaRowIndex);   // "string"

row.ariaRowIndex = '8';
console.log(row.getAttribute('aria-rowindex'));

7 string 8

Virtualisiertes Grid: Indizes beim Scrollen setzen

const grid = document.querySelector('[role="grid"]');
const TOTAL = 10000;
grid.ariaRowCount = String(TOTAL + 1); // + Kopfzeile

// Zeigt nur die Datensätze ab 'start' an
const renderWindow = (start, size = 20) => {
  const body = grid.querySelector('.rows');
  body.replaceChildren();
  for (let i = start; i < Math.min(start + size, TOTAL); i++) {
    const row = document.createElement('div');
    row.setAttribute('role', 'row');
    // Kopfzeile = 1, Datensatz 0 = Zeile 2
    row.ariaRowIndex = String(i + 2);
    const cell = document.createElement('div');
    cell.setAttribute('role', 'gridcell');
    cell.textContent = `Datensatz ${i + 1}`;
    row.append(cell);
    body.append(row);
  }
};

renderWindow(500);
console.log(grid.querySelector('[role="row"]').ariaRowIndex);

502

Attribut entfernen und Fallback für ältere Browser

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

const setRowIndex = (el, value) => {
  if ('ariaRowIndex' in el) {
    el.ariaRowIndex = value; // null entfernt das Attribut
  } else if (value === null) {
    el.removeAttribute('aria-rowindex');
  } else {
    el.setAttribute('aria-rowindex', value);
  }
};

setRowIndex(row, null);
console.log(row.hasAttribute('aria-rowindex'));

false

// Wichtig · Fallstricke

Datentyp: Zurück kommt ein String. Wer rechnen will, wandelt vorher mit Number(el.ariaRowIndex) um. Beim Schreiben wird eine Zahl automatisch zum String, el.ariaRowIndex = 5 funktioniert also.
Keine Prüfung: Werte wie \"0\", \"-1\" oder \"abc\" werden ohne Fehler übernommen, sind aber laut ARIA ungültig. Assistive Technologien ignorieren sie dann oder sagen sie falsch an.
Konsistenz: Die Indizes müssen mit der Reihenfolge im DOM steigen. Wenn eine Zeile den Index trägt, sollten ihn ihre Zellen nicht zusätzlich tragen. Auf Zellen ist aria-rowindex nur nötig, wenn die Zeile ihn nicht setzt oder eine Zelle mehrere Zeilen überspannt.
Nicht mit rowIndex verwechseln: HTMLTableRowElement.rowIndex ist ab 0 gezählt und bezieht sich nur auf die Zeilen im DOM. ariaRowIndex zählt ab 1 und bezieht sich auf die logische Gesamttabelle.
Kompatibilität: Chromium und Safari unterstützen die Eigenschaft seit Längerem, Firefox erst ab Version 119. Für ältere Umgebungen stattdessen setAttribute('aria-rowindex', …) verwenden.

Siehe auch

Element.ariaRowCount Element.ariaColIndex Element.ariaRowSpan Element.ariaRowIndexText HTMLTableRowElement.rowIndex Element.setAttribute() Element.ariaRequired