ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Einfach
- Dauer:Schnell
Wichtig für Rolle:
Entwicklung
Worum gehts?
Auf einer Webseite muss es möglich sein, Bereiche, die sie auf der Webseite mehrfach wiederholen, überspringen zu können.
Ein solcher wiederholender Bereich ist zum Beispiel der Header. Der Header kommt auf jeder Unterseite der Webseite vor. Wenn Menschen darauf angewiesen sind, mit der Tastatur oder assistiven Technologien durch die Webseite zu navigieren, müssen sie sich immer durch den ganzen Header mit der Tab-Taste quälen, wenn er nicht überspringbar ist.
Umsetzung
Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.
Empfehlung!Sprunglinks und Inhaltsverzeichnis
Füge am Anfang der Seite einen Link oder eine kleine Liste mit Links ein, mit denen User direkt zu wichtigen Bereichen der Seite springen können – zum Beispiel zum Hauptinhalt oder zu wichtigen Abschnitten.
Der Link zum Hauptinhalt sollte als erstes bedienbares Element auf der Seite erscheinen. Er ist normalerweise versteckt und wird erst sichtbar, wenn man mit der Tastatur navigiert.
Wichtig ist, dass die Sprunglinks auch den Fokus der Tastatur verschieben. Sonst landet man beim nächsten Drücken der Tab-Taste wieder oben auf der Seite!
ARIA-Landmarks
Nutze ARIA-Landmarks, um verschiedene Bereiche der Seite klar zu kennzeichnen. Typische Rollen sind z. B.
navigation,main,search,banner,contentinfooderregion.Wenn du die Rolle der Navigation mehrfach verwendest, solltest du die Navigationen zusätzlich benennen (zum Beispiel über ein aria-label), damit auch nicht-sehenden Usern, welche Navigation das ist.
WCAG-Technik(en) in Englisch:
Richtig gegliederte Überschriftenstruktur
Strukturiere die Seite mit logisch gegliederten Überschriften (`h2` gehört unter `h1`, `h3` unter `h2` usw.).
Überschriften helfen Screenreader-Usern auf der Seite per Tastaturkürzel zu navigieren und so Bereiche zu überspringen.
WCAG-Technik(en) in Englisch: