- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 74 / 193
2.4.1 Blöcke umgehen
Wer mit der Tastatur navigiert, braucht einen Weg an der wiederkehrenden Kopfzeile und Navigation vorbei zum Inhalt.
/ Was es verlangt
Die meisten Seiten beginnen mit derselben Kopfzeile, dem Logo, der Suche und der Navigation. Wer die Maus nutzt, schaut darüber hinweg. Wer die Tastatur nutzt, muss auf jeder Seite mit Tab durch jeden Link dieses Blocks, bevor der Inhalt erreicht ist, und wer einen Screenreader nutzt, hört ihn jedes Mal erneut. Für Menschen, die mit Kopfstab, Schalter oder einer Hand tippen, sind diese zusätzlichen Tastendrücke auf jeder Seite ein spürbarer Aufwand an Zeit und Kraft.
Das Kriterium verlangt einen Mechanismus, um Blöcke zu umgehen, die sich auf mehreren Seiten wiederholen, und schreibt nicht vor, welchen. Das W3C nennt mehrere ausreichende Techniken: einen Sprunglink am Seitenanfang, der zum Hauptinhalt führt, Überschriften am Beginn jedes Abschnitts, Landmark-Regionen wie main und nav sowie Frames mit Titel. Ein Sprunglink, der verborgen ist, bis er den Fokus erhält, besteht. Einer, der auf ein fehlendes Ziel zeigt, erfüllt seinen Zweck nicht.
/ Woran Seiten scheitern
- Es gibt weder Sprunglink noch main-Landmark noch eine Überschrift am Beginn des Inhalts, sodass nur der Weg mit Tab durch die ganze Kopfzeile bleibt.
- Der Sprunglink zeigt auf eine id, die es auf der Seite nicht gibt, sodass er beim Auslösen nichts bewirkt.
- Der Sprunglink ist mit display: none versteckt, was ihn nicht nur aus der Ansicht, sondern auch aus der Tastaturreihenfolge entfernt.
- Ein Skript fängt den Sprunglink ab, um das Scrollen zu animieren, und lässt den Fokus in der Kopfzeile, sodass das nächste Tab wieder in der Navigation landet.
- Ein iframe hat keinen Titel, sodass Menschen mit Screenreader nicht erkennen, was der Frame enthält und ob sie ihn überspringen sollen.
/ So prüfen Sie es selbst
- Laden Sie die Seite, klicken Sie in die Adresszeile und drücken Sie einmal Tab. Ein Link wie Zum Inhalt springen sollte als erster oder einer der ersten Stopps erscheinen.
- Drücken Sie darauf die Eingabetaste und dann erneut Tab. Der Fokus sollte zum ersten Bedienelement im Hauptinhalt wandern, nicht zurück in die Navigation.
- Prüfen Sie im Elements-Panel der DevTools, ob das href des Links zur id eines vorhandenen Elements passt und die Seite genau ein main-Element hat.
- Drücken Sie in einem kostenlosen Screenreader wie NVDA die Taste D, um zwischen Landmarks zu springen, und H für Überschriften, und prüfen Sie, ob der Hauptinhalt so erreichbar ist.
- Prüfen Sie bei jedem iframe, ob ein title-Attribut seinen Inhalt benennt.
/ So beheben Sie es
- Fügen Sie <a href="#main">Zum Inhalt springen</a> als erstes fokussierbares Element im body ein und geben Sie dem Inhaltscontainer id="main".
- Zeichnen Sie die Regionen mit den Elementen header, nav, main und footer aus, mit genau einem main pro Seite.
- Schieben Sie den Sprunglink mit einer Klasse für visuell versteckte Inhalte aus dem Bild und holen Sie ihn bei :focus zurück. Verwenden Sie weder display: none noch visibility: hidden.
- Landet der Fokus in Ihrem Test nicht auf dem Ziel, geben Sie dem Zielelement tabindex="-1".
- Geben Sie jedem iframe ein title-Attribut, das beschreibt, was darin steckt.
/ Was unser Scanner prüft
Diesem Kriterium sind vier Prüfungen zugeordnet. no-skip-link meldet eine Seite, die eine main-Landmark hat, mehr als zehn Tabstopps davor und keinen Sprunglink unter den ersten sechs. Eine Regel von HTML_CodeSniffer meldet seiteninterne Links, deren Ziel-id nicht existiert, eine weitere meldet iframes ohne Titel, ebenso die axe-core-Regel frame-title. Keine der Prüfungen folgt dem Sprunglink, um zu sehen, wo der Fokus landet.
/ Wer es verletzt, nach unseren eigenen Messungen
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Verlangt WCAG einen Sprunglink?
Nicht namentlich. 2.4.1 verlangt einen Mechanismus zum Umgehen wiederkehrender Blöcke, und das W3C erkennt auch Landmarks oder eine Überschriftenstruktur als ausreichende Techniken an. Ein Sprunglink lohnt sich trotzdem, weil Browser keinen eingebauten Tastaturbefehl zum Springen zwischen Landmarks oder Überschriften bieten. Sehende Tastaturnutzende ohne Screenreader sind deshalb auf ihn angewiesen.
Darf der Sprunglink versteckt sein?
Ja, solange er sichtbar wird, wenn er den Tastaturfokus erhält, und in der Tabulatorreihenfolge bleibt. Positionieren Sie ihn außerhalb des Bildschirms und holen Sie ihn bei :focus zurück. Ein mit display: none oder visibility: hidden versteckter Link lässt sich gar nicht fokussieren, und einer, der auch mit Fokus unsichtbar bleibt, lässt sehende Tastaturnutzende raten, wo sie sind.
Warum verschiebt mein Sprunglink den Fokus nicht?
Die üblichen Ursachen sind ein href, das auf eine nicht vorhandene id zeigt, ein Klick-Handler, der preventDefault aufruft, um das Scrollen zu animieren, oder ein Ziel, das der Browser nicht als Startpunkt für das nächste Tab behandelt. Korrigieren Sie die id, entfernen Sie den Handler oder setzen Sie darin den Fokus, und geben Sie dem Ziel tabindex="-1".