Die 10 häufigsten Accessibility-Fehler und wie man sie behebt

Basierend auf gängigen WCAG-Audits sehen wir immer wieder dieselben Fehler. Hier sind die 10 häufigsten Accessibility-Violations - mit konkreten Code-Beispielen und Lösungen.

1. Fehlende Alt-Texte bei Bildern

Impact: Critical | WCAG: 1.1.1 (Level A)

Das mit Abstand häufigste Problem. Screenreader-Nutzer erfahren nicht, was auf dem Bild zu sehen ist.

<!-- Schlecht -->
<img src="produkt-123.jpg">

<!-- Gut - informatives Bild -->
<img src="produkt-123.jpg" alt="Blaue Laufschuhe Nike Air Max, Seitenansicht">

<!-- Gut - dekoratives Bild -->
<img src="trenner.png" alt="" role="presentation">

<!-- Gut - komplexes Bild (Diagramm) -->
<img src="umsatz-chart.png" alt="Umsatzentwicklung 2024: Anstieg von 1.2 Mio auf 1.8 Mio Euro">

Tipps für gute Alt-Texte:

Beschreiben Sie WAS zu sehen ist, nicht WIE es aussieht
Bei Produktbildern: Material, Farbe, Marke erwähnen
Bei Icons: Die Funktion beschreiben, nicht das Aussehen
Dekorative Bilder: Leerer Alt-Text (alt="")

2. Mangelnder Farbkontrast

Impact: Serious | WCAG: 1.4.3 (Level AA)

Der zweithäufigste Fehler. Hellgrauer Text auf weißem Hintergrund - sieht "modern" aus, ist aber für viele Menschen nicht lesbar.

