Prüfschritt 9.2.4.1 Bereiche überspringbar

Was wird geprüft?

Verschiedene Inhaltsbereiche wie Navigation, Suche oder Seiteninhalt können von Nutzenden assistiver Technologien übersprungen werden. Der Seitenaufbau soll für diese Nutzenden unabhängig von der Darstellung deutlich werden. Mindestens eine der folgenden Voraussetzungen soll erfüllt sein:

Es sind Sprunglinks vorhanden, zumindest ein Sprunglink zum Inhalt.
HTML5 Elemente zur Bereichsauszeichnung (header , nav, main, aside, footer) oder die diesen Elementen entsprechenden WAI-ARIA document landmarks erschließen den Seitenaufbau sinnvoll.
Es werden sinnvolle Bereichsüberschriften (HTML-Strukturelemente h1 bis h6) für "Navigation", Inhalt" o.ä. eingesetzt. Diese Technik wird mittlerweise selten genutzt, seit es in HTML Elemente für die Bereichsauszeichnung gibt. Inhaltlich orientierte Überschriften werden in der Regel nicht als Bereichsüberschriften gewertet.

iframes sollten den Bereich im title-Attribut benennen.

Warum wird das geprüft?

Visuell werden Webseiten mit Mitteln wie Überschriften, Spalten oder Kästen strukturiert. Dank dieser Strukturierung weiß der Benutzer, was zusammengehört, kann das Angebot der Webseite leicht überblicken und gezielt auf die Inhalte zugreifen, die ihn interessieren.

Benutzer, die diese visuelle Ordnung nicht nutzen können – zum Beispiel, weil sie blind sind – sind darauf angewiesen, dass die Struktur unabhängig von der Darstellung auf dem Bildschirm für Hilfsmittel wie Screenreader zugänglich und nutzbar ist. Die Verwendung von Sprunglinks, HTML5 Elementen zur Auszeichnung von Bereichen, oder Bereichsüberschriften ist dafür eine wesentliche Voraussetzung.

Bei iframes hilft ein sinnvoller Titel Screenreader-Nutzenden bei die Orientierung. Gängige Screenreader werten das title- und das in der Programmierung gebräuchliche name-Attribut aus. Dabei wird das title-Attribut vorrangig ausgegeben.

So können Nutzende die Bereichsüberschriften, Sprunglinks, HTML5-Elemente für Regionen bzw. WAI-ARIA document landmarks anwenden:

Konstante Bereiche am Seitenbeginn, etwa Navigation oder Seitenkopf, überspringen, um direkt zum Inhalt zu gelangen
Zwischen Bereichen hin- und her wechseln

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn es auf der Seite deutlich voneinander abgegrenzte Bereiche gibt, etwa Navigation und Inhalt. Das ist bei informationsorientierten Seiten meist der Fall.

2. Prüfung

2.1 Sprunglink-Prüfung

Wenn Sprunglinks vorhanden sind, prüfen, ob die folgenden Anforderungen erfüllt sind:

Sprunglinks verschieben beim Auslösen den Tastaturfokus zum angegebenen Bereich (bzw. beim Überspringen von Inhaltsblöcken auf den Inhalt direkt nach dem zu überspringenden Bereich)
Sprunglinks sind entweder permanent sichtbar oder werden bei Fokuserhalt eingeblendet
Sprunglinks am Seitenbeginn sind die ersten fokussierbaren Elemente der Tabreihenfolge (oder ggf. die ersten nach einem Cookie-Bannner oder Dialog)
Sprunglinks zum Überspringen von Inhaltsblöcken sind das letzte fokussierbare Element vor dem zu überspringenden Inhaltsblock oder dessen erster Link

2.2 Prüfung der HTML5 Bereichsauszeichnung bzw. der entsprechenden WAI-ARIA document landmarks

