Barrierefreiheit

Tipps für möglichst barrierefreie Inhalte

Redakteur*innen spielen eine wichtige Rolle bei der Erstellung und Pflege barrierefreier Webseiten. Sie müssen sicherstellen, dass die Inhalte zugänglich sind und den Standards für Barrierefreiheit entsprechen. Hier sind einige Tipps, die besonders für Redakteur*innen wichtig sind.

Verwendung von klarer und einfacher Sprache

Achten Sie darauf, dass der Text einfach und verständlich ist. Vermeiden Sie komplizierte Satzstrukturen, Fachbegriffe oder unklare Formulierungen. Es hilft nicht nur Menschen mit kognitiven Einschränkungen, sondern auch allen Nutzer*innen, die den Inhalt schnell und einfach erfassen möchten.

Alt-Texte für Bilder

Jedes Bild muss mit einem aussagekräftigen und prägnanten Alt-Text (=Alternativ-Text) versehen werden, der den Inhalt oder die Funktion des Bildes beschreibt. Alt-Texte sind für Menschen, die Screenreader verwenden, unerlässlich, um den visuellen Inhalt zu verstehen.

Verwendung von Überschriften und Struktur

Redakteur*innen sollten den Inhalt mit einer klaren Hierarchie von Überschriften (H1, H2, H3, etc.) strukturieren. Überschriften helfen nicht nur beim Verständnis des Inhalts, sondern sind auch wichtig für Screenreader, um die Struktur der Seite zu erfassen und den Nutzer*innen eine bessere Navigation zu ermöglichen.
 

Vermeidung von reinen Text-Links ohne Kontext

Links sollten immer kontextuell und aussagekräftig sein. Statt „Hier klicken“ oder „Mehr erfahren“ sollte der Link beschreiben, was der Nutzer erwartet (z.B. „Details zu den Öffnungszeiten“). Dies hilft Menschen mit Screenreadern, zu verstehen, wohin der Link führt.
 

Barrierefreie Formulare

Wenn Redakteur*innen Formulare auf der Webseite erstellen, müssen sie sicherstellen, dass alle Formularfelder mit beschreibenden Labels versehen sind. Formulare sollten leicht verständlich und einfach auszufüllen sein. Ebenso ist es wichtig, klare Fehlermeldungen bereitzustellen, wenn ein Formular falsch ausgefüllt wird.
 

Kontraste und Lesbarkeit

Redakteur*innen sollten darauf achten, dass der Text gut lesbar ist, sowohl in Bezug auf Schriftgröße als auch auf den Kontrast zwischen Text und Hintergrund. Auch wenn das Design oft von Webdesigner*innen festgelegt wird, können Redakteur*innen darauf hinweisen, wenn Inhalte schwer zu lesen sind.
 

Untertitel und Transkripte für Videos

Wenn Redakteur*innen Videos oder Audiodateien einfügen, sollten sie sicherstellen, dass Untertitel oder Transkripte vorhanden sind. Diese sind für gehörlose oder schwerhörige Nutzer*innen wichtig, aber auch für andere, die den Inhalt ohne Ton konsumieren möchten.
 

Verwendung von Listen und Aufzählungen

Listen und Aufzählungen sollten klar strukturiert sein. Sie machen Inhalte leichter zugänglich und übersichtlicher. Screenreader können Aufzählungen auch besser interpretieren, wenn sie richtig markiert sind.
 

Vermeidung von unnötigen Animationen

Wenn Redakteur*innen Inhalte wie Animationen oder automatische Video- und Audiowiedergaben hinzufügen, sollten sie sicherstellen, dass diese nicht störend oder ablenkend sind. Zudem sollten Nutzer*innen die Möglichkeit haben, sie zu deaktivieren, falls sie eine Reizüberflutung oder Unwohlsein verursachen.
 

Barrierefreie Links und Dokumente

Redakteur*innen sollten sicherstellen, dass auch heruntergeladene Dokumente (wie PDFs) barrierefrei sind. Falls ein Dokument hochgeladen wird, sollte sichergestellt werden, dass es für Screenreader optimiert ist (z.B. durch die Verwendung von zugänglichen PDF-Dateiformaten).
 

Indem Redakteur*innen auf diese Aspekte achten, tragen sie erheblich dazu bei, dass die Webseite für eine größere Zielgruppe zugänglich bleibt, auch für Menschen mit Behinderungen. Barrierefreiheit ist nicht nur eine technische Herausforderung, sondern auch eine redaktionelle Verantwortung.

 

Tastaturbedienung und barrierefreie Navigation im Web

Barrierefreie Websites ermöglichen es allen Menschen, sich unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen durch Inhalte zu bewegen und Funktionen zu nutzen. Ein zentraler Aspekt dabei ist die Möglichkeit, die Seite ausschließlich mit der Tastatur zu bedienen. Gerade für Menschen, die keine Maus verwenden können – sei es dauerhaft oder temporär – ist die sogenannte Tab-Navigation entscheidend für eine zugängliche Nutzung.

Was ist Tab-Navigation?

Die Tab-Navigation bezeichnet die Steuerung durch die interaktiven Elemente einer Website mithilfe der Tabulatortaste (TAB) auf der Tastatur. Mit jedem Druck auf diese Taste springt der Fokus zum nächsten bedienbaren Element – etwa einem Link, einem Button oder einem Eingabefeld. Um sich rückwärts zu bewegen, wird die Tastenkombination Shift + Tab verwendet. Der jeweils aktuelle Fokuspunkt wird in der Regel durch eine sichtbare Umrandung oder Hervorhebung angezeigt, sodass Nutzer:innen stets wissen, welches Element aktiv ist.

