Homepage-Navigation
Vom Seitenanfang direkt zum Ziel
Sprunglink, Menüliste, Linktexte: drei Stellen im Kopf Ihrer Startseite.
Navigationsplan
Eine Kopfzeile, drei Wege zum Ziel
Die sichtbare Leiste, die HTML-Struktur und der Tastaturweg müssen dieselbe Reihenfolge erzählen. Diese Blaupause zeigt alle drei Ebenen.
Anatomie der Startseiten-Navigation
Konzeptansicht · keine Produktoberflächemain. Das Menü bleibt in beiden Ansichten dieselbe Liste; nur seine Darstellung und Sichtbarkeit ändern sich. Fokus-Reihenfolge
Was nach jedem Tab folgt
- Sprunglink
- Logo
- Start
- Leistungen
- Referenzen
- Kontakt
- Suche
- Los
- Sprunglink
- Logo
- Menü
- Suche
- Los
- Sprunglink
- Logo
- Menü
- Start
- Leistungen
- Referenzen
- Kontakt
- Suche
- Los
Tab → Sprunglink, dann Enter → main#inhalt
HTML
Die vollständige Struktur
<body>
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
<header class="site-head">
<a class="logo" href="/">
<img src="/logo.svg" alt="Muster GmbH – Startseite"
width="140" height="32">
</a>
<button id="menu-toggle" type="button" hidden
aria-expanded="false" aria-controls="main-menu">
Menü
</button>
<nav id="main-menu" aria-label="Hauptnavigation">
<ul>
<li><a href="/" aria-current="page">Start</a></li>
<li><a href="/leistungen">Leistungen</a></li>
<li><a href="/referenzen">Referenzen</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
<form class="search" action="/suche" role="search">
<label for="site-search">Suchen</label>
<input id="site-search" name="q" type="search">
<button type="submit">Los</button>
</form>
</header>
<main id="inhalt" tabindex="-1">
<h1>Willkommen bei Muster</h1>
</main>
</body>CSS
Struktur reagiert, Reihenfolge bleibt
.skip {
position: absolute;
transform: translateY(-150%);
}
.skip:focus { transform: translateY(0); }
.site-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1rem;
}
nav ul {
display: flex;
gap: 1.5rem;
list-style: none;
}
[aria-current="page"] {
font-weight: 700;
text-decoration: underline;
}
@media (max-width: 48rem) {
.site-head { grid-template-columns: 1fr auto; }
nav, .search { grid-column: 1 / -1; }
nav ul { flex-direction: column; }
}JavaScript
Ein Zustand steuert Taste und Liste
const taste = document.querySelector('#menu-toggle');
const menue = document.querySelector('#main-menu');
const schmal = matchMedia('(max-width: 48rem)');
function anpassen() {
taste.hidden = !schmal.matches;
menue.hidden = schmal.matches;
taste.setAttribute('aria-expanded', String(!schmal.matches));
}
taste.addEventListener('click', () => {
const offen = menue.hidden;
menue.hidden = !offen;
taste.setAttribute('aria-expanded', String(offen));
});
document.addEventListener('keydown', (event) => {
if (event.key !== 'Escape' || !schmal.matches || menue.hidden) return;
menue.hidden = true;
taste.setAttribute('aria-expanded', 'false');
taste.focus();
});
schmal.addEventListener('change', anpassen);
anpassen();Prüfroute
So prüfen Sie es
- Neu laden, Tab drücken: Der Sprunglink wird sichtbar.
- Enter drücken: Ansicht und Fokus wechseln zu
main#inhalt. - Breit durch alle Ziele tabben: Die Reihenfolge folgt der oberen Route.
- Schmal öffnen:
aria-expandedwechselt mit der sichtbaren Liste. - Escape drücken: Die Liste schließt, der Fokus kehrt zur Menütaste zurück.
- Auf 200 % zoomen: Kein Ziel wird verdeckt oder horizontal abgeschnitten.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Prüfen Kein kurzer Weg an der Navigation vorbei Regel bypass
Ohne Sprunglink, Hauptbereich und Überschrift läuft jeder Tastaturweg durch das ganze Menü der Startseite. Ein Sprunglink am Anfang und ein main lösen das.
Kritisch Menüpunkte ohne Text Regel link-name
Symbol-Links im Seitenkopf, etwa Lupe oder Warenkorb, haben keinen Namen. Ein Wort im Link oder ein aria-label benennt das Ziel.
Kritisch Das Menü ist keine Liste Regel list
Stehen die Links in divs, sagt kein Vorleseprogramm die Anzahl der Menüpunkte an. Ein ul mit einem li je Punkt ordnet die Navigation.
Zum Mitnehmen
Die Navigation, korrigiert
Ein Sprunglink, eine Liste, ein benanntes Symbol.
Korrektur in 3 Schritten ansehen
Sprunglink an den Seitenanfang setzen
Der Sprunglink steht als erstes Element im body und zeigt auf den Hauptbereich. Mit der Tastatur ist der Inhalt so in einem Schritt erreichbar.
KorrekturvergleichSchritt 1 · HTML Vorher
<body> <header class="kopf"> <nav>…</nav> </header> <div id="inhalt">…</div> </body>Nachher
<body> <a class="sprunglink" href="#inhalt">Zum Inhalt springen</a> <header class="kopf"> <nav>…</nav> </header> <main id="inhalt">…</main> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Startseite neu und drücken Sie Tab. Der erste Fokus liegt sichtbar auf dem Sprunglink.
Das Menü als Liste auszeichnen
Ein ul mit einem li je Menüpunkt macht aus einer Reihe von Links eine Liste. Das Vorleseprogramm sagt dann die Anzahl der Ziele an.
KorrekturvergleichSchritt 2 · HTML Vorher
<nav> <div class="menue"> <a href="/leistungen">Leistungen</a> <a href="/kontakt">Kontakt</a> </div> </nav>Nachher
<nav aria-label="Hauptmenü"> <ul class="menue"> <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 kündigt beim Betreten des Menüs eine Liste mit der Zahl der Einträge an.
Symbol-Links im Kopf benennen
Das Symbol bleibt sichtbar und für Vorleseprogramme verborgen. Das aria-label liefert den Namen, den die Linkliste anzeigt.
KorrekturvergleichSchritt 3 · HTML Vorher
<a class="kopf-symbol" href="/suche"> <svg aria-hidden="true"><use href="#lupe"></use></svg> </a>Nachher
<a class="kopf-symbol" href="/suche" aria-label="Suche öffnen"> <svg aria-hidden="true"><use href="#lupe"></use></svg> </a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Statt eines leeren Eintrags steht dort „Suche öffnen“.