4 - Hinweise zur Barrierefreiheit

Erstellt am15. Juni 2020

Zuletzt aktualisiert am21. November 2023

durchThéo Bouveyron

1. Grundlagen der Barrierefreiheit

Ziel der Lernmodule ist, dass alle Interessierten diese nutzen können. Aus diesem Grund werden Lernmodule als Open Educational Resources (OER) veröffentlicht. Damit jedoch wirklich alle diese nutzen können, sind einige Aspekte der Barrierefreiheit im Internet bei der Erstellung zu berücksichtigen.

1.1 Wahrnehmungskanäle beachten

Generell sollten bei der Erstellung von Lernmodulen unterschiedliche Wahrnehmungskanäle berücksichtigt werden, z.B. insofern, dass Informationen nicht ausschließlich akustisch dargestellt werden sollten. Diese sind beispielsweise von Menschen mit Hörbeeinträchtigungen nicht oder nur erschwert zu verarbeiten.

Die folgende Infografik erläutert diesen Sachverhalt näher:

Grafik „#aa11y Was hat Internet mit Behinderung zu tun?“ von Laura Franke für >>school is open<< unter CC BY-SA 4.0 via https://infogram.com/545a03a3-e7ed-4552-8849-27043ec5297e. Bearbeitung: Zuschnitt auf ein Textfeld von Annika Bußmann.

1.2 Vier Kernprinzipien barrierefreier Gestaltung

Aus den Wahrnehmungskanälen sind 4 Kernprinzipien barrierefreier Gestaltung abzuleiten.
Bitte beachten Sie diese bei der Konzeption und Erstellung Ihres Lernmoduls:

Die Universität zu Köln hat eine umfangreiche Hilfestellung zur Erstellung digitaler pdf-Dokumente veröffentlicht. Hier finden Sie auch eine Checkliste mit der Sie die Barrierefreiheit Ihres Dokuments überprüfen können.

3. Übersicht aller Überprüfungswebsites

Es gibt verschiedene Tools und Hilfsmittel, die Sie dabei unterstützen, die Barrierefreiheit Ihres Materials zu testen.

Programminterne Tests: Einge Programme wie Word, PowerPoint, Acrobat haben eine Funktion, die Dokumente auf Barrieren zu prüfen. Die rein automatischen Tests decken aber nur einen Teil der möglichen Barrieren ab.
Test für PDF-Dokumente: PDF-Dokumente können mit dem kostenlosen PDF Accessibility Checker überprüft werden. Der PAC-Test gibt unter Umständen sehr umfangreiche Fehlermeldungen aus, die sich zum Teil nur mithilfe von Adobe Acrobat Pro beheben lassen und ein gewisses Know-how verlangen.
Tests für Internetseiten: Es gibt Erweiterungen für Browser, die einzelne oder mehrere Aspekte der Barrierefreiheit automatisch prüfen und die hilfreich sind, um schnell bestimme Aspekte zu überprüfen. Es gibt kein automatisches Tool, das alle Aspekte der Barrierefreiheit prüft!
- Wave ist eine Browser-Erweiterung, die Internetseiten auf eine Reihe von Barrierefreiheitsregeln prüft und die Fehler mit Erklärungen anzeigt. Je nach Art des Fehlers sind html-Kenntnisse erforderlich.
Nützliche Tools zur Prüfung einzelner Aspekte
- Colour Contrast Analyser: Mit dem kostenlosen Programm kann man einfach das Kontrastverhältnis in Dokumenten und Internetseiten prüfen. Die Farbwerte ermittelt das Programm automatisch.
- Web Developer für Firefox und Chrome: Die Browser-Erweiterung hat eine Reihe nützlicher Funktionen zur Zugänglichkeitsprüfung. Unter Images „Display Alt Attributes“ kann man sich Alternativtexte auf der Seite anzeigen lassen. Man sieht nicht nur, ob Alt-Texte vorhanden sind, sondern kann auch den Text der Bildbeschreibungen lesen.
- HeadingsMap für Firefox und Chrome: Die Browser-Erweiterung zeigt die Struktur der Überschriften einer Seite an, sodass man auf einen Blick sieht, ob die Struktur sinnvoll ist.
BITV-Test: Vollständige Tests aller gesetzlich vorgeschriebenen Barrierefreiheitskritierien liefert nur eine Kombination aus manuellen und automatischen Testschritten. Auf der Seite des BITV-Tests wird eine BITV-Selbstbewertung angeboten, in dem man Schritt für Schritt alle Kriterien mit unterschiedlichen Verfahren prüfen kann. Die Testschritte und die Instrumente werden erklärt, dennoch ist eine gewisse html-Kenntnis notwendig.

