aria-current in der Navigation
Die aktuelle Seite im Menü ansagen
Menülink, Brotkrumenpfad, Schrittanzeige: drei Stellen, an denen die Position fehlt.
Positionssignal
Wo bin ich gerade?
aria-current übersetzt eine sichtbare Markierung in eine programmatisch erkennbare Position.
Besuch„Besuch, aktuelle Seite, Link“Tickets„Tickets, aktuelle Seite, Link“Termin„Termin, aktueller Schritt“
Hauptmenü, Brotkrumen und Schrittanzeige sind drei getrennte Sets. Deshalb darf jedes Set sein eigenes aktuelles Element haben.
aria-current="page"current: pageWelches Wort passt zur Position?
Wählen Sie den konkretesten Wert. true bleibt der Auffangwert.
pageaktuelle Seite in Navigation oder Pfadsteplaufender Schritt in einem ProzesslocationPosition in Karte, Diagramm oder Umgebungdateheutiges Datum in einer Datumsauswahltimeaktuelle Zeit in einem Zeitplantrueaktuell, wenn kein genauerer Wert passtfalse oder kein Attribut Das Element ist nicht aktuell und der Zustand wird nicht ausgegeben.Aktuell, fokussiert und ausgewählt sind drei Zustände
aria-current="page"Bleibt auf dem Element, das den gerade angezeigten Inhalt vertritt.
:focus-visibleZeigt, wohin die Tastatur im Moment bewegt wurde.
aria-selected="true"Bezeichnet eine Auswahl in einem Widget, etwa Tab oder Listenfeld.
Der Fokus kann auf „Einstellungen“ stehen, während „Berichte“ weiterhin die aktuelle Seite ist. Ersetzen Sie aria-selected nicht durch aria-current.
So prüfen Sie es
- Suchen Sie jedes
aria-current. Der Wert muss zur Gruppe passen: meistpageoderstep. - Prüfen Sie jedes Menü, jeden Pfad und jede Schrittfolge für sich. Innerhalb eines Sets soll nur das tatsächlich aktuelle Element markiert sein.
- Blenden Sie Farben aus oder verwenden Sie den Modus für erzwungene Farben. Unterstreichung, Rahmen oder Form müssen die Position weiter zeigen.
- Lassen Sie die Gruppe vorlesen. Erwartet wird „aktuelle Seite“ oder „aktueller Schritt“, nicht nur ein optischer Wechsel.
Ein anderer nicht leerer Wert wird wie true behandelt. Er verliert die genauere Bedeutung und kann von Prüfwerkzeugen als ungültig gemeldet werden.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Der Menülink meldet einen erfundenen Wert Regel aria-valid-attr-value
aria-current="yes" steht nicht in der Werteliste. Für die aktuelle Seite im Menü gilt page, für den laufenden Schritt step.
Kritisch Der Brotkrumenpfad endet ohne Linktext Regel link-name
Im Pfad verlinkt ein Pfeil das Ziel ohne Text. Erst der Seitentitel als Linktext, dann trägt aria-current den Zustand.
Kritisch Ein fehlender Buchstabe im Attributnamen Regel aria-valid-attr
aria-curent wird stillschweigend ignoriert. Nur die genaue Schreibweise aria-current erreicht ein Vorleseprogramm.
Zum Mitnehmen
Die Navigation, korrigiert
Ein gültiger Wert, ein Linktext, eine richtige Schreibweise.
Korrektur in 3 Schritten ansehen
Die aktuelle Seite mit page markieren
aria-current="page" nennt genau einen Link im Menü als aktuelle Seite. Die farbige Hervorhebung bleibt, sie allein sagt nichts.
KorrekturvergleichSchritt 1 · HTML Vorher
<nav aria-label="Hauptmenü"> <a href="/leistungen" class="aktiv" aria-current="yes">Leistungen</a> <a href="/kontakt">Kontakt</a> </nav>Nachher
<nav aria-label="Hauptmenü"> <a href="/leistungen" class="aktiv" aria-current="page">Leistungen</a> <a href="/kontakt">Kontakt</a> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt beim aktuellen Menüpunkt „aktuelle Seite“. Bei allen anderen Links nicht.
Den Brotkrumenpfad beschriften
Der letzte Eintrag im Pfad ist die aktuelle Seite. Er trägt den Seitentitel als Text und dazu aria-current="page".
KorrekturvergleichSchritt 2 · HTML Vorher
<nav aria-label="Brotkrumen"> <a href="/">Start</a> <a href="/leistungen"></a> </nav>Nachher
<nav aria-label="Brotkrumen"> <a href="/">Start</a> <a href="/leistungen" aria-current="page">Leistungen</a> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Eintrag im Pfad trägt einen Namen.
Den Attributnamen richtig schreiben
Ein falsch geschriebenes ARIA-Attribut wird stillschweigend ignoriert. Nur die genaue Schreibweise aria-current wirkt.
KorrekturvergleichSchritt 3 · HTML Vorher
<a href="/schritt-2" aria-curent="step">Schritt 2</a>Nachher
<a href="/schritt-2" aria-current="step">Schritt 2</a>Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie im Quelltext nach aria-. Jeder Treffer muss ein Name aus der ARIA-Liste sein.