Visuelle Hinweise

Touch-Ziele müssen groß genug sein

Regel: target-size
Schweregrad: Schwerwiegend
WCAG-Stufe AA

Warum das wichtig ist

Ein Bedienelement kleiner als 24 mal 24 CSS-Pixel ist schwer zu treffen — bei Tremor, eingeschränkter Feinmotorik oder auch nur mit dem Daumen in einem fahrenden Zug. Danebengetippt wird oft das Nachbarelement ausgelöst.

So beheben Sie es

Machen Sie interaktive Ziele mindestens 24 mal 24 CSS-Pixel groß.
Muss das sichtbare Icon klein bleiben, vergrößern Sie die Trefferfläche mit Padding, ohne das Design zu ändern.
Alternativ lassen Sie so viel Abstand, dass sich die 24-px-Kreise nicht überschneiden.

Im Markup

Fehlerhaft

.icon-button { width: 18px; height: 18px; }

Korrekt

.icon-button { width: 24px; height: 24px; } /* or add spacing around it */

Was die Prüfung nicht beurteilen kann

Die Regel kennt Ausnahmen, die die Engine nicht immer beurteilen kann — ein Link mitten im Satz oder ein Ziel mit ausreichendem Abstand. Prüfen Sie die gemeldeten Elemente, bevor Sie sie als Fehler behandeln.

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

2.5.8 Zielgröße (Minimum) (öffnet in neuem Tab) — WCAG-Stufe AA

Weiterführende Quellen

Deque University zu target-size (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.