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:

Alle interaktiven Elemente wie Links, Buttons, Formulareingaben, Dropdown-Menüs und Schaltflächen müssen per Tab erreichbar sein.
Die Reihenfolge sollte kohärent und sinnvoll aufgebaut sein, sodass die Navigation einem natürlichen Lesefluss folgt.
Menüs und Dialoge, die sich öffnen, müssen den Fokus „einfangen“ (Focus Trap), damit dieser nicht versehentlich im Hintergrund weiterwandert.
Nach dem Schließen eines Dialogs oder Menüs sollte der Fokus an die zuletzt aktive Stelle zurückgeführt werden – so bleibt die Orientierung erhalten.
Für Nutzer:innen muss sichtbar sein, wo sich der Tastaturfokus befindet. Eine gut erkennbare visuelle Hervorhebung ist essenziell, da sie die aktuelle Position auf der Seite anzeigt.

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:

TAB: Weiter zum nächsten Element
Shift + TAB: Zurück zum vorherigen Element
Enter: Aktiviert das aktuell fokussierte Element (z. B. öffnet einen Link oder sendet ein Formular ab)
Pfeiltasten: In bestimmten Komponenten (z. B. Menüs oder Schiebereglern) zur Navigation innerhalb einer Gruppe von Elementen
ESC: Schließt Dialoge oder Menüs (wenn korrekt implementiert)

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.