Website Navigation Software
Was jedes Menü ausliefern muss
Sprungweg, Linktext, Listenstruktur: drei Stellen in jeder Navigation.
Navigation als Wegsystem
Wählen Sie Software nach ihrer Ausgabe
Der Editor verwaltet Links. Entscheidend sind Struktur, Zustand und Bedienweg im Browser.
href="#inhalt"<main id="inhalt"><nav aria-label="Hauptnavigation">Navigation „Hauptnavigation“, Liste mit vier Einträgen; darin eine verschachtelte Liste mit drei Einträgen.
Start, aktuelle Seite. Der Zustand bleibt außer durch Farbe auch durch Text und aria-current="page" erkennbar.
Untermenü Produkte, geöffnet. Die Steuerung meldet aria-expanded="true".
Drei Ebenen, die Ihre Software beherrschen muss
Eine bequeme Verwaltung genügt erst, wenn die veröffentlichte Navigation denselben Inhalt verständlich ausliefert.
- 1RedaktionCMS oder Plugin
Links benennen, Reihenfolge ändern, Unterpunkte verschachteln und aktuelle Ziele pflegen.
Gegenprobe: Kann eine Redaktionsrolle das Menü ändern, ohne Struktur zu löschen? - 2AusgabeTheme oder Komponente
Gegenprobe: Bleibt das Markup nach einem Update prüf- und überschreibbar?nav, echte Listen, verständliche Links, Sprungziel und aktuelle Seite im gerenderten HTML. - 3VerhaltenJavaScript im Browser
Untermenüs öffnen per Tastatur und Zeiger, Zustand synchronisieren, mit Escape schließen und Fokus erhalten.
Gegenprobe: Funktioniert derselbe Weg mit Tab, Touch und Screenreader?
Vier Bauwege, eine Abnahme
Bewerten Sie die konkrete Ausgabe. Der Produktname allein sagt nichts über Theme, Konfiguration oder spätere Updates.
Prüfen Sie veröffentlichte HTML-Struktur, responsiven Modus und Untermenü-Einstellungen im aktiven Theme.
Prüfen Sie, ob Markup und Tastaturverhalten dokumentiert, überschreibbar und nach Updates stabil sind.
Übernehmen Sie Attribute und Skript als Einheit. Ein ausgelassenes Zustandsattribut bricht das Muster.
Geeignet, wenn das Team Struktur, Interaktion, Tests und künftige Browseränderungen selbst trägt.
Dieselben Ziele, zwei Anordnungen
Mobile Navigation ist keine zweite Inhaltsquelle. Reihenfolge, Namen und aktueller Ort bleiben gleich.
Der Ausgabevertrag im HTML
Für typische Website-Navigation genügen native Links, Listen und eine Disclosure-Steuerung. Eine ARIA-menubar würde das deutlich komplexere Tastaturmodell einer Desktop-Anwendung versprechen.
<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/" aria-current="page">Start</a></li>
<li><a href="/leistungen">Leistungen</a></li>
<li>
<a href="/produkte">Produkte</a>
<button type="button" aria-expanded="false"
aria-controls="produkte-menue">
Untermenü Produkte öffnen
</button>
<ul id="produkte-menue" hidden>
<li><a href="/produkte/scanner">Scanner</a></li>
<li><a href="/produkte/berichte">Berichte</a></li>
</ul>
</li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
<main id="inhalt">…</main>Aus dem Prüfbericht
Drei Stellen im Menü, drei Befunde
Prüfen Kein Weg am Menü vorbei Regel bypass
Auf jeder Seite steht dieselbe Navigation vor dem Text. Ein Sprunglink und ein Hauptbereich führen mit einer Taste zum Inhalt.
Kritisch Ein Menüpunkt ohne Wort Regel link-name
Manche Navigationssoftware setzt Pfeile oder Symbole ohne Text. In der Linkliste bleibt der Eintrag leer, ein Wort im Link löst das.
Kritisch Das Menü ist keine Liste Regel list
Stehen die Punkte als divs im Container, fehlt die Anzahl. Eine ul mit einem li je Punkt gibt der Navigation ihre Struktur.
Zum Mitnehmen
Die Navigation, korrigiert
Ein Sprunglink, ein Wort im Link, eine echte Liste.
Korrektur in 3 Schritten ansehen
Einen Sprunglink an den Seitenanfang
Der erste Tabstopp führt hinter das Menü. Der Hauptbereich braucht dafür eine id, auf die der Link zeigt.
KorrekturvergleichSchritt 1 · HTML Vorher
<body> <nav>…</nav> <main>…</main> </body>Nachher
<body> <a class="skip-link" href="#inhalt">Zum Inhalt springen</a> <nav>…</nav> <main id="inhalt">…</main> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite und drücken Sie einmal Tab. Der erste sichtbare Fokus ist der Sprunglink.
Jedem Menüpunkt ein Wort geben
Ein Pfeil allein nennt kein Ziel. Der sichtbare Text im Link wird zugleich sein zugänglicher Name.
KorrekturvergleichSchritt 2 · HTML Vorher
<li><a href="/leistungen"><span aria-hidden="true">›</span></a></li>Nachher
<li><a href="/leistungen">Leistungen</a></li>Markierte Zeilen wurden geändert
So prüfen Sie es Fahren Sie mit Tab durch das Menü. Jeder Eintrag zeigt ein Wort, keinen leeren Rahmen.
Das Menü als Liste ausgeben
Eine ul mit einem li je Punkt sagt die Anzahl an. Das Aussehen steuert weiterhin das CSS.
KorrekturvergleichSchritt 3 · HTML Vorher
<nav> <div class="menu"> <a href="/leistungen">Leistungen</a> <a href="/kontakt">Kontakt</a> </div> </nav>Nachher
<nav> <ul class="menu"> <li><a href="/leistungen">Leistungen</a></li> <li><a href="/kontakt">Kontakt</a></li> </ul> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt beim Betreten des Menüs die Zahl der Einträge.