Accessibility Dock: Barrierefreiheit prüfen im YOOtheme-Customizer

Das Accessibility Dock prüft die Barrierefreiheit deiner Seite dort, wo du sie baust: im Customizer von YOOtheme Pro, unter Joomla und unter WordPress. Es findet Probleme in der Vorschau, nennt das betroffene WCAG-Kriterium und öffnet das Builder-Element mit dem Feld, in dem du den Fehler behebst. Du schaltest nicht mehr zwischen einem Prüfwerkzeug im Frontend und dem Builder hin und her und musst nicht raten, welches Element hinter einer CSS-Klasse steckt.

Das Problem: Prüfwerkzeuge kennen den Builder nicht

Browser-Erweiterungen wie WAVE oder axe DevTools und Frontend-Checker wie Sa11y, in Joomla als jooa11y eingebaut, markieren Fehler auf der fertigen Seite. Dort besteht ein YOOtheme-Layout aus verschachtelten Containern, Klassen wie el-title und Werten aus dem Styler. Bis du weißt, in welcher Spalte, welchem Item und welchem Feld der zu blasse Text oder das fehlende Alt-Attribut steckt, ist die meiste Zeit schon weg. Beim Kontrast kommt etwas dazu: Liegt Text auf einem Bild, einem Overlay oder in einer Slideshow, melden viele Werkzeuge nur, dass du selbst nachsehen sollst.

So arbeitet das Dock

Das Dock sitzt eingeklappt im Customizer. Du dockst es links, rechts oder unten an, es folgt dem hellen oder dunklen Modus deines Systems. Solange du die Prüfung nicht im Dock einschaltest, lädt es nichts in die Vorschau. Auf der öffentlichen Website läuft gar nichts, das Plugin wird nur im Customizer geladen. Nach dem Einschalten prüft das Dock die aktuelle Seite, sobald die Vorschau fertig geladen ist, auf Wunsch automatisch nach jeder Änderung.

Jeder Befund ist als Fehler, Warnung oder "Manuell prüfen" eingestuft und nennt das WCAG-Kriterium mit Link. Außerdem ordnet das Dock ihn seiner Herkunft zu: einem Builder-Element, einem Theme-Bereich wie Header, Navbar oder Footer, oder einem Fremdinhalt wie einem Joomla-Modul, einem WordPress-Widget oder einem Beitragstext. Tritt derselbe Fehler an mehreren Stellen eines Elements auf, steht er einmal in der Liste, mit der Zahl der Stellen. Du blätterst sie einzeln in der Vorschau durch. Die Liste ordnest du nach Problem oder nach Element.

Direkt zum Feld, nicht nur zum Fehler

Ein Klick auf "Zum Feld" öffnet das zuständige Element im Builder, wechselt in den richtigen Tab und springt zum Feld, auch wenn es in einem Unterpanel liegt, etwa die Overlay-Farbe unter Bild/Video einer Section. Unter dem Feld steht, was nicht passt und welcher Wert hilft. Im Layoutbaum zeigt ein farbiger Punkt den Knoten, an dem es etwas zu tun gibt, und im Inhalt-Tab öffnet ein Button den Bericht zum Element. Ändern tust du selbst: Das Dock schreibt nie in dein Layout oder in die Styler-Einstellungen, empfohlene Werte kopierst du mit einem Klick.

Bei Kontrastfehlern bekommst du nicht nur einen Hex-Wert. Das Dock empfiehlt die YOOtheme-Option, die den Kontrast tatsächlich verbessert, zum Beispiel eine dunklere Overlay-Farbe, und nennt den Kontrast danach. Einen Wert, der schon eingestellt ist, schlägt es nicht vor. Kommt die Farbe aus dem Theme, etwa bei Links oder Menüpunkten, springt "Im Stil öffnen" in den Styler und markiert die zuständige Variable. Die Zuordnung zum Feld kennt die Core-Elemente von YOOtheme Pro und die Elemente von Tonino Gerns. Andere Elemente öffnet das Dock ohne Feldfokus.

Was geprüft wird

Die technischen Prüfungen laufen mit axe-core, der Prüf-Engine von Deque. Das Prüfprofil wählst du in den Einstellungen: WCAG 2.1 AA, der Maßstab hinter EN 301 549 und dem Barrierefreiheitsstärkungsgesetz, WCAG 2.2 AA als Standard oder WCAG 2.2 AAA mit Best Practices. Dazu kommen redaktionelle Prüfungen nach dem Vorbild von Sa11y, die auf Inhalte zielen, die du oder deine Redaktion pflegt:

• Alt-Texte: fehlend, als Dateiname, als Platzhalter, zu lang oder gleich der Bildunterschrift
• Linktexte wie "hier klicken", URLs als Linktext, gleicher Linktext mit verschiedenen Zielen und Links auf Dateien ohne Hinweis auf das Format
• Leere Überschriften und Links, übersprungene Überschriftenebenen und fette Absätze, die wie Überschriften aussehen
• Tabellen ohne Kopfzellen und längere Texte in Großbuchstaben
• Lesbarkeit: deutsche Texte nach Amstad und Wiener Sachtextformel, englische nach Flesch-Kincaid

Unsichere Heuristiken erscheinen als Warnung, nicht als Fehler. Liegt Text auf einem Bild, einem Verlauf, einem Video oder einem transparenten Overlay, gilt er nie stillschweigend als bestanden. Kartenkacheln aus dem Karten-Element zählen nicht als Bilder ohne Alt-Text.

Kontrast messen, auch auf Bildern

Mit dem Element-Picker fährst du über die Vorschau und bekommst zu jedem Element eine Messkarte: Text- und Hintergrundfarbe, Kontrastverhältnis mit Ampel für AA und AAA, Schriftgröße und -gewicht, Rolle, zugänglicher Name, Alt-Text, Überschriftenebene, Zielgröße und Fokussierbarkeit. Liegt Text auf einem Hintergrundbild, misst das Dock das Bild selbst, auch unter einem Overlay, in Slideshows über alle Slides und mit Ken-Burns-Effekt. Ein Klick fixiert die Karte und zeigt die Befunde samt Weg in den Builder.

Werkzeuge für die manuelle Prüfung

Sieben Werkzeuge schaltest du einzeln im Dock ein. Die Ergebnisse siehst du in der Vorschau und als Liste in einem eigenen Fenster:

• Überschriften-Gliederung der Seite, übersprungene Ebenen fallen sofort auf
• Seitenbereiche wie Kopfbereich, Navigation, Hauptinhalt und Fußbereich (Landmarks)
• Tastatur-Reihenfolge, inklusive verdecktem Fokus nach WCAG 2.4.11
• Sehsimulationen: Protanopie, Deuteranopie, Tritanopie, Graustufen und Unschärfe
• Text-Abstände nach WCAG 1.4.12 und 200 Prozent Zoom
• Vorlese-Ansicht als Annäherung an das, was ein Screenreader vorliest
• Bewegung: reduzierte Bewegung, Autoplay und Slideshows ohne Pause

Simulationen und Vorlese-Ansicht sind Annäherungen. Einen Test mit echten Hilfsmitteln oder mit betroffenen Menschen ersetzen sie nicht, darauf weist auch das Dock hin.

Status-Log und Bericht

Befunde verschwinden nicht mit dem nächsten Reload. Das Log speichert sie und setzt sie automatisch auf behoben, sobald eine spätere Prüfung sie nicht mehr findet. Was du anders gelöst hast, markierst du als erledigt, was nicht zutrifft, als ignoriert, mit Pflicht-Begründung. Viele gleichartige Stellen, etwa rein dekorative Bilder, ignorierst du mit einer Begründung auf einmal. Jede Statusänderung wird mit Benutzer und Zeitpunkt festgehalten, Filter grenzen die Liste ein.

Exportieren kannst du als CSV, als JSON oder als barrierefreien HTML-Bericht, den du im Browser als PDF druckst. Für Kundenprojekte trägt der Bericht dein Logo und deinen Agenturnamen, Namen von Bearbeitern lassen sich anonymisieren, behobene und erledigte Befunde stehen getrennt. Wird das Log zu groß, räumst du es mit Filtern auf, vorher bietet das Dock den Export an.

Regeln, die für deine Website nicht passen, schaltest du siteweit mit Begründung ab, einzelne Bereiche schließt du per Selektor aus. Beides bleibt im Dock und im Bericht sichtbar. Regeln der WCAG-Stufen A und AA mit der Schwere Fehler lassen sich nicht abschalten.

Für wen das Dock gedacht ist

Für Agenturen und Freelancer, die mit YOOtheme Pro bauen und Barrierefreiheit schon während des Aufbaus prüfen wollen statt erst kurz vor der Abnahme. Für Redaktionen, die Bilder, Linktexte und Überschriften pflegen und sofort sehen wollen, was eine Änderung bewirkt. Und für Projekte, in denen du einem Kunden belegen musst, was geprüft und was behoben wurde. Die Oberfläche gibt es auf Deutsch und Englisch.

BFSG, WCAG und die Grenzen automatischer Prüfung

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz für viele Online-Shops und digitale Dienstleistungen gegenüber Verbrauchern. Das Dock hilft dir, Barrieren früh zu finden und die Arbeit daran nachvollziehbar festzuhalten. Rechtssicher macht es deine Website nicht: Automatisierte Prüfungen finden nur einen Teil der Probleme. Ob ein Alt-Text den Inhalt eines Bildes trifft, ob die Lesereihenfolge Sinn ergibt oder ob ein Formular mit Screenreader verständlich ist, beurteilt ein Mensch. Das Dock ersetzt weder eine manuelle Prüfung noch einen Konformitätsnachweis. Es ist auch kein Overlay-Widget, das Barrieren für Besucher überdecken soll.

Kurzanleitung

1. Plugin installieren. Unter Joomla aktiviert es sich selbst, unter WordPress aktivierst du es in der Plugin-Liste.
2. Download-Key aus deinem Kundenkonto hinterlegen: unter Joomla bei System, Update-Seiten, unter WordPress bei Einstellungen, Accessibility Dock. Damit bekommst du Updates, und die Lizenz wird an deine Domain gebunden.
3. Den YOOtheme-Customizer öffnen, das Dock aufklappen und die Prüfung einschalten.
4. Einen Befund anklicken und "Zum Feld" wählen. Nach deiner Änderung prüft das Dock die Seite erneut.

Prüfprofil, automatische Prüfung, Ausnahmen und Angaben für den Bericht stellst du ebenfalls unter Einstellungen, TG - Accessibility Dock ein.

Wenn etwas nicht wie erwartet funktioniert

• Das Dock zeigt keine Befunde: Die Prüfung gilt nur für die laufende Customizer-Sitzung. Nach dem erneuten Öffnen schaltest du sie wieder ein.
• Das Dock meldet eine fehlende Aktivierung: Prüfe, ob der Download-Key vollständig hinterlegt ist, und speichere erneut. Ist die Lizenz schon an eine andere Domain gebunden, gibst du sie in deinem Kundenkonto frei.
• Der HTML-Bericht öffnet sich nicht: Er erscheint in einem neuen Tab, und der Browser hat das Pop-up blockiert. Das Dock meldet das, erlaube Pop-ups für den Customizer.
• Ein Befund öffnet das Element, aber kein Feld: Das Element stammt weder aus YOOtheme Pro noch von Tonino Gerns. Für solche Elemente gibt es keine Feldzuordnung.
• Ein Kontrast steht auf "Manuell prüfen": Der Text liegt auf einem Bild, Verlauf oder Video. Miss ihn mit dem Element-Picker nach.

Voraussetzungen

• YOOtheme Pro 5, ältere Versionen werden nicht unterstützt
• Joomla 5 oder 6 mit PHP 8.2 oder neuer
• WordPress 6.5 oder neuer mit PHP 8.2 oder neuer
• Die Lizenz gilt zwölf Monate für eine Website, wahlweise unter Joomla oder WordPress. Eine Staging-Kopie unter dev., staging., test., demo. oder sandbox. deiner Domain ist mit abgedeckt, lokale Umgebungen wie localhost, .test oder .local laufen ohne Aktivierung.