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.
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
ARIA Landmark Roles
Seitenregionen mussten ursprünglich mit ARIA-Anweisungen gekennzeichnet werden. Die entsprechenden Anweisungen werden als Landmark Roles bezeichnet.
Wo jedoch HTML-Elemente gleichbedeutend mit ARIA-Landmarks verfügbar sind, müssen die HTML-Tags bevorzugt werden. Eine redundante Kennzeichnung mit ARIA-Anweisungen ist nicht mehr erforderlich.
| HTML Element | ARIA Landmark |
|---|---|
<header> |
banner |
<main> |
main |
<footer> |
contentinfo |
<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.