Hinweise zur Erstellung von barrierefreien Kursmaterialien

Bei Udemy gehören Video-Content und Kursmaterialien eng zusammen: Sie festigen den Lernstoff und vermitteln neue Skills. Für einen barrierefreien Kurs müssen auch alle Kursmaterialien barrierefrei sein.

Dieser Artikel mit Hinweisen zur Erstellung von barrierefreien Kursmaterialien besteht aus vier Teilen: 

• Strukturierung des Inhalts
• Aussagekräftige Semantik der Dokumente
• Alternativer Text für Bilder/Medien
• Farbkontrast

 

Strukturierung des Inhalts

• Strukturiere deinen Text übersichtlich und untergliedere den Inhalt in kurze Absätze mit aussagekräftigen Überschriften. So lässt sich der Inhalt leichter „überfliegen“ und ist für alle Nutzer besser lesbar.
• Setze ein Inhaltsverzeichnis oder eine Kurzzusammenfassung des Inhalts (wenige Sätze bzw. eine Aufzählungsliste) an den Beginn jedes Dokuments.
• Stelle den Nutzern eine Liste wichtiger Begriffe mit Definitionen (Glossar) zum Download bereit, in der sie während des Kurses nachschlagen können. Du solltest auch für alle im Kurs verwendeten Folien einen Link oder Begleitmaterial zum Herunterladen bereitstellen.
• Achte auf korrekte Rechtschreibung und Grammatik sowie gute Lesbarkeit. Die Lesbarkeit bezieht sich darauf, wie einfach eine Textpassage für jemanden zu lesen ist. Dazu gehören Faktoren wie Satzlänge, durchschnittliche Silbenanzahl pro Wort, Komplexität des Themas und Wortverständnis. Bitte einen Freund oder Kollegen, sich deinen Kursinhalt durchzulesen und die Übungen durchzuführen, um sicherzustellen, dass dein Kurs barrierefrei ist.

 

Dokumente barrierefrei gestalten

Screenreader, wie z. B. JAWS, NVDA oder Voiceover, lesen nicht nur den Text auf einer Seite vor, sondern geben auch an, wie der Text strukturiert ist (z. B. Überschriften, Zwischenüberschriften und Aufzählungspunkte). Während sehende Leser beispielsweise Überschriften anhand von Fett- und Großschreibung erkennen, wird dies Menschen mit eingeschränktem Sehvermögen anhand der „semantischen Auszeichnung“ mitgeteilt. Diese Meta-Informationen tragen wesentlich dazu bei, Dokumente barrierefrei zu machen. Glücklicherweise ist diese Funktion bei vielen Textverarbeitungsprogrammen und -Apps, wie z. B. Microsoft Word und Google Docs, bereits integriert.

Außerdem solltest du unbedingt wissen, was die Textwiedergabe für Screenreader erschwert. Wenn Zellen in einer Tabelle zusammengeführt werden, kann dies die Navigation und das Verständnis bei Verwendung eines Screenreaders erschweren. Außerdem kann es passieren, dass der Screenreader verwirrende Informationen wiedergibt, wenn keine semantische Formatierung vorgenommen wurde. Zum Beispiel werden Aufzählungspunkte, die mit einem Sternchen und der Tabulatortaste erstellt werden, vom Screenreader nicht als „Aufzählungspunkt“, sondern als „Sternchen“ und „Tabulator“ vorgelesen.

In diesem Artikel stellen wir nur einige Optionen für die semantische Auszeichnung digitaler Dokumente vor, du findest aber Verweise auf umfangreiche Infomaterialien zu diesem Thema.

 

Struktur der Überschriften

Überschriften sind eine gute Methode, um den Inhalt barriereärmer zu machen. Der Einsatz von echter Semantik und visuell gekennzeichneten Überschriften macht den Inhalt für alle Nutzer – mit und ohne Sehbehinderung – leichter lesbar.

