Ist Ihre WordPress-Website barrierefrei? Vollständige WCAG-Checkliste 2025
Vollständige WordPress-Barrierefreiheits-Checkliste für 2025. Erfahren Sie, wie Sie Ihre WordPress-Website WCAG 2.1-konform machen, häufige Probleme mit Page-Buildern beheben und sicherstellen, dass Ihre Website die Anforderungen des EU-Barrierefreiheitsgesetzes erfüllt.
WordPress betreibt 43% des Webs - aber die meisten Websites sind nicht barrierefrei
WordPress ist das weltweit beliebteste Content-Management-System und betreibt über 43% aller Websites. Aber hier ist das Problem: Die meisten WordPress-Websites erfüllen nicht die grundlegenden Barrierefreiheitsanforderungen.
Wenn Ihre Unternehmens-Website auf WordPress läuft, bedeutet das EU-Barrierefreiheitsgesetz (Frist abgelaufen im Juni 2025), dass Sie nun gesetzlich verpflichtet sind, die WCAG 2.1 AA-Standards zu erfüllen. Dies gilt, ob Sie Ihre Website selbst erstellt haben, einen Entwickler beauftragt haben oder einen Page-Builder wie Elementor oder Oxygen verwenden.
In diesem umfassenden Leitfaden erhalten Sie eine vollständige WordPress-Barrierefreiheits-Checkliste mit Schritt-für-Schritt-Anleitungen zur Prüfung und Behebung Ihrer Website. Wir behandeln:
Bonus: Herunterladbare 50-Punkte-Checkliste am Ende!
---
Warum WordPress-Websites oft Barrierefreiheitstests nicht bestehen
WordPress selbst ist standardmäßig recht barrierefrei. Warum scheitern dann die meisten WordPress-Websites?
Die eigentlichen Übeltäter:
1. Page-Builder - Elementor, WPBakery, Divi fügen oft unbarrierefreies HTML hinzu
2. Themes - Viele beliebte Themes ignorieren Barrierefreiheitsstandards
3. Plugins - Slider, Formulare und Galerien haben häufig Probleme
4. Benutzergenerierte Inhalte - Website-Betreiber fügen unwissentlich unbarrierefreie Inhalte hinzu
5. Fehlende Tests - Niemand prüft vor dem Start
Die gute Nachricht
WordPress-Barrierefreiheitsprobleme sind normalerweise behebbar. Die meisten Probleme fallen in einige Kategorien, die systematisch angegangen werden können.
---
Die WordPress-Barrierefreiheits-Checkliste
Verwenden Sie diese Checkliste zur Prüfung Ihrer WordPress-Website. Wir haben sie nach Priorität organisiert.
⭐ Kritische Probleme (Sofort beheben)
Diese Verstöße haben das höchste rechtliche Risiko und betreffen die meisten Benutzer:
1. Tastaturnavigation
Der Test:
Häufige WordPress-Probleme:
Wie beheben:
```javascript
// Tastaturunterstützung zu Dropdown-Menüs hinzufügen
jQuery('.menu-item-has-children > a').on('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
$(this).siblings('.sub-menu').toggle();
}
});
```
Page-Builder-Korrekturen:
2. Formularfeld-Beschriftungen
Der Test:
Häufige WordPress-Probleme:
Wie beheben:
```html
```
Plugin-spezifische Korrekturen:
3. Bild-Alt-Text
Der Test:
Häufige WordPress-Probleme:
Wie beheben:
In WordPress-Mediathek:
1. Bild anklicken
2. Feld „Alternativer Text" ausfüllen
3. Beschreibend sein: „Team-Meeting im Salzburger Büro" nicht „team.jpg"
Dekorative Bilder:
```html
```
Profi-Tipp: Installieren Sie das Plugin „Accessibility Checker", um Bilder ohne Alt-Text zu finden.
4. Farbkontrast
Der Test:
Häufige WordPress-Probleme:
Wie beheben:
Im WordPress-Customizer:
1. Zum Abschnitt „Farben" navigieren
2. Jede Farbkombination testen
3. Auf Minimum 4,5:1 anpassen
CSS-Korrektur:
```css
/* ❌ Schlechter Kontrast (2,5:1) */
.text-muted { color: #999999; }
/* ✅ Guter Kontrast (4,6:1) */
.text-muted { color: #767676; }
```
5. Überschriftenstruktur
Der Test:
Häufige WordPress-Probleme:
Wie beheben:
Gutenberg: „Überschrift"-Block korrekt verwenden, Hierarchie befolgen
Elementor:
Oxygen: Überschriften sind standardmäßig semantisch (gut!)
Website überprüfen:
```javascript
// In Browser-Konsole ausführen, um Überschriftenstruktur zu sehen
document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(h => {
console.log(h.tagName + ': ' + h.textContent);
});
```
---
⭐⭐ Wichtige Probleme (Diesen Monat beheben)
6. Skip-Navigation-Link
Was es ist:
Ein versteckter Link, der erscheint, wenn Tab gedrückt wird und Tastaturbenutzern ermöglicht, sich wiederholende Navigation zu überspringen.
Wie in WordPress hinzufügen:
```php
// Zu header.php hinzufügen (vor
Zum Hauptinhalt springen// Zum Hauptinhaltsbereich hinzufügen
```
```css
/* CSS zum Verstecken/Anzeigen bei Fokus */
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 10px;
top: 10px;
z-index: 9999;
background: #000;
color: #fff;
padding: 10px 20px;
}
```
7. Fokusindikatoren
Der Test:
Häufige WordPress-Probleme:
Wie beheben:
```css
/* ❌ Niemals tun */
*:focus {
outline: none;
}
/* ✅ Verbesserte Fokusindikatoren */
a:focus,
button:focus,
input:focus {
outline: 3px solid #d4a574;
outline-offset: 2px;
}
```
Für Ihr Theme:
1. Zu Design → Anpassen → Zusätzliches CSS gehen
2. Die obigen Fokusstile hinzufügen
3. Farbe an Ihre Marke anpassen
8. ARIA-Landmarken
Was sie sind:
Semantische Regionen, die Screenreader-Benutzern bei der Navigation helfen.
Wie hinzufügen:
```html
Verwandte Artikel
10 häufige Website-Barrierefreiheitsfehler (Und wie man sie 2025 behebt)
Entdecken Sie die 10 häufigsten Website-Barrierefreiheitsfehler, die österreichische Unternehmen 2025 machen, plus praktische Code-Korrekturen für jeden. Vermeiden Sie EU-Barrierefreiheitsgesetz-Strafen mit diesem umfassenden Leitfaden.
Hotel & Unterkunfts-Website-Barrierefreiheit: Vollständiger Leitfaden für Salzburger Tourismus
Wesentlicher Website-Barrierefreiheitsleitfaden für Salzburger Hotels, Pensionen und Tourismusunternehmen. Lernen Sie WCAG-Compliance-Anforderungen, Buchungssystem-Barrierefreiheit und wie Sie mehr Gäste mit barrierefreien Websites anziehen.
Barrierefreiheits-Widget vs. Code-Konformität: Was Ihre Website wirklich braucht
Barrierefreiheits-Widgets vs. ordnungsgemäße Code-Konformität - lernen Sie den Unterschied, rechtliche Implikationen und warum Sie beides für echte WCAG-Konformität und EU-Barrierefreiheitsgesetz-Anforderungen benötigen.