Prüfschritt 9.2.4.1 Bereiche überspringbar

Was wird geprüft?

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

Es werden sinnvolle Bereichsüberschriften (HTML-Strukturelemente h1 bis h6) eingesetzt
Es sind Sprunglinks vorhanden.
HTML5 Elemente zur Auszeichnung von Bereichen (header, nav, main, aside, footer) erschließen den Seitenaufbau sinnvoll.
WAI-ARIA document landmarks strukturieren die Seitenbereiche sinnvoll.

Frames und iframes brauchen ein sinnvolles title-Attribut.

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 oder nur einen kleinen Ausschnitt der Seite sehen können – sind darauf angewiesen, dass die Struktur unabhängig von der Darstellung auf dem Bildschirm zugänglich und nutzbar ist. Die Verwendung von (oft unsichtbaren) Bereichsüberschriften, Sprunglinks oder HTML5 Elementen zur Auszeichnung von Regionen ist dafür eine wesentliche Voraussetzung.

Bei Frames ist ein sinnvoller Titel wichtig für die Orientierung mit Screenreadern. Gängige Screenreader werten das title- und das in der Programmierung gebräuchliche name-Attribut aus. Dabei wird das title-Attribut vorrangig ausgegeben. Sie sprechen beim Umschalten zwischen den Frames mit den Tastenkürzeln den Titel des aktiven Frames aus.

Der Einsatz von HTML5-Elementen für Regionen wird inzwischen gut von assistiven Technologien unterstützt. Die zusätzliche Berücksichtigung eines role-Attributs (WAI ARIA document landmarks) kann die Unterstützung von Regionen jedoch verbessern.

So können Benutzer 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 Prüfung der Bereichsüberschriften

Seite im Firefox aufrufen.
Über die Web Developer Toolbar die Seite ohne Stylesheets anzeigen (über CSS > Styles deaktivieren > Alle Styles deaktivieren Stylesheets deaktivieren).
Das Bookmarklet "Inhalte gegliedert" 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 vollständig und korrekt gliedern.

2.2 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
Sprunglinks zum Überspringen von Inhaltsblöcken sind das letzte fokussierbare Element vor dem zu überspringenden Inhaltsblock oder dessen erster Link

2.3 Prüfung der HTML5 Elemente für Regionen und 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 nur mit nav oder role="navigation" ausgezeichnet, dann prüfen, ob sie mit aria-label oder aria-labelledby sinnvoll bezeichnet sind.

2.4 Prüfung von Frame-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 Frames anklicken und prüfen, ob für alle Frames ein aussagekräftiger title-Text vorhanden ist.

3. Hinweise

Eigenständige Bereiche

Eigenständige Bereiche sind zum Beispiel:

Navigation und Inhalt
Spalten mit unterschiedlichen Inhalten
Bereiche, die durch Umrahmung als zusammengehörig gekennzeichnet sind
Frames oder iframes

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 negativ bewertet.

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 Frames und 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 "Navigation" und "Inhalt", nicht jedoch "top" oder "rechts". Oft werden in Framesets auch leere Frames eingebunden, die ausschließlich zu Layoutzwecken verwendet werden. Bei solchen Frames sollte als Bezeichnung "Leer" gewählt werden.

4. Bewertung

Erfüllt

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

Nicht voll erfüllt

Bereichsüberschriften sind nicht aussagekräftig oder irreführend
Der Einsatz von HTML5 Elementen für Regionen erschließt die Seitenbereiche nicht vollständig
Die Zuordnung von WAI-ARIA document landmarks ist falsch oder irreführend
Bereichsüberschriften oder Sprunglinks sind mittels display:none versteckt
Der Seitenpfad (Breadcrumb) ist als Liste ausgezeichnet, hat aber keinen vorangestellten Hinweis (z. B. Überschrift)
Mehrere wichtige Navigationsbereiche sind mit WAI-ARIA document landmarks oder HTML5-Elementen für Bereiche ausgezeichnet und sind nicht mit aria-label oder aria-labelledby unterschieden.

Nicht erfüllt

Es gibt auf der Seite verschiedene Bereiche mit für sich nutzbaren Inhalten, diese werden jedoch weder mit Überschriften, noch mit Sprunglinks oder HTML5 Elementen erschlossen
Auf der Seite werden mehrere klar abgrenzbare Themen behandelt, es wurde aber nur pro forma eine Hauptüberschrift ausgezeichnet

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 Frames und iframes (wenn vorhanden) vernünftige 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.1

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.