Wenn du den Inhalt mithilfe von echten Überschriften strukturierst (in Textverarbeitungs- oder Präsentationsprogrammen auch als „H1“, „Heading 1“ oder „Überschrift 1“ bezeichnet), wird er von Screenreadern zuverlässig korrekt wiedergegeben. Der Titel des Dokuments sollte beispielsweise eine Überschrift ersten Grades sein, ein Abschnittstitel eine Überschrift zweiten Grades (z. B. H2) und Unterabschnittstitel können Überschriften dritten oder vierten Grades sein. Hier ein Beispiel:

 

Seitentitel (Überschrift 1)

Abschnittstitel (Überschrift 2)

Einfacher Text.

Unterabschnittstitel (Überschrift 3)

Einfacher Text.

 

Hinweis: Du solltest keine Überschriftenebenen überspringen, also z. B. nicht von der ersten direkt zur dritten Ebene springen. 

 

Echte Aufzählungslisten

Gliedere deinen Text nicht manuell mit Tabulatoren, Sternchen und Ziffern, sondern verwende immer die Funktionen für Aufzählungspunkte (unsortierte Liste) und nummerierte Listen (sortierte Liste) des Textverarbeitungs- oder Präsentationsprogramms. Screenreader erkennen diese Listenarten und geben den Inhalt korrekt wieder. 

 

Einfache Tabellenstrukturen

Sei vorsichtig bei übergreifenden (oder zusammengeführten) Zeilen oder Spalten und vermeide mehrere Ebenen von Tabellenüberschriften. Dies kann bei Screenreadern zu verwirrenden Angaben führen. Verzichte außerdem im visuellen Layout nach Möglichkeit auf Tabellen. 

 

Achte darauf, Links mit einem aussagekräftigen Namen zu versehen.

Vermeide kontextlose Aussagen wie:

• „Klicke hier“ 
• „Hier“
• „Mehr“
• „Weitere Infos“
• „Weiterlesen“
• „Weiter“ 

 

Verwende stattdessen Angaben wie die folgenden, die mehr Kontext bieten:

• „Du kannst den Kursplan unter diesem Link herunterladen.“
• „Das Zitat zu ____“
• „Unter diesem Link sind weitere ____ verfügbar.“

Verwende für Links nicht die reine URL (z. B. www.abcde.com), es sei denn, das Dokument soll ausgedruckt werden oder die URL ist relevanter Bestandteil des Inhalts.

 

Alternativer Text für Bilder/Medien

Ein Bild sagt mehr als tausend Worte, aber Nutzer mit Sehbehinderung sind auf den alternativen Text für deine Bilder angewiesen. Gib für die Bilder in deinen Dokumenten, Folienpräsentationen usw. immer einen eindeutigen, kontextbezogenen alternativen Text ein. Dieser Text wird über einen Screenreader oder andere Unterstützungstechnologien (assistive Technologien) laut vorgelesen.

• Es gibt viele Tools, in denen du alternativen Text für Bilder angeben kannst. Diese Felder tragen beispielsweise die Bezeichnung „Alt-Text“, „alternativ“ oder auch „Bildbeschreibung“. Nutze dieses Feld (sofern vorhanden), um alternativen Text für Bilder anzugeben.
• Der alternative Text sollte das Bild nicht nur beschreiben, sondern gegebenenfalls auch seine Bedeutung vermitteln. Beispielsweise solltest du als alternativen Text lieber „ein Bild von einem Zahnrad, das Symbol für die Einstellungen“ statt „Zahnradsymbol“ angeben. Wenn du das Bild entfernen müsstest, welchen Text würdest du stattdessen schreiben? Oder anders gefragt: Wenn du das Bild jemandem per Telefon beschreiben müsstest, überlege, was du sagen würdest, und formuliere daraus deine Bildbeschreibung.
• Wenn ein Bild rein dekorativ ist, keinen relevanten Inhalt bzw. keine Funktion bietet oder der alternative Text im umgebenden Fließtext enthalten ist, dann solltest du den alternativen Text für dieses Bild weglassen. In einigen Textverarbeitungs- oder Folienpräsentationsanwendungen gibt es dafür die Option „leer“. 
• Angaben wie „Bild von“ oder „Link zu“ sind unnötig. Die Unterstützungstechnologie erkennt dies automatisch und weist die Nutzer darauf hin, dass es um ein Bild geht.
• Fasse dich so kurz wie möglich, ohne dass dabei Klarheit oder Kontext verloren geht.
• Bei PDF-Dokumenten kannst du mit Adobe Acrobat Pro überprüfen, ob dein Dokument den Standards für Barrierefreiheit entspricht. Den Link findest du im Abschnitt zum Infomaterial.

 

