Navigation in HTML
Eine Navigation, die man überspringen kann
Sprunglink, Linktexte, Liste: drei Stellen in der Hauptnavigation.
Landmarken-Atlas
Drei nav-Elemente brauchen drei eindeutige Namen
Hauptmenü, Brotkrümel und rechtliche Links erfüllen verschiedene Aufgaben. Im HTML werden daraus drei unterscheidbare Sprungziele.
Von der sichtbaren Seite zur Bereichsliste
Konzeptansicht · beispielhafte WebsitenavHauptnavigationStartLeistungenTeamnavBrotkrümelStart/Leistungen/Prüfung- Bannerheader
- Navigation „Hauptnavigation“nav[aria-label]
- Navigation „Brotkrümel“nav[aria-label]
- Hauptbereichmain
- Fußzeilefooter
- Navigation „Rechtliches“nav[aria-label]
aria-label="Hauptnavigation" wird „Navigation, Hauptnavigation“. Die Liste trägt Bedeutung
Gleichrangige Ziele oder geordneter Pfad?
ulHauptnavigation und RechtlichesDie Ziele sind gleichrangig. Ihre Reihenfolge beschreibt keinen Weg.olBrotkrümelDie Reihenfolge führt von der übergeordneten Seite zum aktuellen Ort.aria-current="page".<a href="/leistungen/pruefung/" aria-current="page">Prüfung</a>Vollständiges HTML
Drei Bereiche, klar benannt
<body>
<header>
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/">Start</a></li>
<li><a href="/leistungen/">Leistungen</a></li>
<li><a href="/team/">Team</a></li>
</ul>
</nav>
</header>
<nav aria-label="Brotkrümel">
<ol class="breadcrumb">
<li><a href="/">Start</a></li>
<li>
<span class="separator" aria-hidden="true">/</span>
<a href="/leistungen/">Leistungen</a>
</li>
<li>
<span class="separator" aria-hidden="true">/</span>
<a href="/leistungen/pruefung/" aria-current="page">
Prüfung
</a>
</li>
</ol>
</nav>
<main id="inhalt">
<h1>Prüfung</h1>
<p>Inhalt der Seite.</p>
</main>
<footer>
<nav aria-label="Rechtliches">
<ul>
<li><a href="/impressum/">Impressum</a></li>
<li><a href="/datenschutz/">Datenschutz</a></li>
</ul>
</nav>
</footer>
</body>CSS für den Pfad
Umbruch statt seitliches Scrollen
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.separator {
margin-inline-end: 0.5rem;
}
[aria-current="page"] {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.2em;
}nav besitzt diese Landmarkenrolle bereits.Prüfspur
So prüfen Sie es
- Öffnen Sie die Landmarkenliste Ihres Vorleseprogramms.
- Prüfen Sie, ob alle drei Navigationen mit ihrem Zweck erscheinen.
- Springen Sie zu „Brotkrümel“: Der Fokus landet im richtigen Pfad.
- Nur „Prüfung“ wird dort als aktuelle Seite angekündigt.
- Zoomen Sie auf 400 %: Der Brotkrümel bricht ohne Querrollen um.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Prüfen Kein Weg an der Navigation vorbei Regel bypass
Vor dem Inhalt steht auf jeder Seite dieselbe Navigation. Ein Sprunglink als erstes fokussierbares Element führt direkt zum main.
Kritisch Navigationslinks ohne Text Regel link-name
Symbol-Links in der Navigation nennen ihr Ziel nicht. Der Seitentitel gehört in den Linktext.
Kritisch Fremde Inhalte in der Linkliste Regel list
In der ul der Navigation steht ein Absatz direkt neben den li. Er gehört vor die Liste.
Zum Mitnehmen
Die Navigation, korrigiert
Ein Sprunglink, eine saubere Liste, Text in jedem Link.
Korrektur in 3 Schritten ansehen
Einen Sprunglink voranstellen
Der erste fokussierbare Link der Seite führt zum Inhalt. Er darf verborgen sein und muss bei Fokus sichtbar werden.
KorrekturvergleichSchritt 1 · HTML Vorher
<body> <nav aria-label="Hauptnavigation">…</nav> <div class="inhalt">…</div> </body>Nachher
<body> <a class="skip-link" href="#inhalt">Zum Inhalt springen</a> <nav aria-label="Hauptnavigation">…</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 Link heißt „Zum Inhalt springen“.
Die Linkliste sauber auszeichnen
In eine ul gehören nur li. Der einleitende Satz steht davor, nicht zwischen den Einträgen.
KorrekturvergleichSchritt 2 · HTML Vorher
<nav aria-label="Hauptnavigation"> <ul> <p>Bereiche</p> <li><a href="/leistungen/">Leistungen</a></li> </ul> </nav>Nachher
<nav aria-label="Hauptnavigation"> <p>Bereiche</p> <ul> <li><a href="/leistungen/">Leistungen</a></li> </ul> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Springen Sie mit dem Vorleseprogramm zur Liste. Es nennt die Zahl der Einträge ohne Zwischentext.
Symbol-Links benennen
Der Seitentitel steht im Link. Das Symbol bleibt Dekoration und wird für Vorleseprogramme ausgeblendet.
KorrekturvergleichSchritt 3 · HTML Vorher
<li> <a href="/kontakt/"><span class="icon-mail"></span></a> </li>Nachher
<li> <a href="/kontakt/"> Kontakt <span class="icon-mail" aria-hidden="true"></span> </a> </li>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Navigationseintrag nennt seine Seite.