Barrierefreiheit im cBook

Einleitung

cBook bietet eine Reihe von Barrierefreiheitsfunktionen, mit denen du inklusive E-Learning-Inhalte erstellen kannst, die für alle Lernenden funktionieren — auch für diejenigen, die auf Screenreader, Tastaturnavigation, Untertitel, Gebärdensprache oder angepasste Darstellungsoptionen angewiesen sind. Diese Funktionen erstrecken sich über den Creator (in dem du Inhalte erstellst), den Asset Manager (in dem du Mediendateien verwaltest) und den Player (in dem Lernende deine Inhalte erleben). Gemeinsam unterstützen sie die Einhaltung der WCAG 2.2-Richtlinien zur Barrierefreiheit.

Dieser Artikel zeigt dir alle verfügbaren Barrierefreiheitsfunktionen, wie du sie einrichtest und was deine Lernenden erleben werden.

Untertitel für Video und Audio

Untertitel machen deine Medieninhalte für Lernende zugänglich, die gehörlos oder schwerhörig sind, oder die einfach lieber mitlesen. In cBook verwaltest du Untertitel im Asset Manager und konfigurierst ihre Anzeige im Creator.

Untertitel im Asset Manager hinzufügen

Du kannst zu jeder Video- oder Audiodatei im Asset Manager Untertitel hinzufügen.

1. Öffne den Asset Manager und wähle eine Video- oder Audiodatei aus.
2. Scrolle zum Abschnitt Untertitel.
3. Klicke auf Untertitel hinzufügen.
4. Fülle die folgenden Felder aus:
5. • Name — Eine aussagekräftige Bezeichnung (z. B. „Englisch" oder „Deutsch – vereinfacht").
   • Sprache — Die Sprache des Untertitels (z. B. „en" oder „de").
   • Datei — Lade eine Untertiteldatei im VTT-Format (.vtt) hoch. Das ist das einzige unterstützte Format.
5. Klicke auf Speichern.

Du kannst mehrere Untertitel in verschiedenen Sprachen zur selben Mediendatei hinzufügen. Jeder Untertitel kann über die Aktionsschaltflächen daneben bearbeitet, heruntergeladen oder gelöscht werden.

Vorausgewählte Untertitel im Creator festlegen

Wenn du eine Video- oder Audiodatei zu einer Medienseite im Creator hinzufügst, kannst du auswählen, welcher Untertitel standardmäßig angezeigt wird.

1. Öffne die Medienseite im Creator.
2. Finde in der Seitenleiste das Dropdown Vorausgewählte Untertitel.
3. Wähle den Untertitel aus, der beim ersten Öffnen der Seite aktiv sein soll.

Falls die Mediendatei noch keine Untertitel hat, siehst du die Meldung: „Diese Mediendatei hat noch keine Untertitel." Wechsle zum Asset Manager, um welche hinzuzufügen.

So nutzen Lernende Untertitel im Player

Im Player sehen Lernende einen CC-Button (Untertitel-Symbol) in den Medien-Steuerelementen, sobald Untertitel verfügbar sind. Ein Klick darauf öffnet ein Popup, in dem sie:

• Aus den verfügbaren Untertitelsprachen wählen können
• Keine Untertitel auswählen können, um sie auszuschalten

Der Player merkt sich die Untertiteleinstellung jedes Lernenden, sodass die Auswahl über Sitzungen hinweg erhalten bleibt.

Medienbeschreibung

Medienbeschreibungen ermöglichen es dir, zusätzlichen Kontext zu einem Video bereitzustellen, bevor es abgespielt wird. Das ist besonders nützlich für Lernende, die Screenreader verwenden, oder für alle, die von einer Textvorschau des Videoinhalts profitieren.

Medienbeschreibung im Creator aktivieren

