Web-Barrierefreiheit stellt sicher, dass Websites von Menschen mit Behinderungen genutzt werden können — einschließlich visueller, auditiver, motorischer und kognitiver Einschränkungen. Abgesehen davon, dass es das Richtige ist, wird Barrierefreiheit zunehmend zur gesetzlichen Anforderung und verbessert indirekt auch die SEO.

Das WCAG-Framework

WCAG (Web Content Accessibility Guidelines) ist um vier Prinzipien organisiert, bekannt als POUR:

Perceivable (Wahrnehmbar) — Informationen müssen den Nutzern auf eine Weise präsentiert werden, die sie wahrnehmen können
Operable (Bedienbar) — Benutzeroberflächenkomponenten müssen bedienbar sein
Understandable (Verständlich) — Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein
Robust — Inhalte müssen robust genug sein, um von verschiedenen Benutzeragenten interpretiert werden zu können

WCAG hat drei Konformitätsstufen: A (Minimum), AA (Branchenstandard) und AAA (erweitert). Die meisten Barrierefreiheitsrichtlinien und gesetzlichen Anforderungen zielen auf Stufe AA ab.

Die häufigsten Fehler

1. Fehlender Alt-Text (Bilder)

Alt-Text wird von Screenreadern anstelle des Bildes vorgelesen. Jedes <img>-Element benötigt ein Alt-Attribut:

<!-- Informationsbild -->
<img src="diagramm.png" alt="Balkendiagramm zeigt 40 % Umsatzsteigerung Q1 2026" />

<!-- Dekoratives Bild (vor Screenreadern verbergen) -->
<img src="trennlinie.png" alt="" role="presentation" />

<!-- Icon-Button (Aktion beschreiben) -->
<button><img src="trash.svg" alt="Element löschen" /></button>

2. Unzureichender Farbkontrast

WCAG AA erfordert:

4,5:1 Kontrastverhältnis für normalen Text
3:1 für großen Text (ab 18 px oder ab 14 px fett)
3:1 für UI-Komponenten und grafische Elemente

Werkzeuge: WebAIM Contrast Checker, Barrierefreiheitspanel in den Browser-DevTools.

3. Fehlende Formular-Labels

Jedes Formularfeld benötigt ein zugehöriges Label. Verlassen Sie sich nicht allein auf Platzhaltertext — er verschwindet, sobald der Nutzer tippt:

<!-- Korrekt -->
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email" name="email" />

<!-- Ebenfalls korrekt (visuell verstecktes Label) -->
<label for="suche" class="sr-only">Suche</label>
<input id="suche" type="search" placeholder="Suchen..." />

4. Tastaturnavigation

Alle interaktiven Elemente müssen ausschließlich per Tastatur erreichbar und bedienbar sein:

Tab/Shift+Tab zur Navigation
Enter/Leertaste zum Aktivieren von Buttons und Links
Pfeiltasten für Menüs und Komponenten
Escape zum Schließen von Dialogen

Testen Sie dies, indem Sie die Maus ausstecken und Ihre Website nur mit der Tab-Taste navigieren.

5. Fokus-Indikatoren

Der :focus-Stil muss sichtbar sein. Verwenden Sie niemals *:focus { outline: none }, ohne einen alternativen Fokus-Indikator bereitzustellen:

/* Benutzerdefinierter Fokusring, der Benutzereinstellungen respektiert */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

6. Fehlende Landmark-Regionen

Verwenden Sie semantische HTML-Landmarks, damit Screenreader-Nutzer seitenweise navigieren können:

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

7. ARIA-Missbrauch

ARIA (Accessible Rich Internet Applications) soll die Barrierefreiheit verbessern, nicht Verwirrung stiften. Wichtige Regeln:

Kein ARIA ist besser als schlechtes ARIA
ARIA niemals als Ersatz für semantisches HTML verwenden
Interaktive ARIA-Rollen benötigen Tastaturunterstützung

<!-- Falsch: ARIA auf einem nicht-interaktiven Element -->
<div role="button" onclick="...">Klick mich</div>

<!-- Korrekt: Das native Element verwenden -->
<button onclick="...">Klick mich</button>

8. Inhalte überspringen

Stellen Sie "Zum Hauptinhalt springen"-Links bereit, damit Tastaturnutzer nicht auf jeder Seite die gesamte Navigation durchtabben müssen:

<a href="#hauptinhalt" class="sr-only focus:not-sr-only">
  Zum Hauptinhalt springen
</a>

Rechtliche Aspekte

Barrierefreiheitsklagen nehmen zu. In den Vereinigten Staaten:

Section 508 gilt für Bundesbehörden und ihre Auftragnehmer
ADA (Americans with Disabilities Act) wurde durch Gerichtsentscheidungen auf private Websites angewendet
Der europäische EN 301 549-Standard verweist auf WCAG 2.1 AA

Schnelle Gewinne (jeweils unter einer Stunde)

Alt-Text für alle Bilder hinzufügen (Krokanti Audit zeigt Ihnen genau, welche fehlen)
Fokus-Styles korrigieren
<label>-Elemente für alle Formularfelder hinzufügen
Farbkontrastverhältnisse prüfen
Sicherstellen, dass Ihre Website mit reiner Tastaturnavigation funktioniert

Krokanti Audit prüft automatisch über 20 Barrierefreiheitsregeln — darunter Alt-Text-Abdeckung, Kontrastverhältnisse, ARIA-Verwendung, Formularbeschriftungen und Tastaturnavigationsmuster. Kostenlosen Audit starten und sehen, wo Sie stehen.