WCAG Erfolgskriterien
WCAG 2.0 A

Erfolgskriterium 2.4.1
Blöcke umgehen (Bypass blocks)

Ein Blick auf den Bildschirm genügt, um im Bedarfsfall den individuellen Inhalt einer Seite zu sehen. Seitenabschnitte, die sich auf einem Webauftritt wiederholen, werden bei häufiger Nutzung vertraut. Sie werden bei der visuellen Wahrnehmung bald einmal übersprungen.

Blinde Menschen nehmen Seiteninhalte linear wahr. Sie müssen erst die Linie finden, ab der ein individueller Seiteninhalt beginnt. Für die Bedienung ohne Maus sind technische Maßnahmen vorzusehen, um den Fokus rasch auf den individuellen Inhalt einer einzelnen Seite verschieben zu können. Auf diese Weise werden wiederkehrende Blöcke übersprungen.

WCAG Kontext

Konformitätsstufe A

Prinzip 2. Bedienbar Operable

Komponenten der Benutzerschnittstelle und die Navigation müssen bedienbar sein.

Richtlinie 2.4 Navigierbar

Stelle Mechanismen bereit, die bei der Nutzung helfen zu navigieren, Inhalt zu finden und den Standort festzulegen.

Erläuterungen zum Kontext

2.1.1 Tastatur
Inhalte und Funktionalitäten müssen allein mit der Tastatur bedienbar sein. Navigationsmechanismen zu relevanten Seitenbereichen ohne einen Griff zur Maus stellen dafür eine Basis dar.

Übersetzung des Erfolgskriteriums

Ein Mechanismus zum Überspringen von Inhaltsblöcken ist verfügbar, wenn sich die Blöcke auf den Seiten eines Webauftritts mehrfach wiederholen.

Englischsprachiger Originaltext des Erfolgskriteriums

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

WCAG | Success Criterion 2.4.1 Bypass Blocks

Zum raschen Verständnis

Bei der Bedienung ohne Maus müssen wiederkehrende und damit möglicherweise schon bekannte Seitenbereiche, wie etwa die Hauptnavigation, mit Tastaturbefehlen übersprungen werden können. Der individuelle Hauptinhalt einer einzelnen Webseite soll dadurch effizienter allein mit der Tastatur erreicht werden können.

Mindestanforderung

Laut Richtlinie wird zumindest ein Mechanismus zum Überspringen von Blöcken verlangt. In den Erläuterungen (Understanding SC 2.4.1) werden dafür folgende Möglichkeiten als hinreichend hervorgehoben:

  1. Ein Einsprunglinks (Skip Link).
  2. HTML5 Regionen oder in Ausnahmefällen ARIA Landmark Roles.
  3. Semantische Überschriften, typischerweise die Überschrift der Ebene 1 am Beginn des Hauptinhalts.

Best Practice

Typischerweise wird dieses Erfolgskriterium durch den Einsatz eines Einsprunglinks (Skip Navigation Link) erfüllt. Dieser Mechanismus unterstützt auch ohne verfügbarer assistierender Technologien.

Zum Ausblenden des Kopfbereichs und der Hauptnavigation kann in ähnlicher Weise auch die Funktionalität eines Akkordeons herangezogen werden. Dies ist für Smart Phones bereits üblich, und wird vermehrt auch für das Desktop-Layout eingesetzt.

Ergänzend ist es sinnvoll, wenn der Hauptinhalt in eine HTML5 Region <main> eingebettet ist und mit einer Überschrift der Ebene 1 beginnt. Auf diese Weise lassen sich bei der Nutzung eines Screen Readers Navigationsmechanismen anwenden, die zum Überspringen von Blöcken dienen.

Generell empfiehlt sich den Einsatz von HTML5 Regionen und einer exklusiven H1 für den Beginn des <main>-Bereichs . Dies entspricht den aktuellen Möglichkeiten und Nutzungsgewohnheiten für Webseiten mit HTML-Technologie. Der Aufwand zu einer Entsprechenden Konfiguration des Content Management Systems ist überschaubar.

Zielgruppen

Diese Eingangsinformationen bieten nur einen ersten Einblick in die Thematik. Genauere Informationen finden Sie in der Linksammlung zum Erfolgskriterium.

Prüfverfahren

Maschinelle Prüfung

Maschinelle Tools können prüfen, ob der <body> mit einem Link zu einem Seitenbereich führt, ob Seitenregionen vorhanden sind und wie die Überschriftenhierarchie aussieht. Es zahlt sich also aus, diese Tools zu verwenden. Ich persönlich habe gute Erfahrungen dabei mit Qualweb gemacht.

Allerdings treten sowohl falsch negative als auch falsch positive maschinelle Ergebnisse auf. Eine manuelle Nachprüfung ist also in jedem Fall erforderlich.

Manuelle Prüfung

Öffne den Quellcode und prüfe folgende Punkte:

  1. Einsprunglink
    1. Suche nach <body und schau, ob als erstes semantisches Element etwas wie <a href="#… folgt.
    2. Schau parallel, ob im Browser beim ersten Drücken von Tabulator der Fokus auf einem Link steht, dessen Beschriftung sinngemäß Hauptinhalt lautet.
    3. Aktiviere den Link und prüfe, ob der Fokus tatsächlich zum Hauptinhalt geführt wurde.
  2. Seitenregionen
    1. Suche nach dem Vorhandensein von <header, <main und <footer.
    2. Alternativ sollten gewöhnlich role="banner", role="main" und role="contentinfo" vorhanden sein. Diese ARIA Landmarks entsprechen exakt den obigen HTML5-Regionen.
    3. Prüfe, ob die Seitenkomponenten sinnvoll mit den vorhandenen Regionen strukturiert sind.
  3. Hauptüberschrift
    1. Suche nach <main.
    2. Schau, ob als erstes semantisches Element ein <h1 erscheint.

Mobile Apps

Gemäß EN 301 549 muss dieses Erfolgskriterium nicht bei mobilen Apps getestet werden.

Prüfung durch betroffene Menschen (Peer Evaluation)

Blinde Menschen sind am meisten auf eine bedienbare und sinnvolle lineare Darstellung angewiesen. Screen Reader stellen als deren wichtigste assistierende Technologie daher relevante Inhalte und Mechanismen bereit, sofern sie technisch verfügbar sind.

Mit dem Screen Reader JAWS lassen sich Mechanismen zum Umgehen von Blöcken auf folgende Weisen prüfen:

  1. Lass dir alle Links der Seite auflisten und prüfe, ob der erste Link direkt zum Hauptinhalt führt:
    JAWS-Taste + F7
  2. Lass dir alle Regionen der Seite auflisten:
    JAWS-Taste + STRG + R
    Prüfe, ob die Regionen inhaltlich sinnvoll strukturiert sind.
  3. Springe zur ersten Überschrift der Ebene 1 und prüfe, ob diese am Beginn des Hauptinhalts steht:
    1 (nicht auf dem Nummernblock!)