ARIA in der Navigation
Bereiche benennen, Wiederholtes überspringen
Kopfmenü, Sprunglink, Symbollinks: drei Stellen in jeder Navigation.
Landmark-Plan
Dieselbe Seite. Zwei Arten, sich darin zu bewegen.
Die sichtbare Anordnung und die Bereichsliste eines Vorleseprogramms müssen dieselben Wege verständlich benennen.
- 01
HauptmenüNavigation
- 02
ServiceNavigation
- 03
HauptinhaltMain
- 04
FußbereichNavigation
Berichteaktuelle Seite
Hauptmenü→Hauptmenü, Navigation
Service→Service, Navigation
Hauptinhalt→Hauptinhalt, Main
Fußbereich→Fußbereich, Navigation
nav erzeugt die Landmarke
Das HTML-Element bringt die Rolle navigation bereits mit. Schreiben Sie nicht zusätzlich role="navigation" an dasselbe Element. Nur wenn ein neutrales Bestandselement bleiben muss, kann die Rolle die Landmarke ergänzen.
Der Bereichsname trennt die Wege
Gibt es mehrere nav-Bereiche, benennt ein sichtbarer Titel mit aria-labelledby oder ein knappes aria-label ihren Zweck.
aria-current markiert den Standort
In einem Satz zusammengehöriger Links trägt nur der Link zur geöffneten Seite aria-current="page".
Namensprobe
Was ein Vorleseprogramm daraus bildet
<nav aria-label="Hauptmenü">Nicht „Hauptnavigation“ oder „Navigation Hauptmenü“: Die Rolle wird ohnehin angesagt. Das Wort Navigation im Namen führt oft zu einer Dopplung.
Eine wichtige Ausnahme: Wiederholen zwei Landmarken exakt dieselben Links, empfiehlt die APG denselben Namen. Verschiedene Linkgruppen brauchen verschiedene Namen.
Ein vollständiges Seitengerüst
Der Sprunglink steht vor dem wiederholten Kopfbereich. Das Ziel main trägt dieselbe ID wie der Link. Die Bereichsnamen bleiben kurz und unterscheiden ihre Aufgabe.
<body>
<a class="sprunglink" href="#inhalt">Zum Inhalt springen</a>
<header>
<a href="/">Wasserwerk</a>
<nav aria-label="Hauptmenü">
<ul>
<li><a href="/messwerte">Messwerte</a></li>
<li><a href="/berichte" aria-current="page">Berichte</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
<nav aria-label="Service">
<ul>
<li><a href="/suche">Suche</a></li>
<li><a href="/konto">Konto</a></li>
</ul>
</nav>
</header>
<main id="inhalt" tabindex="-1">
<h1>Berichte</h1>
</main>
<footer>
<nav aria-label="Fußbereich">
<ul>
<li><a href="/impressum">Impressum</a></li>
<li><a href="/datenschutz">Datenschutz</a></li>
</ul>
</nav>
</footer>
</body>.sprunglink {
position: absolute;
transform: translateY(-120%);
padding: 0.75rem 1rem;
border: 2px solid currentColor;
background: Canvas;
color: CanvasText;
}
.sprunglink:focus-visible {
transform: none;
outline: 3px solid currentColor;
outline-offset: 2px;
}
[aria-current="page"] {
font-weight: 700;
border-bottom: 2px solid currentColor;
}Quellen für die Umsetzung
So prüfen Sie es
- Laden Sie die Seite neu und drücken Sie einmal Tab. Der Sprunglink muss sichtbar werden; Enter setzt den Fokus an den Hauptinhalt.
- Öffnen Sie die Landmarken- oder Bereichsliste Ihres Vorleseprogramms. Hauptmenü, Service und Fußbereich müssen unterscheidbar sein.
- Gehen Sie die Links einzeln durch. Nur „Berichte“ darf auf dieser Seite als aktuelle Seite angesagt und zusätzlich sichtbar markiert sein.
- Vergleichen Sie Navigationen mit gleichem Namen. Enthalten sie verschiedene Links, brauchen sie verschiedene Namen; enthalten sie dieselben Links, behalten sie denselben.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Eine erfundene Rolle am Kopfmenü Regel aria-roles
role="navigation-menu" wird verworfen. Das Element nav bringt die Rolle navigation ohne Attribut mit.
Prüfen Kein Weg am Kopfmenü vorbei Regel bypass
Auf jeder Seite stehen dieselben Links vor dem Inhalt. Ein Sprunglink zu main führt in einem Schritt daran vorbei.
Kritisch Symbollinks ohne Text Regel link-name
Lupe, Warenkorb und Konto tragen kein Wort. In der Linkliste eines Vorleseprogramms stehen sie ohne Ziel.
Zum Mitnehmen
Die Navigation, korrigiert
Ein Bereich mit Namen, ein Sprunglink, benannte Symbollinks.
Korrektur in 3 Schritten ansehen
nav statt erfundener Rolle
Das Element nav bringt die Rolle mit. aria-label trennt mehrere Navigationen voneinander, etwa Kopf und Fuß.
KorrekturvergleichSchritt 1 · HTML Vorher
<div role="navigation-menu"> <a href="/preise">Preise</a> </div>Nachher
<nav aria-label="Hauptmenü"> <a href="/preise">Preise</a> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Lassen Sie sich die Bereiche einer Seite auflisten. Dort steht „Hauptmenü, Navigation“.
Einen Sprunglink an den Anfang
Der erste fokussierbare Link führt direkt zum Inhalt. Er darf unsichtbar sein, muss aber bei Fokus erscheinen.
KorrekturvergleichSchritt 2 · HTML Vorher
<body> <nav aria-label="Hauptmenü">…</nav> <main id="inhalt">…</main> </body>Nachher
<body> <a class="sprunglink" href="#inhalt">Zum Inhalt springen</a> <nav aria-label="Hauptmenü">…</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 die Tabulatortaste. Der Sprunglink wird sichtbar.
Symbollinks benennen
Das Symbol bleibt für Vorleseprogramme verborgen, aria-label nennt das Ziel. Dadurch wird die Linkliste wieder lesbar.
KorrekturvergleichSchritt 3 · HTML Vorher
<a href="/warenkorb"> <svg aria-hidden="true"><use href="#korb"></use></svg> </a>Nachher
<a href="/warenkorb" aria-label="Warenkorb"> <svg aria-hidden="true"><use href="#korb"></use></svg> </a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Eintrag nennt sein Ziel.