2.5.8 Target Size (Minimum)

WCAG – Definition

Interaktive Ziele (z. B. Links, Buttons, Icons) müssen mindestens 24 × 24 CSS-Pixel groß sein.

Ausnahme: wenn das Ziel durch benachbarte Flächen oder alternative Mechanismen ausreichend nutzbar ist.

Bedeutung

  • Kleine Touch-Ziele sind schwer zu treffen – besonders für Menschen mit motorischen Einschränkungen, Tremor oder auf kleinen Geräten.

  • Zu kleine Klickflächen führen zu Fehleingaben („falsch geklickt“).

  • Größere Targets verbessern die Usability für alle (besonders auf Smartphones).

Ausreichende Techniken

Mindestgröße 24×24 CSS-Pixel

button,
a {
  min-width: 24px;
  min-height: 24px;
}

Klickfläche durch Padding vergrößern

Optisch bleibt das Element klein, aber die aktive Fläche wird größer.

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; /* visuell */
  height: 16px;
  padding: 8px; /* Klickfläche erweitert */
}

Abstand zwischen Elementen

Wenn Buttons nahe beieinanderliegen, sorgt zusätzlicher Abstand für bessere Bedienbarkeit.

button {
  margin: 4px;
}

Alternative Eingabe ermöglichen

Wenn ein Ziel kleiner ist als 24×24, muss es eine Alternative geben:

  • Ein größerer Button daneben.

  • Ein Link im Kontextmenü.

Beratungstechniken

  • Empfehlung: lieber gleich 44×44 Pixel (siehe 2.5.5, AAA), das entspricht etwa der Fingergröße.

  • Nicht nur optisch klein machen: lieber Symbol + großzügige unsichtbare Fläche.

  • Responsive Design beachten: Targets müssen auch im mobilen View groß genug sein.

  • Touchgeräte extra prüfen: was mit Maus geht, ist oft auf Touch viel schwieriger.

Fehler

  • Kleine Icons (10–15 px), die direkt nebeneinanderliegen.
  • Hamburger-Menü ohne ausreichende Klickfläche.
  • Pagination-Links, die nur 12px groß sind.
  • Ziel ist kleiner als 24px und es gibt keine alternative Möglichkeit.
  • Interaktive Elemente im Footer so eng beieinander, dass man leicht den falschen trifft.