2.5.8 Zielgröße (Minimum)

Was bedeutet das?

Kleine, eng gesetzte Knöpfe und Links trifft man leicht daneben, besonders auf dem Smartphone oder mit unruhiger Hand. Daher muss jedes Ziel mindestens 24 × 24 CSS-Pixel groß sein. Ist es kleiner, reicht genug Abstand: Ein gedachter Kreis mit 24 Pixeln Durchmesser um die Mitte des Ziels darf kein anderes Ziel und keinen solchen Kreis eines anderen kleinen Ziels berühren.

Ausnahmen gelten für Links im Fließtext, für unveränderte Bedienelemente des Browsers, für Fälle, in denen dieselbe Funktion auf der Seite noch über ein ausreichend großes Ziel erreichbar ist, und wenn eine bestimmte Größe oder Anordnung wesentlich oder rechtlich vorgeschrieben ist, etwa Punkte auf einer Karte.

Wem hilft das?

• Menschen mit Tremor oder anderen motorischen Einschränkungen
• Menschen mit großen Fingern oder eingeschränkter Feinmotorik
• Menschen mit Sehschwäche, die kleine Ziele schlecht erkennen
• Alle, die unterwegs mit einer Hand auf dem Smartphone tippen

Typische Fehler

• Kleine Schließen-Kreuze an Dialogen und Hinweisen mit nur 16 Pixeln Fläche
• Eng nebeneinander stehende Social-Media-Symbole oder Seitenzahlen ohne Abstand
• Plus- und Minus-Knöpfe für die Menge im Warenkorb, die dicht aneinander kleben
• Kontrollkästchen und Optionsfelder, die auf wenige Pixel verkleinert wurden

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.

Prüffrage: Klickziele mindestens 24×24 CSS-Pixel oder mit genug Abstand.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

.schliessen {
  width: 16px;
  height: 16px;
  padding: 0;
}

.schliessen {
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
}
.symbolleiste a {
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
}

Jedes Ziel erreicht nun mindestens 24 × 24 CSS-Pixel; sonst müsste der Abstand so groß sein, dass sich die gedachten 24-Pixel-Kreise nicht überschneiden.

Praxistipps

• Für bequemes Tippen sind 44 × 44 Pixel deutlich angenehmer; das ist die strengere Stufe 2.5.5 (AAA).
• Vergrößern Sie die Klickfläche per padding, ohne das Symbol selbst größer zu machen.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 2.5.8 Target Size (Minimum)