Seit dem 28. Juni 2025 gilt der European Accessibility Act — und damit die Pflicht für viele Unternehmen, ihre Website barrierefrei zu machen. Doch was bedeutet das konkret? Diese Anleitung zeigt Schritt für Schritt, wie Sie Ihre Website auf WCAG 2.1 Level AA bringen — mit konkreten Code-Beispielen und einer Checkliste.
Schritt 1: Den Ist-Zustand ermitteln
Bevor Sie anfangen, müssen Sie wissen, wo Sie stehen. Starten Sie mit einem automatisierten Scan Ihrer wichtigsten Seiten — Startseite, Produktseite, Checkout, Kontaktformular.
Der EAA Checker prüft Ihre URL kostenlos und liefert eine priorisierte Liste aller gefundenen Probleme — nach Schweregrad sortiert, mit deutschen Fix-Vorschlägen. Alternativ bieten auch Browser-Tools wie die Chrome Lighthouse Accessibility Audits eine schnelle Übersicht.
Wichtig: Scannen Sie nicht nur Ihre Startseite. Checkout-Formulare, Produktseiten und Kontaktformulare haben oft die kritischsten Barrierefreiheitsprobleme.
Schritt 2: Prioritäten setzen
Nicht alle Probleme sind gleich dringend. Priorisieren Sie nach Schweregrad und Häufigkeit:
| Priorität | Probleme | Aufwand |
|---|---|---|
| 1. Kritisch | Fehlende Alt-Texte, keine Tastaturnavigation, unzugängliche Formulare | Gering–Mittel |
| 2. Schwerwiegend | Schlechte Kontraste, fehlende ARIA-Labels, fehlendes lang-Attribut | Gering |
| 3. Moderat | Falsche Überschriften-Hierarchie, fehlende Fokusindikatoren | Gering–Mittel |
| 4. Geringfügig | Nicht-semantische Markup, fehlende Landmarken | Mittel |
Schritt 3: Die wichtigsten Fixes umsetzen
Fix 1: Alt-Texte für alle Bilder
Jedes <img>-Element braucht ein aussagekräftiges alt-Attribut. Dekorative Bilder erhalten einen leeren Alt-Text.
// ❌ Falsch:
<img src="product.jpg">
<img src="product.jpg" alt="Bild">
// ✅ Richtig:
<img src="product.jpg" alt="Rotes Herren-T-Shirt mit V-Ausschnitt, Größe M">
<img src="decoration.png" alt=""> <!-- dekorativ -->
Fix 2: Farbkontraste prüfen und korrigieren
Normaler Text muss ein Kontrastverhältnis von mindestens 4,5:1 zur Hintergrundfarbe haben. Großer Text (ab 18pt/24px oder 14pt/19px fett) benötigt 3:1.
Prüfen Sie mit unserem kostenlosen Farbkontrast-Checker. Häufige Probleme: hellgrauer Text auf weißem Hintergrund, schwacher Text in Platzhaltern, "ausgegraute" Buttons.
/* ❌ Zu schwacher Kontrast (2.8:1) */
color: #999999; background: #ffffff;
/* ✅ Ausreichender Kontrast (7:1) */
color: #595959; background: #ffffff;
Fix 3: Formular-Labels hinzufügen
Jedes Formularfeld braucht ein sichtbares Label — Placeholder-Text allein reicht nicht.
// ❌ Falsch (kein Label):
<input type="email" placeholder="E-Mail">
// ✅ Richtig:
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" placeholder="ihre@email.de">
// ✅ Auch korrekt (visuell verstecktes Label):
<label for="email" class="sr-only">E-Mail-Adresse</label>
<input type="email" id="email" placeholder="E-Mail-Adresse">
Fix 4: Tastaturnavigation sicherstellen
Testen Sie Ihre Website nur mit der Tastatur: Tab (vorwärts), Shift+Tab (rückwärts), Enter/Leertaste (aktivieren), Pfeiltasten (in Menüs/Dropdowns). Alle interaktiven Elemente müssen erreichbar und bedienbar sein.
/* ❌ Entfernt den Fokus-Indikator */
:focus { outline: none; }
/* ✅ Eigener Fokus-Stil — sichtbar, aber designkonform */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
Fix 5: Seitensprache deklarieren
Das lang-Attribut im HTML-Element ist eine der einfachsten Fixes — und eine der häufigsten Auslassungen.
// ❌ Ohne Sprachdeklaration:
<html>
// ✅ Mit Sprachdeklaration:
<html lang="de">
Fix 6: Überschriften-Hierarchie korrigieren
Jede Seite hat genau ein H1 (der Seitentitel). Dann H2 für Hauptabschnitte, H3 für Unterabschnitte. Keine Überschriften-Ebenen überspringen.
// ❌ Falsch (Ebene übersprungen):
<h1>Produktname</h1>
<h3>Produktdetails</h3> <!-- h2 fehlt! -->
// ✅ Richtig:
<h1>Produktname</h1>
<h2>Produktdetails</h2>
<h3>Technische Daten</h3>
Fix 7: Skip-Link einbauen
Ein Skip-Link ermöglicht Tastaturnutzern, direkt zum Hauptinhalt zu springen, ohne die gesamte Navigation durchzuklicken.
// Im HTML, direkt nach <body>:
<a href="#main-content" class="skip-link">
Zum Hauptinhalt springen
</a>
/* CSS: Sichtbar nur bei Tastatur-Fokus */
.skip-link {
position: absolute;
top: -40px;
left: 0;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
Fix 8: ARIA-Labels für Icon-Buttons
Buttons, die nur ein Icon enthalten (Warenkorb, Schließen, Menü), brauchen ein aria-label.
// ❌ Für Screenreader: nur 'Schaltfläche'
<button><svg>...</svg></button>
// ✅ Mit aria-label:
<button aria-label="Warenkorb öffnen">
<svg aria-hidden="true">...</svg>
</button>
Schritt 4: WCAG-Checkliste (AA)
Nutzen Sie diese vereinfachte Checkliste, um die wichtigsten WCAG 2.1 AA-Anforderungen durchzugehen:
Wahrnehmbar
- ☐Alle Bilder haben Alt-Texte (dekorativ: alt='')
- ☐Videos haben Untertitel
- ☐Farbkontraste: normaler Text ≥ 4,5:1, großer Text ≥ 3:1
- ☐Informationen werden nicht nur durch Farbe vermittelt
- ☐Text auf 200% vergrößerbar ohne Inhaltsverlust
- ☐UI-Komponenten haben ≥ 3:1 Kontrast zum Hintergrund
Bedienbar
- ☐Alle Funktionen per Tastatur bedienbar
- ☐Kein Tastaturfokus-Trap
- ☐Fokus-Indikatoren sichtbar
- ☐Link-Texte beschreiben das Ziel
- ☐Seite hat Skip-Link zum Hauptinhalt
- ☐Tab-Reihenfolge entspricht der visuellen Reihenfolge
Verständlich
- ☐HTML-Element hat lang-Attribut (lang='de')
- ☐Konsistente Navigation auf allen Seiten
- ☐Formulare haben klare Labels
- ☐Fehlermeldungen sind verständlich und beschreiben den Fehler
- ☐Keine Zeitbeschränkungen ohne Verlängerungsoption
Robust
- ☐Semantisches HTML: header, nav, main, footer, section
- ☐Formularelemente programmatisch mit Labels verknüpft
- ☐Dynamische Inhalte via aria-live für Screenreader
- ☐Icon-Buttons haben aria-label
Schritt 5: Barrierefreiheitserklärung veröffentlichen
Das Barrierefreiheitsstärkungsgesetz verpflichtet betroffene Unternehmen, eine Barrierefreiheitserklärung zu veröffentlichen — auch dann, wenn die Website noch nicht vollständig konform ist. Ehrliche Transparenz über den aktuellen Stand und geplante Maßnahmen ist besser als gar keine Erklärung.
Die Erklärung muss mindestens enthalten: aktuellen Konformitätsgrad, bekannte Nicht-Konformitäten, eine Kontaktmöglichkeit für Feedback und das Datum der letzten Prüfung.
Schritt 6: Dauerhaftes Monitoring
Barrierefreiheit ist kein einmaliges Projekt. Jede neue Seite, jedes neue Feature kann neue Probleme einführen. Integrieren Sie automatische Scans in Ihren Workflow:
- Nach jedem größeren Content-Update scannen
- Bei neuen Features: Accessibility-Review im Design und Development
- Monatliche automatische Scans mit Alerting bei neuen Problemen
- Jahresweiser vollständiger manueller Audit
Probleme automatisch finden — kostenlos
Der EAA Checker analysiert Ihre Website in Sekunden und liefert eine priorisierte Liste aller Barrierefreiheitsprobleme mit konkreten Fix-Anleitungen auf Deutsch.
Jetzt kostenlos prüfen auf eaa-checker.de