4. H5P Elemente

H5P ist eine kostenlose Open-Source-Software, mit der interaktive Inhalte erstellt, veröffentlicht und geteilt werden können.
Mit H5P Elementen können Sie auf WordPress die Lernmodule interaktiv gestalten, weshalb dieses Kapitel von besonderer Relevanz ist.

Es gibt mittlerweile über 40 verschiedene Inhalts- oder Aufgabentypen. H5P lässt sich in Moodle, ILIAS, andere Lern- und Content-Management-Systeme wie Drupal, WordPress oder Typo3 integrieren, die über entsprechende Plug-ins oder LTI verfügen. Eine allgemeine Aussage, wie barrierefrei H5P-Inhaltselemente sind, lässt sich nicht treffen. Es hängt von den einzelnen Elementen ab. Das Kompetenzzentrum digitiale Barrierefreiheit.nrw hat zahlreiche H5P-Elemente auf ihre Barrierefreiheit getestet und die Testberichte zu H5P auf seiner Internetseite veröffentlicht.

Bevor Sie entscheiden, welches H5P-Inhaltselement Sie verwenden wollen, schauen Sie in den H5P-Testberichten des Kompetenzzentrums nach, bevor Sie entscheiden. Manchmal kann es nötig sein, eine Alternative zu suchen, weil das Element für Studierende mit Behinderungen in Ihrer Lerngruppe nicht zugänglich ist.
Sie nutzen die Einstellungsmöglichkeiten bei der H5P-Erstellung, um das Element so zugänglich wie möglich zu gestalten:
- Sie geben aussagekräftige Alternativtexte für Bilder ein. Wenn man in H5P-Elemente Bilder hochlädt, gibt es unter dem Bild in der Regel ein Textfeld, in das der Alt-Text eingegeben werden kann.
- Sie wählen nach Möglichkeit keine Einstellungen, die die Nutzungsautonomie der Studierenden einschränkt, wie z. B. Zeitbegrenzungen, automatisches Starten von Videos und Audios oder Wiederholungen verbieten.
- Wenn es Lösungsanzeigen gibt, sollten Rechtschreibfehler nur dann angezeigt werden, wenn sie wirklich für die Aufgabe wichtig sind. Gerade für Studierende mit Dyslexie ist es frustrierend, wenn Inhalts- und Rechtschreibfehler gleichermaßen angezeigt werden.
- Sie achten auf eindeutige und verständliche Formulierung von Hinweisen und Schalterbeschriftungen.
- Konkrete Hinweise zu den Einstellungen bei den einzelnen H5P-Inhaltselementen finden Sie in den H5P-Testberichten.
Wenn eine Alternative zum H5P-Element nötig ist, gibt zwei Vorgehensweisen:
- Sie suchen für die ganze Lerngruppe eine Alternative. Das ist oft sinnvoll, damit nicht die eine Person mit Behinderung die Erfahrung macht, immer eine Sonderlösung zu bekommen.
- Wenn das H5P-Element für Ihr didaktisches Ziel besonders geeignet ist, kann es nötig sein, eine andere Umsetzung für die Person mit Behinderung zu finden. An vielen Hochschulen unterstützt Sie dabei ein Umsetzungsdienst, der häufig bei den Beratungsstellen für Studierende mit Behinderungen angesiedelt ist.

5. Weitere Informationen

Sie interessieren sich für die barrierefreie Erstellung von digitalen Lernmaterialien?

Die Universität Rostock hat den Online-Kurs “Offener Online-Kurs zur Erstellung barrierefreier Lehrmaterialien und Dokumente” veröffentlicht, der sich vertiefend mit dieser Thematik beschäftigt und für alle Interessierten offen ist. Zielgruppe sind primär Lehrende, die Ihre Veranstaltungen und Materialien barrierefrei gestalten möchten.

