Barrierefreiheits-Prüfung

Überblick

Der Editor prüft die Lektion, die Sie gerade bearbeiten, fortlaufend anhand eines umfangreichen Satzes von WCAG-2.2-Checks. Während Sie Bricks hinzufügen oder bearbeiten, werden Probleme an zwei Stellen sichtbar:

  • Ein Badge an jedem betroffenen Brick — rot für Fehler, gelb für Warnungen — mit einem Tooltip, der das erste Problem zusammenfasst.
  • Die Schaltfläche „Barrierefreiheit" in der Symbolleiste — zeigt die Gesamtanzahl für die Lektion und öffnet das Barrierefreiheits-Panel.

Die Kursansicht zeigt außerdem ein Badge pro Lektion mit den Summen für jede Lektion, berechnet auf dem Server aus dem zuletzt gespeicherten Zustand.

Die Prüfungen sind rein informativ: Sie blockieren nie das Speichern, Exportieren oder Veröffentlichen.

Das Barrierefreiheits-Panel

Das Panel listet jedes Problem gruppiert nach Brick, in Lektionsreihenfolge, auf. Jeder Eintrag zeigt:

  • Was falsch ist — z. B. „Bild hat keinen alternativen Text", mit dem WCAG-Erfolgskriterium, dem es zugeordnet ist.
  • Wie man es behebt — konkrete Hinweise zur Behebung.
  • Korrektur-Schaltflächen — sofern eine sichere Ein-Klick-Korrektur existiert (siehe unten).

Ein Klick auf einen Gruppentitel scrollt den Editor zu diesem Brick.

Was geprüft wird

BereichWCAGPrüfungen
Alternativtext1.1.1Jeder aktive Bild-Slot über alle Brick-Typen hinweg (einschließlich Galerie-/Karussell-Elemente, Karteikarten-Seiten, Zuordnungspaare, Dialog-Avatare, Spielbilder, Karussell-Cover). Leerer Alt-Text = explizit dekorativ und gültig. Alt-Texte, die wie Dateinamen aussehen oder 150 Zeichen überschreiten, werden markiert.
Video1.2.2 / 1.2.3Selbst gehostete Videos benötigen eine Untertiteldatei (Fehler). Bei plattformgehosteten Videos (YouTube/Vimeo) erfolgt eine Erinnerung, Untertitel auf der Plattform zu prüfen. Fehlende Transkripte sind eine Warnung.
Audio1.2.1Audio-Bricks und Audiomedien benötigen ein Transkript. Dialogzeilen-Audio ist ausgenommen — der Zeilentext ist sein eigenes Transkript.
Überschriften1.3.1 / 2.4.6Übersprungene Ebenen (h2 → h4), doppelte Überschriften der obersten Ebene (der Lektionstitel wird bereits als Seitenüberschrift gerendert), leere Überschriften und lange Lektionen ohne jegliche Überschrift.
Tabellen1.3.1Tabellen ohne Kopfzeile oder -spalte (Fehler); verbundene Zellen (Warnung).
Kontrast1.4.3Effektive Text- und Überschriftfarben gegenüber dem effektiven Hintergrund, unter Auflösung der vollständigen Kaskade: Theme-Farben → Stile pro Typ → Container-Überschreibungen pro Brick → Inline-Farb-/Hervorhebungsmarkierungen im Rich Text. Große Überschriften verwenden den Schwellenwert 3:1.
Farbe als einziger Hinweis1.4.1Diagrammserien oder Quiz-Kategorien mit nahezu identischen Farben.
Links2.4.4Links ohne Text, generischem Text („hier klicken", „aquí" …) oder einer rohen URL als Text.
Einbettungen4.1.2Iframes ohne barrierefreien Titel (füllen Sie das Feld Barrierefreier Titel in den Einbettungseinstellungen aus).

Ein-Klick-Korrekturen

Probleme mit einer sicheren, deterministischen Korrektur bieten eine Schaltfläche, die sie direkt anwendet (ein Rückgängig-Schritt):

  • Als dekorativ markieren — setzt einen expliziten leeren Alt-Text.
  • Überschriftenebene korrigieren — setzt die von der Hierarchie erwartete Ebene.
  • Kopfzeile aktivieren — für Tabellen ohne Kopfzeilen.
  • Charakternamen verwenden — als Alt-Text des Dialog-Avatars.

Kontrastprobleme enthalten in der Meldung eine vorgeschlagene Ersatzfarbe — die nächstliegende Farbe aus Ihrer Theme-Palette, die die Prüfung besteht, oder eine angepasste Abstufung der aktuellen Farbe. Theme-Farben werden im Theme-Editor festgelegt, sodass eine Änderung den gesamten Kurs korrigiert.

Alt-Text mit KI generieren

Bildprobleme bieten Alt-Text mit KI generieren. Das Bild wird an das Modell gesendet, das deine Organisation für Textverarbeitung gewählt hat (siehe KI-Modelle), und dieses gibt eine kurze Beschreibung in der Sprache des Inhalts zurück. Der Vorschlag erscheint in einem editierbaren Feld — es wird nichts geschrieben, bevor Sie ihn übernehmen. Jede Generierung wird wie andere KI-Funktionen mit Credits abgerechnet.

Grenzen

  • Hintergründe mit Verläufen, Bildern oder benutzerdefiniertem CSS können nicht automatisch auf Kontrast geprüft werden. Sie zeigen stattdessen eine einzelne Warnung „nicht überprüfbar" an, anstatt zu raten — prüfen Sie diese manuell.
  • Die Badges pro Lektion in der Kursansicht lesen den zuletzt gespeicherten Zustand, sodass sie Ihren letzten Änderungen um einige Sekunden hinterherhinken können.
  • Spiel-Bricks (Wortsuche, Galgenmännchen …) sind von Natur aus visuell/interaktiv; die Prüfung validiert ihre Bilder und Texte, aber die Spielmechanik selbst benötigt möglicherweise eine manuelle Barrierefreiheitsprüfung.

Überprüfen und Korrigieren über MCP

Dieselbe Prüfung steht KI-Assistenten zur Verfügung, die über den MCP-Server verbunden sind: audit_content_accessibility / audit_lesson_accessibility geben den Bericht zurück, apply_accessibility_autofix wendet eine Korrektur an, und generate_accessibility_alt_text schlägt Alt-Text für Bilder vor. Nützlich für einen chatgesteuerten Durchgang nach dem Motto „Prüfe die Barrierefreiheit dieses Kurses und korrigiere, was du kannst".

Barrierefreiheitsprüfung