Barrierefreiheit

Bedienelemente kleiner als 24x24 Pixel (Desktop/Tablet gemessen)

Üblicher Schweregrad: mittel · Aufwand: minimal

Woran du es erkennst

Mehrere sichtbare Links, Buttons oder Eingabefelder unterschreiten die WCAG-2.2-Mindestgröße von 24x24px (SC 2.5.8, AA) und haben keinen ausreichenden Abstand zu Nachbarzielen — gemessen an Desktop-/Tablet-Viewport-Breite, wo kein Mobile-Audit greift (mobil deckt src/mobile.ts mit mobile-touch-target-small ab). Links mitten im Fließtext sind ausgenommen. Unter 44px (Komfortmaß, AAA) gibt es nur einen low-Hinweis.

Warum es zählt

Kleine Klickflächen erzeugen Fehlklicks — auf Touch-Laptops und Convertibles genauso wie für Nutzer mit motorischen Einschränkungen oder Tremor. WCAG 2.2 SC 2.5.8 zieht mit 24px die Untergrenze (Fehler), WCAG 2.5.5 (AAA) und die Apple Human Interface Guidelines nennen 44px als Komfortmaß (kein Mangel).

So behebst du es

  1. Vergrößere die Klickfläche per padding (nicht per sichtbarer Grafik), bis jedes interaktive Element mindestens 24x24 CSS-Pixel misst (oder genug Abstand zu Nachbarzielen hat) — empfohlen sind 44x44.
  2. Bei Icon-Buttons das SVG in einen gepolsterten Button legen, statt das Icon selbst zum einzigen Trefferbereich zu machen.
  3. Halte Abstand zwischen benachbarten Bedienelementen, damit die Trefferbereiche sich nicht überlappen und das falsche Ziel auslösen.
  4. Prüfe die Bedienbarkeit mit einem echten Zeigegerät (Touchscreen, Trackpad), nicht nur mit dem präzisen Mauszeiger.

Zum Nachlesen