Barrierefreies Webdesign: Was Webredakteure wissen müssen
Öffentliche Stellen in Deutschland sind verpflichtet, ihre Webseiten und digitalen Angebote barrierefrei zugänglich zu machen, um allen Menschen eine gleichberechtigte Teilhabe am gesellschaftlichen Leben zu ermöglichen. Die Barrierefreie-Informationstechnik-Verordnung (BITV) regelt die entsprechenden Anforderungen für digitale Inhalte öffentlicher Stellen.
Barrierefreies Webdesign zielt darauf ab, die Hindernisse zu minimieren, die die Nutzung von Websites für Menschen mit unterschiedlichen Bedürfnissen erschweren oder unmöglich machen können. Einfach ausgedrückt: Webinhalte sollen unabhängig darstellbar und nutzbar sein von
- kognitiven oder körperlichen Einschränkungen
- der jeweiligen Auffassungsgabe
- der jeweiligen Methodik
- dem genutzten Gerät
- dem Betriebssystem
- der Software
Die digitale Barrierefreiheit ist notwendig, um sicherzustellen, dass alle Menschen gleichermaßen von digitalen Technologien und Inhalten profitieren können.
Was müssen Webredakteure nach BITV beachten?
BITV steht für „Barrierefreie Informationstechnik-Verordnung“ und ist die deutsche Umsetzung der europäischen Richtlinie „Web Accessibility Directive“. Sie legt fest, welche Anforderungen an die Barrierefreiheit von öffentlichen Websites und mobilen Anwendungen in Deutschland erfüllt werden müssen.
Webredakteur:innen sind für die Erstellung und Verwaltung von Inhalten verantwortlich und spielen daher eine wichtige Rolle bei der Einhaltung der BITV: Sind die technischen Voraussetzungen geschaffen, stellen sie sicher, dass eine Website auch langfristig barrierefrei bleibt. Rund ein Drittel der Anforderungen aus BITV bzw. WCAG betreffen die barrierefreie Pflege der Webinhalte.
Alternativtexte für Bilder und Alternativen für Audios/Videos
Alternativtexte für Bilder bzw. Grafiken
Alle Bilder sollten mit Alternativtexten versehen werden, die eine genaue Beschreibung für Nutzer:innen mit Sehbehinderungen bereitstellen – der Text macht Inhalt und Funktion von Grafiken zugänglich, etwa indem er von einem Screenreader vorgelesen wird.
Wie wird das umgesetzt? Im Editor des CMS gibt es ein Eingabefeld mit der Bezeichnung „Alternativer Text“ bzw. „Alternativtext“. Wichtig: Das Alt-Attribut nicht mit dem Title-Attribut verwechseln – Letzteres zeigt ergänzende Informationen beim Drüberfahren mit der Maus und ersetzt den Alternativtext nicht.
Alternativen für Audios und Videos
Videos sollten Untertitel in angemessener Kontrastfarbe haben, Audioinhalte sollten durch Transkriptionen zugänglich gemacht werden, damit Nutzer:innen mit Hörbeeinträchtigungen die Inhalte verstehen können. Für Nutzer:innen mit Seheinschränkungen sind präzise Audiobeschreibungen von Videos wichtig, die auch textliche Inhalte im Video selbst erfassen.
Wie wird das umgesetzt? Video- oder Audioproduzent:innen mit geeigneten Alternativen beauftragen, einen professionellen Dienstleister einbinden oder eine eigene Alternative schaffen.
Textinhalte strukturieren
Menschen, die eine visuelle Struktur einer Website nicht wahrnehmen können – etwa aufgrund einer Sehbeeinträchtigung – sind auf Screenreader angewiesen, um im Web zu navigieren. Da sie Überschriften, Absätze, Tabellen oder Listen visuell nicht erfassen können, muss die Webseite alternativ durch entsprechende HTML-Tags semantisch einwandfrei strukturiert werden, damit Screenreader die Struktur interpretieren können.
Wie wird das umgesetzt? In der Regel müssen Webredakteur:innen kein HTML selbst eingeben, da der Editor des CMS über entsprechende Schaltflächen verfügt. Folgende Textinhalte werden unter anderem durch HTML-Tags strukturiert:
- Überschriften – Syntax: <h1>…</h1>
- Absätze – Syntax: <p>…</p>
- Listen – Syntax: <ul>…</ul> oder <ol>…</ol>
- Zitate – Syntax: <blockquote>…</blockquote>
- Fremdsprachiger Text – Syntax: <span lang=„en“>…</span>
- Tabellen – Syntax Überschrift: <th>…</th>, Syntax Zelle: <td>…</td>
Aussagekräftige Linktexte und barrierefreie Dokumente
Aussagekräftige Linktexte
Sehbehinderte oder blinde Menschen nutzen häufig Links, um von Seite zu Seite zu wechseln. Sind Linktexte aussagekräftig, können Nutzer:innen leicht entscheiden, ob sie dem Link folgen möchten – Screenreader können zudem alle Links einer Seite auflisten, was den Überblick erleichtert.
Wie wird das umgesetzt? Bietet der CMS-Editor keine direkte Funktion, lässt sich in der HTML-Ansicht folgender Code eingeben: <a href="Linkziel">Linktext</a> – wichtig ist, dass die Zielseite in Anführungszeichen steht, der Linktext jedoch nicht.
Barrierefreie Dokumente
Dokumente wie PDFs sollten barrierefrei gestaltet sein, etwa mit geeigneter Lese-Reihenfolge und Alternativtexten für Bilder. Besonders PDF-Dokumente sind häufig nicht so strukturiert, dass sie von Bildschirmleseprogrammen leicht gelesen werden können. Für PDF/UA-Konformität müssen inhaltlich relevante Bilder beschrieben und Überschriften entsprechend markiert werden; im Anschluss muss das Dokument getaggt werden. Mit kostenlosen Tools wie dem PDF Accessibility Checker lässt sich schnell prüfen, ob ein PDF Barrieren enthält.
Farbkontraste und verständliche Sprache
Farbkontraste
Der Farbkontrast zwischen Text und Hintergrund sollte so gewählt sein, dass Text leicht lesbar und von Menschen mit Sehbehinderungen gut erkennbar ist. Werden Informationen ausschließlich über Farben vermittelt – etwa durch verschiedenfarbige Kurven in einer Grafik – sind diese für blinde oder farbfehlsichtige Nutzer:innen nicht zugänglich. Gute Kontraste helfen dabei allen Nutzer:innen, Informationen schnell zu erfassen.
Wie wird das umgesetzt? Informationen nicht nur über Farben vermitteln und überall ausreichende Kontraste zwischen Vorder- und Hintergrund sicherstellen. Mit dem kostenlosen Tool Colour Contrast Analyser lässt sich die Kontrastqualität prüfen – das Verhältnis sollte über 4,5:1 liegen.
Verwendung von klarer und verständlicher Sprache
Nach den Anforderungen der BITV müssen Webredakteur:innen leicht verständliche Texte verwenden, die auch für Menschen mit Lernschwierigkeiten oder kognitiven Beeinträchtigungen zugänglich sind. Zu den wichtigsten Anforderungen zählen:
- Kurze und klare Sätze
- Inhaltlich folgerichtiger Aufbau des Textes
- Verwendung von einfachen und bekannten Wörtern
- Vermeidung von Abkürzungen und Fremdwörtern
- Strukturierung des Textes durch Absätze, Überschriften und Listen
- Unterstützung des Textes durch Bilder und Grafiken
Konsequenzen bei fehlendem barrierefreiem Webdesign & Fazit
Fehlt öffentlichen Stellen ein barrierefreies Webdesign, drohen verschiedene Konsequenzen: Betroffene Nutzer:innen können Beschwerden bei der zuständigen Aufsichtsbehörde einreichen, die den Vorwurf prüfen und Maßnahmen einleiten muss. Zudem können öffentliche Stellen juristisch belangt werden – etwa durch Schadensersatzforderungen oder Klagen benachteiligter Menschen mit Beeinträchtigungen. Bei wiederholten Verstößen gegen die BITV drohen zudem Bußgelder oder Zwangsgelder, in schwerwiegenden Fällen auch strafrechtliche Konsequenzen.
Die Einhaltung der BITV-Anforderungen verhindert mögliche Sanktionen für Website-Betreiber:innen. Darüber hinaus führt digitale Barrierefreiheit dazu, dass öffentliche Websites und mobile Anwendungen für alle Nutzer:innen zugänglich und benutzerfreundlich sind. Webredakteur:innen sollten daher sicherstellen, dass sie die Anforderungen der Verordnung verstehen und bei der Erstellung und Verwaltung von Inhalten konsequent berücksichtigen.