Landmarkenstruktur und der Sprunglink.
Landmarkenstruktur heißt, die Bereiche einer Seite — Header, Navigation, Hauptinhalt, Footer — im HTML ausdrücklich zu markieren, und sie bestimmt direkt, wie ein Screenreader-Nutzer sich auf der Seite bewegt.
Ein sehender Nutzer erfasst die Seite mit einem Blick: Menü oben, Inhalt in der Mitte, Footer unten. Dieser Blick liest sich sofort aus den visuellen Hinweisen des Layouts — Position, Abstand, Linien. Ein Screenreader-Nutzer hat diesen Blick nicht; er hört die Seite linear, von Anfang bis Ende. Die Landmarkenstruktur ist das, was diesem Nutzer den verlorenen Blick zurückgibt.
Sind die Landmarken markiert, kann der Screenreader dem Nutzer eine Liste der Seitenbereiche anbieten, und der Nutzer springt direkt zum gewünschten. Sind sie es nicht, bleibt nur das Hören von oben — auf jeder Seite, Menü eingeschlossen.
Die Landmarken-Elemente und ihre Rollen
HTML bietet fertige Elemente zum Markieren der Landmarken, und sie zu verwenden ist kürzer und sicherer, als dieselbe Arbeit mit Rollendeklarationen zu tun. Mit dem Element kommt die Rolle automatisch.
- Header-Bereich — der obere Streifen der Seite: Logo, Hauptnavigation, Sprachumschalter. Einer pro Seite.
- Navigationsbereich — Linkgruppen. Es kann mehrere geben (Hauptmenü, Footer-Menü, Brotkrumenpfad), und dann braucht jeder einen unterscheidenden Namen.
- Hauptinhaltsbereich — der seitenspezifische Inhalt. Einer pro Seite, und das Ziel des Sprunglinks liegt hier.
- Ergänzender Bereich — Material, das zum Inhalt gehört, aber von ihm trennbar ist: Seitenspalte, verwandte Links.
- Footer-Bereich — Copyright, rechtliche Links, Kontakt.
- Suchbereich — für das Suchformular gibt es eine eigene Rolle, zu verwenden, wenn die Suche auf der Seite prominent ist.
Bei mehreren Navigationsbereichen wird die Benennung kritisch. Drei unbenannte Navigationsbereiche erscheinen in der Screenreader-Liste als „Navigation, Navigation, Navigation“, und der Nutzer weiß nicht, welche das Hauptmenü ist. Benannt wird mit einem Etikett — eine Ein-Zeilen-Arbeit.
Dasselbe Problem entsteht bei mehr als einem Hauptinhaltsbereich: Mit zwei Hauptbereichen wird unklar, welcher der echte Inhalt ist. Die Regel ist einfach — ein Hauptinhaltsbereich pro Seite.
Der Sprunglink: warum er nötig ist
Steht am Anfang jeder Seite dasselbe Navigationsmenü, muss ein Tastaturnutzer es auf jeder Seite vollständig passieren. Bei zwanzig Links heißt das zwanzig Tastendrücke bis zum Inhalt — und zweihundert unnötige für jemanden, der zehn Seiten besucht.
2.4.1 „Blöcke umgehen“ löst genau das und liegt auf Stufe A — es nicht zu erfüllen ist ein grundlegender Verstoß. Die häufigste Lösung: als erstes fokussierbares Element der Seite ein Link, der direkt zum Hauptinhalt springt.
Der Link ist normalerweise unsichtbar und wird beim Fokus sichtbar. Dieses Verhalten zählt: Ihn fokussierbar, aber unsichtbar zu lassen führt dazu, dass der Nutzer nicht weiß, wohin sein erster Tab ging. Ihn aus dem Bildschirm zu schieben und beim Fokus hereingleiten zu lassen ist das Standardmuster.
Zwei häufige Fehler
Der Sprunglink wirkt einfach, bricht aber an zwei Stellen lautlos, und keine fällt ohne Test auf.
Erstens: Der Link scrollt nur und bewegt den Fokus nicht. Es sieht aus, als funktionierte er — die Seite gleitet wirklich zum Hauptinhalt —, aber der nächste Tab bringt den Nutzer zurück an den Menüanfang, denn der Fokus hat sich nie bewegt. Das Zielelement fokussierbar zu machen löst es.
Zweitens: Der Link bleibt auch beim Fokus unsichtbar. Vergisst die Off-Screen-Technik, ihn beim Fokus zurückzuholen, bleibt der Link zugänglich, wird aber unbrauchbar — der Nutzer verliert beim ersten Tab den Fokus und weiß nicht, was er gedrückt hat. Der Test ist einer: Seite öffnen, einmal Tab drücken, den Link SEHEN.
Ein nur scrollender Sprunglink ist ein Merkmal, das aussieht, als funktionierte es — und nicht funktioniert.
Landmarken und Überschriftenhierarchie arbeiten zusammen
Landmarken und Überschriften sind die zwei getrennten Navigationswerkzeuge des Screenreader-Nutzers, und sie ersetzen einander nicht. Landmarken sagen, wie viele Bereiche die Seite ungefähr hat; Überschriften geben die Struktur in diesen Bereichen. Ohne das eine bleibt das andere unvollständig.
Die praktische Folge: Die Landmarken zu markieren und die Überschriftenhierarchie kaputt zu lassen heißt, schnell zum Hauptinhalt zu springen und sich dort zu verirren. Auch das Umgekehrte gilt — eine makellose Überschriftenstruktur ohne Landmarken trennt das Menü nicht vom Inhalt.
Der praktische Weg, beides zusammen zu prüfen: die Seite nur über ihre Struktur lesen. Mit Browser-Erweiterungen oder Entwicklerwerkzeugen wird der Landmarken- und Überschriftenbaum der Seite extrahiert, und man fragt, ob sich aus diesem Baum versteht, was die Seite erzählt. Versteht es sich nicht, fehlt Struktur — eine Ordnung, die nur das CSS zeigt, kommt im Screenreader nicht zurück.
Auch der Seitentitel ist ein Navigationswerkzeug
Die Landmarkenstruktur ordnet das Innere der Seite; der Seitentitel sagt, auf welcher Seite der Nutzer ist. Lädt eine Seite, liest der Screenreader zuerst den Titel — der Titel ist das Erste, was der Nutzer hört, und er leistet die Identifikation der Seite allein.
Deshalb zählt die Reihenfolge des Titels: Der seitenspezifische Teil gehört nach VORN, die Marke nach hinten. Auf einer Website, deren jede Seite mit „Firmenname — …“ beginnt, hört ein zwischen Tabs wechselnder Nutzer jedes Mal dieselben Wörter und erreicht den unterscheidenden Teil erst am Ende. Die umgekehrte Reihenfolge trägt dieselbe Information und verkürzt das Hören.
Dasselbe zeigt sich in den Browser-Tabs: Auf schmalen Tabs sind nur die ersten Wörter lesbar. Steht der seitenspezifische Teil vorn, erkennt der Nutzer den Tab; beginnt er mit der Marke, sehen alle Tabs gleich aus. Barrierefreiheit und Gebrauchstauglichkeit zeigen auch hier auf dieselbe Lösung.
Die Struktur verifizieren
Der schnellste Weg zu erkennen, ob Landmarken- und Überschriftenstruktur stimmen, ist die Seite strukturell statt visuell zu sehen. Dafür gibt es drei Methoden, und jede dauert wenige Minuten.
- Öffnen Sie den Barrierefreiheitsbaum des Browsers — die Entwicklerwerkzeuge listen als Baum, wie die Seite der Hilfstechnologie erscheint. Erzählt der Baum, den Sie sehen, die Seite?
- Extrahieren Sie die Landmarkenliste — eine Erweiterung oder ein kurzes Skript listet die Landmarken der Seite und ihre Namen. Gibt es unbenannte oder doppelte Bereiche?
- Gehen Sie die Seite mit dem Screenreader Landmarke für Landmarke durch — das ist die echte Verifikation. Bewegen Sie sich mit dem Landmarken-Kürzel und prüfen Sie, ob Sie verstehen, wohin Sie gehen.
Die dritte Methode kann die anderen beiden nicht ersetzen, denn nur sie zeigt, ob die Struktur wirklich hilft. Eine technisch makellose Landmarkenstruktur mit schlechter Benennung hilft dem Nutzer nicht — und das erfahren Sie nur durch Zuhören.
Auf dieser Website werden Landmarkenstruktur und Sprunglink in der Suite gemessen: Dass der erste Tab den Sprunglink bringt, dass der Link im Fokus sichtbar ist und dass er den Fokus wirklich zum Hauptinhalt bewegt, wird bei jedem Lauf verifiziert. Drei getrennte Tests, denn die drei brechen auf getrennte Weisen.