1. Öffne eine Medienseite im Creator.
2. Aktiviere in der Seitenleiste den Schalter Medienbeschreibung anzeigen.
3. • Hinweis: Diese Option ist nur verfügbar, wenn die automatische Wiedergabe deaktiviert ist.
3. Es erscheint ein Rich-Text-Editor, in dem du deine Medienbeschreibung verfassen kannst.

Die Beschreibung wird den Lernenden angezeigt, bevor sie das Video starten, und gibt ihnen Kontext zur Verbesserung der Barrierefreiheit.

Bildbeschreibungen

Wenn du über das Asset-Manager-Plugin ein Bild in einen Rich-Text-Bereich einfügst, erscheint ein Dialog mit einem Beschreibung-Feld. Verwende dieses Feld, um einen aussagekräftigen Alternativtext (Alt-Text) einzugeben, der das Bild für Screenreader-Nutzer beschreibt. Dieser Text wird als Alt-Attribut des Bildes gesetzt und von assistiven Technologien vorgelesen.

Bild-im-Bild-Video für Gebärdensprache

cBook unterstützt ein optionales Bild-im-Bild-Video (PiP) als Overlay auf Medienseiten, das für die Gebärdensprachdolmetschung gedacht ist.

PiP-Video im Creator hinzufügen

1. Öffne eine Medienseite im Creator.
2. In der Seitenleiste siehst du das Feld Bild-im-Bild-Video (optional) unterhalb der Hauptvideo-Auswahl.
3. Klicke, um eine Videodatei aus dem Asset Manager auszuwählen.

Wichtig: Das PiP-Video sollte kürzer oder ungefähr gleich lang wie das Hauptvideo sein. Wenn die Dauer nicht überprüft werden kann, wird eine Warnung angezeigt. Ist das PiP-Video länger als das Hauptvideo, erscheint eine Fehlermeldung.

So funktioniert es im Player

• Das PiP-Video erscheint als kleines Overlay über dem Hauptvideo.
• Beide Videos sind perfekt synchronisiert — Abspielen, Pausieren und Spulen wirken sich auf beide Videos gleichzeitig aus.
• Das PiP-Video ist immer stummgeschaltet (der gesamte Ton kommt vom Hauptvideo).
• Es gibt keine Möglichkeit, das PiP-Video auszublenden — wenn du eines hinzugefügt hast, ist es immer sichtbar. Das stellt sicher, dass die Gebärdensprachdolmetschung durchgehend verfügbar ist.

Barrierefreiheits-Toolbar im Player

Der Player enthält eine integrierte Barrierefreiheits-Toolbar, die Lernenden die Kontrolle über die Darstellung der Inhalte gibt. Lernende können sie mit der Taste ? auf der Tastatur öffnen oder durch Klick auf das Barrierefreiheits-Symbol in der Kopfzeile.

Hinweis: Die Barrierefreiheits-Toolbar ist nur verfügbar, wenn dein cBook ein Design verwendet, das die Barrierefreiheit-Fähigkeit unterstützt. Mehr dazu weiter unten.

Schriftgröße

Lernende können aus vier Schriftgrößenstufen wählen:

• Normal (Standard)
• Mittel
• Groß
• Sehr groß

Farbkontrast

Sieben Kontrastvoreinstellungen stehen zur Verfügung, um verschiedene visuelle Bedürfnisse abzudecken:

• Normal (Standard)
• Schwarz auf Weiß
• Weiß auf Schwarz
• Gelb auf Blau
• Blau auf Gelb
• Rot auf Cyan
• Grün auf Schwarz

Diese Voreinstellungen überschreiben die Farben von Text und Hintergründen im gesamten Player. Beachte, dass benutzerdefinierte Farben, die du im Creator auswählst (z. B. für Text oder Hintergründe), diese automatischen Kontrastanpassungen beeinträchtigen können — siehe die Autoren-Checkliste am Ende dieses Artikels.

Weitere visuelle Optionen

• Hintergrundbilder entfernen — Entfernt Hintergrundbilder, um die visuelle Ablenkung zu reduzieren.
• Animationen ausblenden — Deaktiviert Animationen für Lernende, die empfindlich auf Bewegungen reagieren oder sie als störend empfinden.