Vom ILIAS Kompetenzzentrum für Hochschulen in NRW gibt es auch eine hilfreiche Toolbox »Digitale Barrierefreiheit«. Hier lohnt sich ein Blick auf die Grundlagen, Definitionen und auf detaillierte Informationen von Richtlinien sowie praxisbezogene Beispiele von Studierenden, die bestimmte Beeinträchtigungen haben.

Weitere Informationen zur passenden Formulierung von Alternativtexten finden Sie in diesem Blogbeitrag von Lucia Clara Rocktäschel.

2.9 PDF-Dokumente

Auch pdf-Dokumente sollten barrierefrei gestaltet sein, wenn Sie diese in Ihr Lernmodul – z.B. als Zusammenfassung – einbinden. Dabei sind bitte die folgenden Punkte zu beachten:

Scannen Sie niemals Dokumente ein. Diese sind für Screenreader nicht lesbar.
Nutzen Sie auch hier Formatvorlagen (z.B. die Überschriften-Formate aus Word) sowie Vorlagen für die Listen- und Tabellenerstellung.
Erstellen Sie ein automatisches Inhaltsverzeichnis bei längeren Dokumenten.
Fügen Sie Seitenzahlen hinzu.
Achten Sie darauf, dass die richtige Sprache im Dokument eingestellt ist.
Nutzen Sie kontrastreiche Abbildungen, serifenfreie Schrift und mindestens einen 1,5-fachen Zeilenabstand.
Nutzen Sie keine automatische Silbentrennung.
Nutzen Sie statt vielen Leerzeichen immer die Tabulatortaste, da die Leerzeichen sonst einzeln vorgelesen werden.
Fügen Sie auch in Word Alternativtexte für Bilder und Grafiken hinzu.
In Word lässt sich unter dem Reiter “Überprüfen” die Barrierefreiheit des Dokuments testen.
Nutzen Sie Hyperlinks und Querverweise.

Die Universität zu Köln hat eine umfangreiche Hilfestellung zur Erstellung digitaler pdf-Dokumente veröffentlicht. Hier finden Sie auch eine Checkliste mit der Sie die Barrierefreiheit Ihres Dokuments überprüfen können.

[/vc_column_text][/vc_column][/vc_row]

3. Übersicht aller Überprüfungswebsites

Es gibt verschiedene Tools und Hilfsmittel, die Sie dabei unterstützen, die Barrierefreiheit Ihres Materials zu testen.

Programminterne Tests: Einge Programme wie Word, PowerPoint, Acrobat haben eine Funktion, die Dokumente auf Barrieren zu prüfen. Die rein automatischen Tests decken aber nur einen Teil der möglichen Barrieren ab.
Test für PDF-Dokumente: PDF-Dokumente können mit dem kostenlosen PDF Accessibility Checker überprüft werden. Der PAC-Test gibt unter Umständen sehr umfangreiche Fehlermeldungen aus, die sich zum Teil nur mithilfe von Adobe Acrobat Pro beheben lassen und ein gewisses Know-how verlangen.
Tests für Internetseiten: Es gibt Erweiterungen für Browser, die einzelne oder mehrere Aspekte der Barrierefreiheit automatisch prüfen und die hilfreich sind, um schnell bestimme Aspekte zu überprüfen. Es gibt kein automatisches Tool, das alle Aspekte der Barrierefreiheit prüft!
- Wave ist eine Browser-Erweiterung, die Internetseiten auf eine Reihe von Barrierefreiheitsregeln prüft und die Fehler mit Erklärungen anzeigt. Je nach Art des Fehlers sind html-Kenntnisse erforderlich.
Nützliche Tools zur Prüfung einzelner Aspekte
- Colour Contrast Analyser: Mit dem kostenlosen Programm kann man einfach das Kontrastverhältnis in Dokumenten und Internetseiten prüfen. Die Farbwerte ermittelt das Programm automatisch.
- Web Developer für Firefox und Chrome: Die Browser-Erweiterung hat eine Reihe nützlicher Funktionen zur Zugänglichkeitsprüfung. Unter Images „Display Alt Attributes“ kann man sich Alternativtexte auf der Seite anzeigen lassen. Man sieht nicht nur, ob Alt-Texte vorhanden sind, sondern kann auch den Text der Bildbeschreibungen lesen.
- HeadingsMap für Firefox und Chrome: Die Browser-Erweiterung zeigt die Struktur der Überschriften einer Seite an, sodass man auf einen Blick sieht, ob die Struktur sinnvoll ist.
BITV-Test: Vollständige Tests aller gesetzlich vorgeschriebenen Barrierefreiheitskritierien liefert nur eine Kombination aus manuellen und automatischen Testschritten. Auf der Seite des BITV-Tests wird eine BITV-Selbstbewertung angeboten, in dem man Schritt für Schritt alle Kriterien mit unterschiedlichen Verfahren prüfen kann. Die Testschritte und die Instrumente werden erklärt, dennoch ist eine gewisse html-Kenntnis notwendig.

