WCAG 2.5.8 Zielgröße (Minimum)

Erfolgskriterium 2.5.8 verlangt, dass klickbare/antippbare Ziele mindestens 24 mal 24 CSS-Pixel groß sind, es sei denn, eine von mehreren Ausnahmen gilt. Es ist ein Kriterium der Stufe AA unter Richtlinie 2.5 (Eingabemodalitäten), neu in WCAG 2.2.

Warum die Zielgröße wichtig ist

Kleine Tipp-Ziele sind für Menschen mit eingeschränkter Feinmotorik, Handtremor, oder größeren Fingern im Verhältnis zu einem kleinen Touchscreen-Element schwer präzise zu treffen – und Fehltipps auf benachbarte, ähnlich winzige Ziele sind eine verbreitete Frustration für alle, nicht nur für Menschen mit Behinderungen, was mit ein Grund ist, warum dies zu einem formalen Kriterium wurde.

Die Ausnahmen, die dies praktikabel machen

Ein Ziel kleiner als 24×24px erfüllt das Kriterium dennoch, wenn eine dieser Bedingungen zutrifft:

• Abstand – das Ziel ist mindestens 24px von jedem anderen Ziel entfernt (Mitte zu Mitte, oder mit gleichwertigem Abstand), selbst wenn das Ziel selbst kleiner ist
• Gleichwertig – dieselbe Funktion ist anderswo auf der Seite über ein Ziel verfügbar, das die Mindestgröße erfüllt
• Inline – das Ziel befindet sich innerhalb eines Satzes oder Textblocks (wie ein Textlink innerhalb eines Absatzes), wo die Durchsetzung einer Mindestgröße nicht praktikabel ist
• Wesentlich – die konkrete kleine Größe ist für die Funktion wesentlich oder wird vom Browser/User-Agent bestimmt und ist vom Autor nicht änderbar (ein nativ vom Browser gerendertes Kontrollkästchen in seiner Standard-Betriebssystemgröße, zum Beispiel)

Häufige Stellen, an denen dies scheitert

• Kleine reine Symbol-Schaltflächen (Schließen-Schaltflächen, Social-Media-Symbole), deutlich unter 24px, ohne benachbarten Abstand zum Ausgleich
• Dichte Tabellen oder Listen mit kleinen, eng aneinandergedrängten klickbaren Symbolen
• Benutzerdefinierte Kontrollkästchen/Radiobuttons, kleiner gestylt als ihre nativen Entsprechungen, ohne benachbarten Abstand zum Ausgleich

Die praktische Lösung

Vergrößern Sie den tatsächlichen klickbaren/antippbaren Bereich – dies bedeutet nicht zwangsläufig, dass das visuelle Symbol selbst wachsen muss; Padding um ein kleines visuelles Symbol, das seinen klickbaren Treffbereich auf 24×24px (oder darüber) erweitert, erfüllt das Kriterium, ohne das visuelle Design überhaupt zu ändern:

.icon-button {
  /* Visuelles Symbol kann klein bleiben; Padding erweitert das tatsächliche Trefferziel */
  padding: 8px;
  min-width: 24px;
  min-height: 24px;
}