Zweiter Blick: Seitenregionen
Informationen


Seitenregionen Regions
Materialsammlung

Bedeutung für die Barrierefreiheit

Wer mit seinen Augen am Bildschirm arbeitet, kann sich zweidimensional rasch einen Überblick über Seitenbereiche schaffen. Wer hingegen auf einen Screen Reader angewiesen ist, muss sich den Seiteninhalt linear erarbeiten.

Seitenregionen liefern für Screen Reader bei der linearen Wahrnehmung eine grobe Struktur über vorhandene Seitenbereiche. Für einige wenige solcher Seitenbereiche gibt es dazu klar definierte semantische Elemente mit typischen Merkmalen.

In HTML5 werden verfügbare Seitenregionen mittels Tags gekennzeichnet (<main>, …). Für andere Kontexte stehen ARIA-Attribute zur Verfügung (role="main", …). Nach Möglichkeit sollten jedoch verfügbare HTML-Elemente verwendet werden.

WCAG Anforderungen

1.3.1 Infos und Beziehungen
Der visuellen Darstellung muss eine korrekte semantische Darstellung entsprechen.
Wenn etwas wie eine Seitenregion aussieht, muss dies auch technisch entsprechend umgesetzt sein.
Die Anwendung dieses Erfolgskriteriums auf Seitenregionen war umstritten, setzt sich jedoch deutlich durch.

HTML Regionen

header-Element für den Kopfbereich einer Webseite

Die meisten Webseiten verfügen im oberen Bereich über Inhalte und Mechanismen, die für den gesamten Webauftritt von Relevanz sind. Zur Kennzeichnung dieses Bereiches sollte in HTML5 das header-Element zur Kennzeichnung verwendet werden.

Typischerweise kann dieser Bereich folgende Elemente beinhalten:

header-Element für Bereiche einer Webseite

Das header-Element kann mit Vorsicht auch zur Kennzeichnung markanter Kopfbereiche in section- oder article-Elementen verwendet werden.

Screen Reader führen diese Kopfbereiche für Abschnitte beim Auflisten der Seitenregionen an. Wird die Liste der Seitenregionen dadurch sehr lange, verliert sie die Funktion, einen raschen Überblick über den Seitenaufbau zu ermöglichen.

Es ist aus der Perspektive der Barrierefreiheit nicht nötig und meines Erachtens sogar störend, jede Überschrift in ein header-Element einzubetten. Die zusätzliche Semantik ergibt nur einen Sinn, wenn sich im header signifikante Elemente, wie ein Inhaltsverzeichnis für den Abschnitt befinden.

header-Element und ARIA-Anweisungen

Das header-Element liefert bereits die Semantik des ARIA-Attributs role="banner". Eine redundante Verwendung ist daher nicht nötig und liefert in Validatoren eine Fehlerwarnung.

Wenn sich auf einer Webseite mehrere Abschnitte mit einem header-Element befinden, empfiehlt es sich, jedes einzelne mit einem aria-label zu beschriften. Ansonsten listen Screen Reader mit dem Abruf von Seitenregionen jeweils nur Bereiche auf, die als Banner bezeichnet sind.

HTML-Regionen und ARIA Landmark Roles


Seitenregionen mittels HTML und ARIA
HTML Element ARIA Landmark
<header> banner
(im Kontext des <body>-Elements)
<main> main
<footer> contentinfo
(im Kontext des <body>-Elements)
<nav> navigation
<aside> complementary
<section> region
(sofern durch aria-label oder aria-labelledby ein Name verfügbar ist.)

Screen Reader Funktionalitäten

Falls Sie das Auflisten von Regionen testen wollen und über den Screen Reader verfügen: Der JAWS-Befehl lautet: JAWS-Taste + STRG + R.