WordPress treibt einen großen Teil des Webs an, und deshalb gehören WordPress-Websites auch zu den häufigsten Zielen von Beschwerden zur Barrierefreiheit. Die gute Nachricht: Die meisten Barrieren auf WordPress-Websites stammen aus einer kurzen Liste wiederkehrender Probleme bei Themes, Page Buildern und Inhalten. Beheben Sie diese, und Sie sind WCAG 2.2 Level AA ein gutes Stück näher.
Nutzen Sie diese Checkliste, um Ihre Website zu prüfen. Jeder Punkt erklärt, was Sie prüfen sollten, warum es wichtig ist und wie Sie es in WordPress beheben.
Theme und Struktur
1. Beginnen Sie mit einem barrierefreien Theme
Themes, die im WordPress.org-Verzeichnis mit accessibility-ready gekennzeichnet sind, haben eine grundlegende Prüfung zu Tastaturnavigation, Sprunglinks, Überschriften und Kontrast bestanden. Wenn Sie ein Premium- oder individuelles Theme nutzen, testen Sie es selbst: Es ist die Grundlage, die jede Seite erbt.
2. Halten Sie eine logische Überschriftenreihenfolge ein
Jede Seite sollte genau eine H1 haben, meist den Seiten- oder Beitragstitel, gefolgt von H2 für Abschnitte und H3 darin. Wählen Sie Überschriftenebenen nicht nach ihrer Größe. Wählen Sie im Block-Editor oder in Elementor die Ebene nach der Struktur und passen Sie die Optik über Stile an.
3. Stellen Sie sicher, dass es einen Sprunglink gibt
Ein Link „Zum Inhalt springen“ lässt Tastaturnutzer das Menü überspringen. Drücken Sie auf Ihrer Startseite einmal die Tabulatortaste: Als Erstes sollte ein sichtbarer Sprunglink erscheinen, der den Fokus auf den Hauptinhalt setzt.
4. Legen Sie die Seitensprache fest
Screenreader nutzen das Sprachattribut, um Text korrekt auszusprechen. Prüfen Sie unter Einstellungen → Allgemein → Website-Sprache, und wenn Sie eine mehrsprachige Website mit Polylang oder WPML betreiben, vergewissern Sie sich, dass jede Sprachversion ihr eigenes lang-Attribut setzt.
Navigation und Tastatur
5. Testen Sie die gesamte Website mit der Tastatur
Legen Sie die Maus beiseite und nutzen Sie Tab, Umschalt+Tab, Eingabe und Leertaste. Sie sollten Menüs öffnen, Slider bedienen, Formulare absenden und Pop-ups schließen können. Mega-Menüs und Off-Canvas-Menüs für Mobilgeräte fallen häufig durch.
6. Halten Sie den Fokus sichtbar
Viele Themes entfernen aus optischen Gründen die Fokusumrandung des Browsers. WCAG 2.2 verlangt einen sichtbaren Fokusindikator, und fokussierte Elemente dürfen nicht hinter fixierten Kopfzeilen oder Cookie-Bannern verschwinden. Fügen Sie im CSS Ihres Themes eine deutliche Umrandung hinzu, zum Beispiel :focus-visible { outline: 3px solid #1f2beb; outline-offset: 3px; }.
7. Dimensionieren Sie Touch-Ziele richtig
WCAG 2.2 führte für die meisten interaktiven Elemente eine Mindestgröße von 24 mal 24 CSS-Pixeln ein. Prüfen Sie auf Mobilgeräten Schaltflächen, die nur ein Symbol zeigen, etwa Social-Links, Karussell-Pfeile und Schließen-Schaltflächen.
Inhalt
8. Schreiben Sie aussagekräftige Alternativtexte
Fügen Sie in der Mediathek oder im Bildblock für jedes Bild, das Informationen vermittelt, einen Alternativtext hinzu und lassen Sie ihn bei rein dekorativen Bildern leer. Beispiele finden Sie in unserem Leitfaden So schreiben Sie Alternativtexte, die wirken.
9. Verwenden Sie aussagekräftige Linktexte
„Hier klicken“ und „Weiterlesen“ ergeben ohne Kontext keinen Sinn, und viele Screenreader-Nutzer navigieren über eine Linkliste. Schreiben Sie Links, die das Ziel beschreiben, etwa „Unsere Erklärung zur Barrierefreiheit lesen“.
10. Prüfen Sie den Farbkontrast
Normaler Text braucht gegenüber dem Hintergrund ein Kontrastverhältnis von mindestens 4,5:1, großer Text 3:1. Hellgrauer Fließtext, Text über Bildern und farbige Schaltflächen sind die üblichen Verdächtigen. Korrigieren Sie die Farben in den globalen Einstellungen Ihres Themes oder Page Builders, damit die Änderung überall wirkt.
Formulare, Medien und Plugins
11. Beschriften Sie jedes Formularfeld
Jedes Eingabefeld braucht eine sichtbare Beschriftung, nicht nur einen Platzhalter, der beim Tippen verschwindet. Fehlermeldungen sollten sagen, was schiefgelaufen ist und wie es sich beheben lässt. Testen Sie Ihr Kontaktformular, die Newsletter-Anmeldung und den WooCommerce-Checkout, und vermeiden Sie bildbasierte CAPTCHAs, die viele Nutzer aussperren.
12. Untertiteln Sie Videos und prüfen Sie PDFs
Fügen Sie Videos Untertitel und Audio Transkripte hinzu. Auch in WordPress hochgeladene PDFs sind Teil Ihrer Website: Sie brauchen Tags, einen Titel und eine logische Lesereihenfolge, oder eine barrierefreie HTML-Alternative.
13. Prüfen Sie Ihre Plugins
Automatisch abspielende Slider, Pop-ups, die den Fokus einfangen, Chat-Widgets ohne Beschriftung und Cookie-Banner, die sich nicht per Tastatur schließen lassen, sind typische Plugin-Probleme. Stellen Sie sicher, dass alles, was sich bewegt, angehalten werden kann, und ersetzen Sie Plugins, die sich nicht korrigieren lassen.
Barrierefreiheit dauerhaft sichern
Barrierefreiheit in WordPress ist kein einmaliges Projekt. Jeder neue Beitrag, jedes Plugin-Update und jede Änderung am Page Builder kann Probleme einführen. Ein nachhaltiger Prozess sieht so aus:
- Scannen Sie die gesamte Website regelmäßig und nach größeren Updates
- Geben Sie Redakteuren einfache Hinweise zu Überschriften, Links und Alternativtexten
- Testen Sie neue Templates vor dem Launch mit der Tastatur
- Veröffentlichen Sie eine Erklärung zur Barrierefreiheit und halten Sie sie aktuell
Häufig gestellte Fragen
Ist WordPress von Haus aus barrierefrei?
WordPress Core und die Standard-Themes sind mit Blick auf Barrierefreiheit entwickelt, aber Ihr Theme, Ihre Plugins, Ihr Page Builder und Ihre Inhalte entscheiden darüber, ob Ihre tatsächliche Website barrierefrei ist.
Sind Page Builder wie Elementor barrierefrei?
Sie können es sein. Wählen Sie Überschriftenebenen sorgfältig, beschriften Sie Schaltflächen, die nur ein Symbol zeigen, prüfen Sie den Kontrast in den globalen Farben und vermeiden Sie Animationen, die sich nicht anhalten lassen.
Brauche ich einen Entwickler, um meine WordPress-Website barrierefrei zu machen?
Viele Korrekturen, etwa bei Alternativtexten, Überschriften, Linktexten und Kontrast, lassen sich im Editor erledigen. Probleme bei Themes und Plugins erfordern manchmal einen Entwickler oder einen betreuten Behebungsservice.
Prüfen Sie Ihre WordPress-Website in wenigen Minuten
Das Reguweb-WordPress-Plugin verbindet Ihre Website mit einem Klick. Es scannt jede Seite gegen WCAG 2.2, schlägt KI-generierte Alternativtexte vor, warnt Sie vor anfälligen Plugins und fügt ein Barrierefreiheits-Widget für Besucher hinzu. Starten Sie jetzt einen kostenlosen Scan oder beginnen Sie eine 14-tägige kostenlose Testphase ohne Kreditkarte.
Auf dieser Seite
Ist Ihre Website konform?
Erhalten Sie Ihre WCAG-2.2- und SEO-Werte in etwa 60 Sekunden. Ohne Anmeldung.
