Zustand Widget-Zustand

`aria-current`

Markiert das Element, das den aktuellen Eintrag in einer Menge repräsentiert — die aktive Seite in einer Navigation, den aktuellen Schritt in einem Assistenten, den heutigen Tag in einem Kalender. Spezifischer als aria-selected; für Links und Einträge, bei denen Selektion nicht die passende Metapher ist.

Anwendungsfälle

Für das eine Element, das „Sie befinden sich hier“ innerhalb einer Gruppe zusammengehöriger Elemente signalisiert. Der klassische Fall ist der aktive Link in einer primären Navigation: Ein Screenreader kündigt an „Preise, aktuelle Seite, Link“, und sehende Nutzende sehen ein hervorgehobenes Element, das dem Eintrag entspricht.

Weitere häufige Fälle:

Der aktuelle Schritt in einem mehrstufigen Formular oder Assistenten (aria-current="step").
Das heutige Datum in einem Kalender-Grid (aria-current="date").
Das aktive Breadcrumb (aria-current="page").
Das gerade wiedergegebene Element in einer Medien-Playlist (aria-current="true").

Abgrenzung zu verwandten Zuständen:

aria-current — „Sie sind hier“ innerhalb einer Navigation oder Elementmenge. Wird auf Links und ähnlichen Widgets verwendet, die nicht auf Selektion basieren.
aria-selected — Selektion innerhalb eines Auswahl-Containers (Tabliste, Listbox, Tree, Grid). Die Selektion wird von Nutzenden selbst geändert.
aria-pressed — Umschalt-Schaltfläche. Die Schaltfläche selbst ist ein- oder ausgeschaltet.
aria-checked — Kontrollkästchen oder Optionsfeld. Unabhängige Auswahl.

Synchronisation

Gültige Werte: "page", "step", "location", "date", "time", "true", "false". Es empfiehlt sich, den spezifischsten Token zu wählen — "page" für Navigationslinks, "step" für Assistenten, "date" für Kalender. "true" ist der generische Fallback, wenn keiner der anderen Token passt. "false" (Standard) bedeutet „nicht aktuell“; in der Regel wird das Attribut bei nicht-aktuellen Elementen einfach weggelassen.

In einem Navigationsmenü sollte genau ein Link aria-current tragen. Nach clientseitigen Routenwechseln muss der Wert aktualisiert werden; serverseitig gerenderte Seiten können ihn direkt ins HTML schreiben.

Das aktuelle Element sollte auch visuell hervorgehoben werden, damit sehende Nutzende dieselbe Information erhalten. Ein gebräuchliches Muster ist [aria-current="page"] { font-weight: 600; }.

Typische Fehler

aria-current="true" auf jeden Navigationslink setzen — oder auf keinen.
aria-selected auf einem Navigationslink verwenden — falsche Semantik; der Link ist keine auswählbare Option.
Vergessen, aria-current nach clientseitigen Routenwechseln in einer Single-Page-App zu aktualisieren.
Den aktiven Zustand nur visuell per CSS ausdrücken, ohne aria-current zu setzen. Screenreader kündigen dann keine unterscheidende Information an.
aria-current="page" auf einer Schaltfläche verwenden, die kein Navigationslink ist.
aria-current auf dem <nav>-Container statt auf dem einzelnen Link setzen.

Beispiel

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/pricing" aria-current="page">Pricing</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>