Tastenkombinationen

Die Barrierefreiheits-Toolbar zeigt außerdem eine Übersicht aller verfügbaren Tastenkombinationen an (siehe den Abschnitt Tastaturnavigation weiter unten).

Alle Einstellungen werden im Browser der Lernenden gespeichert und bleiben über Sitzungen hinweg erhalten.

Tastaturnavigation

Der Player ist vollständig per Tastatur bedienbar. Das ist unverzichtbar für Lernende, die keine Maus verwenden können, einschließlich derjenigen, die auf assistive Technologien angewiesen sind.

Tastenkombinationen

Diese Tastenkombinationen funktionieren nur außerhalb von Texteingabefeldern und stören daher nicht beim Tippen.

Sprunglinks

Bei der Navigation mit der Tastatur können Lernende Sprunglinks verwenden, die beim Fokussieren oben auf der Seite erscheinen. Diese ermöglichen das direkte Springen zu:

• Kopfzeile
• Navigation
• Hauptinhalt
• Fußzeile

Fokus-Indikatoren

Alle interaktiven Elemente zeigen eine sichtbare blaue Umrandung, wenn sie per Tastatur fokussiert werden, sodass leicht erkennbar ist, wo sich der aktuelle Fokus auf der Seite befindet.

Interaktive Komponenten

Alle interaktiven Seitentypen — einschließlich Single Choice, Multiple Choice, Drag-and-Drop und Hotspot-Seiten — unterstützen vollständige Tastaturbedienung. Drag-and-Drop-Elemente können beispielsweise mit der Leertaste ausgewählt, mit den Pfeiltasten verschoben und mit der Leertaste abgelegt werden.

Screenreader-Kompatibilität

Der Player verwendet durchgehend semantisches HTML und ARIA-Attribute (Accessible Rich Internet Applications), um Screenreader zu unterstützen.

Wichtige Screenreader-Funktionen

• Visuell versteckte Labels — Wichtiger Kontext, den sehende Nutzer aus der visuellen Darstellung ableiten können (wie die Reihenfolge bei Drag-and-Drop oder der Zweck von Schaltflächen), wird als versteckter Text bereitgestellt, auf den nur Screenreader zugreifen können.
• ARIA-Rollen und -Attribute — Dialoge, Modale, Schalter, Fortschrittsbalken und interaktive Bereiche verwenden passende ARIA-Rollen (dialog, switch, progressbar, button, navigation, complementary) und -Attribute (aria-label, aria-expanded, aria-checked, aria-live).
• Live-Regionen — Dynamische Inhaltsänderungen (wie Popover-Inhalte) werden Screenreadern über aria-live-Regionen angekündigt.
• Fokus-Verwaltung — Wenn Modale oder Menüs geöffnet werden, wird der Fokus automatisch verschoben und darin eingeschlossen. Mit der Escape-Taste werden sie geschlossen und der Fokus kehrt zum auslösenden Element zurück.
• Sprachattribut — Der Player setzt das korrekte lang-Attribut am HTML-Dokument basierend auf der Sprache des cBooks, was Screenreadern hilft, die richtige Aussprache zu verwenden.

Design-Barrierefreiheitsfähigkeit

Nicht alle Designs unterstützen den vollen Umfang der Barrierefreiheitsfunktionen. Im Creator deklarieren Designs ihre Fähigkeiten, und Barrierefreiheit ist eine davon.

Design-Unterstützung prüfen

Wenn du ein Design in den Client-Einstellungen des Creators auswählst, kannst du die deklarierten Fähigkeiten sehen — einschließlich der Frage, ob es Barrierefreiheit unterstützt.

Wenn dein ausgewähltes Design Barrierefreiheit nicht unterstützt, siehst du eine Warnung:

„Warnung: Das aktuelle Design unterstützt keine Eingabehilfen. Es kann zu Darstellungsproblemen kommen. Wähle ein Design mit Barrierefreiheitsfunktionen, um dies zu verhindern."

Diese Warnung erscheint auch beim Export deines cBooks als SCORM-Paket mit einem nicht barrierefreien Design.

Was die Barrierefreiheitsfähigkeit steuert

Wenn ein Design die Barrierefreiheitsfähigkeit unterstützt, aktiviert der Player:

• Die Barrierefreiheits-Toolbar (Schriftgröße, Kontrast, Hintergrundbild-/Animationsoptionen)
• Die korrekte Darstellung aller Kontrast- und Schriftgrößenanpassungen

Empfehlung: Wähle immer ein Design mit Barrierefreiheitsfähigkeit, damit deine Lernenden Zugang zu allen Darstellungsoptionen haben.

Zusammenfassung: Was du als Autor tun kannst

Hier ist eine kurze Checkliste mit Maßnahmen, die du ergreifen kannst, um dein cBook barrierefreier zu machen:

• Füge Untertitel hinzu zu allen Video- und Audiodateien im Asset Manager (VTT-Format).
• Lege vorausgewählte Untertitel fest auf Medienseiten, damit Lernende nicht erst manuell einen auswählen müssen.
• Schreibe Medienbeschreibungen für Videoseiten, um vor der Wiedergabe Kontext zu geben.
• Füge Bildbeschreibungen hinzu (Alt-Text), wenn du Bilder in Rich-Text-Bereiche einfügst.
• Lade ein Bild-im-Bild-Video hoch mit Gebärdensprachdolmetschung auf Medienseiten.
• Wähle ein barrierefreies Design, das die Barrierefreiheitsfähigkeit unterstützt.
• Stelle die korrekte cBook-Sprache ein in den allgemeinen Einstellungen, damit Screenreader die richtige Aussprache verwenden.
• Verwende Überschriftenebenen korrekt. Verwende in Rich-Text-Editoren, die Überschriften unterstützen, H1 bis H6 in einer logischen, hierarchischen Reihenfolge — überspringe keine Ebenen (springe z. B. nicht von H2 auf H5). Überschriften sind nicht nur ein visuelles Gestaltungsmittel; Screenreader nutzen sie, um eine navigierbare Gliederung deines Inhalts aufzubauen. Verwende Fettschrift für visuelle Hervorhebungen, statt eine Überschriftenebene zweckzuentfremden.
• Verwende ausreichenden Farbkontrast. Wenn du in Editoren, die das unterstützen, benutzerdefinierte Text- oder Hintergrundfarben auswählst, stelle sicher, dass genügend Kontrast zwischen Vorder- und Hintergrund besteht. WCAG 2.2 erfordert ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Du kannst deine Farbkombinationen mit einem kostenlosen Tool wie dem WebAIM Contrast Checker überprüfen.
• Sei vorsichtig mit benutzerdefinierten Farben und der Barrierefreiheits-Toolbar. Die Kontrastvoreinstellungen des Players (z. B. „Schwarz auf Weiß" oder „Gelb auf Blau") funktionieren, indem sie Text- und Hintergrundfarben automatisch überschreiben. Wenn du im Creator benutzerdefinierte Farben für bestimmte Elemente fest einstellst — zum Beispiel eine farbige Textbox oder eine individuelle Schriftfarbe — werden diese benutzerdefinierten Farben möglicherweise nicht von den Kontrastvoreinstellungen überschrieben, was zu schlechter Lesbarkeit für Lernende führen kann, die darauf angewiesen sind. Verwende nach Möglichkeit die Standard-Designfarben, damit die Barrierefreiheits-Toolbar zuverlässig funktioniert.

Der Player kümmert sich um den Rest — Tastaturnavigation, Screenreader-Unterstützung, Fokus-Verwaltung, Sprunglinks und die Barrierefreiheits-Toolbar sind integriert und stehen deinen Lernenden automatisch zur Verfügung.