/* Schlecht - Kontrast 2.5:1 */
.subtitle { color: #aaaaaa; background: #ffffff; }

/* Gut - Kontrast 4.6:1 */
.subtitle { color: #767676; background: #ffffff; }

/* Mindestanforderungen: */
/* Normaler Text (<18px): 4.5:1 */
/* Großer Text (>=18px oder >=14px bold): 3:1 */

Tools zum Prüfen:

Browser DevTools: Farbkontrast-Checker integriert
WebAIM Contrast Checker
Automatische Scanner wie ScanClusive

3. Fehlende Formular-Labels

Impact: Critical | WCAG: 1.3.1, 4.1.2 (Level A)

Ein Eingabefeld ohne Label ist wie ein Türschild ohne Text. Screenreader-Nutzer wissen nicht, was sie eingeben sollen.

<!-- Schlecht -->
<input type="text" placeholder="Name">

<!-- Gut - sichtbares Label -->
<label for="name">Vollständiger Name</label>
<input type="text" id="name" placeholder="Max Mustermann">

<!-- Gut - visuell verstecktes Label -->
<label for="search" class="sr-only">Suchbegriff</label>
<input type="search" id="search" placeholder="Suchen...">

Wichtig: placeholder ist KEIN Ersatz für ein Label. Er verschwindet beim Tippen und wird von vielen Screenreadern ignoriert.

4. Buttons ohne zugänglichen Namen

Impact: Serious | WCAG: 4.1.2 (Level A)

Icon-Buttons ohne Text. Der Screenreader sagt nur "Button" - der Nutzer weiß nicht, was passiert wenn er klickt.

<!-- Schlecht -->
<button><svg><!-- Warenkorb-Icon --></svg></button>

<!-- Gut - aria-label -->
<button aria-label="In den Warenkorb legen">
  <svg aria-hidden="true"><!-- Warenkorb-Icon --></svg>
</button>

<!-- Gut - visuell versteckter Text -->
<button>
  <svg aria-hidden="true"><!-- Warenkorb-Icon --></svg>
  <span class="sr-only">In den Warenkorb legen</span>
</button>

5. Fehlende Seitensprache

Impact: Serious | WCAG: 3.1.1 (Level A)

Ohne lang-Attribut weiß der Screenreader nicht, in welcher Sprache er vorlesen soll. Deutsche Texte werden dann englisch ausgesprochen.

<!-- Schlecht -->
<html>

<!-- Gut -->
<html lang="de">

<!-- Bei mehrsprachigen Seiten -->
<html lang="de">
  <body>
    <p>Dies ist ein deutscher Text.</p>
    <p lang="en">This is an English paragraph.</p>
  </body>
</html>

6. Fehlende Überschriftenhierarchie

Impact: Moderate | WCAG: 1.3.1 (Level A)

Screenreader-Nutzer navigieren häufig über Überschriften. Wenn die Hierarchie gebrochen ist (z.B. H1 direkt gefolgt von H4), wird die Seitenstruktur unverständlich.

<!-- Schlecht -->
<h1>Startseite</h1>
<h4>Produkte</h4>  <!-- H2 und H3 übersprungen -->
<h2>Über uns</h2>

<!-- Gut -->
<h1>Startseite</h1>
<h2>Produkte</h2>
  <h3>Kategorie A</h3>
  <h3>Kategorie B</h3>
<h2>Über uns</h2>

Regel: Keine Ebene überspringen. H1 > H2 > H3 > H4. Genau eine H1 pro Seite.

7. Links ohne erkennbaren Text

Impact: Serious | WCAG: 2.4.4 (Level A)

Social-Media-Icons, "Weiterlesen"-Bilder und leere Links. Der Screenreader sagt nur "Link" ohne weitere Information.

<!-- Schlecht -->
<a href="/twitter"><i class="icon-twitter"></i></a>

<!-- Gut -->
<a href="/twitter" aria-label="ScanClusive auf Twitter">
  <i class="icon-twitter" aria-hidden="true"></i>
</a>

<!-- Schlecht - generischer Linktext -->
<a href="/produkt/123">Hier klicken</a>

<!-- Gut - beschreibender Linktext -->
<a href="/produkt/123">Nike Air Max 90 ansehen</a>

8. Zoom deaktiviert

Impact: Serious | WCAG: 1.4.4 (Level AA)

Das meta viewport-Tag mit user-scalable=no oder maximum-scale=1 verhindert, dass Nutzer die Seite zoomen können. Für Menschen mit eingeschränkter Sehkraft ist das eine massive Barriere.

<!-- Schlecht -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- Gut -->
<meta name="viewport" content="width=device-width, initial-scale=1">

9. Fehlende Landmark-Regionen

Impact: Moderate | WCAG: 1.3.1 (Level A)

Landmarks helfen Screenreader-Nutzern, schnell zu bestimmten Bereichen der Seite zu springen - zum Beispiel direkt zur Navigation oder zum Hauptinhalt.

<!-- Schlecht - alles in divs -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

<!-- Gut - semantische HTML5-Elemente -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

10. Fokus nicht sichtbar

Impact: Serious | WCAG: 2.4.7 (Level AA)

Viele Websites entfernen den Fokus-Rahmen mit outline: none. Tastaturnutzer wissen dann nicht, welches Element gerade aktiv ist.

/* Schlecht - Fokus komplett entfernt */
*:focus { outline: none; }

/* Gut - eigener Fokus-Stil */
*:focus-visible {
  outline: 2px solid #1a56db;
  outline-offset: 2px;
}

/* Tipp: focus-visible statt focus */
/* Zeigt den Fokus nur bei Tastaturnavigation, nicht bei Mausklick */

Zusammenfassung

#	Fehler	Impact	Quick Fix
1	Fehlende Alt-Texte	Critical	`alt="Beschreibung"`
2	Mangelnder Kontrast	Serious	Farben anpassen (4.5:1)
3	Fehlende Labels	Critical	`<label for="id">`
4	Buttons ohne Namen	Serious	`aria-label="..."`
5	Fehlende Seitensprache	Serious	`<html lang="de">`
6	Überschriften-Hierarchie	Moderate	H1 > H2 > H3 einhalten
7	Links ohne Text	Serious	`aria-label="..."`
8	Zoom deaktiviert	Serious	`user-scalable=no` entfernen
9	Fehlende Landmarks	Moderate	`<main>`, `<nav>`, `<footer>`
10	Fokus nicht sichtbar	Serious	`focus-visible` Styling

Die meisten dieser Fehler werden von automatisierten Scannern erkannt und können in wenigen Stunden behoben werden.

Finden Sie alle Violations auf Ihrer Website - kostenlos mit ScanClusive.