Seite im Firefox aufrufen.
Quelltextanalyse: Prüfen, ob die verschiedenen Seitenbereiche durch die Auszeichnung mit header, nav, main, aside, footer sinnvoll erschlossen werden.
Das Landmarks bookmarklet aufrufen. Die document landmarks werden nun, wenn vorhanden, hervorgehoben.
Wenn document landmarks eingesetzt werden, prüfen, ob die Zuordnung der Rollen (z. B. navigation, main) korrekt ist und dem Aufbau der Seite entspricht.
Sind mehrere Navigationsbereiche mit nav oder role="navigation" ausgezeichnet, prüfen, ob sie mit aria-label oder aria-labelledby sinnvoll bezeichnet und damit unterscheidbar sind.

2.3 Prüfung der Bereichsüberschriften

Seite im Firefox aufrufen.
Das Bookmarklet "Inhalte gegliedert" oder ein anderes Bookmarklet zur Anzeige von Überschriften aufrufen.
Die Bereichsüberschriften im Zusammenhang mit den durch sie strukturierten Inhalten ansehen und prüfen, ob sie aussagekräftig sind, die Strukturelemente für Überschriften nutzen, und die Inhaltsbereiche der Seite korrekt gliedern.

2.4 Prüfung von iframe-Titeln

Seite im Firefox aufrufen.
In der Web Developer Toolbar die Funktion Outline > Outline Frames aufrufen.
Dann ebenfalls in der Web Developer Toolbar die Funktion Information > Display Element Information aufrufen. Der Cursor wird nun als Fadenkreuz angezeigt.
Mit dem Fadenkreuz die Kante der hervorgehobenen iframes anklicken und für alle iframes, die Inhalte haben prüfen, ob für alle iframes ein aussagekräftiger title-Text vorhanden ist. Dies kann z.B. sein "Werbung", "Social Media", oder die Kurzbezeichnung eines im iframe eingebundenen Videos.
Wenn iframes leer sind, also keine Inhalte haben, sollten Sie über das hidden oder ària-hidden`-Attribut versteckt sein.

3. Hinweise

Eigenständige Bereiche

Eigenständige Bereiche sind zum Beispiel:

Navigationsbereiche (Hauptnavigation, Servicenavigation, Bereichsnavigation)
Hauptinhaltsbereich
Zusätzliche Inhalte
Fußbereich

Der Fußbereich wird nicht als eigenständiger Bereich gewertet, wenn dort lediglich redundante Links, Copyright-Hinweise oder Angaben zum Erstellungs- oder Änderungsdatum stehen.

Hinweis zu Sprunglinks und Document Landmarks

Das Fehlen von Sprunglinks und die Nichtverwendung von WAI-ARIA Document Landmarks werden nicht grundsätzlich negativ bewertet. Es hängt vom Inhalt und von der Komplextät der Seiten ab, ob ein Mechanismus zum Überspringen von Bereichen erforderlich ist.

Hinweis zu mehrfach verwendeten Landmarks bzw. HTML5-Elemente für Bereiche

Wird eine WAI-ARIA document landmark bzw. ein HTML5-Element für Bereiche mehrfach verwendet (z. B. role="navigation" oder nav), sollte sie mit Hilfe von aria-label oder aria-labelledby aussagekräftig benannt werden.

Hinweis zu Sie-sind-hier"-Navigationen

Gemeint ist die "Sie-sind-hier"-Navigation am Seitenanfang (auch breadcrumb trail oder Krümelpfad). Wenn Breadcrumbs als Listen ausgezeichnet sind, brauchen sie einen (eventuell versteckten) vorangestellten Hinweis wie "Seitenpfad", "Sie sind hier", oder "Navigationspfad" um so für Screenreader-Nutzer von anderen Menüs unterscheidbar zu sein.

Hinweis zu iframes

Im title-Attribut soll der Zweck oder Inhalt, nicht aber die Lage des Frames auf dem Bildschirm angegeben werden (siehe 9.2.4.2 "Sinnvolle Dokumenttitel"). Angemessene title-Attribute sind zum Beispiel "Werbung" und "Social Media", nicht jedoch "top" oder "rechts".

4. Bewertung

Erfüllt

Alle Bereiche der Seite können über Sprunglinks, HTML5 Elemente für Regionen und/oder WAI ARIA document landmarks oder sinnvolle Bereichsüberschriften erreicht und übersprungen werden

Teilweise erfüllt oder schlechter

Die Nutzung der Bereichsauszeichnung ist falsch oder irreführend
Sprunglinks werden nicht bei Fokuserhalt eingeblendet
Bereichsüberschriften oder Sprunglinks sind mittels display:none versteckt
Mehrere wichtige, mit nav oder role="navigation" ausgezeichnete Navigationsbereiche sind nicht durch aria-label oder aria-labelledby-Attribut ausgezeichnet und damit nicht voneinander unterscheidbar

Einordnung des Prüfschritts

Abgrenzung zu anderen Prüfschritten

In diesem Prüfschritt geht es um die Auszeichnung der Seitenbereiche mit Überschriften, Sprunglinks und WAI-ARIA-Attributen (landmarks). Die inhaltliche Strukturierung von Seiteninhalten wird in Prüfschritt 9.1.3.1a "HTML-Strukturelemente für Überschriften" geprüft.
In diesem Prüfschritt wird geprüft, ob iframes (wenn vorhanden) aussagekräftige Titel haben. Die Inhalte von iframes werden ebenso geprüft wie andere Seiteninhalte, etwa in Prüfschritt 9.1.3.1d "Inhalt gegliedert".

Einordnung des Prüfschritts nach WCAG 2.2

Guidelines

Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are

Success criteria

2.4.1 Bypass Blocks (Level A)

Techniques

General Techniques

HTML Techniques

ARIA Techniques

Quellen

WCAG 2.1 Hinweis zum Unterschied von `name` und `title`

The title attribute is not interchangeable with the name attribute. The title labels the frame for users; the name labels it for scripting and window targeting. The name is not presented to the user, only the title is.

( H64: Using the title attribute of the frame and iframe elements)

WCAG 2.1 Verknüpfung von WAI ARIA document landmarks und Text

The purpose of this technique is to provide names for regions of a page that can be read by assistive technology. The aria-labelledby attribute provides a way to associate an section of the page marked up as a region or landmarks with text that is on the page that labels it.

( ARIA13: Using aria-labelledby to name regions and landmarks)

Ergänzung von HTML5 Elementen mit WAI ARIA

Script, das bei HTML5 Elementen automatisch ARIA-Rollen ergänzt: Polyfill accessifyhtml5.js von Yatil

Fragen zu diesem Prüfschritt

Müssen die Bereiche der Webseite durch `h1`-Überschriften ausgezeichnet werden?

Bei den meisten Webangeboten sind bestimmte Bereiche durchgängig für die Navigation reserviert. Andere wiederkehrende Bereich können etwa die Suche oder der Seitenkopf sein. Diese Bereiche sind auf allen Seiten des Angebots gleich aufgebaut und gestaltet. Sie haben keinen engen Bezug zum besonderen Seiteninhalt, sind eigentlich nicht den einzelnen Seiten, sondern eher dem Webauftritt als ganzen zuzurechnen. Es liegt daher nahe, die Navigation, den Inhaltsbereich und weitere klar abgegrenzte Bereiche der Seite jeweils mit einer h1-Hauptüberschrift zu versehen.

Es gibt jedoch auch andere Möglichkeiten, Seitenbereiche auszuzeichnen, etwa durch h5- oder h6-Überschriften, falls diese in der Gliederung der Seiteninhalte nicht verwendet werden (vergleiche den Artikel auf einfach-für-alle: "Passende Überschrift hier einsetzen")

Vom BITV-Test werden unterschiedliche Herangehensweisen akzeptiert. Es muss in jedem Fall geprüft werden, ob Überschriften konsistent eingesetzt werden, um die Seiten-Bereiche und deren Inhalte zu erschließen.