WordPress barrierefrei machen: Anleitung 2026

Ab Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Websites. Aber auch ohne gesetzliche Pflicht: Barrierefreiheit macht deine Website für alle besser nutzbar. Diese Anleitung zeigt, wie du WordPress barrierefrei machst.

Warum Barrierefreiheit wichtig ist

Für Nutzer

• 15% der Bevölkerung haben eine Behinderung
• Ältere Menschen profitieren von besserer Bedienbarkeit
• Mobile Nutzer bei schlechtem Licht oder unterwegs
• Alle profitieren von klarer Struktur und guter Lesbarkeit

Für dein Business

• Größere Zielgruppe – Mehr potenzielle Kunden
• Bessere SEO – Google liebt strukturierten, zugänglichen Content
• Rechtliche Sicherheit – BFSG-Konformität (ab Juni 2025)
• Bessere UX – Barrierefreiheit verbessert die Usability für alle

WCAG-Grundlagen verstehen

Die Web Content Accessibility Guidelines (WCAG) definieren Barrierefreiheit in 4 Prinzipien:

1. Wahrnehmbar (Perceivable)

Inhalte müssen für alle wahrnehmbar sein:

• Alternativtexte für Bilder
• Untertitel für Videos
• Ausreichende Kontraste
• Skalierbare Schrift

2. Bedienbar (Operable)

Die Website muss für alle bedienbar sein:

• Tastatur-Navigation
• Genug Zeit für Aktionen
• Keine Inhalte, die Anfälle auslösen
• Klare Navigation

3. Verständlich (Understandable)

Inhalte und Bedienung müssen verständlich sein:

• Lesbare Texte
• Vorhersehbares Verhalten
• Hilfe bei Fehlern

4. Robust

Inhalte müssen mit verschiedenen Technologien funktionieren:

• Kompatibilität mit Screenreadern
• Valides HTML
• ARIA-Attribute wo nötig

Barrierefreies WordPress-Theme wählen

Das Theme ist die Grundlage. Ein schlechtes Theme ist kaum barrierefrei zu machen.

Worauf achten?

• [ ] "Accessibility Ready" Tag bei wordpress.org
• [ ] Semantisches HTML (header, nav, main, footer)
• [ ] Skip-Links vorhanden
• [ ] Tastatur-Navigation funktioniert
• [ ] Fokus-Zustände sichtbar
• [ ] Responsive Design
• [ ] Gute Standard-Kontraste

Empfohlene barrierefreie Themes

Themes mit guter Barrierefreiheit

• GeneratePress
• Flavor FSE Theme
• Flavor A11Y Theme
• Flavor Starter Theme (individuell anpassbar)

WordPress barrierefrei konfigurieren

1. Alt-Texte für alle Bilder

Jedes Bild braucht einen Alt-Text:

Gute Alt-Texte:

• Beschreiben, was auf dem Bild zu sehen ist
• Kurz und prägnant (125 Zeichen)
• Kontext berücksichtigen

Beispiele:

2. Überschriften-Hierarchie

Richtige Struktur:

H1: Seitentitel (nur einmal)
  H2: Hauptabschnitt
    H3: Unterabschnitt
      H4: Detail

Fehler vermeiden:

• ❌ H1 mehrfach verwenden
• ❌ Überschriften nur für Styling nutzen
• ❌ Ebenen überspringen (H1 → H3)

3. Link-Texte

Schlecht:

• "Hier klicken"
• "Mehr"
• "Link"

Gut:

• "WordPress Wartungsvertrag anfragen"
• "Weitere Informationen zu unseren Preisen"
• "Zum Kontaktformular"

4. Kontraste prüfen

Mindestkontraste nach WCAG AA:

• Normaler Text: 4.5:1
• Großer Text (ab 18pt): 3:1
• Grafiken und UI-Elemente: 3:1

Tools zum Prüfen:

• WebAIM Contrast Checker
• Browser DevTools (Accessibility Tab)
• Plugins wie "Flavor Accessibility Checker"

5. Formulare zugänglich gestalten

• Labels für alle Eingabefelder
• Pflichtfelder kennzeichnen
• Fehlermeldungen verständlich
• Fokus-Reihenfolge logisch

<!-- Gut -->
<label for="email">E-Mail-Adresse (Pflichtfeld)</label>
<input type="email" id="email" required aria-required="true">

<!-- Schlecht -->
<input type="email" placeholder="E-Mail">

Barrierefreiheits-Plugins für WordPress

1. WP Accessibility

Kostenlos | Behebt häufige Probleme

• Skip-Links hinzufügen
• Fokus-Outline erzwingen
• Alt-Text-Warnungen
• Toolbar für Nutzer

2. One Click Accessibility