4. H5P Elemente

Bevor Sie entscheiden, welches H5P-Inhaltselement Sie verwenden wollen, schauen Sie in den H5P-Testberichten des Kompetenzzentrums nach, bevor Sie entscheiden. Manchmal kann es nötig sein, eine Alternative zu suchen, weil das Element für Studierende mit Behinderungen in Ihrer Lerngruppe nicht zugänglich ist.
Sie nutzen die Einstellungsmöglichkeiten bei der H5P-Erstellung, um das Element so zugänglich wie möglich zu gestalten:
- Sie geben aussagekräftige Alternativtexte für Bilder ein. Wenn man in H5P-Elemente Bilder hochlädt, gibt es unter dem Bild in der Regel ein Textfeld, in das der Alt-Text eingegeben werden kann.
- Sie wählen nach Möglichkeit keine Einstellungen, die die Nutzungsautonomie der Studierenden einschränkt, wie z. B. Zeitbegrenzungen, automatisches Starten von Videos und Audios oder Wiederholungen verbieten.
- Wenn es Lösungsanzeigen gibt, sollten Rechtschreibfehler nur dann angezeigt werden, wenn sie wirklich für die Aufgabe wichtig sind. Gerade für Studierende mit Dyslexie ist es frustrierend, wenn Inhalts- und Rechtschreibfehler gleichermaßen angezeigt werden.
- Sie achten auf eindeutige und verständliche Formulierung von Hinweisen und Schalterbeschriftungen.
- Konkrete Hinweise zu den Einstellungen bei den einzelnen H5P-Inhaltselementen finden Sie in den H5P-Testberichten.
Wenn eine Alternative zum H5P-Element nötig ist, gibt zwei Vorgehensweisen:
- Sie suchen für die ganze Lerngruppe eine Alternative. Das ist oft sinnvoll, damit nicht die eine Person mit Behinderung die Erfahrung macht, immer eine Sonderlösung zu bekommen.
- Wenn das H5P-Element für Ihr didaktisches Ziel besonders geeignet ist, kann es nötig sein, eine andere Umsetzung für die Person mit Behinderung zu finden. An vielen Hochschulen unterstützt Sie dabei ein Umsetzungsdienst, der häufig bei den Beratungsstellen für Studierende mit Behinderungen angesiedelt ist.

5. Weitere Informationen

Sie interessieren sich für die barrierefreie Erstellung von digitalen Lernmaterialien?

Bilder und Grafiken ersetzen keinen Text – sie bestehen immer nur zusätzlich.
Vermeiden Sie rein visuelle Anleitungen.
Nutzen Sie Bilder oder Grafiken, die kontrastreich sind und gut lesbare, serifenfreie Schriftarten.
Bilder und Grafiken benötigen Alternativtexte (s. nächster Punkt).

2.3 Videos

Videos sollten über eine Untertitelung verfügen.
(Beispielsweise gilt dies insbesondere für Videos in Branching Scenarios oder interaktiven Videos.)

Auf der Website „BIK für alle“ finden Sie weitere Informationen zu den Untertiteln in Videos.
Aus dieser Quelle stammen auch folgende weitere Informationen:

