Element.ariaRowSpan — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaRowSpan

Beschreibung

Die Eigenschaft ariaRowSpan gehört zur ARIA-Reflection der Schnittstelle Element. Sie liest und setzt den Wert des Attributs aria-rowspan direkt als String. el.ariaRowSpan = "2" bewirkt also dasselbe wie el.setAttribute("aria-rowspan", "2").

Mit aria-rowspan teilen Sie assistiven Technologien wie Screenreadern mit, über wie viele Zeilen sich eine Zelle erstreckt. Das Attribut gehört auf Elemente mit den Rollen cell, gridcell, columnheader oder rowheader. Sinnvoll ist es vor allem bei eigenen Tabellen- und Grid-Komponenten, die aus <div>-Elementen bestehen und per CSS Grid dargestellt werden. Dort gibt es kein natives rowspan.

Bei nativen <td>- und <th>-Elementen verwenden Sie stattdessen das HTML-Attribut rowspan (Eigenschaft HTMLTableCellElement.rowSpan). Setzen Sie dort zusätzlich aria-rowspan, muss der Wert mit rowspan übereinstimmen.

Der Wert ist eine ganze Zahl ab 0 als String. Die Voreinstellung ist 1. Der Wert 0 bedeutet, dass sich die Zelle bis zum Ende des aktuellen Zeilenbereichs erstreckt.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null		Nur beim Setzen: eine nicht-negative ganze Zahl als String, z. B. `"3"`. Mit `null` wird das Attribut `aria-rowspan` entfernt.

Rückgabewert

Typ

string | null

Beschreibung

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

Beispiele

Wert lesen und ändern

// <div role="gridcell" id="termin" aria-rowspan="2">Meeting</div>
const zelle = document.getElementById("termin");

console.log(zelle.ariaRowSpan);

zelle.ariaRowSpan = "3";
console.log(zelle.getAttribute("aria-rowspan"));

2 3

Kalender-Grid: Termin über mehrere Zeitslots

// Ein Termin belegt mehrere Stunden-Zeilen in einem CSS-Grid-Kalender
const erstelleTermin = (titel, startZeile, dauerStunden) => {
  const zelle = document.createElement("div");
  zelle.role = "gridcell";
  zelle.textContent = titel;
  // Optische Darstellung per CSS Grid
  zelle.style.gridRow = `${startZeile} / span ${dauerStunden}`;
  // Semantik für Screenreader
  zelle.ariaRowSpan = String(dauerStunden);
  return zelle;
};

const termin = erstelleTermin("Workshop", 2, 3);
document.querySelector("[role=grid]")?.append(termin);
console.log(termin.outerHTML);

<div role="gridcell" style="grid-row: 2 / span 3;" aria-rowspan="3">Workshop</div>

Attribut entfernen und Rückfall prüfen

const zelle = document.querySelector("[role=cell]");
zelle.ariaRowSpan = "2";

// Zurücksetzen: Attribut wird entfernt
zelle.ariaRowSpan = null;

console.log(zelle.hasAttribute("aria-rowspan"));
console.log(zelle.ariaRowSpan);

// Numerischer Wert mit Rückfall auf den Standardwert 1
const spanne = Number.parseInt(zelle.ariaRowSpan ?? "1", 10);
console.log(spanne);

false null 1

// Wichtig · Fallstricke

Immer ein String: Die Eigenschaft liefert keinen number-Wert. Zum Rechnen wandeln Sie ihn mit Number.parseInt() um. Weisen Sie eine Zahl zu, wird sie automatisch in einen String umgewandelt.
Keine Prüfung des Werts: Der Browser nimmt auch ungültige Werte wie "abc" oder "-1" an. Assistive Technologien ignorieren solche Werte dann oder deuten sie falsch.
Keine Wirkung auf das Layout: aria-rowspan verändert nur die Semantik im Barrierefreiheitsbaum. Die optische Darstellung übernehmen Sie selbst, z. B. mit grid-row: span n.
Native Tabellen: Bei <td> und <th> verwenden Sie rowspan. Widersprüchliche Werte in rowspan und aria-rowspan sind nicht zulässig.
Kompatibilität: Firefox unterstützt die ARIA-Reflection erst ab Version 119. Für ältere Browser verwenden Sie setAttribute("aria-rowspan", …). Das funktioniert überall.

Siehe auch

Element.role Element.ariaSort Element.ariaColSpan Element.ariaRowCount Element.ariaModal