Eine saubere, semantische HTML-Struktur bildet die Grundlage für barrierefreie Webinhalte. Sie ermöglicht es Nutzer:innen und assistiven Technologien, Inhalte klar zu verstehen und effizient zu navigieren. Durch den richtigen Einsatz von Elementen wie Überschriften, Listen und Landmark-Regionen wird die Zugänglichkeit deutlich verbessert.
Die Relevanz von Barrierefreiheit verstehen
Landmarks sind wichtige Orientierungspunkte im HTML-Gerüst einer Webseite und helfen Nutzer:innen von Screenreadern, schnell zwischen zentralen Bereichen wie Navigation, Hauptinhalt oder Footer zu wechseln.
Screenreader wie JAWS bieten spezielle Tastenkombinationen, um effizient von Landmark zu Landmark zu springen, ohne die gesamte Seite linear durchgehen zu müssen. Diese strukturierte Navigation erleichtert die Bedienung erheblich, da Nutzer:innen sofort erkennen können, wo sie sich auf der Seite befinden und gezielt die Bereiche ansteuern können, die für sie relevant sind.
Shortcuts für die Navigation zwischen Landmarks pro Screenreader:
NVDA: Taste D
JAWS: Taste R
Narrator: Taste D
Voiceover (iOS): Rotor
TalkBack (Android): Vorleseoptionen
Video der Harvard University IT über die Navigation zwischen Landmarks mithilfe von JAWS
Was muss beachtet werden?
Deutsches Gesetz: Anforderungen der Konformitätsstufe A und AA müssen umgesetzt werden.
A
AA
Hohe Priorität
Für eine korrekte Interpretation der Inhalte einer Anwendung muss eine Angabe darüber stattfinden, welche Sprache genutzt wird. Dadurch kann beispielsweise der Screenreader Wörter korrekt aussprechen.
Anforderungen für Konformitätsstufe A
Das <html> Element muss mit einem lang-Attribute ausgezeichnet werden, welches die Sprache des Inhalts der Website angibt.
<!-- ✅ Correct: language is set to german -->
<html lang="de">
<!-- ✅ Correct: even better - language is set to german but with the addition that it is austrian german -->
<html lang="de-AT">
<!-- ✅ Correct: addition: website uses simple german language -->
<html lang="de-AT-simple">
Code-Beispiele für die korrekte Nutzung des lang-Attributes
<!-- ❌ Incorrect: missing language attribute-->
<html>
Code-Beispiel mit fehlendem lang-Attribut
Anforderungen für Konformitätsstufe AA
Falls bestimmte Bereiche oder einzelne Wörter des Inhalts in einer anderen Sprache verfasst sind, muss dies ebenfalls ausgezeichnet werden.
<!-- ✅ Correct: specity language for content that is not in the default language -->
<p lang="en">
This paragraph is in english, but the other content of the website is in german.
</p>
Code-Beispiel für die Auszeichnung der Sprache einzelner HTML-Elemente
This paragraph is in english, but the other content of the website is in german.
Alle Seiten innerhalb einer Webseite sollten einen einzigartigen und beschreibenden Seitentitel haben.
Der Seitentitel wird Screenreader-Nutzer:innen am Anfang eines Seitenbesuches aufgeführt und sollte einen ersten Anhangspunkt geben, welche Informationen auf dieser Seite zu finden sind. Dementsprechend ist es wichtig, dass dieser gesetzt wird und nicht leer bleibt.
<!-- ✅ Correct: title describes current page and general website name-->
<title>Web Standards & Guidelines | W3C</title>
Code-Beispiel mit einem beschreibenden Seitentitel
Web Standards & Guidelines | W3C
<!-- ❌ Incorrect: title can be more descriptive-->
<title>W3C</title>
Code-Beispiel mit einem zwar gesetzten, aber nicht beschreibenden Seitentitel
Der Inhalt einer Webseite muss in unterschiedliche semantische Bereiche unterteilt sein, die als Landmarks bezeichnet werden.
Konformitätsstufe A
Landmarks helfen Menschen mit assistiven Technologien sich besser auf einer Website zurecht zu finden und schneller zwischen unterschiedlichen Bereichen hin und her zu navigieren. Zu den Landmarks zählen folgende HTML-Elemente:
<aside>
<footer>
<form> (falls es ein Label hat)
<header>
<main>
<nav>
<search>
<section> (falls es ein Label hat)
Konformitätsstufe AAA
Die Landmarks einer Website müssen programmatisch identifizierbar sein. Falls es mehrere Landmarks der gleichen Art vorkommen, beispielsweise zwei <nav> Elemente im DOM existieren, müssen diese zugängliche Labels haben. Dadurch können sie von assistiven Technologien unterschieden werden.
<!-- ✅ Correct: navigation elements are distinguishable -->
<header>
<nav aria-labelledby="main-nav-label">
<p id="main-nav-label">Table of contents</p>
...
</nav>
<nav aria-labelledby="second-nav-label">
<p id="second-nav-label">Contact information</p>
...
</nav>
</header>
Code-Beispiel: Beide nav-Elemente haben ein aria-labelledby und sind somit unterscheidbar.
<!-- ❌ Incorrect: navigation elements are not distinguishable-->
<header>
<nav>...</nav>
<nav>...</nav>
</header>
Code-Beispiel: Beide nav-Elemente werden als »Navigation« in assistiven Technologien angezeigt und sind nicht voneinander zu unterscheiden.
Nutzung von Landmarks innerhalb anderer Landmarks
Manche Landmarks wie <header> und <main> haben noch weitere Regeln in der Nutzung, die zu beachten sind.
Ein <header> gilt als Banner-Landmark, wenn es das erste <header> direkt unter <body> ist oder wenn role="banner" gesetzt wurde. In beiden Fällen darf es nicht innerhalb anderer Landmark-Elemente stehen.
<aside> darf nicht innerhalb anderer Landmark-Elemente genutzt werden, wenn es als Complementary-Landmark gilt. Es wird dann als Complementary-Landmark interpretiert, wenn es ein direktes Kind des <body> ist oder explizit role="complementary" besitzt.
Ein <footer> ist ein Contentinfo-Landmark, wenn es der globale Seiten-Footer ist und direktes Kind des <body> ist oder explizit role="contentinfo" gesetzt wurde. In diesem Fall darf es nicht innerhalb anderer Landmark-Elemente stehen.
Ein <main> gilt als Main-Landmark, wenn es direktes Kind von <body> ist oder role="main" besitzt. In beiden Fällen darf es nicht innerhalb anderer Landmark-Elemente stehen.
Doppelte Nutzung auf Top-Level
Grundsätzlich darf eine Seite nie mehr als eine Landmark pro Typ besitzen, wenn es sich um globale, top-level Landmarks handelt.
Mithilfe von Sprungmarken oder Skip-Links können Menschen, die die Tastatur zur Navigation verwenden, bestimmte Bereiche einer Seite mit vielen interaktiven Elementen überspringen.
Skip-Links sind häufig visuell versteckt und werden erst sichtbar, wenn sie per Tastatur fokussiert werden. Sie stehen vor dem <header> und verlinken zu wichtigen Bereichen wie dem <main> oder dem <footer>, um eine schnelle Navigation zu ermöglichen.
<a href="#main" class="skiplink">Jump to content</a>
...
<main id="main">
...
</main>
Code-Beispiel zum Aufbau einer Sprungmarke im HTML
Die Strukturierung des Inhalts mittels Überschriften ermöglicht die inhaltliche Gliederung einer Seite und fördert die Verständlichkeit.
Nur eine h1
Jede Seite muss eine Überschrift des ersten Levels (<h1>) aufweisen. Sie muss verdeutlichen, welcher Inhalt auf der Seite zu finden ist. Es darf jedoch nicht mehr als eine <h1> pro Seite geben.
Korrekte Reihenfolge der Überschriften
Überschriften sollten in einer logischen Reihenfolge angeordnet sein, ohne Ebenen willkürlich zu überspringen. So wird die inhaltliche Struktur für alle Nutzer, insbesondere für Screenreader, klar und nachvollziehbar dargestellt.
<h1>The four principles of the wcag</h1>
<h2>Perceivable</h2>
<h3>Guideline 1.1 Text Alternatives</h3>
...
<h2>Operable</h2>
<h3>Guideline 2.1 Keyboard Accessible</h3>
...
<h2>Understandable</h2>
<h3>Guideline 3.1 Readable</h3>
...
<h2>Robust</h2>
<h3>Guideline 4.1 Compatible</h3>
...
Code Beispiel für eine korrekte Überschriften-Struktur
The four principles of the wcag
Perceivable
Guideline 1.1 Text Alternatives
...
Operable
Guideline 2.1 Keyboard Accessible
...
Understandable
Guideline 3.1 Readable
...
Robust
Guideline 4.1 Compatible
...
<h1>The four principles of the wcag</h1>
<h2>Perceivable</h2>
<h3>Guideline 1.1 Text Alternatives</h3>
...
<h2>Operable</h2>
<!-- ❌ Incorrect: this headline is sub headline of the operable point and should be a h3-->
<h2>Guideline 2.1 Keyboard Accessible</h2>
...
<!-- ❌ Incorrect: headlines should be semantically labelled as one -->
<p class="headline-2">Understandable</p>
<!-- ❌ Incorrect: missing h3-->
<h4>Guideline 3.1 Readable</h4>
...
<!-- ❌ Incorrect: only one h1 allowed-->
<h1>Robust</h1>
<h3>Guideline 4.1 Compatible</h3>
<!-- ❌ Incorrect: no empty headlines allowed-->
<h3></h3>
...
Code Beispiel für eine nicht korrekte Überschriften-Struktur
Nutzer:innen mit Sehbeeinträchtigungen vergrößern häufig den Inhalt einer Webanwendung. Dabei dürfen keine Informationen verloren gehen und alle Funktionen müssen weiterhin vollständig nutzbar bleiben.
Die Website muss das Zoomen des Inhalts grundsätzlich erlauben. Dabei darf kein Inhalt oder Funktionalität der Website verloren gehen und die Website darf nicht zweidimensional scrollen.
<!-- ✅ Correct: sets viewport width to device width and default zoom level to 100%-->
<meta name="viewport" content="width=device-width, inital-scale=1.0">
Code-Beispiel zum erlauben von Zooming
<!-- ❌ Incorrect: deactivates scrolling-->
<meta name="viewport" content="user-scalable=no, user-scalable=no"/>
<!-- ❌ Incorrect: content in landscape mode is not displayed correctly -->
<meta name="viewport" content="width=device-height"/>
<!-- ❌ Incorrect: scaling is not correct on larger screens -->
<meta name="viewport" content="width=320px"/>
Code-Beispiele, die das Zoomen verbieten bzw. nicht korrekt umsetzen.
Wiederkehrende Navigationselemente müssen auf allen Seiten in derselben relativen Reihenfolge erscheinen.
Wiederkehrende Navigationselemente (wie <header>, <nav>, <aside> oder <footer>) müssen auf allen Seiten in derselben relativen Reihenfolge erscheinen. Sie sollten außerdem einheitliche Bezeichnungen, Funktionen und Markups haben.
Dadurch können sich Nutzer:innen leichter auf einer Seite orientieren und schneller zu relevanten Inhalten springen.
