Häufige Stolpersteine

Fehler, die immer wieder passieren

Die vorherigen Abschnitte zeigen, was man richtig machen sollte. Genauso wichtig: zu wissen, welche Fehler AnfängerInnen (und nicht nur die) besonders oft machen - meist unabsichtlich, oft ohne es zu merken, weil man selbst mit Maus, gutem Sehvermögen und großem Bildschirm testet.

Checkliste: Die Klassiker

1. <div>/<span> statt echter interaktiver Elemente

<!-- Schlecht: nicht fokussierbar, nicht per Tastatur bedienbar -->
<div onclick="submit()">Absenden</div>

<!-- Gut -->
<button onclick="submit()">Absenden</button>

2. Fokus-Umriss entfernt, ohne Ersatz

/* Macht Tastatur-Navigation unmöglich zu verfolgen */
*:focus { outline: none; }

Siehe Formulare-Kapitel - immer eine sichtbare Alternative bereitstellen.

3. Placeholder statt Label

Ein Eingabefeld ganz ohne <label>, nur mit placeholder="Name". Sobald getippt wird, ist die Beschriftung weg.

4. Information nur über Farbe

Ein Pflichtfeld, das im Fehlerfall nur rot markiert wird - ohne Text, Icon oder aria-invalid. Für Farbenblinde oder im Blick auf ein Schwarzweiß-Ausdruck nicht erkennbar.

5. Übersprungene Überschriften-Ebenen

h1 → h4 ohne h2/h3 dazwischen, nur weil h4 “zufällig die richtige Schriftgröße” hatte. Überschriften sind Struktur, keine Stilmittel - Schriftgröße gehört ins CSS.

<!-- Schlecht -->
<h1>Titel</h1>
<h4>Unterabschnitt</h4>

<!-- Gut: Hierarchie einhalten, Größe per CSS anpassen -->
<h1>Titel</h1>
<h2 class="small-heading">Unterabschnitt</h2>

6. Zu kleine Klickflächen

Buttons oder Links, die am Smartphone nur wenige Pixel groß sind. WCAG 2.5.8 (AA) empfiehlt mindestens 24×24px, praktisch oft 44×44px als Zielgröße für Touch-Bedienung.

7. Bilder ohne (oder mit sinnlosem) alt

<!-- Schlecht -->
<img src="chart-final-v3.png">
<img src="chart-final-v3.png" alt="chart-final-v3.png">

<!-- Gut -->
<img src="chart-final-v3.png" alt="Umsatzentwicklung 2020-2025, steigend von 2 auf 8 Mio €">

8. Autoplay-Videos/-Audio mit Ton

Startet ungefragt Ton, übertönt Screenreader-Ausgabe und ist für viele NutzerInnen einfach nur störend. Wenn Autoplay wirklich nötig ist: stumm starten, klar sichtbare Kontrollen anbieten.

9. Tastatur-Fallen (Keyboard Traps)

Ein Overlay/Modal, aus dem man mit Tab nicht mehr herausspringen kann, oder das sich nicht mit Esc schließen lässt. Das native <dialog>-Element (siehe oben) löst das automatisch - ein selbstgebautes Modal mit <div> oft nicht.

10. Zoom/Skalierung deaktiviert

<!-- Schlecht: verhindert, dass NutzerInnen hineinzoomen -->
<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">

Sehschwache NutzerInnen sind auf Zoom angewiesen - das per user-scalable=no zu blockieren, ist ein direkter WCAG-Verstoß (1.4.4).