Zustände & Interaktion

Navigation ist nicht statisch: Menüpunkte können ausgewählt, fokussiert oder aktiviert werden, Untermenüs können geöffnet und geschlossen sein und ein Navigationspunkt kann anzeigen, auf welcher Seite sich Nutzer*innen zurzeit befinden. Diese Zustände sollten technisch abgebildet werden, wenn sie eine inhaltliche und funktionale Bedeutung haben. Dadurch ist nachvollziehbar, was gerade passiert und in welchem Zustand sich interaktive Elemente befinden. Solche Zustände können Default-, Hover-, Focus-, Active-, Current- und Visited-State sein.

Interaktionszustände

CSS stellt verschiedene Zustände zur Verfügung, die bei Links und anderen interaktiven Elementen auftreten können und unterschiedliche Situationen beschreiben. :hover tritt auf, wenn der Mauszeiger über einem Element positioniert wird, :focus beziehungsweise :focus-visible betrifft ein Element, das aktuell den Fokus besitzt und :active beschreibt den Moment, in dem ein Element aktiviert wird. Diese Zustände sollten nicht miteinander verwechselt werden. Ein Menüpunkt, der angeklickt wird, ist nicht automatisch der Menüpunkt der aktuell aufgerufenen Seite. Es wird zwischen dem Active State während der Aktivierung und dem Current State, der die aktuelle Position innerhalb der Navigation kennzeichnet, unterschieden.

Womit interagiere ich gerade? — Hover / Focus
Was aktiviere ich gerade — Active
Wo befinde ich mich? — Current

Kennzeichnung der Position

Befindet sich eine Person beispielsweise im Bereich “Umsetzung”, sollte dieser Zustand in der Navigation erkennbar sein. Eine visuelle Klasse wie .current kann für die Gestaltung verwendet werden, die Bedeutung wird dadurch aber nicht an assistive Technologien vermittelt. Die aktuell dargestellte Seite lässt sich durch aria-current="page" kennzeichnen:

<nav aria-label="Hauptnavigation">
    <ul>
        <li><a href="/struktur/">Struktur</a></li>
        <li><a href="/benennung/">Benennung</a></li>
        <li><a href="/navigation/">Navigation</a></li>
        <li><a href="/umsetzung/" aria-current="page">Umsetzung</a></li>
        <li><a href="/barrierefreiheit/">Barrierefreiheit</a></li>
    </ul>
</nav>

Für die visuelle Gestaltung kann der Zustand ebenfalls genutzt werden:

nav [aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
}

Somit werden der semantische Zustand und die visuelle Darstellung aus derselben Information abgeleitet, statt eine zusätzliche Klasse wie .current verwenden zu müssen.

Geöffnet oder geschlossen?

Sind Inhalte in der Navigation ein- und ausblendbar, kommt ein weiterer Zustand hinzu. Ein Button zum Öffnen eines Untermenüs kann beispielsweise zwei Zustände besitzen:

Geschlossen → Geöffnet

Dieser Zustand kann mit aria-expanded kommuniziert werden:

<button
    type="button"
    aria-expanded="false"
    aria-controls="submenu-umsetzung"
>
    Umsetzung
</button>

<ul id="submenu-umsetzung" hidden>
    ...
</ul>

Wird das Untermenü geöffnet, verändert JavaScript die Sichtbarkeit des Untermenüs und den Zustand des Buttons:

<button
    type="button"
    aria-expanded="true"
    aria-controls="submenu-umsetzung"
>
    Umsetzung
</button>

<ul id="submenu-umsetzung" hidden>
    ...
</ul>

Durch aria-expanded="false" wird signalisiert, dass der kontrollierte Bereich geschlossen ist, während "true" ihn als geöffnet kennzeichnet. aria-controls kann zusätzlich die Beziehung zwischen dem auslösenden Button und dem kontrollierten Element herstellen. Wichtig ist, dass ARIA keine Funktionalität erzeugt, sondern lediglich den entstehenden Zustand beschreibt. Die eigentliche Interaktion muss also weiterhin durch beispielsweise JavaScript implementiert werden.

Synchronisierung der Gestaltung

Die visuelle und semantische Darstellung eines Zustands darf nicht getrennt voneinander gesteuert werden. Ein Untermenü kann beispielsweise sichtbar sein, obwohl sein Button weiterhin aria-expanded="false" besitzt. Visuell wäre das Menü geöffnet, aber semantisch noch ein geschlossener Zustand kommuniziert. Um solche Unstimmigkeiten zu reduzieren, kann der semantische Zustand als Grundlage für die Gestaltung genutzt werden:

.submenu-toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

Zusammenfassung

Interaktive Elemente besitzen unterschiedliche Zustände, die jeweils eine eigene Bedeutung haben. Hover, Focus und Active beschreiben aktuelle Interaktionen, während Current die gegenwärtige Position innerhalb einer Navigation kennzeichnet. Ein- und ausklappbare Navigationselemente besitzen einen geöffneten oder geschlossenen Zustand. Bedeutungsvolle Zustände sollten visuell und technisch kommuniziert werden. Attribute wie aria-current und aria-expanded ergänzen dafür die semantische HTML-Struktur.

Quellen

1. Menus Tutorial. W3C Web Accessibility Initiative (WAI). Abgerufen am 13.09.2026.
2. Menu Styling. W3C Web Accessibility Initiative (WAI). Abgerufen am 13.09.2026.