Element.ariaCurrent — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaCurrent

Beschreibung

Die Eigenschaft ariaCurrent gehört zur ARIA-Reflexion des Element-Interfaces. Sie liest und schreibt direkt das HTML-Attribut aria-current. Damit teilt man Hilfstechnologien wie Screenreadern mit, welches Element in einer Gruppe gerade das aktuelle ist, etwa die aktive Seite in einer Navigation, der aktuelle Schritt in einem Assistenten oder das heutige Datum in einem Kalender.

Erlaubt sind die Zeichenketten "page", "step", "location", "date", "time", "true" und "false". Ungültige Werte behandeln Hilfstechnologien wie "true". Ist das Attribut nicht gesetzt, liefert die Eigenschaft null.

Wenn man die Eigenschaft setzt, ändert sich sofort auch das Attribut. Ein Aufruf von setAttribute('aria-current', …) ist deshalb nicht mehr nötig. Setzt man null, wird das Attribut entfernt. Gerade in Single-Page-Anwendungen muss man aria-current nach jedem Routenwechsel neu vergeben, damit immer nur ein Element pro Gruppe als aktuell markiert ist.

Rückgabewert

Typ

string | null

Beschreibung

Der aktuelle Wert des Attributs aria-current als Zeichenkette ("page", "step", "location", "date", "time", "true" oder "false"). Fehlt das Attribut, ist der Wert null.

Beispiele

Wert auslesen und ändern

// HTML: <a id="home" href="/" aria-current="page">Start</a>
const link = document.getElementById('home');
console.log(link.ariaCurrent);

link.ariaCurrent = 'false';
console.log(link.getAttribute('aria-current'));

page false

Aktiven Navigationslink in einer SPA markieren

const markCurrentPage = (pathname) => {
  document.querySelectorAll('nav a').forEach((a) => {
    // Nur der passende Link bekommt "page", bei allen anderen wird das Attribut entfernt
    a.ariaCurrent = new URL(a.href).pathname === pathname ? 'page' : null;
  });
};

markCurrentPage(location.pathname);
window.addEventListener('popstate', () => markCurrentPage(location.pathname));

Aktuellen Schritt in einem Assistenten setzen

const steps = [...document.querySelectorAll('.wizard li')];

const goToStep = (index) => {
  steps.forEach((li, i) => {
    li.ariaCurrent = i === index ? 'step' : null;
  });
};

goToStep(1);
console.log(steps.map((li) => li.ariaCurrent));

[null, "step", null]

// Wichtig · Fallstricke

Kompatibilität: Firefox unterstützt die ARIA-Reflexionseigenschaften erst ab Version 119. Wer ältere Browser unterstützen muss, verwendet setAttribute('aria-current', 'page') bzw. removeAttribute('aria-current').
Der Wert ist immer eine Zeichenkette. Setzt man ariaCurrent = false (boolescher Wert), wird daraus \"false\" – das Attribut bleibt also bestehen. Um das Attribut zu entfernen, setzt man null.
Pro Gruppe sollte nur ein Element als aktuell markiert sein. Verwechsle aria-current nicht mit aria-selected: Das gilt für Auswahlzustände in Widgets wie Tabs, Listboxen oder Grids.
aria-current ändert nichts an der Darstellung. Für die Optik lässt es sich per CSS ansprechen, z. B. mit a[aria-current=\"page\"]. So sind Aussehen und Barrierefreiheit automatisch synchron.

Siehe auch

Element.role Element.ariaChecked Element.ariaOrientation Element.ariaColCount Element.ariaHidden