Interaktive Elemente (Button + H5P)

1. Grundprinzipien

Technisch

Tastaturbedienbarkeit

• Alle Inhalte und Aktionen müssen ohne Maus erreichbar und auslösbar sein.
• Bei Eingabefeldern muss die Reihenfolge, in der die Felder angesteuert werden, korrekt sein.
• Nutzende müssen jederzeit einen Schritt zurückgehen oder die Aktion abbrechen können.

Sichtbarer Fokus

• Beim Tabben muss klar erkennbar sein, welcher Bereich bzw. welche Schaltfläche gerade ausgewählt ist.
• Der Fokus muss sich ausreichend vom ausgewählten Objekt abheben. Prüfen Sie die Farbeinstellungen des Moodle-Kurses.

Semantik statt Optik

• Nutzen Sie Formatvorlagen und Bootstrap-Klassen, um Objekte und Schaltflächen korrekt als solche auszuzeichnen: Buttons als echte Buttons, Überschriften als Überschriften, Listen als Listen.
• Achten Sie auf eine konsistente Auszeichnung von Überschriften (h1, h2, h3, … ), überspringen Sie keine Ebenen.

Skalierung

• Texte und Bedienelemente müssen bei Zoom (bis mind. 200 %) nutzbar bleiben.
• Nutzen Sie responsive Designs (Layoutanpassungen über Bootstrap oder tinyMCE Elements). Vermeiden Sie gestalterische Sonderfälle, die die Responsivität Ihres Moodle-Kurses einschränken.

Kontrastwerte

• Achten Sie bei der Gestaltung von Texten auf ausreichende Kontrastwerte zum Hintergrund.
• Nutzen Sie klar erkennbare Grafiken mit ausrechenden Kontrastwerten.

Siehe auch Abschnitt Farben und Kontrastwerte

2-Sinne-Prinzip

• Wichtige Informationen dürfen nicht nur über einen Sinn bzw. einen Wahrnehmungskanal vermittelt werden.
• Mindestens zwei Zugänge müssen vorhanden sein (typisch: sehen + hören oder sehen + lesen), damit Inhalte auch bei Seh‑/Hör‑/kognitiven Einschränkungen oder situativen Barrieren nutzbar bleiben.

Redaktionell

Eindeutige Bezeichnungen

• Bennen Sie Interaktionen verständlich (Ziel/Handlung klar).
• Geben Sie klare Hinweise, welche Aktion erwartet wird.
• Vergeben Sie sprechende Linktexte.

Vorhersehbarkeit

• Geben Sie Nutzende klare Hinweise, was ihre Aktion auslösen wird. (Öffnet neuer Tab? Startet ein Download? Wird eine externe Seite geöffnet?).

Kurze, klare Sprache

• Nutzen Sie eine zielgruppenangepasste einfache Sprache.
• Halten Sie Textmengen so gering wie möglich.

Fehlertoleranz

• Geben Sie bei Interaktionen vorab Hinweise zur korrekten Vorgehensweise und vorgegeben Schreibweisen.
• Platzieren Sie, wenn möglich, Hinweise zu Fehlerquellen nach erfolgter inkorrekter Eingabe oder hinterlegen Sie Hilfestellungen am/im Eingabefeld.
• Hinterlegen Sie Hinweise zur Navigation, ermöglichen Sie den Abbruch der Interaktion.

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

2. Buttons und Schaltflächen

Redaktionell

• Buttontext aussagekräftig: Formulieren Sie den Buttontext als sprechenden Linktext nach folgendem Schema: Buttontext = Objekt + Aktion
  Gut: „Quiz starten“, „Antwort absenden“, „Beispiel ansehen“
  Schlecht: „Start“, „OK“, „Weiter“ (ohne Kontext)
