Case Study · Digitale Barrierefreiheit
WordPress Barrierefreiheit Audit mit Avada Theme
Branche: Fertigung / Handwerk
Technologie: WordPress, Avada Theme, Fusion Builder
Umfang: 18 Seiten, 11 Kundenstimmen-Seiten, 2 Beiträge
Prüfschwerpunkte: Tastaturbedienung, Fokusführung, Screenreader-Kompatibilität, Formulare, Semantik

Kontext
Das WordPress Barrierefreiheit Audit auf einen Blick
- Mehrere kritische Barrieren in der Tastaturbedienung, darunter Fokusfallen in Karussells und fehlerhafte Skip-Link-Ziele
- Inhalte teilweise für Screenreader nicht oder nur unvollständig zugänglich, insbesondere in Formularen und interaktiven Bereichen
- Semantische Struktur unvollständig, wodurch zentrale Navigations- und Landmark-Funktionen fehlen
- Wiederkehrende Probleme durch den eingesetzten Builder, nicht durch einzelne Einzelfehler
- Maßnahmen sind gezielt umsetzbar, ohne kompletten Relaunch der Website
Kontext
Kurze Einordnung des Barrierefreiheit Audits
Diese Fallstudie zeigt die Ergebnisse einen WordPress Barrierefreiheit Audit im Fertigungsumfeld. Die Website wurde mit dem Avada Theme und dem Fusion Builder umgesetzt und war visuell modern aufgebaut, wies jedoch mehrere strukturelle und semantische Barrieren auf.
Im Fokus der Prüfung standen Tastaturbedienbarkeit, Fokusführung, Screenreader-Kompatibilität, Formularverhalten sowie die semantische Auszeichnung zentraler Seitenbereiche. Die Analyse basiert auf den Anforderungen der WCAG 2.2 (Level A und AA) und berücksichtigt typische Problemfelder, die bei visuell stark builder-basierten WordPress-Setups auftreten.
Ziel der Untersuchung war es, konkrete Barrieren nachvollziehbar zu identifizieren, ihre Auswirkungen auf reale Nutzungssituationen einzuordnen und priorisierte technische Maßnahmen abzuleiten.
Im Fokus der Prüfung standen Tastaturbedienbarkeit, Fokusführung, Screenreader-Kompatibilität, Formularverhalten sowie die semantische Auszeichnung zentraler Seitenbereiche. Die Analyse basiert auf den Anforderungen der WCAG 2.2 (Level A und AA) und berücksichtigt typische Problemfelder, die bei visuell stark builder-basierten WordPress-Setups auftreten.
Ziel der Untersuchung war es, konkrete Barrieren nachvollziehbar zu identifizieren, ihre Auswirkungen auf reale Nutzungssituationen einzuordnen und priorisierte technische Maßnahmen abzuleiten.
Analyse
Erkannte Probleme im WordPress Barrierefreiheit Audit
Fokusführung und Tastaturnavigation
Skip-Link mit falschem Fokusziel: Der Skip-Link „Zum Hauptinhalt springen" war vorhanden – ein guter Ansatz. Das Fokusziel war jedoch nicht korrekt angelegt. Nach Aktivierung sprang der Fokus auf den Slider statt auf den eigentlichen Seiteninhalt. Nutzende, die ausschließlich per Tastatur navigieren, mussten sich trotzdem durch alle Slider-Elemente durcharbeiten.

Slider und Carousels nicht per Tastatur bedienbar: Auf sieben von achtzehn Seiten war ein Bild-Slider vorhanden. Die einzelnen Slides waren per Tastatur nicht erreichbar, die Inhalte damit für Tastaturnutzende nicht zugänglich. Auf den Kundenstimmen-Seiten kam ein weiteres Problem hinzu: Das Karussell war eine Tastaturfalle. Wer hineintabte, kam nicht mehr heraus, der Fokus blieb gefangen.

Fehlerhafte Fokusreihenfolge bei den Prozessschritten: Ein Abschnitt mit Prozessschritten zeigte eine Fokusreihenfolge, die nicht dem visuellen Layout entsprach. Der Fokus sprang zwischen linker und rechter Spalte hin und her, anstatt linear von oben nach unten zu verlaufen.
Auswirkungen für Nutzende: Wer die Website ohne Maus bedient, kann zentrale Inhalte nicht oder nur eingeschränkt erreichen. Wer in das Karussell navigiert, kommt ohne Maus nicht mehr weiter. Die fehlerhafte Fokusreihenfolge führt zu Orientierungsverlust und macht das Verständnis von Prozessabläufen schwerer.
Links und Linkauszeichnung
Links nicht ausreichend unterscheidbar Mehrere Links waren ausschließlich durch Farbe von normalem Fließtext unterschieden. Eine zusätzliche Unterstreichung fehlte. Für Menschen mit eingeschränkter Farbwahrnehmung waren diese Links nicht als solche erkennbar.

