Digitale Barrierefreiheit: Beispiele aus dem Alltag

Digitale Barrierefreiheit bedeutet, dass möglichst viele Menschen Websites, Apps und digitale Dokumente selbstständig nutzen können – auch Menschen mit Behinderungen. Dazu gehören zum Beispiel blinde und sehbehinderte Menschen, gehörlose Menschen, Personen mit motorischen oder kognitiven Einschränkungen sowie Menschen, die vorübergehend beeinträchtigt sind. Die folgenden Beispiele zeigen, wie barrierefreie Gestaltung in der Praxis aussehen kann.

Bilder mit passenden Alternativtexten

Screenreader lesen Alternativtexte vor, damit blinde Menschen den Inhalt wichtiger Bilder erfassen können. Ein guter Alternativtext beschreibt den Zweck oder die wesentliche Aussage des Bildes.

Weniger hilfreich: „Bild123.jpg“

Besser: „Fahrplananzeige am Bahnhof mit Abfahrtszeiten nach Marseille“

Rein dekorative Bilder sollten für Screenreader als dekorativ gekennzeichnet sein. So werden sie nicht unnötig vorgelesen.

Bedienung mit Tastatur

Nicht alle Menschen verwenden eine Maus oder einen Touchscreen. Eine barrierefreie Website lässt sich deshalb vollständig mit der Tastatur bedienen. Mit der Tabulatortaste können Nutzende von einem Element zum nächsten springen. Die aktuelle Position muss dabei klar sichtbar sein, etwa durch einen gut erkennbaren Rahmen.

Auch Menüs, Dialogfenster und Formulare sollten ohne Maus erreichbar und bedienbar sein. Wichtig ist außerdem, dass sich der Tastaturfokus nicht in einem Bereich „verfängt“ und dass ein geöffnetes Fenster mit der Tastatur wieder geschlossen werden kann.

Gute Kontraste und lesbare Schrift

Text muss sich deutlich vom Hintergrund abheben. Das hilft Menschen mit Sehbeeinträchtigungen und macht Inhalte auch bei grellem Sonnenlicht leichter lesbar. Informationen sollten nicht ausschließlich durch Farbe vermittelt werden.

Weniger barrierefrei: Ein Formular markiert fehlerhafte Felder nur rot.

Besser: Das Feld wird zusätzlich mit einem Symbol und einem Hinweis wie „Bitte geben Sie eine gültige E-Mail-Adresse ein“ gekennzeichnet.

Auch eine gut lesbare Schriftgröße, ausreichend Abstand zwischen Zeilen und Absätzen sowie eine verständliche Seitenstruktur verbessern die Nutzung.

Verständliche Überschriften und Inhalte

Klare Überschriften helfen allen, sich auf einer Seite zurechtzufinden. Für Screenreader-Nutzende ist eine logisch aufgebaute Überschriftenhierarchie besonders nützlich: Auf eine Hauptüberschrift folgen passende Zwischenüberschriften, ohne Ebenen willkürlich zu überspringen.

Kurze Sätze, bekannte Begriffe und eine klare Gliederung unterstützen Menschen mit Lernschwierigkeiten, kognitiven Einschränkungen oder geringen Deutschkenntnissen. Fachbegriffe sollten erklärt werden, wenn sie nötig sind.

Barrierefreie Formulare

Ein barrierefreies Formular benennt jedes Eingabefeld eindeutig. Die Bezeichnung bleibt auch dann sichtbar, wenn Nutzende mit der Eingabe beginnen. Platzhaltertexte allein reichen nicht aus, weil sie verschwinden können und von Hilfstechnologien nicht immer zuverlässig erkannt werden.

Fehlermeldungen sollten verständlich erklären, was nicht stimmt und wie sich der Fehler beheben lässt. Bei längeren Formularen helfen außerdem eine klare Reihenfolge, gut beschriftete Schaltflächen und Hinweise zu Pflichtfeldern.

Videos mit Untertiteln und Transkripten

Untertitel machen gesprochene Inhalte für gehörlose und schwerhörige Menschen zugänglich. Sie sollten auch wichtige Geräusche und Sprecherwechsel erfassen, wenn diese für das Verständnis relevant sind.

