Webzugänglichkeit bedeutet, Websites zu erstellen, die Menschen mit Behinderungen effektiv nutzen können. Dazu gehören Menschen, die Screenreader, nur Tastaturnavigation, Sprachsteuerung, Bildschirmvergrößerungen verwenden oder Farbsehschwächen haben. Im WordPress-Ökosystem ist Barrierefreiheit sowohl eine gesetzliche Anforderung in vielen Rechtsordnungen als auch eine praktische Möglichkeit, ein breiteres Publikum zu erreichen – über 1 Milliarde Menschen weltweit haben irgendeine Form von Behinderung.
In diesem Leitfaden behandeln wir praktische Schritte, um Ihre WordPress-Website zugänglich zu machen, und folgen den Web Content Accessibility Guidelines (WCAG) 2.2 auf AA-Niveau – dem Standard, der von Barrierefreiheitsgesetzen wie dem ADA (USA), EAA (EU) und AODA (Kanada) am häufigsten gefordert wird.
Verständnis der WCAG 2.2 Prinzipien
WCAG ist um vier Prinzipien organisiert, die als POUR bekannt sind:
| Prinzip | Bedeutung | WordPress Beispiele |
|---|---|---|
| Wahrnehmbar | Benutzer können den Inhalt durch Sehen, Hören oder Berühren wahrnehmen | Alt-Text für Bilder, Untertitel für Videos, ausreichender Farbkontrast |
| Bedienbar | Benutzer können mit der Benutzeroberfläche navigieren und interagieren | Tastaturnavigation, Sprunglinks, keine Tastaturfallen |
| Verstehbar | Benutzer können den Inhalt und die Nutzung der Benutzeroberfläche verstehen | Klare Sprache, konsistente Navigation, Fehlermeldungen |
| Robust | Inhalte funktionieren in verschiedenen Browsern, Geräten und Hilfstechnologien | Gültiges HTML, korrekte ARIA-Rollen, semantische Markup |
Wählen eines zugänglichen Themas
Die HTML-Struktur und CSS Ihres WordPress-Themes bilden die Grundlage für die Zugänglichkeit Ihrer Website. Beim Wählen eines WordPress-Themes sollten Sie diese Zugänglichkeitsfaktoren bewerten:
- Semantisches HTML: Das Theme verwendet geeignete HTML5-Elemente (header, nav, main, article, aside, footer) anstelle von generischen divs für alles
- Überschriftshierarchie: H1 → H2 → H3 folgt einer logischen Reihenfolge, ohne Ebenen zu überspringen
- Sprunglinks: Ein "Zum Inhalt springen"-Link ist als erstes fokussierbares Element vorhanden, sodass Tastaturbenutzer die Navigation umgehen können
- Tastaturnavigation: Alle interaktiven Elemente (Links, Schaltflächen, Formulare) sind mit der Tabulatortaste erreichbar und nutzbar
- Fokusindikatoren: Fokussierte Elemente haben eine sichtbare Umrandung oder Hervorhebung (nicht entfernt mit outline: none)
- Farbkontrast: Text erfüllt die WCAG AA-Kontrastverhältnisse (4.5:1 für normalen Text, 3:1 für großen Text)
Themes, die auf WordPress.org mit "barrierefrei" gekennzeichnet sind, haben eine grundlegende Zugänglichkeitsprüfung bestanden. Dieses Tag zeigt jedoch einen Ausgangspunkt an, nicht die vollständige WCAG-Konformität. Unter den beliebten Themes ist GeneratePress besonders gut codiert mit sauberem semantischem HTML und korrekten ARIA-Landmarken.
Bildzugänglichkeit
Alt-Text
Jedes bedeutungsvolle Bild benötigt einen beschreibenden Alt-Text. WordPress macht dies einfach – das Alt-Text-Feld ist in der Mediathek und beim Einfügen von Bildern in Inhalte verfügbar.
| Bildtyp | Alt-Text-Ansatz | Beispiel |
|---|---|---|
| Produktfoto | Beschreiben Sie das Produkt | "Rote Leder-Umhängetasche mit goldener Schnalle, Vorderansicht" |
| Screenshot | Beschreiben Sie, was der Screenshot zeigt | "WordPress-Dashboard zeigt die Plugins-Seite mit 12 aktiven Plugins" |
| Infografik | Fassen Sie die wichtigsten Informationen zusammen | "Vergleichstabelle: Elementor vs Gutenberg-Funktionen. Elementor hat über 100 Widgets, Gutenberg hat über 90 Blöcke" |
| Dekoratives Bild | Leerer Alt (alt="") | Hintergrundmuster, Trennlinien, rein dekorative Icons |
| Diagramm/Grafik | Beschreiben Sie den Trend oder den wichtigsten Datenpunkt | "Liniendiagramm zeigt, dass der Website-Verkehr von Januar bis Dezember 2025 um 45% steigt" |
Bildoptimierung für Zugänglichkeit
- Verwenden Sie keine Bilder von Text – verwenden Sie stattdessen echten Text, der mit CSS gestaltet ist
- Stellen Sie sicher, dass der in Bildern eingebettete Text die Kontrastanforderungen erfüllt
- Geben Sie lange Beschreibungen für komplexe Bilder (Diagramme, Grafiken) in einem angrenzenden Absatz oder mit dem longdesc-Attribut an
- Stellen Sie sicher, dass Bilder geeignete Abmessungen haben, damit sie keine Layoutverschiebungen (CLS) verursachen
Tastaturnavigation
Viele Benutzer navigieren Websites vollständig mit
eine Tastatur—Tab, um vorwärts zu navigieren, Shift+Tab, um rückwärts zu navigieren, Enter, um Links/Buttons zu aktivieren, Leertaste, um Kontrollkästchen umzuschalten und Buttons zu klicken, und Escape, um Modale zu schließen.
Häufige Probleme mit der Tastaturzugänglichkeit
- Fokusfallen: Modale Dialoge, die das Zurücktabben zum Hauptinhalt nicht erlauben (Modale sollten den Fokus innerhalb des Modals halten, und Escape sollte sie schließen)
- Fehlende Fokusindikatoren: CSS, das die Standardkontur auf fokussierten Elementen entfernt (verwenden Sie niemals *:focus { outline: none } global)
- Nicht-interaktive Elemente mit Click-Handlern: Divs oder Spans mit onClick-Events, die nicht mit der Tastatur zugänglich sind (verwenden Sie stattdessen Buttons oder Links)
- Dropdown-Menüs, die nur beim Hover öffnen: Tastaturbenutzer können Hover-Zustände nicht auslösen. Menüs sollten auch beim Fokussieren/Enter geöffnet werden
- Benutzerdefinierte Komponenten ohne ARIA: Tabs, Akkordeons und Karussells, die ohne geeignete ARIA-Rollen und Tastatur-Handler erstellt wurden
Farbe und Kontrast
WCAG AA erfordert diese Mindestkontrastverhältnisse:
| Element | Mindestverhältnis | Beispiel (Bestanden) | Beispiel (Nicht Bestanden) |
|---|---|---|---|
| Normaler Text (<18px) | 4.5:1 | #333 auf #fff (12.6:1) | #999 auf #fff (2.8:1) |
| Großer Text (≥18px oder ≥14px fett) | 3:1 | #555 auf #fff (7.4:1) | #aaa auf #fff (2.3:1) |
| UI-Komponenten (Buttons, Eingaben) | 3:1 | Blaue #2563eb Schaltfläche (4.6:1) | Hellblaue #93c5fd (1.8:1) |
| Nicht-Textinhalt (Symbole, Rahmen) | 3:1 | Dunkles Symbol auf hellem Hintergrund | Helles graues Symbol auf Weiß |
Verwenden Sie Tools wie den Contrast Checker von WebAIM oder die axe-Browsererweiterung, um die Kontrastverhältnisse zu überprüfen. Verlassen Sie sich nicht nur auf Farbe, um Informationen zu vermitteln—verwenden Sie zusätzlich Textbeschriftungen, Muster oder Symbole zur Farbkennzeichnung.
Zugänglichkeit von Formularen
Formulare sind eines der kritischsten Bereiche für die Zugänglichkeit. Ob Sie Gutenberg-Blöcke, Gravity Forms oder WPForms verwenden:
- Jedes Eingabefeld beschriften: Verwenden Sie das <label>-Element, das mit jedem Eingabefeld über das for/id-Attribut verknüpft ist. Platzhaltertext ist kein Ersatz für Beschriftungen
- Verwandte Felder gruppieren: Verwenden Sie <fieldset> und <legend> für Gruppen verwandter Eingaben (z.B. Versandadresse)
- Fehlermeldungen bereitstellen: Wenn die Validierung fehlschlägt, identifizieren Sie, welches Feld den Fehler hat, und beschreiben Sie, wie man ihn behebt. Verwenden Sie aria-describedby, um Fehlermeldungen mit ihren Feldern zu verknüpfen
- Pflichtfelder kennzeichnen: Verwenden Sie das Attribut required und kennzeichnen Sie Pflichtfelder visuell mit Text (nicht nur mit einem Sternchen)
- Autocomplete unterstützen: Fügen Sie geeignete Autocomplete-Attribute hinzu (name, email, tel, address-line1), damit Browser Formulardaten automatisch ausfüllen können
Zugänglichkeit von Inhalten
Überschriftenstruktur
Eine ordnungsgemäße Überschriftenhierarchie hilft Benutzern von Screenreadern, die Seitenstruktur zu verstehen und zwischen Abschnitten zu navigieren. Regeln:
- Eine H1 pro Seite (der Titel der Seite/des Beitrags)
- H2 für Hauptabschnitte
- H3 für Unterabschnitte innerhalb eines H2
- Überspringen Sie niemals Ebenen (H2 → H4 ohne H3 ist falsch)
- Verwenden Sie keine Überschriften für visuelles Styling—verwenden Sie stattdessen CSS-Klassen
Linktext
Vermeiden Sie generischen Linktext, der aus dem Kontext heraus bedeutungslos ist:
| Schlechter Linktext | Zugänglicher Linktext |
|---|---|
| "Hier klicken" | "Lesen Sie den Sicherheitsleitfaden für WordPress" |
| "Mehr lesen" | "Lesen Sie die vollständige Elementor Pro Bewertung" |
| "Erfahren Sie mehr" | "Erfahren Sie, wie Sie den WooCommerce-Checkout optimieren" |
| "Hier" | "Laden Sie den Leistungsbenchmark-Bericht herunter" |
Tabellen
Datentabellen sollten Folgendes enthalten:
- <thead> mit <th>-Elementen für Spaltenüberschriften (mit scope="col")
- <th scope="row"> für Zeilenüberschriften
- Ein <caption>-Element, das den Zweck der Tabelle beschreibt
- Einfacher Aufbau—vermeiden Sie, wenn möglich, zusammengeführte Zellen, da sie für Screenreader schwer zu interpretieren sind
Testen der Zugänglichkeit Ihrer Website
| Tool | Typ | Was es testet |
|---|---|---|
| axe DevTools | Browsererweiterung | Automatisierte WCA |
| G-Verstoßserkennung | ||
| WAVE | Browsererweiterung / Web | Visuelle Bewertung der Barrierefreiheit mit Inline-Anmerkungen |
| Lighthouse | Chrome DevTools | Barrierefreiheitsprüfung mit Bewertungen und Empfehlungen |
| Tastaturtest | Manuell | Die gesamte Website nur mit Tab, Enter und Escape navigieren |
| Screenreader | Manuell | Test mit VoiceOver (Mac), NVDA (Windows) oder TalkBack (Android) |
Automatisierte Tools erfassen etwa 30-50% der Barrierefreiheitsprobleme. Manuelles Testen mit einer Tastatur und einem Screenreader ist notwendig, um interaktionsbasierte Probleme zu identifizieren, die automatisierte Tools nicht erkennen können.
WordPress-Plugins für Barrierefreiheit
- WP Accessibility: Fügt Überspringen-Links hinzu, behebt häufige Barrierefreiheitsprobleme, fügt eine Werkzeugleiste für Benutzerpräferenzen hinzu
- One Click Accessibility: Fügt eine Frontend-Werkzeugleiste für Barrierefreiheit hinzu (Schriftgröße, Kontrast, Links hervorheben)
- Starter-Vorlagen mit Barrierefreiheit: Astra und GeneratePress haben beide starke Barrierefreiheitsgrundlagen in ihren Basisthemen
Hinweis: Barrierefreiheits-Overlay-Plugins (die ein schwebendes Widget mit "Fix"-Schaltflächen hinzufügen) werden von der Barrierefreiheitsgemeinschaft weitgehend kritisiert. Sie machen eine Website nicht barrierefrei – sie fügen eine oberflächliche Schicht hinzu, die tatsächlich mit unterstützender Technologie interferieren kann. Konzentrieren Sie sich darauf, Barrierefreiheit in Ihr Thema und Ihren Inhalt zu integrieren, anstatt sich auf Overlays zu verlassen.
Für weitere Details siehe die offizielle Dokumentation: WCAG Richtlinien, WordPress Barrierefreiheitsteam.
Häufig gestellte Fragen
Ist WordPress von Haus aus barrierefrei?
Der WordPress-Kern hat sich in Bezug auf Barrierefreiheit erheblich verbessert. Das Admin-Panel ist weitgehend mit der Tastatur navigierbar, und der Block-Editor enthält ARIA-Labels. Die Barrierefreiheit Ihrer Website hängt jedoch stark vom verwendeten Thema und den Plugins ab. Ein Thema mit schlechter HTML-Struktur untergräbt die integrierten Barrierefreiheitsfunktionen von WordPress.
Benötige ich rechtlich eine barrierefreie Website?
In vielen Rechtsordnungen, ja. Das ADA (USA), das Europäische Barrierefreiheitsgesetz (EU, in Kraft ab Juni 2025), AODA (Kanada) und ähnliche Gesetze verlangen, dass Websites barrierefrei sind. Die spezifischen Anforderungen hängen von Ihrem Standort, Ihrem Geschäftstyp und Ihrem Publikum ab. Konsultieren Sie einen Rechtsexperten für die spezifischen Anforderungen Ihrer Situation.
Beeinflusst Barrierefreiheit SEO?
Ja, es gibt erhebliche Überschneidungen. Eine ordnungsgemäße Überschriftenstruktur, beschreibender Alt-Text, semantisches HTML, schnelle Ladezeiten und Mobilfreundlichkeit kommen sowohl der Barrierefreiheit als auch der SEO zugute. Websites, die den WCAG-Richtlinien folgen, neigen dazu, besser zu ranken, da sie eine grundsätzlich bessere Benutzererfahrung bieten. Für SEO Best Practices siehe unsere Checkliste.
Können Page Builder barrierefreie Websites erstellen?
Elementor und andere Page Builder können barrierefreie Inhalte erstellen, wenn sie richtig verwendet werden. Der Schlüssel liegt darin, eine ordnungsgemäße Überschriftenhierarchie sicherzustellen, Alt-Text für Bilder hinzuzufügen, semantische Widgets (Schaltflächen anstelle von gestylten Divs) zu verwenden und die Tastaturnavigation zu testen. Der Builder selbst bestimmt nicht die Barrierefreiheit – wie Sie ihn verwenden, tut es.
Was ist der häufigste Barrierefreiheitsfehler auf WordPress-Seiten?
Fehlender oder unzureichender Alt-Text für Bilder ist der am häufigsten gemeldete WCAG-Verstoß. Der zweithäufigste ist unzureichender Farbkontrast. Beide sind einfach zu beheben – sie erfordern Aufmerksamkeit und konsequente Praxis anstelle von technischem Fachwissen.
Wie mache ich WooCommerce barrierefrei?
Die Standardvorlagen von WooCommerce haben eine angemessene Barrierefreiheit. Wichtige Bereiche zur Überprüfung: Alt-Text für Produktbilder, Formularbeschriftungen auf den Checkout-Feldern, Tastaturnavigierbarkeit des Warenkorbs und des Checkout-Prozesses sowie zugängliche Fehlermeldungen bei Formularvalidierungsfehlern. Die Verwendung eines barrierefreien Themas als Grundlage reduziert die spezifische Arbeit für WooCommerce erheblich.
Barrierefreie WordPress-Seiten erstellen
Beginnen Sie mit einer barrierefreien Themenbasis. Durchsuchen Sie leichte, gut codierte Themen, die semantisches HTML und WCAG-Konformität priorisieren.
Barrierefreie Themen durchsuchen →
