Ü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
| Bereich | WCAG | Prüfungen |
|---|---|---|
| Alternativtext | 1.1.1 | Jeder 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. |
| Video | 1.2.2 / 1.2.3 | Selbst 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. |
| Audio | 1.2.1 | Audio-Bricks und Audiomedien benötigen ein Transkript. Dialogzeilen-Audio ist ausgenommen — der Zeilentext ist sein eigenes Transkript. |
| Überschriften | 1.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. |
| Tabellen | 1.3.1 | Tabellen ohne Kopfzeile oder -spalte (Fehler); verbundene Zellen (Warnung). |
| Kontrast | 1.4.3 | Effektive 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 Hinweis | 1.4.1 | Diagrammserien oder Quiz-Kategorien mit nahezu identischen Farben. |
| Links | 2.4.4 | Links ohne Text, generischem Text („hier klicken", „aquí" …) oder einer rohen URL als Text. |
| Einbettungen | 4.1.2 | Iframes 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".