Zweiter Blick: Seitenregionen
Informationen
Schriftzug <<header> über <<main> und <<footer>. <<main> steht über einem vertikal ausgedehnten Bereich.

Seitenregionen
Materialsammlung

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.

Für einzelne Seitenbereiche stehen semantische Elemente zur Kennzeichnung zur Verfügung. Diese Kennzeichnungen liefern für Screen Reader bei der linearen Wahrnehmung eine grobe Struktur des Seiteninhalts.

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

Seit HTML5 stehen folgende Tags zur Kennzeichnung von Seitenregionen zur Verfügung.

aside
Ergänzende Informationen zum Hauptinhalt, etwa Begriffsklärungen.
footer
Der Fußbereich einer Webseite, üblicherweise der Platzt für grundlegende Angaben zu Kontaktmöglichkeiten, dem Impressum und der Barrierefreiheitserklärung.
form
Bereich für Formulare, beginnend mit relevanten Informationen etwa zu Pflichtfeldern oder zum Datenschutz.
header
Der Kopfbereich einer Webseite, üblicherweise mit Logo, Suchbereich und anderen Navigationsbereichen für den gesamten Webauftritt.
main
Der Hauptinhalt einer Webseite beginnend mit einer aussagekräftigen Überschrift der Ebene 1 und dem individuellen Seiteninhalt.
nav
Linksammlung, wie eine Hauptnavigation. Weitere Navigationsbereiche sollten nur mit Vorsicht gekennzeichnet werden.
section
wf

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.