Textstellen ohne semantische Linkauszeichnung Vier Elemente mit dem Begriff „Fertigung" wiesen Linkverhalten auf, waren technisch aber nicht als Links ausgezeichnet. Screenreader lasen diese Stellen als normalen Text vor, die Interaktionsmöglichkeit war nicht erkennbar.
Auswirkungen für Nutzende: Menschen mit Farbfehlsichtigkeit übersehen möglicherweise Navigationsmöglichkeiten. Screenreader-Nutzende erhalten an diesen Stellen keinen Hinweis darauf, dass eine Interaktion möglich ist.
Formulare
Pflichtfeldkennzeichnung irreführend: Das Kontaktformular kennzeichnete das Telefon-Feld als Pflichtfeld. Das Formular ließ sich jedoch auch ohne Telefonnummer absenden. Diese Inkonsistenz verunsichert Nutzende und kann dazu führen, dass Kontaktaufnahmen abgebrochen werden.
Fehler- und Hinweiskommunikation unvollständig: Hinweise, Fehlermeldungen und die Gesamtstruktur des Formulars wurden nicht vollständig an Hilfstechnologien übermittelt. Nutzende mit Screenreader erhielten unvollständige oder keine Rückmeldung bei Eingabefehlern.
Auswirkungen für Nutzende: Wer auf einen Screenreader angewiesen ist, bekommt beim Ausfüllen des Formulars keine zuverlässige Rückmeldung. Fehlermeldungen werden nicht oder nur teilweise vorgelesen. Das führt dazu, dass Nutzende nicht wissen, was sie korrigieren sollen, und das Formular unter Umständen gar nicht abschicken können.
Visuelles Verhalten
Layout-Shift durch Hover-Effekt: Im Bereich „Über uns" veränderte ein Hover-Effekt die Schriftstärke des Textes. Da die fettere Schrift mehr Platz benötigt, verschob sich das umliegende Layout beim Darüberfahren.
Auswirkungen für Nutzende: Für Menschen mit motorischen Einschränkungen oder kognitiven Beeinträchtigungen sind unerwartete Layout-Verschiebungen störend und können die Orientierung auf der Seite erschweren.
Alternativtexte
Eine Stichprobe der Alternativtexte zeigte ein uneinheitliches Bild. Manche Texte beschrieben den Inhalt nicht korrekt, andere waren ungewöhnlich lang. Eine vollständige Prüfung und individuelle Überarbeitung aller Bilder wurde empfohlen.
Auswirkungen für Nutzende: Screenreader-Nutzende erhalten an diesen Stellen keine hilfreiche Bildbeschreibung oder werden durch zu lange, unstrukturierte Texte unnötig belastet.
Seitenstruktur und Semantik
Fehlende Footer-Auszeichnung: Die Fußzeile der Website war nicht als semantisches Footer-Element ausgezeichnet. Screenreader nutzen solche Landmark-Elemente zur schnellen Orientierung auf einer Seite. Ohne diese Auszeichnung müssen Nutzende den gesamten Seiteninhalt linear durchlaufen, um zur Fußzeile zu gelangen.
Auswirkungen für Nutzende: Die Orientierung per Screenreader wird deutlich erschwert. Bereiche wie Kontakt, Impressum oder Navigation in der Fußzeile sind ohne zusätzlichen Aufwand nicht direkt erreichbar.
Auswirkungen
Wer konkret davon betroffen ist
Mangelnde Barrierefreiheit auf Pflege-Websites haben reale Konsequenzen. Sie schließen echte Menschen von wichtigen Informationen und Kontaktmöglichkeiten aus:
Verbesserungsansätze
Empfohlene Maßnahmen
Tastaturfalle im Karussell beheben
Kontaktformular überarbeiten: Pflichtfeld-Logik, Fehlerausgabe, Struktur
Nicht ausgezeichnete Links semantisch korrigieren
Linkunterstreichungen ergänzen
Skip-Link-Ziel korrekt setzen
Footer semantisch korrekt auszeichnen und Struktur bereinigen
Fokusreihenfolge bei Prozessschritten anpassen
Alternativtexte individuell prüfen und überarbeiten
Hover-Effekt anpassen oder entfernen
Fazit
Die Website zeigte ein typisches Muster bei mit Avada erstellten Seiten. Der Fusion Builder ermöglicht visuell flexible Layouts, übernimmt aber keine Verantwortung für semantische Korrektheit oder Tastaturzugänglichkeit. Viele der gefundenen Probleme waren keine Einzelfehler, sondern traten in ähnlicher Form auf mehreren Unterseiten gleichzeitig auf.
Eine gezielte Überarbeitung ist in diesem Fall realistisch umsetzbar, ohne die Website grundlegend neu aufzubauen.
Diese Fallstudie basiert auf einer anonymisierten Barrierefreiheits-Analyse. Geprüft wurden Tastaturbedienung, Screenreader-Verhalten (VoiceOver Utilities), Kontrastverhalten und semantische Struktur.
Grundlage: WCAG 2.2, Erfolgskriterien Level A und AA.
LeistungsübersichtBeratungsgespräch vereinbarenGrundlage: WCAG 2.2, Erfolgskriterien Level A und AA.
