5 Tipps für digitale Barrierefreiheit

Am 19. Mai findet jährlich der Global Accessibility Awareness Day (GAAD) statt – die perfekte Gelegenheit, um das Thema Barrierefreiheit in unseren, aber auch Ihren Fokus zu rücken.

The purpose of GAAD is to get everyone talking, thinking and learning about digital access and inclusion, and the more than One Billion people with disabilities/impairments.

Global Accessibility Awareness Day

5 Tipps haben wir für Sie zusammen gestellt, die Sie schnell und einfach in Ihren Inhalten umsetzen können. Für viele unserer Kund*innen sind das zum Beispiel Kurse in OPAL und Prüfungsaufgaben in ONYX. Aber natürlich gelten diese Tipps auch für alle anderen digitalen Inhalte.

1. Strukturieren Sie Inhalte mit Gliederungselementen

Überschriften, Aufzählungen, Absätze und visuelle Hervorhebungen verbessern die Lesbarkeit, da sie den Augen helfen, Inhalte zu scannen und damit relevante Informationen schnell zu erfassen. Außerdem unterstützen diese Elemente die Leser*innen bei der Orientierung auf der Seite.

Neben der visuellen Strukturierung über das Design ist auch eine technisch korrekte Strukturierung über passende HTML-Elemente notwendig. Verwenden Sie grundsätzlich für Webseiten jeweils nur eine Überschrift der 1. Ebene (<h1>) pro Seite. Die weiteren Ebenen <h2> bis <h6> strukturieren Ihren Inhalt. Dabei muss die Hierarchie der Elemente (z.B. <h2> folgt auf <h1>) eingehalten werden. Außerdem darf keine Ebene übersprungen werden.

Screenshot vom Texteditor in OPAL zum Bearbeiten einer Inhaltsseite. Bildtext: Texte mit Überschriften, Listen und Hervorhebungen strukturieren, um die Lesbarkeit und Übersichtlichkeit zu verbessern. Der integrierte Texteditor TinyMCE unterstützt Sie dabei.
Lesbarkeit und Verständlichkeit durch vordefinierte Formate im Texteditor verbessern.

Bestehende Webseiten oder Systeme wie OPAL und ONYX haben oft schon eine Struktur mit verschiedenen Bereichen und Überschriften. Prüfen Sie daher immer, welche Überschriften-Ebenen bereits vergeben sind und passen Sie Ihre Inhalte entsprechend an. Für die Beschreibung eines Kursbausteins in OPAL-Kursen starten Sie z.B. bei Bedarf mit einer <h3>, da die Überschriften der 1. und 2. Ordnung bereits für den Seitentitel, den Kurs-Titel sowie den Baustein-Titel verwendet werden.

Auch das nutzerfreundliche Strukturieren Ihrer Kurse hat positiven Einfluss auf die Barrierefreiheit. Aussagekräftige Titel und Beschreibungen sowie das Anbieten eines Inhaltsverzeichnis helfen beim schnellen Erfassen der Inhalte und erleichtert die Navigation.

2. Sorgen Sie für eine gute Lesbarkeit Ihrer Texte

Schriftart, Schriftgröße, Zeilenlänge und viele weitere Dinge haben einen Einfluss auf die Lesbarkeit Ihrer Texte. Wir kennen sie alle, diese Schriftarten, bei der man als Nicht-Brillenträger*in an der eigenen Sehfähigkeit zweifelt und am liebsten eine Brille zücken möchte. Da kann das Thema noch so interessant sein, mit der falschen Schriftgestaltung vergrault man im schlimmsten Fall die Leser*innen.

Unser Tipp für Sie: Bleiben Sie bei geläufigen Standardschriftarten wie zum Beispiel Arial. Vermeiden Sie verzierte, ausgefallene Schriftarten oder Schreibschriften. Für Smartphones und andere kleinere, mobile Geräte machen kleinere Schriftgrößen Sinn, da sich das Gerät in der Regel näher am Auge befindet. Vergessen Sie nicht, auch beim Lesen kann die Puste ausgehen. Passen Sie daher immer die Zeilenlänge Ihrer Texte an. Besonders bei längeren Text werden es Ihnen Ihre Leser*innen danken.

Kurz und knackig empfehlen wir:

  • Gängige Schriftarten z.B. Arial
  • Schriftgröße zwischen 18px und 26px für große Bildschirme
  • Zeilenabstand 120-150% der Schriftgröße
  • 45 bis 80 Zeichen je Zeile, inklusive Satz- und Leerzeichen

Prüfen Sie Ihre Textgestaltung kritisch und lassen Sie die Lesbarkeit Ihrer Texte an verschiedenen Endgeräten auch durch andere Personen, idealerweise auch durch Menschen mit Sehbehinderungen oder kognitiven Beeinträchtigungen bewerten.

