Element.ariaRowIndexText — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaRowIndexText

Beschreibung

Die Eigenschaft ariaRowIndexText ist Teil des ARIAMixin und spiegelt das Attribut aria-rowindextext eines Elements wider. Screenreader lesen damit statt der reinen Zahl aus aria-rowindex einen sprechenden Text vor, etwa „Woche 3“ oder „Position B“.

Einsetzen solltest du sie, wenn die numerische Zeilenposition für Nutzer wenig aussagt, z. B. bei Kalendern, Spielplänen, Tabellenkalkulationen mit eigener Beschriftung oder virtualisierten Grids, in denen nur ein Teil der Zeilen im DOM steht. Das Attribut gehört auf Elemente mit der Rolle row (oder auf cell/gridcell) und sollte immer zusätzlich zu aria-rowindex gesetzt werden, nie als Ersatz.

Die Eigenschaft ist ein einfacher String-Reflektor: Beim Lesen bekommst du den Attributwert oder null, wenn das Attribut fehlt. Beim Setzen wird das Attribut geschrieben, und wenn du null zuweist, wird es entfernt. Eine Prüfung oder Umwandlung des Inhalts findet nicht statt.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null	null	Beim Setzen: der menschenlesbare Text für die Zeilenposition. Mit `null` wird das Attribut `aria-rowindextext` entfernt.

Rückgabewert

Typ

string | null

Beschreibung

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

Beispiele

Wert lesen und setzen

// <div role="row" id="r3" aria-rowindex="3" aria-rowindextext="Woche 3">…</div>
const row = document.getElementById('r3');
console.log(row.ariaRowIndexText);

row.ariaRowIndexText = 'Kalenderwoche 3';
console.log(row.getAttribute('aria-rowindextext'));

Woche 3 Kalenderwoche 3

Virtualisiertes Grid: Zeilen sprechend beschriften

const renderRows = (grid, data, offset) => {
  grid.replaceChildren();
  data.forEach((entry, i) => {
    const row = document.createElement('div');
    row.role = 'row';
    row.ariaRowIndex = String(offset + i + 1);          // numerische Position
    row.ariaRowIndexText = `Spieltag ${entry.matchday}`; // lesbare Alternative
    row.textContent = `${entry.home} – ${entry.away}`;
    grid.append(row);
  });
};

const grid = document.querySelector('[role="grid"]');
renderRows(grid, [
  { matchday: 12, home: 'Köln', away: 'Mainz' },
  { matchday: 13, home: 'Bremen', away: 'Kiel' }
], 40);
console.log(grid.firstElementChild.ariaRowIndexText);

Spieltag 12

Attribut entfernen und Feature-Erkennung

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

if ('ariaRowIndexText' in Element.prototype) {
  row.ariaRowIndexText = null; // entfernt das Attribut
} else {
  row.removeAttribute('aria-rowindextext'); // Fallback
}
console.log(row.hasAttribute('aria-rowindextext'));

false

// Wichtig · Fallstricke

Nie ohne aria-rowindex: Laut Spezifikation muss aria-rowindextext zusammen mit aria-rowindex stehen. Hilfstechnologien ohne Unterstützung für ARIA 1.3 greifen auf den numerischen Index zurück.
Browser-Unterstützung: Die reflektierte Eigenschaft gibt es erst in neueren Browsern (Firefox erst ab Version 119). Für ältere Umgebungen nimmst du setAttribute('aria-rowindextext', …), das überall funktioniert. Ob Screenreader den Wert tatsächlich vorlesen, unterscheidet sich je nach Kombination aus Browser und Screenreader.
Kein leerer String: '' setzt ein leeres Attribut, statt es zu entfernen. Zum Entfernen weist du null zu.
Halte den Text kurz und eindeutig. Er ersetzt die Zahl beim Vorlesen, sollte sie also nicht einfach wiederholen („Zeile 3“ bringt keinen Mehrwert).

Siehe auch

Element.ariaRowIndex Element.ariaColIndexText Element.ariaRowCount Element.ariaRowSpan Element.setAttribute() Element.ariaFlowToElements ElementInternals.ariaOwnsElements