Digitale Barrierefreiheit verstehen

1. Was bedeutet digitale Barrierefreiheit?

Digitale Barrierefreiheit bedeutet, dass Menschen Websites und digitale Angebote unabhängig von ihren Einschränkungen nutzen.

Dabei geht es nicht nur um Menschen mit Seh- oder Hörbehinderungen. Auch motorische und kognitive Einschränkungen beeinflussen die Nutzung digitaler Inhalte.

Beispielsweise nutzen Menschen mit Sehbehinderungen sogenannte Screenreader. Diese Programme lesen Texte und Informationen einer Website vor. Andere Menschen navigieren ausschließlich mit der Tastatur oder benötigen größere Schrift.

Digitale Barrierefreiheit berücksichtigt diese unterschiedlichen Bedürfnisse.

2. Warum ist digitale Barrierefreiheit wichtig?

Websites dienen längst nicht mehr ausschließlich der Bereitstellung von Informationen. Menschen suchen Informationen, buchen Veranstaltungen oder melden sich für Seminare an.

Fehlende Barrierefreiheit erschwert diese Vorgänge oder verhindert sie vollständig.

Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) gelten seit dem 28. Juni 2025 zusätzliche Anforderungen an bestimmte Produkte und Dienstleistungen.

Unabhängig von gesetzlichen Vorgaben verbessert Barrierefreiheit die Nutzung deiner Website. Davon profitieren Menschen mit und ohne Behinderungen.

3. Wo lässt sich digitale Barrierefreiheit umsetzen?

Digitale Barrierefreiheit beginnt bereits bei der Erstellung deiner Inhalte. Texte, Bilder, Überschriften und Formulare beeinflussen, wie Menschen deine Website wahrnehmen und bedienen.

Die folgenden Bereiche zeigen dir, worauf du bei der Gestaltung deiner Website achtest.

4. Bilder mit Alternativtexten versehen

Bilder vermitteln Informationen, die nicht alle Menschen visuell wahrnehmen. Alternativtexte, auch Alt-Texte genannt, beschreiben den Inhalt oder die Funktion eines Bildes. Screenreader lesen diese Beschreibungen vor.

Kurze Anleitung für gute Alternativ-Texte (Alt-Texte)

1. Beschreibe den Inhalt präzise und klar: Was ist auf dem Bild zu sehen? Konzentriere dich auf das Wesentliche.
2. Relevanz beachten: Der Alt-Text sollte den Zweck des Bildes im Kontext der Seite wiedergeben.
3. Keine Redundanz: Verzichte auf Floskeln wie „Bild von…“ oder „Grafik zeigt…“.
4. Konkret statt vage: Statt „Mann im Büro“ besser „Mann sitzt am Schreibtisch und arbeitet am Laptop“.
5. Kurz, aber aussagekräftig: Der Text sollte nicht länger als ein oder zwei Sätze sein.
6. Einfache Sprache: Vermeiden von Fremdwörtern oder Passivkonstruktionen.

Beispiel für Alt-Texte

• Bild: Ein Golden Retriever, der in einem Park einen Ball apportiert.
  • ❌ Schlecht: „Hund im Park“
  • ✅ Gut: „Golden Retriever rennt im Park einem gelben Ball hinterher.“
• Bild: Eine Frau sitzt an einem Schreibtisch und trinkt Kaffee.
  • ❌ Schlecht: „Frau hält Tasse.“
  • ✅ Gut: „Junge Frau mit Dutt sitzt lächelnd am Tisch und hält eine Tasse.“

Zusatz-Tipp

Teste deinen Alt-Text, indem du dir vorstellst, dass jemand das Bild nicht sehen kann. Würde die Beschreibung ausreichen, um den Kontext zu verstehen?

5. Texte verständlich formulieren

Lange Sätze, Fachbegriffe und komplizierte Formulierungen erschweren das Verständnis.

Verwende deshalb bekannte Begriffe und erkläre Fachwörter, wenn du sie benötigst. Gliedere längere Texte in Absätze und formuliere möglichst aktiv.

Einfache Sprache baut diese Barrieren ab:

• Kurze Sätze → ein Gedanke pro Satz
• Bekannte Wörter nutzen → Fremdwörter und Fachbegriffe vermeiden
• Aktiv formulieren → statt "Es wird gebeten" besser "Bitte melde dich an"
• Direkt ansprechen → schreibe "du" oder "ihr" statt unpersönlich "man"

So findet jeder leichter Zugang zu deinen Inhalten. Das erhöht nicht nur die digitale Barrierefreiheit, sondern verbessert auch die Nutzererfahrung insgesamt - denn verständliche Texte lesen alle gern. 

Ein Beispiel: 
Statt zu schreiben