Es gibt verschiedene Editoren, die zum Einsatz kommen können.

Im Folgenden werden einige kostenfreie Untertitel-Editoren vorgestellt, mit deren Hilfe Untertitel-Text eingegeben und mit dem passenden Timing versehen werden kann. Die erstellten Untertitel lassen sich in verschiedenen Dateiformaten (WebVTT, SubRip, usw.) herunterladen:

Subtitle Horse: Wir empfehlen dieses Online-Tool.
Es ist online auch ohne Anmeldung nutzbar.
Besondere Funktionen sind: Einstellungen für den Schriftschnitt (fett/ kursiv/ unterstrichen) und verschiedene Symbole.

Zudem gibt es auch eine Anzahl kostenloser Desktop-Editoren.

2.4 Übersicht von Desktop-Editoren (kostenloser Download), z.B.:

Wer im Anschluss prüfen möchte, ob seine WebVTT-Datei valide ist, nutzt den Live WebVTT Validator.

Allgemeine Informationen zur Darstellung und zur inhaltlichen Gestaltung:

2.5 Darstellung und Form

zeitgleiches Einblenden mit dem Ton und möglichst synchron zur sprechenden Person
Es ist sinnvoll die Zeilen nach Sinneinheiten aufzuteilen
Position: mittig unten (falls hier bereits Texteinblendungen sind, mittig oben)
Kontrastreiche, gut lesbare Schrift auf Hintergrund
Mindeststandzeit: 2 Sekunden bzw. Lesezeit von 13-15 Zeichen pro Sekunde
Zeilenzahl: 2-zeilig

2.6 Inhaltliche Gestaltung

