Element.ariaSort — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaSort

Beschreibung

Die Eigenschaft ariaSort gehört zu den ARIA-Reflexionseigenschaften der Element-Schnittstelle. Sie liest und schreibt direkt das HTML-Attribut aria-sort. Damit teilst du assistiven Technologien wie Screenreadern mit, nach welcher Spalte eine Tabelle oder ein Raster (role="grid", role="treegrid") gerade sortiert ist und in welche Richtung.

Gültige Werte sind:

"ascending": aufsteigend sortiert
"descending": absteigend sortiert
"none": nicht sortiert (Standard)
"other": sortiert, aber nach einem anderen Verfahren als auf- oder absteigend

Setze aria-sort nur auf Spalten- oder Zeilenüberschriften (<th> bzw. Elemente mit role="columnheader" oder role="rowheader"). Außerdem sollte immer nur eine Überschrift gleichzeitig einen anderen Wert als "none" tragen. Die Eigenschaft ist bequemer als setAttribute("aria-sort", …), macht aber technisch dasselbe.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null	null	Beim Schreiben: einer der Werte `"ascending"`, `"descending"`, `"none"` oder `"other"`. Mit `null` wird das Attribut entfernt.

Rückgabewert

Typ

string | null

Beschreibung

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

Beispiele

Wert lesen und setzen

// <th id="col-name" aria-sort="ascending">Name</th>
const th = document.getElementById("col-name");
console.log(th.ariaSort);

th.ariaSort = "descending";
console.log(th.getAttribute("aria-sort"));

ascending descending

Sortierbare Tabelle mit barrierefreiem Status

const table = document.querySelector("#produkte");
const headers = [...table.querySelectorAll("thead th")];

const sortBy = (index, direction) => {
  const tbody = table.tBodies[0];
  const rows = [...tbody.rows];
  const factor = direction === "ascending" ? 1 : -1;
  rows.sort((a, b) =>
    a.cells[index].textContent.localeCompare(b.cells[index].textContent, "de", { numeric: true }) * factor
  );
  tbody.append(...rows);

  // Nur die aktive Spalte bekommt einen Sortierwert
  headers.forEach((th, i) => {
    th.ariaSort = i === index ? direction : "none";
  });
};

headers.forEach((th, index) => {
  const button = th.querySelector("button");
  button.addEventListener("click", () => {
    const next = th.ariaSort === "ascending" ? "descending" : "ascending";
    sortBy(index, next);
  });
});

Attribut entfernen und Unterstützung prüfen

const th = document.querySelector("th");

if ("ariaSort" in Element.prototype) {
  th.ariaSort = null; // entfernt aria-sort
} else {
  th.removeAttribute("aria-sort"); // Fallback für ältere Browser
}
console.log(th.hasAttribute("aria-sort"));

false

// Wichtig · Fallstricke

Keine Validierung: Der Browser nimmt jeden String an, zum Beispiel th.ariaSort = "asc". Ungültige Werte werden von assistiven Technologien wie "none" behandelt. Verwende deshalb nur die vier erlaubten Werte.
Nur eine sortierte Spalte: Laut WAI-ARIA sollte immer nur eine Überschrift gleichzeitig ascending, descending oder other tragen. Setze die übrigen auf "none" oder entferne das Attribut.
Nur Semantik: ariaSort sortiert nichts. Die eigentliche Sortierung musst du selbst umsetzen. Die Sortierfunktion sollte über ein fokussierbares Element erreichbar sein, zum Beispiel einen <button> in der Überschrift.
Kompatibilität: Firefox unterstützt die ARIA-Reflexion erst ab Version 119. Für ältere Browser nutzt du setAttribute/getAttribute. Auf Elementen ohne passende Rolle wird der Wert von Screenreadern ignoriert.

Siehe auch

Element.setAttribute() Element.getAttribute() Element.role Element.ariaColIndex Element.ariaRowCount HTMLTableCellElement Element.ariaHasPopup