Element.ariaColIndex — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaColIndex

Beschreibung

Die Eigenschaft ariaColIndex gehört zur ARIA-Reflexion (ARIAMixin) der Element-Schnittstelle. Sie liest und schreibt direkt das HTML-Attribut aria-colindex. Dieses Attribut gibt an, in welcher Spalte einer Tabelle (role="table"), eines Grids (role="grid") oder eines Treegrids (role="treegrid") eine Zelle oder Zeile steht. Die Zählung beginnt bei 1.

Gebraucht wird das Attribut vor allem bei virtualisierten oder teilweise gerenderten Tabellen, wenn also nur ein Teil der Spalten im DOM vorhanden ist, etwa beim horizontalen Scrollen in großen Datengrids. Assistive Technologien wie Screenreader können dann trotzdem die richtige Position ansagen („Spalte 57 von 200“). Die Gesamtzahl der Spalten wird dazu mit aria-colcount (ariaColCount) am Tabellen- bzw. Grid-Element angegeben.

Wenn alle Spalten im DOM stehen, berechnet der Browser die Position selbst und das Attribut ist überflüssig. Man setzt es auf Zellen (cell, gridcell, columnheader, rowheader). Wenn alle Zellen einer Zeile zusammenhängend sind, darf man es auch auf die Zeile (row) setzen. Dann gilt der Wert für die erste Zelle der Zeile.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null	null	Beim Setzen: eine Zeichenkette mit einer positiven Ganzzahl (ab `"1"`). Mit `null` wird das Attribut `aria-colindex` entfernt.

Rückgabewert

Typ

string | null

Beschreibung

Den aktuellen Wert des Attributs aria-colindex als Zeichenkette (z. B. "3") oder null, wenn das Attribut fehlt.

Beispiele

Spaltenindex lesen und ändern

// HTML: <div role="gridcell" id="zelle" aria-colindex="2">Berlin</div>
const zelle = document.getElementById('zelle');

console.log(zelle.ariaColIndex);        // Wert lesen
zelle.ariaColIndex = '5';               // Wert setzen
console.log(zelle.getAttribute('aria-colindex'));

2 5

Virtualisiertes Grid: nur sichtbare Spalten rendern

// Grid mit 200 Spalten, gerendert werden nur die Spalten 51–55
const grid = document.createElement('div');
grid.setAttribute('role', 'grid');
grid.ariaColCount = '200';

const row = document.createElement('div');
row.setAttribute('role', 'row');

const ersteSichtbare = 51;
for (let i = 0; i < 5; i++) {
  const cell = document.createElement('div');
  cell.setAttribute('role', 'gridcell');
  cell.ariaColIndex = String(ersteSichtbare + i); // 1-basiert!
  cell.textContent = `Wert ${ersteSichtbare + i}`;
  row.append(cell);
}
grid.append(row);
document.body.append(grid);

console.log([...row.children].map((c) => c.ariaColIndex));

["51", "52", "53", "54", "55"]

Attribut entfernen und mit Fallback lesen

const cell = document.querySelector('[role="gridcell"]');
cell.ariaColIndex = null; // entfernt aria-colindex

console.log(cell.hasAttribute('aria-colindex'));

// Numerischer Index mit Fallback
const index = Number(cell.ariaColIndex ?? 0);
console.log(index);

false 0

// Wichtig · Fallstricke

Der Typ ist String, nicht Zahl: Beim Lesen kommt \"3\" zurück, nicht 3. Vor Berechnungen mit Number() umwandeln, sonst verkettet + die Zeichenketten.
Keine Prüfung des Werts: Der Browser nimmt auch ungültige Werte wie \"0\" oder \"abc\" an. Gültig sind laut ARIA aber nur Ganzzahlen ≥ 1, die höchstens aria-colcount betragen.
Zellen, die sich über mehrere Spalten erstrecken, bekommen zusätzlich aria-colspan. aria-colindex gibt dann die erste belegte Spalte an.
Bei nativen <table>-Elementen, deren Spalten alle im DOM stehen, ist das Attribut unnötig. Falsche Werte verwirren Screenreader eher.
Browser-Kompatibilität: Firefox unterstützt die ARIA-Reflexion erst ab Version 119. Für ältere Browser setAttribute('aria-colindex', …) verwenden, das überall funktioniert.
Seit ARIA 1.3 gibt es aria-colindextext (ariaColIndexText) für eine lesbare Alternative, z. B. „Spalte B“.

Siehe auch

Element.ariaColCount Element.ariaColSpan Element.ariaColIndexText Element.ariaRowIndex Element.ariaRowCount Element.setAttribute() Element.ariaHidden