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:

1. perceive: Inhalte sind auf vielen Wegen zugänglich.

2. operable: Die Website ist über viele Wege steuerbar und nutzbar.

3. understandable: Der Inhalt und das Interface sind für Nutzer_innen verständlich.

4. robust: Der Inhalt ist von diversen Nutzer_innen konsumierbar und kann mit technischer Assistenz verwendet werden.

 Text entnommen aus 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.

Wichtig ist herauszustellen, dass alle NutzerInnen von einer Barrierefreiheit in den Lernmodulen profitieren. Barrierefreiheit führt zu einer erhöhten Nutzungsfreundlichkeit und Zugänglichkeit

für alle.

 

Weiterführende Informationen zur Barrierefreiheit in der digitalen Lehre finden Sie auf der Website des Servicezentrum Inklusion der Universität zu Köln.

Eine Zusammenfassung der Bedürfnisse verschiedener Personengruppen finden Sie außerdem in einer Veröffentlichung des Britischen Innenministeriums. Leider ist diese momentan nur in englischer Sprache verfügbar.

2. Inhalt

Die in Folge aufgeführten Informationen beziehen sich explizit auf die Erstellung von Lernmodulen auf digilehre.zflkoeln.de und erheben keinen Anspruch auf Vollständigkeit.

2.1 Text

Verwenden Sie bitte:

• die Funktion „Formate“ und Überschriften (unter „Absatz“ zu finden) zur Formatierung.
• prägnante Formulierungen bei der Wahl Ihrer Überschriften.
• kurze und sprachlich angemessene Textpassagen.
• aussagekräftige Texte bei Verlinkungen (nicht: „hier“, besser: „Weitere Informationen“).
• keine Tabellen mit vielen Spalten, sondern Listen (s. Formatvorlagen).
• Unterschiedliche Längen in Texten der Zeilen und Absätze erleichtert dem Auge die Orientierung. Empfohlen wird eine Zeilenlänge von bis zu 80 Zeichen. Hier können Sie z.B. ihre Zeichen zählen lassen. Der Text sollte nicht den gesamten Bildschirm einnehmen (besonders zu beachten bei ImageMaps) und die Zeilen sollten nicht zu lang werden. Je länger die Zeilen sind, desto schwieriger ist es für das Auge, den Beginn der nächsten Zeile zu finden. Bei zu kurzen Zeilen muss das Auge hingegen zu oft hin und her bewegt werden, was für Sehbehinderte schwierig sein kann.

Digitale Tools, um im Allgemeinen Farben oder auch Schriften auf Barrierefreiheit zu überprüfen werden als “colour contrast analyser” bezeichnet.

Diese können Sie verwenden, fall Sie sich unsicher in der Farbwahl eines Icons oder einer Schrift sind oder Sie das Ziel verfolgen möchten möglichst barrierefrei zu gestalten.

Der colour contrast analyser gibt konkrete Werte der Barrierefreiheit an. Im Folgenden werden hilfreiche Tools aufgelistet und empfohlene Tools entsprechend gekennzeichnet.

• https://siteimprove.com/de-de/barrierefreiheit/color-contrast-checker/ (empfohlen)
  • auf deutsch
• https://whocanuse.com/ (detailliert)
  • Infos:  Kontrast-Test mit beiden angegeben Farben (Schriftfarbe und Hintergrundfarbe im Hexadezimal-Code)
  • Es können auf der Seite auch noch Schriftgröße und Schriftschnitt angegeben werden, weil die Lesbarkeit von Text natürlich von diesen Werten beeinflusst wird.
  • Man kann beispielsweise eine Schrift von 20px auf 24px erhöhen und erhält eine Kombination der Bestnote AAA.
• https://juicystudio.com/services/luminositycontrastratio.php (empfohlen)
  • einfach zu bedienen

2.2 Bilder & Grafiken

Bilder und Grafiken sind ein gutes Mittel, um das Verständnis zu erleichtern. 

Beim Einsatz beachten Sie bitte folgende Punkte:

 

• 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.:

• Subtitle Edit
• CADET (Caption and Description Editing Tool)
• Subtitle Workshop
• Aegisub

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. 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.

 

1. 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.)
2. 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.
3. 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.
4. 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.
5. 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.

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.

3. 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.