• Die Teilnahme an der Veranstaltung setzt eine vorherige Registrierung über unser Online-Portal voraus.

Schreibe lieber:

• Bitte melde dich vorher online an.

6. Überschriften logisch strukturieren

Überschriften gliedern deine Inhalte und erleichtern die Orientierung. Dabei zählt nicht nur ihre Schriftgröße, sondern auch ihre Reihenfolge.

Websites verwenden unterschiedliche Überschriftenebenen:

• H1: Hauptüberschrift der Seite, sie darf nur einmal vorkommen und wird bereits in den Seiteneinstellungen festgelegt
• H2: Überschrift eines Hauptabschnitts
• H3: Unterabschnitt innerhalb einer H2
• H4 bis H6: weitere Unterteilungen bei Bedarf

Diese Struktur bildet eine Hierarchie. Screenreader erkennen die Überschriftenebenen und ermöglichen die Navigation zwischen Abschnitten.

Verwende Überschriften deshalb nicht ausschließlich zur Gestaltung deiner Texte. Wähle die Ebene entsprechend der inhaltlichen Gliederung.

Ein Beispiel für die Hierarchie von Überschriften und Zeilenabstände

Aber auch die Abstände zwischen den Zeilen spielen eine Rolle. Klare visuelle Unterschiede und Abstände zwischen Überschriften helfen, den Lesefluss zu verbessern. Eng stehende Zeilen lassen Texte wie einen Block wirken. Das strengt die Augen an und erschwert das Erfassen einzelner Wörter. Mehr Abstand sorgt für eine klare Trennung der Zeilen. 
Unser Gehirn verarbeitet Informationen in kleinen Einheiten. Dicht gedrängter Text erfordert mehr Konzentration, um den nächsten Zeilenanfang zu finden. Ein lockerer Zeilenabstand hilft, schneller zu lesen und Informationen leichter aufzunehmen. 

7. Farben und Kontraste beachten

Farben beeinflussen, wie gut Menschen Texte und Bedienelemente erkennen. Besonders wichtig ist der Kontrast zwischen Schrift und Hintergrund.

Auch Informationen dürfen nicht ausschließlich durch Farben vermittelt werden.

Kennzeichne beispielsweise eine Fehlermeldung nicht nur durch einen roten Rahmen. Ergänze einen Text, der den Fehler erklärt.

So erkennen Menschen mit Farbsehschwächen die Information ebenfalls.

8. Schriftgrößen und Abstände berücksichtigen

Kleine Schrift und eng stehende Zeilen erschweren das Lesen.

Achte deshalb auf gut erkennbare Schriftgrößen und ausreichende Abstände zwischen den Zeilen.

Ebenso wichtig ist die Vergrößerung deiner Website.

Menschen mit Sehbehinderungen vergrößern Inhalte häufig über die Zoomfunktion ihres Browsers. Dabei dürfen Texte nicht abgeschnitten werden oder wichtige Funktionen verschwinden.

Prüfe deshalb, ob deine Website auch bei vergrößerter Darstellung bedienbar bleibt.

9. Videos und Audiodateien zugänglich machen

Videos und Audiodateien vermitteln Informationen über Bild und Ton. Menschen mit Hörbehinderungen benötigen beispielsweise Untertitel für gesprochene Inhalte und wichtige Geräusche.

Für reine Audioinhalte eignen sich Texttranskripte. Diese hinterlegst du im Plugin Track, welches immer an das Plugin Video gekoppelt ist.

Enthält ein Video Informationen, die ausschließlich visuell vermittelt werden, benötigen diese ebenfalls eine zugängliche Alternative. Achte darauf, dass Menschen die wesentlichen Inhalte unabhängig von ihren Einschränkungen erfassen.

10. Links und Schaltflächen verständlich benennen

Links führen Menschen zu weiteren Informationen. Ihre Beschriftung sollte deshalb das Ziel erkennen lassen. Vermeide allgemeine Bezeichnungen wie „Hier klicken“ oder „Mehr“.

11. Digitale Barrierefreiheit Schritt für Schritt verbessern

Du brauchst nicht sämtliche Inhalte gleichzeitig zu überarbeiten.

Beginne mit den Seiten, die Menschen besonders häufig besuchen. Dazu gehören beispielsweise deine Startseite, Kontaktformulare und Veranstaltungsanmeldungen.

Prüfe anschließend deine bestehenden Inhalte und berücksichtige Barrierefreiheit bei neuen Seiten.

Bereits verständliche Texte, passende Alternativtexte und strukturierte Überschriften verbessern den Zugang zu Informationen.

Denke daran: Digitale Barrierefreiheit ist kein einmaliger Arbeitsschritt. Überprüfe deine Website regelmäßig, besonders nach Änderungen an Inhalten oder Funktionen.