Diese Reihenfolge, in der die Elemente per Tab durchlaufen werden, wird als Tastatur-Reihenfolge bezeichnet. Sie sollte logisch, nachvollziehbar und möglichst der visuellen Struktur der Seite entsprechen – also von oben nach unten, von links nach rechts. Dies erleichtert die Orientierung und verhindert, dass wichtige Inhalte übersehen werden oder der Fokus in einer unlogischen Reihenfolge springt. Alle interaktiven Elemente sollten in diese Reihenfolge eingebunden sein, sofern sie für die Nutzung relevant sind.

Worauf sollte bei der Tab-Navigation geachtet werden?

Für eine barrierefreie Navigation ist nicht nur wichtig, dass sich eine Seite mit der Tastatur bedienen lässt – sondern auch wie dies geschieht:

So navigieren Nutzer:innen barrierefrei durch eine Website

Wer eine barrierefrei gestaltete Website nutzt, kann sich effizient und ohne Maus durch die Inhalte bewegen. Typischerweise erfolgt dies über die Tastatur, einen Screenreader oder eine Kombination aus beidem.

Mit der Tastatur wird die Navigation durch folgende Tasteneingaben gesteuert:

Screenreader-Nutzer:innen orientieren sich oft zusätzlich mithilfe von Überschriften, Regionen (z. B. „Navigation“, „Hauptinhalt“, „Fußbereich“) und semantischen Rollen. Diese ermöglichen ein gezieltes Springen zwischen Inhaltsbereichen. Eine klare und konsistente Struktur – etwa durch sprechende Überschriften und logisch benannte Links – erleichtert die Orientierung erheblich.

Auch auf mobilen Geräten kann barrierefrei navigiert werden: Hier übernehmen Technologien wie VoiceOver (iOS) oder TalkBack (Android) die Aufgabe, Inhalte vorzulesen und die Bedienung per Gesten oder Bildschirmtastatur zu ermöglichen. Auch dabei ist eine logische Fokusreihenfolge und eine verständliche Benennung der Bedienelemente grundlegend.

Fazit

Die Tab-Navigation bildet das Fundament einer barrierefreien Interaktion mit Websites. Sie stellt sicher, dass alle Nutzer:innen – unabhängig von ihrer körperlichen oder technischen Ausstattung – Zugang zu denselben Informationen und Funktionen haben. Eine gut durchdachte Tastaturnavigation ist damit nicht nur ein technischer Standard, sondern ein Ausdruck von Inklusion und guter Nutzerführung.

Barrierefreiheit mit Editoria11y prüfen

Editoria11y ist ein integriertes Werkzeug zur automatisierten Prüfung der Barrierefreiheit innerhalb von Drupal. Es wurde speziell für Redakteur:innen entwickelt, um während der Inhaltsbearbeitung frühzeitig auf mögliche Barrieren aufmerksam zu machen. Ziel ist es, die Qualität und Zugänglichkeit von Webinhalten zu verbessern – ohne dafür tiefgreifende technische Kenntnisse vorauszusetzen.

Barrierefreiheit bedeutet, dass eine Website von möglichst vielen Menschen unabhängig von individuellen Einschränkungen genutzt werden kann – beispielsweise von Nutzer:innen mit Sehbehinderungen, motorischen Einschränkungen oder kognitiven Beeinträchtigungen. Editoria11y hilft dabei, strukturelle und inhaltliche Probleme zu identifizieren, die diese Zugänglichkeit einschränken könnten.

Warum wird Editoria11y eingesetzt?

Barrierefreie Webinhalte sind nicht nur ein Qualitätsmerkmal, sondern auch rechtlich vorgeschrieben – etwa durch das Barrierefreiheitsstärkungsgesetz (BFSG) oder die entsprechende EU-Richtlinie 2016/2102. Darüber hinaus trägt barrierefreier Content dazu bei, eine größere Zielgruppe zu erreichen und Inhalte nachhaltig verständlich und benutzbar zu gestalten.

Viele Aspekte der Barrierefreiheit liegen direkt im redaktionellen Verantwortungsbereich – zum Beispiel:

Editoria11y unterstützt dabei, solche Elemente direkt im Arbeitsprozess zu überprüfen und, wenn notwendig, anzupassen. Es fungiert als eine Art „Barrierefreiheitsprüfung im Hintergrund“, vergleichbar mit einer Rechtschreibprüfung für Inhalte.

Funktionsweise im Überblick

Editoria11y ist nach der Anmeldung automatisch aktiv und prüft jede veröffentlichte oder im Frontend dargestellte Seite – ohne dass ein separater Test gestartet werden muss. Das Ergebnis der Prüfung wird über ein kleines Symbol in der rechten unteren Ecke der Seite angezeigt:

Ein Klick auf das Symbol öffnet ein übersichtliches Panel, in dem sämtliche Hinweise aufgelistet sind. Jeder Eintrag enthält eine Beschreibung des Problems, eine kurze Erläuterung der zugrundeliegenden Barriere und konkrete Handlungsempfehlungen. In vielen Fällen wird die betroffene Stelle auf der Seite visuell hervorgehoben.

Was wird geprüft – und was nicht?

Editoria11y fokussiert sich ausschließlich auf Inhalte, die von Redakteur:innen direkt beeinflusst werden können. Dazu zählen unter anderem:

Nicht überprüft werden technische oder gestalterische Aspekte wie Farbkontraste, responsives Verhalten oder semantischer HTML-Code – diese liegen im Aufgabenbereich der technischen Entwicklung und Qualitätssicherung.

So nutzen Sie Editoria11y im Redaktionsalltag

Die Hinweise von Editoria11y sind als Unterstützung zu verstehen – sie sollen helfen, potenzielle Schwachstellen frühzeitig zu erkennen und inhaltlich hochwertige sowie zugängliche Seiten zu gestalten.

Hinweise zum Umgang