Die 5 häufigsten WCAG-Verstöße und wie Sie sie beheben

Jedes Jahr analysiert WebAIM die eine Million meistbesuchten Websites auf Barrierefreiheit. Die Ergebnisse sind konsistent: 94,8 % aller Startseiten haben erkennbare WCAG-Fehler. Aber die gleichen fünf Probleme treten auf der überwiegenden Mehrheit der fehlerhaften Seiten auf.

1. Zu geringer Textkontrast

Auf 79,1 % der Startseiten. Der häufigste WCAG-Verstoß.

WCAG 2.1 erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text.

So beheben Sie es

/* Vorher — durchgefallen (2,5:1) */
.subtitle { color: #999999; background: #ffffff; }

/* Nachher — bestanden (7:1) */
.subtitle { color: #595959; background: #ffffff; }

2. Fehlender Alt-Text bei Bildern

Auf 55,5 % der Startseiten. Bilder ohne Alt-Attribut sind für Screenreader-Nutzer unsichtbar.

So beheben Sie es

<img src="team-photo.jpg" alt="Das WCAGAlert-Team im Stockholmer Büro">

<!-- Dekoratives Bild -->
<img src="decorative-line.svg" alt="">

3. Fehlende Formularbeschriftungen

Auf 48 % der Startseiten.

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

4. Leere Links

Auf 48,6 % der Startseiten.

<a href="/twitter" aria-label="Folgen Sie uns auf Twitter">
  <svg aria-hidden="true">...</svg>
</a>

5. Fehlende Dokumentsprache

Auf 17,1 % der Startseiten.

<html lang="de">

Das Gesamtbild

Diese fünf Probleme machen die Mehrheit aller automatisch erkannten WCAG-Verstöße aus. Richten Sie automatisiertes Monitoring ein, um diese Probleme zu erkennen, sobald sie auftreten.