Mit dem European Accessibility Act und dessen Umsetzung in nationales Recht als Barrierefreiheitsstärkungsgesetz (BFSG) kommt ab dem 28. Juni 2025 eine neue Anforderung auf uns zu. Allerdings mit vielen Einschränkungen, für wen das Gesetz überhaupt gilt.
Im Gegensatz zum letzten Meetup mit diesem Thema wurde dieses Mal gemeinsam Wissen zusammengetragen und praktisch an das Thema herangegangen.
Wichtige Ressourcen
- Central.wordcamp.org – Übersicht aller WordCamps weltweit
- WordCamp Leipzig 2025 – Aufzeichnungen verfügbar
- BFSG Check – Tool um zu prüfen, ob einen das Gesetz betrifft
- bfsg-gesetz.de – Informationen zum Barrierefreiheitsstärkungsgesetz
- Mozilla MDN – Super gepflegte Artikel zur Barrierefreiheit
- httpcat – Nützliche Seite für HTTP-Statuscodes
- Beispiel einer Erklärung zur Barrierefreiheit
Wichtiger Hinweis
Öffentliche Einrichtungen mussten schon vor dem BFSG Barrierefreiheit beachten!
Low Hanging Fruits – Schnell umsetzbare Maßnahmen
1. Skip to Main Content
- Falls nicht vorhanden: Theme wechseln!
- Nach dem öffnenden
<body>-Tag gibt es einen Action Hook in WordPress - Wird oft auch von Google genutzt
- Dort kann man den Skip-Link einfügen
2. Überschriften-Hierarchie
- Korrekte Heading-Struktur einhalten (H1 → H2 → H3 etc.)
- Keine Ebenen überspringen
3. Farbkontraste und klickbare Elemente
- Ausreichende Kontraste sicherstellen
- Klickbare Elemente anderweitig kennzeichnen (Unterstriche, Icons)
- Nicht nur auf Farbe als Unterscheidungsmerkmal setzen
4. Alt-Texte richtig einsetzen
- Logo auf Startseite: Welcher Text sollte es haben?
- Alt-Texte können in den Media-Elementen customized werden
- Alt-Texte dürfen gerne beschreibend sein
- Dekorative Bilder:
aria-label="hidden",role="presentation"oder leerer Alt-Textalt="" - Alt-Texte sind auch gut für SEO!
- Entscheidungshilfe: W3C Decision Tree für Alt-Texte
5. Formulare barrierefrei gestalten
- Checkboxen via aria-label auch über Text ansteuerbar machen
- Labels für Suchleisten sind sinnvoll
- Aria-Labels für Formulare korrekt einsetzen
- ARIA Dokumentation: MDN aria-label | ARIA Landmark Roles
6. Typografie und Lesbarkeit
- Schriftstärken beachten – mit und ohne Serifen
- Schriftschnitte immer mit laden bei mehreren font-weights
- Keinen Blocksatz setzen! (erschwert das Lesen)
7. Weitere wichtige Punkte
- 404-Seiten auf Barrierefreiheit checken
- Vermeiden von CAPTCHAs mit Bildern
- ARIA richtig verstehen und einsetzen
Testing-Tools für Barrierefreiheit
Grundsatz: Es gibt viele Möglichkeiten barrierefreie Seiten zu testen, aber am besten ist es, selbst zu testen!
Browser-Extensions
- Deque axe DevTools – Professionelles Testing-Tool
- axe Browser Extensions – Kostenlose Browser-Erweiterung
- WAVE – Web Accessibility Evaluation Tool
- Polypane Color Contrast Checker
- a11y.css – CSS für Accessibility-Checks
- AInspector WCAG – Firefox Add-on
Online-Tools
- PageSpeed Insights – Inkl. Accessibility-Checks
- Lighthouse – Als Firefox-Erweiterung
- Accessibility Insights – Microsoft Tool
- Tiny Helpers – Sammlung von Accessibility-Tools
Zertifizierung
- CPACCT – Testverfahren/Zertifikat für Audits
WordPress-spezifische Lösungen
Theme-Fixes
Fehlerhafte Themes können mit dem WP Accessibility Plugin gehotfixt werden.
Warum Accessibility-Overlays keine gute Idee sind
- Adrian Roselli über Overlays – Kritische Analyse
- FTC-Urteil gegen AccessiBe – 1 Million Dollar Strafe wegen irreführender Werbung
Experten im Bereich Barrierefreiheit
- Rian Rietveld – WordPress Accessibility Expert
- Joe Dolson – WordPress Accessibility Team Lead
- Manuel Matuzović – Frontend & Accessibility Specialist
Weiterführende Materialien
Ausblick
Im Anschluss an die Präsentationen gab es wie immer Zeit für Fragen, Gespräche und Networking. Die Teilnehmer tauschten Erfahrungen und nützliche Tipps rund um das Thema WordPress und Barrierefreiheit aus.
Hinweis: Das WordPress Meetup Hamburg ist immer auf der Suche nach neuen Vortragenden und helfenden Händen, die Lust haben, bei der Organisation des Meetups mitzuwirken!