Nah am Original, falls nötig ohne Informationsverlust umformulieren
Neue deutsche Rechtschreibung
Zahl als Zahl darstellen; hohe Zahl mit Punkt nach der Tausenderstelle
Wichtige Audioinformationen, z.B. Gedanken, Off-Sprache, Geräusche: in Klammern
Zitierter Text: in Anführungszeichen
Sprecher mit Name und Doppelpunkt, bei Gesprächssituationen Sprechertext unterschiedliche Farben zuordnen
Musikstil benennen, z.B. (Jazz-Musik)
Liedtext mit Rautezeichen (#) kennzeichnen

2.7 Kurze Anleitung zur Untertitelung mit subtitle-horse

Wie bereits oben beschrieben, empfehlen wir die Website https://subtitle-horse.com/, um damit die Untertitelung zu erstellen.
Hinweis: In dieser Anleitung wird nur auf die wichtigsten Grundfunktionen eingegangen. Natürlich verfügt das Online-Tool auch über weitere Funktionen.
Eine kurze Beschreibung der einzelnen Werkzeuge erfolgt auch durch Mouseover auf den entsprechenden Werkzeugen.

1. Öffnen Sie die Website und klicken Sie auf „Create subtitles with free version“.
2. Anschließend erscheint eine Übersicht ihrer zur Verfügung stehenden Projekte (3 sind kostenlos)
3. Klicken Sie auf „Add projekt“.
4. Geben Sie Ihrem Projekt einen Namen.
5. Laden Sie Ihr Video hoch, in dem Sie auf „Load from disc“ klicken.
6. Klicken Sie anschließend auf „Next“.
7. Klicken Sie den Haken bei „I don´t know the framerate“, wenn Sie die Framerate ihres Videos nicht kennen und klicken Sie anschließen auf „Start subtitling“, um die Untertitelung zu starten.
8. Sie sehen anschließend alle Bearbeitungsmöglichkeiten mit subtitle-horse:
9. Links sehen Sie Ihr Video, dass Sie im Video-Fenster beliebig oft anschauen können.
  Rechts werden Ihnen nach Erstellung eines Untertitels die Untertiteloptionen angezeigt.
  Und unten befindet sich eine Zeitleiste, die mit der Ansicht des Videos verbunden ist. Sie können den Zeitmarker nach Belieben verschieben, um auf bestimmte Stellen des Videos zu springen.

Gehen Sie auf der Zeitleiste auf die Stelle, bei der Sie einen Untertitel einblenden möchten. Über die Schaltfläche auf der rechten Seite können Sie mit einem Klick auf“+add at current time“ einen neuen Untertitel hinzufügen. Dabei wird die empfohlene Zeichenanzahl mit Hilfe eines Balkens unter dem Untertitel angezeigt. (Alternative: Auf das Plus-Symbol oben links über dem Video klicken.)
Grün=Zeichenanzahl ist lesbar und wird empfohlen.
Rot=die empfohlene Zeichenanzahl wurde überschritten.
Anschließend können Sie die Anzeigezeit des Untertitels über dem Untertitel anpassen. Klicken Sie entweder auf die Anfangs- oder auf die Endzeit und geben Sie entsprechende neue Zahlenwerte ein oder nutzen Sie die obigen Pfeiltasten (nach oben und nach unten).
Entsprechend der Einstellungen werden die Untertitel unten in der Zeitleiste verschoben.
Wenn Sie einen Untertitel löschen möchten, klicken Sie auf das Papierkorb-Symbol oben links über dem Video. (Gerne können Sie für Ihre Untertitel die Standardeinstellungen benutzen ohne etwas am Schriftschnitt oder der Ausrichtung zu ändern.)
Dieses Prozedere wird nun für alle Untertitel, die Sie erstellen möchten angewandt. Während der Erstellung ist es hilfreich sich parallel mit den Untertiteln immer wieder das Video anzuschauen und nachzujustieren bzw. die Zeiten anzupassen.
Nachdem Sie alle Untertitel an den richtigen Stellen hinzugefügt haben, können Sie Ihre Untertitel exportieren, dazu können Sie unter verschiedenen Formaten auswählen. Da Sie für H5P VTT benötigen, wählen Sie bitte „VTT“ aus.
Klicken Sie dafür auf „File“ und dann auf „Export“ und wählen Sie „VTT“ aus der Liste aus. Anschließend geben Sie der Datei einen Namen und klicken auf „Export“, um die Datei herunterzuladen.
Anschließend können Sie Ihre VTT-Datei in H5P im Video-Element einbinden.

2.8 Alternativtexte

Alternativtexte helfen blinden Menschen und Menschen mit Sehbeeinträchtigungen Bilder und Grafiken inhaltlich zu erfassen. Diese nutzen Internetseiten oftmals mit einem Screenreader, der Texte – und auch Alternativtexte – vorlesen oder anderweitig ausgeben kann. Außerdem helfen Alternativtexte auch, wenn Bilder und Grafiken aufgrund technischer Probleme nicht angezeigt werden können und erhöhen die Auffindbarkeit von Inhalten über Suchmaschinen.

Bitte fügen Sie jedem Bild, das Sie hochladen und nutzen einen entsprechenden Alternativtext hinzu. Alternativtexte können über die Medienbibliothek eingefügt werden. Wählen Sie das entsprechende Bild aus oder laden es hoch und geben den Alternativtext im entsprechenden Fenster („Alternativer Text“) ein.

Wichtig ist, dass die Alternativtexte treffend formuliert sind. Beachten Sie deswegen bei der Formulierung dieser bitte folgende Punkte:

Rein dekorative Bilder und Grafiken benötigen keinen Alternativtext. Falls Sie sich unsicher sind, schreiben Sie jedoch besser einen.
Alternativtexte geben Inhalt und Funktion des Bildes wieder. Beachten Sie den Kontext, in dem das Bild steht und bringen diesen in Ihre Beschreibung ein.
So kurz wie möglich, so lang wie nötig – Richtwert: 80 bis 100 Zeichen.
Vermeiden Sie Formulierungen wie “Dieses Bild enthält…/Foto von…”, da der Screenreader bereits vor dem Vorlesen des Alternativtextes darauf aufmerksam macht. Hier würde es sich um eine unnötige Dopplung handeln.
Halten Sie die Alternativtexte objektiv und vermeiden Interpretationen.
Kontrollieren Sie Ihren Alternativtext immer auf Rechtschreibung und Zeichensetzung.

Weitere Informationen zur passenden Formulierung von Alternativtexten finden Sie in diesem Blogbeitrag von Lucia Clara Rocktäschel.