Interaktive Elemente (Button + H5P)

3. H5P

H5P kann barrierearm sein – aber nicht jede Inhaltstype ist gleich gut zugänglich. Entscheidend sind Auswahl, Konfiguration und redaktionelle Aufbereitung.

Auswahl geeigneter H5P-Inhaltstypen

• Bevorzugen: Inhaltstypen, die tastaturbedienbar sind und klare Textalternativen erlauben (z. B. einfache Quizformate, strukturierte Inhalte).
• Vorsicht bei: stark visuellen Drag-and-Drop-, Hotspot- oder komplexen Interaktionsformaten, wenn keine gleichwertige Alternative möglich ist.

Redaktionelle Gestaltung in H5P

• Klare Aufgabenstellung: Was ist zu tun? Wie viele Schritte? Wie wird bewertet?
• Eindeutige Beschriftungen: Buttons, Antwortoptionen, Eingabefelder. Nutzen Sie ggf. die Option, eigene eindeutige Angaben zu hinterlegen (Verhaltenseinstellungen).
• Alternativen für visuelle Informationen:
  • Alternativtexte: Hinterlegen Sie stets einen aussagekräftigen Alternativtext für Grafiken. Kennzeichnen Sie dekorative Elemente als solche.
  • Bilder/Diagramme erklären: Hinterlegen Sie bei komplexen Abbildungen eine Beschreibung. Dies kann entweder im Fließtext oder als Bildbeschreibung erfolgen -  abhängig vom jeweiligen Inhaltstyp.
  • Bei Zuordnungen/Drag-and-Drop: Bieten Sie, wenn möglich, eine Alternative als Liste/Multiple Choice an. Beschriften Sie Ablageflächen eindeutig und der Aufgabenstellung entsprechend.
• Feedback verständlich formulieren: Tragen Sie hilfreiche Rückmeldung ein. Besser geeignet als der Hinweis „falsch“ ist z. B. ein kurze Hinweis „Achte auf …“.
• Keine Zeitlimits: Verzichten Sie wenn möglich auf Zeitlimits und Countdowns. Sollte das nicht möglich sein, bieten Sie fairen Optionen (Pausieren/Verlängern) oder mindestens einem Hinweis auf die Funktionsweise vor dem Start der Aktion an.
• Kontraste und Farbgebung: Achten Sie auf ausreichend hohe Kontrastwerte zwischen Text und Hintergrund. Setzen Sie auf kontrastreiche und eindeutige Grafiken. Vermeiden Sie Schriftgrafiken. Sollte dies nicht möglich sein, nutzen Sie Alternativtexte für die Übermittlung dieser Informationen.

Technische Punkte in H5P

• Tastaturtest durchführen: Testen Sie: Können alle Bedienfelder und Eingabemasken mit der Tastatur erreicht werden? Können alle Aufgabenstellungen gelöste werden? Braucht es ggf. Nutzungshinweise?
• Screenreader-Test (Stichprobe): Werden Fragen, Antwortoptionen und Rückmeldungen sinnvoll angesagt? Doppeln sich Inhalte?
• Medien in H5P (Audio/Video): Hinterlegen Sie passende Alternativen und unterstützende Materialien für eingebundene Medieninhalte.
  • Untertitel für Videos,
  • Transkript für Audio/Video,
  • Audiodeskription oder textliche Alternative, wenn Bildinformationen wesentlich sind.
• Bewegte/animierte Inhalte: Vermeiden oder reduzieren Sie bewegte  oder animierte Inhalte, um Überforderung und Ablenkung zu vermeiden.
• Einbettung und Anzeigegröße: Achten Sie auf eine responsive Einbettung des H5P. Nutzen Sie wenn möglich Inhaltstypen, die eine Vollbildfunktion anbieten. Testen Sie die Anzeige unter Verwendung der Zoomfunktion im Browser. Geben Sie ggf. Hinweise zur Nutzung auf kleinen Bildschirmen bzw. wo die Vollbildfunktion aktiviert werden kann.

Nach: Kim Althoff, Dustin Matzel, Michael Johannfunke und Christin Stormer, Zentrale Anlaufstelle Barrierefrei (ZAB). Projekt SHUFFLE, Universität Bielefeld. Lizenz: CC BY 4.0