aria-sort

Verwendung

Auf role="columnheader" oder role="rowheader" (oder einem nativen <th>, das als solcher fungiert) in einem Raster oder einer Tabelle, die der Benutzer neu sortieren kann. Das Attribut teilt assistiven Technologien sowohl mit, dass die Spalte sortierbar ist, als auch, in welche Richtung sie aktuell sortiert ist — ein Screenreader-Benutzer hört also „Nachname, aufsteigend sortiert“, bevor er die Spalte nach unten liest.

Wenn die Spalte nicht sortierbar ist, sollte aria-sort nicht daran gesetzt werden. Das Attribut ist der Vertrag, der besagt: „Dies lässt sich ändern.“

Verhalten

Das Attribut akzeptiert vier Token-Werte:

• "ascending" — A→Z, 0→9, älteste→neueste.
• "descending" — Z→A, 9→0, neueste→älteste.
• "none" — sortierbar, aber durch diese Spalte momentan nicht aktiv sortiert. Dies ist der Standardzustand, sobald eine andere Spalte übernimmt.
• "other" — sortierbar, aktuell nach einer nicht-alphabetischen, nicht-numerischen Regel sortiert, die weder aufsteigend noch absteigend beschreibt (z. B. ein benutzerdefinierter Relevanzwert). In der Praxis selten.

Pro Tabelle sollte immer nur ein Kopfelement "ascending", "descending" oder "other" tragen. Ändert der Benutzer die Sortierung, wird die neue Spalte auf ihren neuen Wert gesetzt und die vorherige Spalte auf "none" zurückgesetzt (oder das Attribut wird entfernt).

aria-sort ist eine reine Ansage. Das eigentliche Sortierverhalten — Click-Handler, Tastaturaktivierung, die Neuanordnung der Zeilen — ist Aufgabe des Entwicklungsteams. Assistive Technologien sortieren die Tabelle nicht selbstständig.

Häufige Fehler

• Den sichtbaren Sortierindikator (Pfeilsymbol) aktualisieren, aber vergessen, aria-sort zu aktualisieren. Screenreader-Benutzer hören die falsche Richtung.
• Zwei Spalten mit aria-sort="ascending" belassen, nachdem auf einen neuen Kopf geklickt wurde. Die erste Spalte steuert die Sortierung nicht mehr, beansprucht dies aber weiterhin.
• aria-sort auf eine nicht sortierbare Spalte setzen. Assistive Technologien versprechen ein Sortierverhalten, das der Benutzer gar nicht auslösen kann.
• Einen Wert außerhalb der vier erlaubten Token verwenden — aria-sort="asc" ist ungültig und wird ignoriert.
• Vergessen, dass der Kopf per Tastatur aktivierbar sein muss. aria-sort macht den Spaltenkopf nicht fokussierbar; das ist Aufgabe des Entwicklungsteams.
• aria-sort als Quelle der Wahrheit behandeln, anstatt es aus dem Sortierstatus abzuleiten. Nach einem Re-Render, bei dem das Attribut verloren geht, verschwindet die Ansage.

Beispiel

<table>
  <thead>
    <tr>
      <th
        scope="col"
        aria-sort="ascending"
      >
        <button type="button">Last name</button>
      </th>
      <th scope="col" aria-sort="none">
        <button type="button">First name</button>
      </th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <!-- … rows sorted by Last name ascending -->
  </tbody>
</table>