Kostenlos | Nutzer-Toolbar

• Schriftgröße ändern
• Kontrast erhöhen
• Links hervorheben
• Animationen stoppen

Hinweis: Eine Toolbar ersetzt keine echte Barrierefreiheit!

3. Flavor Accessibility Checker

Für Redakteure | Prüft Content beim Schreiben

• Überschriften-Struktur
• Alt-Texte
• Link-Texte
• Inline-Feedback

4. Flavor Starter Theme

Für tiefe Prüfung | Automatisierte Tests

• WCAG-Prüfung
• Detaillierte Reports
• Empfehlungen

Barrierefreier Content erstellen

Texte schreiben

• Einfache Sprache verwenden
• Kurze Sätze (max. 20 Wörter)
• Absätze strukturieren
• Aufzählungen für Listen
• Fachbegriffe erklären

Bilder einbinden

1. Alt-Text immer ausfüllen
2. Dekorative Bilder: Leerer Alt-Text
3. Komplexe Grafiken: Ausführliche Beschreibung im Text
4. Text in Bildern vermeiden

Videos einbinden

• Untertitel (Captions) bereitstellen
• Audiodeskription für wichtige visuelle Inhalte
• Transkript als Alternative
• Autoplay vermeiden

PDFs

• Barrierefreie PDFs erstellen (oder HTML-Alternative)
• PDF/UA-Standard beachten
• Strukturierte Überschriften
• Alt-Texte für Bilder im PDF

Barrierefreiheit testen

Manuelle Tests

1. Tastatur-Navigation:

   • Tab durch die Seite
   • Ist der Fokus immer sichtbar?
   • Ist die Reihenfolge logisch?
   • Können alle Elemente erreicht werden?

2. Screenreader-Test:

   • NVDA (Windows, kostenlos)
   • VoiceOver (Mac, integriert)
   • Ist der Inhalt verständlich?

3. Zoom-Test:

   • Browser auf 200% zoomen
   • Ist alles noch lesbar?
   • Werden Inhalte abgeschnitten?

Automatisierte Tests

Wichtig: Automatisierte Tests finden nur ~30% der Probleme. Manuelle Prüfung ist unverzichtbar.

BFSG: Was du wissen musst

Wer ist betroffen?

Ab 28. Juni 2025 müssen bestimmte Websites barrierefrei sein:

• Online-Shops (B2C E-Commerce)
• Bankdienstleistungen
• Telekommunikation
• Bestimmte Dienstleistungen

Anforderungen

• WCAG 2.1 Level AA
• Barrierefreiheitserklärung
• Feedback-Mechanismus

Ausnahmen

• Kleine Unternehmen (< 10 Mitarbeiter UND < 2 Mio. € Umsatz)
• Unverhältnismäßige Belastung (nachweisen!)

→ Mehr zum BFSG: Ist Ihre Website betroffen?

Schritt-für-Schritt: WordPress barrierefrei machen

Phase 1: Analyse

1. WAVE-Test durchführen
2. Tastatur-Navigation testen
3. Probleme dokumentieren

Phase 2: Theme & Struktur

1. Theme auf Barrierefreiheit prüfen
2. Ggf. Theme wechseln oder anpassen
3. Skip-Links hinzufügen
4. Fokus-Styles definieren

Phase 3: Content

1. Alt-Texte für alle Bilder
2. Überschriften-Hierarchie korrigieren
3. Link-Texte verbessern
4. Formulare prüfen

Phase 4: Feinschliff

1. Kontraste prüfen und anpassen
2. Screenreader-Test
3. Mobile Barrierefreiheit
4. Barrierefreiheitserklärung erstellen

Phase 5: Laufend

1. Neue Inhalte barrierefrei erstellen
2. Regelmäßige Tests
3. Feedback-Mechanismus überwachen

Zusammenfassung

WordPress barrierefrei machen bedeutet:

1. Barrierefreies Theme wählen oder anpassen
2. Alt-Texte für alle Bilder
3. Überschriften-Struktur korrekt
4. Kontraste ausreichend
5. Tastatur-Navigation funktioniert
6. Formulare zugänglich
7. Regelmäßig testen

Zeitaufwand: Je nach Website-Größe 2-20 Stunden für Basis-Barrierefreiheit

Tipp: Barrierefreiheit von Anfang an mitdenken ist einfacher als nachträgliche Anpassung.

Weiterführende Artikel

• BFSG Checkliste: Ist Ihre Website betroffen?
• WordPress sicher machen: 15 Maßnahmen
• Website Betreuung: Der komplette Guide

Barrierefreiheit ist kompliziert?

Wir helfen: Barrierefreiheits-Service – vom BFSG-Check bis zur Umsetzung. Oder als Teil unserer WordPress Wartung.