Accessible Navigation
Sieben Mal Tab, bevor der Inhalt beginnt
Sprunglink, Liste, Linktext: drei Stellen, an denen Navigation Zeit kostet.
Navigationsplan
Eine Seite, drei schnelle Wege
Derselbe Aufbau trägt Tastatur, Landmark-Liste und sichtbare Orientierung.
Hauptinhalt
Preise für Ihr Projektmain#inhalt · Main
HTML für die gezeigte Struktur
<body>
<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
<header>
<a href="/">
<img src="/logo.svg" alt="" width="32" height="32">
Musterfirma
</a>
<nav aria-label="Hauptmenü">
<ul>
<li><a href="/">Start</a></li>
<li><a href="/leistungen">Leistungen</a></li>
<li><a href="/preise" aria-current="page">Preise</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
</header>
<main id="inhalt" tabindex="-1">
<h1>Preise für Ihr Projekt</h1>
</main>
<footer>
<nav aria-label="Rechtliches">
<a href="/impressum">Impressum</a>
<a href="/datenschutz">Datenschutz</a>
</nav>
</footer>
</body>CSS für Sichtbarkeit und Standort
.skip-link {
position: absolute;
inset-inline-start: 1rem;
top: 0;
padding: 0.75rem 1rem;
transform: translateY(-120%);
}
.skip-link:focus-visible {
transform: translateY(0);
outline: 3px solid currentColor;
outline-offset: 3px;
}
[aria-current="page"] {
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 0.2em;
text-underline-offset: 0.3em;
}
main:focus {
outline: none;
}Prüfroute in einer Minute
- Neu laden und Tab drücken. „Zum Inhalt springen“ wird sichtbar.
- Enter drücken. Der Fokus springt zu „Preise für Ihr Projekt“.
- Landmarks auflisten. Hauptmenü und Rechtliches haben eigene Namen.
- Links auflisten. „Preise“ wird als aktuelle Seite angekündigt.
Weiterarbeiten mit Primärquellen
W3C: Sprunglink zum HauptinhaltW3C APG: Landmark-RegionenMDN: aria-current
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Prüfen Es gibt keinen Sprunglink Regel bypass
Ohne Sprunglink beginnt jede Seite mit dem Menü. Ein Link „Zum Inhalt“ als erstes Element spart die Anschläge.
Kritisch Die Menüpunkte sind nur Symbole Regel link-name
Sechs Symbol-Links sagen sechsmal „Link“. Ein Wort pro Link nennt das Ziel.
Kritisch Das Menü ist keine Liste Regel list
Ein div mit Links hat keine Zählung. Als ul sagt ein Vorleseprogramm „Liste mit 6 Einträgen“.
Zum Mitnehmen
Die Navigation, korrigiert
Ein Sprunglink, eine Liste, sechs Wörter.
Korrektur in 2 Schritten ansehen
Einen Sprunglink an den Seitenanfang setzen
Der Sprunglink ist das erste Element im body. Er zeigt auf die id des Hauptinhalts.
KorrekturvergleichSchritt 1 · HTML Vorher
<body> <header> <nav class="menu">…</nav> </header> <main>…</main> </body>Nachher
<body> <a class="skip-link" href="#inhalt">Zum Inhalt springen</a> <header> <nav class="menu" aria-label="Hauptmenü">…</nav> </header> <main id="inhalt" tabindex="-1">…</main> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite neu und drücken Sie einmal Tab. Der Sprunglink erscheint, Enter springt zum Inhalt.
Das Menü als Liste mit Wörtern bauen
ul und li geben die Zählung, das Wort im Link den Namen. Das Symbol bleibt Dekoration.
KorrekturvergleichSchritt 2 · HTML Vorher
<nav class="menu"> <a href="/"><svg aria-hidden="true"><use href="#home"></use></svg></a> <a href="/preise"><svg aria-hidden="true"><use href="#tag"></use></svg></a> </nav>Nachher
<nav class="menu" aria-label="Hauptmenü"> <ul> <li> <a href="/"><svg aria-hidden="true"><use href="#home"></use></svg> Start</a> </li> <li> <a href="/preise"><svg aria-hidden="true"><use href="#tag"></use></svg> Preise</a> </li> </ul> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Hauptmenü, Navigation, Liste mit 2 Einträgen, Start, Link“.