3. Verwenden Sie Alternativtexte für Bilder und Untertitel für Videos

Ist die Bildanzeige für eine Seite deaktiviert oder hat eine Webseite Ladeschwierigkeiten, kann es schon mal passieren, dass Bilder nicht korrekt angezeigt werden. Damit geht ein wichtiger Teil der Information für Leser*innen verloren. Haben Sie aber für Bildelemente eine Bildbeschreibung, auch Alternativtext genannt, hinterlegt, erleichtert das zumindest das Text- und Bildverständnis, auch wenn das Bild selbst nicht zu sehen ist. Alternativtexte werden außerdem von Screenreadern ausgegeben und sind somit für blinde Menschen zugänglich.

Screenshot des Texteditors in OPAL. In den Einstellungen für das Bild ist eine Bildbeschreibung eingetragen. Im HTML wird dafür das Attribut "alt" genutzt. Bildtext: Für Bilder, die relevant für den Inhalt einer Seite sind, sollte ein Alternativtext hinterlegt werden. Dieser wird u.a. von einem Screenreader ausgegeben und ist somit für blinde Menschen zugänglich.
Alternativtext für Bilder im Texteditor oder im HTML hinzufügen.

Binden Sie Videos auf Ihrer Seite ein, sind Untertitel eine wichtige Ergänzung im Sinne der Barrierefreiheit. Viele Video-Plattformen bieten dafür schon hilfreiche Funktionen an. Eine zusätzliche Übersetzung in Gebärdensprache ist eine Unterstützung für viele Menschen. Untertitel, Gebärdensprache und Transkripte sollten auch für Podcasts oder andere Audio-Inhalte angeboten werden.

Weitere Tipps haben wir in unserem Beitrag „Medien sinnvoll in Lernplattformen einsetzen“ für Sie gesammelt.

4. Achten Sie auf ausreichend Kontrast

Auch wenn Sie die optimale Auswahl bei Schriftart und -größe getroffen haben, kann Ihnen fehlender Kontrast bei der Farbwahl Ihrer Texte einen Strich durch die Lesbarkeitsrechnung machen.

Achten Sie daher immer auf ausreichend Kontrast zwischen Hintergrund- und Textfarbe. Grundsätzlich hat Schwarz auf Weiß das beste Kontrastverhältnis. Empfohlen ist ein Verhältnis von mindestens 4,5:1. Das Kontrastverhältnis von Farben können Sie mit zahlreichen Web-Tools, z.B. dem WCAG Contrast Checker selbst prüfen.

Die Farbkombinationen Rot auf Grün und Rot auf Schwarz sind zum Beispiel kritisch. Manche Menschen können sie nur schlecht wahrnehmen. Vermeiden Sie außerdem grelle Farben und blinkende Elemente.

Unser Tipp an Sie: Setzen Sie nicht nur auf Farbe, um Informationen hervorzuheben. Ergänzen Sie z.B. bei Hinweis- oder Fehlermeldungen ein gut erkennbares Icon sowie einen zusätzlichen Texthinweis. Verzichten Sie auf Anleitungen oder Beschreibungen, die sich nur auf eine Farbe oder andere visuelle Eindrücke beziehen, z.B. „Klicken Sie auf den grünen Button“.

5. Verwenden Sie aussagekräftige Links

Screenreader bieten u.a. die Möglichkeit, alle Links auf einer Seite direkt auszugeben. Dabei geht der Kontext des umliegenden Textes verloren. Texte für Verlinkungen brauchen deshalb immer eine aussagekräftige Bezeichnung und sollten den Zweck bzw. das Ziel des Links beschreiben. Vermeiden Sie mehrdeutige Link-Texte wie „mehr“, „hier“ oder „weiter lesen“.

Unser Tipp für Sie: Ein Link muss für sich alleine stehen können und aussagekräftig sein. Ein gutes Beispiel ist die folgende Link-Bezeichnung: „Lesen Sie mehr zum Thema Barrierefreiheit in unserem Artikel“

Natürlich ist digitale Barrierefreiheit ein wichtiges Thema und ein kontinuierlicher Prozess. Neben unseren 5 Tipps gibt es noch weitere Dinge zu beachten, wie z.B. die Hervorhebung des Tastaturfokus, Beschriftung und Auszeichnung von Formularelementen und die Bereitstellung von Inhalten in einfacher Sprache. Auch Dokumente, z.B. PDF-Dateien sowie Inhalte in den sozialen Medien sollten barrierefrei sein.

Wenn Sie noch mehr über Usability & Barrierefreiheit erfahren möchten, ist unser Leitfaden im OPAL-Handbuch die passende Ergänzung. Eine gute Anlaufstelle sind auch das Projekt BIK für alle und die Webseite „Einfach für alle“ der Aktion Mensch.

Das könnte Sie auch interessieren: