EAA Accessibility Auto-Fixer — Vollständige Anleitung

Überblick

EAA Accessibility Auto-Fixer bringt deine WordPress- und WooCommerce-Website in Einklang mit dem European Accessibility Act (EU-Richtlinie 2019/882, anwendbar seit 28. Juni 2025). Das Plugin kombiniert vier Bausteine: einen WCAG 2.2 AA-Scanner, einen automatischen Frontend-Korrektor, einen KI-Alt-Text-Generator (Anthropic Claude) und einen Generator für die rechtliche Barrierefreiheitserklärung.

Installation

1. Lade das ZIP aus deinem DataFirefly-Konto herunter.
2. Gehe in WordPress zu Plugins → Installieren → Plugin hochladen, wähle das ZIP aus und klicke auf Jetzt installieren.
3. Klicke auf Aktivieren. Das Plugin erstellt automatisch 4 Tabellen (wp_eaa_audits, wp_eaa_issues, wp_eaa_fixes, wp_eaa_alt_cache), plant ein wöchentliches Audit und generiert eine Seite „Erklärung zur Barrierefreiheit“ mit dem Shortcode [eaa_accessibility_declaration].

Voraussetzungen: WordPress 6.2+, WooCommerce 8.0+ (optional — das Plugin läuft auch auf reinem WordPress), PHP 8.1+.

Erstes Audit

1. Gehe zu EAA Accessibility → Audit.
2. Die Startseiten-URL ist vorausgefüllt; du kannst sie durch jede beliebige URL der Website ersetzen.
3. Klicke auf Audit starten. Der Scanner analysiert die Seite und zeigt die Punktzahl von 100, die Liste der Anomalien (Schweregrad, Regel, WCAG-Kriterium, HTML-Auszug, Empfehlung) und einen Beheben-Button für automatisch korrigierbare Probleme.

Die Punktzahl verstehen

Die Punktzahl beginnt bei 100 und jede Anomalie zieht Punkte je nach Schweregrad ab: kritisch 15 Punkte, schwer 8, moderat 3, geringfügig 1. Eine Punktzahl von 90 oder mehr wird grün angezeigt, 70 bis 89 orange, darunter rot. Die rechtliche Erklärung übernimmt diese Punktzahl: 90+ ergibt „Vollständig konform“, 50 bis 89 „Teilweise konform“, unter 50 „Nicht konform“.

Die 15 geprüften Regeln

• html-lang — lang-Attribut am Wurzelelement (WCAG 3.1.1)
• page-title — Vorhandensein und Inhalt des title-Tags (2.4.2)
• headings — eindeutiges h1 und Hierarchie ohne Sprünge (1.3.1)
• image-alt — alt-Attribut auf allen Bildern (1.1.1)
• link-name — zugänglicher Text auf jedem Link (2.4.4)
• button-name — zugänglicher Name auf jedem Button (4.1.2)
• label — Beschriftung auf jedem Formularfeld (1.3.1, 4.1.2)
• skip-link — Skip-Link am Seitenanfang (2.4.1)
• landmarks — main-Landmark vorhanden (1.3.1)
• duplicate-id — keine doppelten Bezeichner (4.1.1)
• aria-roles — gültige ARIA-Rollen (4.1.2)
• target-size — Touch-Ziele von mindestens 24×24 px (2.5.8, neu in WCAG 2.2)
• color-contrast — Text/Hintergrund-Kontrast von mindestens 4,5:1 (1.4.3)
• tabindex — kein positiver tabindex (2.4.3)
• autoplay — keine unkontrollierbare automatische Wiedergabe (1.4.2)

Automatische Korrekturen

Aktiviere unter EAA Accessibility → Einstellungen → Aktive Korrekturen die Korrekturen, die das Plugin in Echtzeit über den Output-Buffer anwendet, ohne dein Theme zu ändern:

• lang-Attribut — fügt die Website-Sprache am Wurzelelement hinzu, falls sie fehlt.
• Skip-Link — fügt „Zum Inhalt springen“ am Seitenanfang ein, sichtbar beim Tastatur-Fokus.
• Fehlender Alt-Text — markiert dekorative Bilder (Klassen decoration, icon…) mit einem leeren alt; Inhaltsbilder laufen über die KI, sofern aktiviert.
• Formularbeschriftungen — fügt ein aus dem Placeholder oder name abgeleitetes aria-label zu Feldern ohne Label hinzu.
• ARIA-Rollen und Icons — aria-label auf Icon-Buttons, role=“presentation“ auf dekorativen SVGs.
• Fokusanzeige — injiziert einen kontrastreichen :focus-visible-Stil.
• Kontraste — behebt Inline-Farben unter 4,5:1 durch automatisches Abdunkeln oder Aufhellen.
• Zielgröße — garantiert 24×24 px auf Buttons und Links per CSS.

KI-Alt-Text-Generierung

Einrichtung

1. Erstelle einen API-Schlüssel auf console.anthropic.com.
2. Aktiviere unter EAA Accessibility → Einstellungen → KI-Generierung die Option KI aktivieren, füge den Schlüssel ein und klicke auf Verbindung testen.
3. Wähle das Modell: Claude Haiku 4.5 (Standard, etwa 0,0001 € pro Bild, empfohlen), Sonnet 4.6 (höhere Qualität) oder Opus 4.7 (maximale Qualität).

Massengenerierung

Vom Dashboard aus verarbeitet der Massengenerierungs-Button die Mediathek in Stapeln von 5 Bildern. Jede Beschreibung wird in der Sprache des Anhangs (FR/EN/ES/DE/IT) erzeugt, in wp_eaa_alt_cache gespeichert und in das WordPress-Alt-Feld geschrieben. Der Cache verhindert jede Neugenerierung: Ein bereits in einer Sprache beschriebenes Bild wird nie erneut an die API gesendet.

Besucher-Widget

Aktiviere es unter Einstellungen → Besucher-Widget. Ein schwebender ♿-Button erscheint unten rechts auf der Website und öffnet ein Panel mit 8 Einstellungen: Textgröße (5 Stufen, von 100 % bis 200 %), hoher Kontrast, Legasthenie-Schrift, verbesserter Zeichenabstand, reduzierte Animationen, unterstrichene Links, großer Mauszeiger und ein Zurücksetzen-Button. Die Auswahl wird im localStorage gespeichert (kein Cookie, keine Daten an den Server gesendet) und bei jedem Besuch wiederhergestellt. Das Panel ist vollständig per Tastatur bedienbar und schließt sich mit Escape.

Rechtliche Erklärung

Die bei der Aktivierung erstellte Seite zeigt über den Shortcode [eaa_accessibility_declaration]: den auf dem letzten Audit berechneten Konformitätsstatus, die Punktzahl, das Datum, die nicht zugänglichen Inhalte, die Methodik und deine Kontaktdaten. Trage diese Angaben unter Einstellungen → Informationen für die rechtliche Erklärung ein: Firmenname, Kontakt-E-Mail für Barrierefreiheit, Telefon, Postanschrift.

Füge dann einen Link zu dieser Seite in deinen Footer ein — das ist eine Anforderung des EAA.

Geplante Audits

Wähle unter Einstellungen → Geplantes Audit die Frequenz: täglich, wöchentlich (Standard) oder monatlich. Der WordPress-Cron scannt dann die Startseite automatisch und speist den Verlauf. Alle vergangenen Audits findest du unter EAA Accessibility → Verlauf mit Punktzahl, Dauer und Aufschlüsselung der Anomalien nach Schweregrad.

Deinstallation

Standardmäßig bleiben Tabellen und Verlauf beim Deinstallieren erhalten (rechtliche Nachvollziehbarkeit). Um alles zu entfernen, aktiviere vor der Deinstallation die Datenlöschungs-Option in den Einstellungen: Die 4 Tabellen, die Optionen und die Erklärungsseite werden dann gelöscht.

Fehlerbehebung

Der Scanner meldet einen Verbindungsfehler

Der Scanner verwendet wp_remote_get, um die Seite abzurufen. Prüfe, ob dein Server sich selbst aufrufen kann (Loopback): Manche Hoster blockieren ausgehende Anfragen an die eigene Domain der Website. Teste mit Werkzeuge → Website-Zustand.

Der API-Schlüssel-Test schlägt fehl

Prüfe, dass der Schlüssel mit sk-ant- beginnt, dass dein Anthropic-Konto Guthaben hat und dass der Server ausgehende HTTPS-Verbindungen zu api.anthropic.com erlaubt.

Die Korrekturen werden nicht angewendet

Der Korrektor ist inaktiv bei RSS-Feeds, REST/AJAX-Anfragen, im Admin und beim Cron. Falls ein Cache-Plugin eine statische Version ausliefert, leere den Cache nach der Aktivierung. Prüfe außerdem, dass Frontend-Korrektur aktivieren angehakt ist.

Das Widget erscheint nicht

Prüfe, dass Besucher-Widget in den Einstellungen aktiviert ist und dass dein Theme wp_footer() aufruft — das Widget hängt sich an diesen Hook.