Ein Transkript bietet eine Textfassung des gesprochenen Inhalts. Bei Videos mit wichtigen visuellen Informationen kann zusätzlich eine Audiodeskription nötig sein, die relevante Handlungen und Szenen beschreibt.

Barrierefreie PDFs und Dokumente

Ein PDF ist nicht automatisch barrierefrei, nur weil es am Bildschirm lesbar ist. Für die Nutzung mit einem Screenreader sollte das Dokument beispielsweise eine logische Lesereihenfolge, erkennbare Überschriften, beschreibende Linktexte und korrekt ausgezeichnete Tabellen enthalten.

Wenn möglich, sollten wichtige Informationen zusätzlich als barrierefreie HTML-Seite angeboten werden. Das lässt sich häufig leichter vergrößern und auf verschiedenen Geräten nutzen.

Bewegungs- und Zeitoptionen

Animationen, blinkende Inhalte und automatisch startende Videos können ablenken oder Beschwerden auslösen. Nutzende sollten Bewegungen anhalten oder reduzieren können. Ebenso sollten sie ausreichend Zeit haben, um Inhalte zu lesen, Formulare auszufüllen oder eine Sitzung abzuschließen.

Barrierefreiheit von Anfang an mitdenken

Digitale Barrierefreiheit entsteht nicht durch eine einzelne Funktion. Sie ergibt sich aus vielen Entscheidungen: verständliche Texte, tastaturbedienbare Elemente, passende Alternativtexte, klare Kontraste und sorgfältig erstellte Medien gehören zusammen. Wer diese Aspekte bereits bei der Planung berücksichtigt und die Website mit unterschiedlichen Geräten und Hilfsmitteln testet, macht digitale Angebote für mehr Menschen zugänglich.

Barrierefreiheit verbessert oft zugleich die Nutzerfreundlichkeit für alle – etwa auf dem Smartphone, bei langsamer Internetverbindung oder in einer lauten Umgebung. Die Beispiele zeigen: Schon konkrete, gut geplante Schritte können einen spürbaren Unterschied machen.

 

Digitale Barrierefreiheit: 9 praktische Beispiele für zugängliche Inhalte

1. Bilder mit aussagekräftigen Alternativtexten versehen.
2. Videos mit Untertiteln und Transkripten ergänzen.
3. Ausreichenden Farbkontrast sicherstellen.
4. Inhalte per Tastatur bedienbar machen.
5. Klare Überschriften logisch strukturieren.
6. Links verständlich statt „hier“ benennen.
7. Formulare mit beschrifteten Feldern gestalten.
8. Schriftgröße ohne Inhaltsverlust vergrößerbar machen.
9. Fehlermeldungen deutlich und verständlich formulieren.

Bilder mit aussagekräftigen Alternativtexten versehen.

Bilder mit aussagekräftigen Alternativtexten zu versehen, macht ihre wesentlichen Inhalte für Menschen zugänglich, die einen Screenreader verwenden. Beschreiben Sie kurz, was auf dem Bild zu sehen ist und warum es im jeweiligen Zusammenhang wichtig ist. Statt eines allgemeinen Textes wie „Foto“ eignet sich beispielsweise „Rollstuhlfahrerin nutzt eine Rampe am Bahnhof“. Rein dekorative Bilder benötigen dagegen keinen vorgelesenen Alternativtext.

Videos mit Untertiteln und Transkripten ergänzen.

Videos werden barrierefreier, wenn sie mit Untertiteln und einem vollständigen Transkript ergänzt werden. Untertitel machen gesprochene Inhalte für gehörlose und schwerhörige Menschen zugänglich und helfen auch in Situationen, in denen der Ton nicht eingeschaltet werden kann. Ein Transkript bietet den gesamten gesprochenen Text in schriftlicher Form und kann zusätzlich wichtige Geräusche oder Sprecherwechsel beschreiben. So können mehr Menschen die Videoinhalte passend zu ihren Bedürfnissen nutzen.

Ausreichenden Farbkontrast sicherstellen.