• Keine Doppelbedeutungen: Geben Sie die zu erwartenden Aktion möglichst präzise an („Weiter“ kann Navigation oder Abgabe bedeuten).
• Hinweise zur Bedienung: Geben Sie bei mehrschrittigen oder zeitkritischen Aktionen vorab einen Einblick in die erforderlichen Schritte.

Technisch

• Echte Buttons verwenden: Weisen Sie Buttons korrekt semantisch aus (z. B. über Bootstrap-Klassen oder verwenden Sie Formatvorlagen). Verzichten Sie auf als Button gestalteten Text.
• Fokus sichtbar: Stellen Sie sicher, dass der Fokus bei Tastaturbedienung klar erkennbar ist (z. B. sollten Fokus und Buttonfarbe nicht identisch sein). Prüfen Sie die Ansicht in Ihrem Moodle-Kurs und passen Sie Ihre Farbwahl entsprechend an.
• Reihenfolge logisch:  Bei mehreren Buttons muss die Tab-Reihenfolge der visuellen Reihenfolge entsprechen. Achte sie auf die richtige Reihenfolge im Code.
• Statusmeldungen zugänglich: Achten Sie darauf, dass Rückmeldungen wie „Antwort gespeichert“ auch für Screenreader wahrnehmbar sind.
• Keine Interaktion nur über Hover: Vermeiden Sie Interaktionen, die nur über einen Mouseover-Effekte erreichbar sind.
• Ausreichend Abstand zwischen klickbaren Elementen: Achten Sie auf ausreichend Klick-/Touchfläche, damit Buttons gut getroffen werden (insbesondere bei der Verwendung der Touchfunktion). Platzieren Sie Buttons untereinander oder als klar getrennte Button-Gruppe.

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

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

4. H5P - Einschätzung Barrierefreiheit intern

H5P.org führt eine eigene Liste mit Angaben zur Barrierefreiheit und Browserkompatibilität der bisher veröffentlichten H5P-Inhaltselemente. Diese kann eine erste Übersicht geben.

5. H5P - Einschätzung Barrierefreiheit extern

Eine detailreichere Aufschlüsselung nach assistiven Technologien zur Einschätzung von H5P-Inhaltstypen bieten die Prüfergebnisse vom Prüfzentrum Digitale Barrierefreiheit.nrw. Leider umfasst diese Auflistung nicht die neueren Inhaltstypen.

6. Zusammenfassung: H5P und Barrierfreiheit

Kurzfazit

Die meisten etablierten H5P-Inhaltstypen sind weitestgehend barrierefrei nutzbar, wenn sie korrekt erstellt werden (z. B. klare Texte, Alternativen, sinnvolle Bedienhinweise).
Nicht alle H5P-Aktivitäten sind jedoch barrierefrei. Einige Inhaltstypen können insbesondere für Nutzende mit Screenreader oder Sprachsteuerung unüberwindbare Barrieren darstellen.

„Weitestgehend barrierefrei“ bedeutet hier: Für viele Menschen mit Behinderungen zugänglich, aber es können Einzelbarrieren für bestimmte Gruppen bestehen. Diese lassen sich teils durch assistive Technologien oder Anpassungen reduzieren – aber nicht immer vollständig beseitigen.

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

7. Übung

Überprüfen Sie am besten direkt in ihren digitalen, interaktiven Bildungsmaterialien, ob die Grundregeln auf der nachfolgenden Seite beachtet wurden.

Nehmen Sie z. B. ein H5P-Element und versuchen Sie es in einem anderen Kontrastdesign Ihres Betriebssystems oder nur über die Tastatur zu bedienen.

Untersuchen Sie Verlinkungen auf sprechende Linktexte und technisch korrekte Implementierung.

Alternativ können Sie folgende H5P-Inhalte testen:

Überlegen Sie: Welchen Unterschied macht die Beschriftung der Ablagezonen? Nutzen Sie bitte den Vollbildmodus (Pfeil-Icon in der rechten oberen Ecke)

Testen Sie hier insbesondere die Nutzung über die Tastatur.