Beispiel für ein Bild mit alternativem Text

Im Text wird standardmäßig der Name der Bilddatei angegebenen, was möglicherweise nicht hilfreich ist.

Standardmäßiger alternativer Text (Dateiname): adult-kid-tech_revised_220811.jpg

Geänderter alternativer Text: Auf einem Sofa sitzen eine erwachsene Frau, die am Laptop arbeitet, und ein Kind mit Kopfhörern, das auf ein Tablet schaut.

 

Achte auf starken Farbkontrast

Der Farbkontrast gibt die Helligkeitsdifferenz zwischen zwei Farben an, die als Verhältnis von 1:1 (schlecht) bis 21:1 (hervorragend) ausgedrückt wird. Achte auf einen starken Farbkontrast, besonders zwischen Text und Hintergrund. Auch bei Bildern, die Text enthalten, sollte ein starker Farbkontrast bestehen. Zur Veranschaulichung des Unterschieds zwischen Kombinationen mit starkem und schwachem Farbkontrast findest du im Folgenden ein paar Beispiele für farbigen Text vor weißem Hintergrund. 

 

Schwacher Kontrast

Das Farbkontrastverhältnis für barrierefreie Inhalte muss mindestens 4,5:1 betragen. Hier ein paar Beispiele für Farbkombinationen, die diese Vorgaben nicht erfüllen und daher ungeeignet sind:

• Text in Gelb – Wert: 1,07:1
• Text in Hellgrün – Wert: 1,12:1
• Text in Orange – Wert: 2,14:1
• Text in Pink – Wert: 3,14:1
• Text in Rot – Wert: 4,0:1

 

Guter Kontrast

Die folgenden Farbkombinationen sind gut geeignet, da sie einen ausreichenden Kontrast bieten (Verhältnis von 4,5:1 bis 7:1):

• Text in Blau – Wert: 4,68:1
• Text in Dunkelgrün – Wert: 5,14:1
• Text in Violett – Wert: 6,95:1

 

Hervorragender Kontrast

Am besten eignen sich die folgenden Farben, da sie den stärksten Kontrast bieten (Verhältnis über 7:1):

• Text in Rotbraun – Wert: 7,43:1
• Text in Dunkelgrau – Wert: 12,63:1
• Text in Schwarz – Wert: 21:1

 

Übersicht über die Erstellung von barrierefreiem Kursinhalt

Inhalt

• Achte auf eine übersichtliche Struktur des Texts und untergliedere den Inhalt in kurze Absätze.
• Setze ein Inhaltsverzeichnis oder eine Kurzzusammenfassung an den Anfang langer Dokumente.
• Füge als Begleitmaterial ein Glossar mit Begriffserklärungen hinzu.
• Achte auf korrekte Rechtschreibung und Grammatik sowie gute Lesbarkeit.

 

Semantik der Dokumente

• Verwende die semantische Auszeichnung, damit Unterstützungstechnologien den Inhalt korrekt wiedergeben. 
• Strukturiere den Inhalt mithilfe von echten Überschriften.
• Verwende echte Aufzählungslisten (nummeriert oder mit Aufzählungszeichen).
• Verwende eine möglichst einfache Tabellenstruktur.
• Achte darauf, Links mit einem aussagekräftigen Namen zu versehen.

 

Alternativer Text

• Gib für die Bilder in deinen Dokumenten, Folienpräsentationen usw. einen passenden alternativen Text ein.

 

Farbkontrast

• Achte bei Text und Bildern auf einen starken Farbkontrast.

 

Links zu anderen Artikeln über Barrierefreiheit und Inklusion

• Übersicht über die Erstellung von barrierefreiem und inklusivem Lern-Content 
• Hinweise zur Erstellung von barrierefreiem Video-Content
• Hinweise zur Erstellung von inklusivem Lern-Content
• Infomaterialien zu Barrierefreiheit und Inklusion