Achten Sie auf einen ausreichenden Farbkontrast zwischen Text und Hintergrund, damit Inhalte auch für Menschen mit Sehbeeinträchtigungen gut lesbar sind. Verlassen Sie sich nicht allein auf Farben, um wichtige Informationen zu vermitteln: Kennzeichnen Sie Fehlermeldungen beispielsweise zusätzlich mit einem Symbol und einem verständlichen Hinweis. So bleiben Texte, Schaltflächen und Hinweise auch bei ungünstigen Lichtverhältnissen oder auf kleinen Bildschirmen gut erkennbar.

Inhalte per Tastatur bedienbar machen.

Inhalte per Tastatur bedienbar zu machen, ist ein wichtiges Beispiel für digitale Barrierefreiheit. Nicht alle Menschen können eine Maus oder einen Touchscreen nutzen – manche bedienen Websites ausschließlich mit der Tastatur. Achten Sie deshalb darauf, dass Links, Menüs, Formulare und Schaltflächen mit der Tabulatortaste erreichbar und mit den passenden Tasten bedienbar sind. Eine gut sichtbare Markierung zeigt jederzeit, welches Element gerade ausgewählt ist. So können Nutzende sicher durch die Seite navigieren, ohne den Überblick zu verlieren.

Klare Überschriften logisch strukturieren.

Klare, logisch strukturierte Überschriften erleichtern es allen, Inhalte schnell zu erfassen und passende Informationen zu finden. Beginnen Sie mit einer aussagekräftigen Hauptüberschrift und ordnen Sie darunter Zwischenüberschriften in einer nachvollziehbaren Hierarchie an, ohne Überschriftenebenen willkürlich zu überspringen. Screenreader können diese Struktur nutzen, damit sich blinde und sehbehinderte Menschen direkt durch die Abschnitte navigieren können. Verwenden Sie Überschriften außerdem nicht nur, um Text optisch hervorzuheben, sondern kennzeichnen Sie sie auch technisch korrekt.

Links verständlich statt „hier“ benennen.

Links sollten so formuliert sein, dass ihr Ziel auch ohne den umgebenden Text verständlich ist. Allgemeine Linktexte wie „hier klicken“ oder „mehr erfahren“ sagen wenig aus und können für Screenreader-Nutzende, die sich eine Liste aller Links anzeigen lassen, verwirrend sein. Aussagekräftiger ist zum Beispiel „Informationen zur digitalen Barrierefreiheit lesen“ statt „Hier klicken“. So erkennen alle Nutzenden direkt, wohin der Link führt.

Formulare mit beschrifteten Feldern gestalten.

Formulare sollten für jedes Eingabefeld eine klare, dauerhaft sichtbare Beschriftung haben, zum Beispiel „E-Mail-Adresse“ oder „Telefonnummer“. Ein Platzhaltertext im Feld genügt nicht, da er beim Tippen verschwindet und für Screenreader nicht immer zuverlässig erkennbar ist. Verknüpfen Sie die Beschriftung technisch mit dem zugehörigen Feld und erklären Sie Fehlermeldungen verständlich. So können mehr Menschen das Formular selbstständig und sicher ausfüllen.

Schriftgröße ohne Inhaltsverlust vergrößerbar machen.

Ein wichtiges Beispiel für digitale Barrierefreiheit ist die Möglichkeit, Schrift zu vergrößern, ohne dass Inhalte abgeschnitten werden oder das Layout unbrauchbar wird. Menschen mit Sehbeeinträchtigungen sollten Texte beispielsweise über die Browser-Einstellungen oder die Zoom-Funktion vergrößern können, ohne horizontal scrollen zu müssen oder Schaltflächen und Informationen zu verlieren. Eine flexible Gestaltung, ausreichend Platz und responsives Layout sorgen dafür, dass die Website auch bei größerer Schrift gut lesbar und bedienbar bleibt.

Fehlermeldungen deutlich und verständlich formulieren.

Fehlermeldungen sollten klar benennen, was schiefgelaufen ist, und erklären, wie sich das Problem beheben lässt. Statt einer vagen Meldung wie „Eingabe ungültig“ ist beispielsweise „Bitte geben Sie eine gültige E-Mail-Adresse ein, zum Beispiel [email protected]“ hilfreicher. Platzieren Sie den Hinweis direkt beim betroffenen Feld und kennzeichnen Sie es nicht nur durch eine Farbe, sondern auch durch Text oder ein Symbol. So können mehr Menschen den Fehler schnell erkennen und korrigieren.