Stufe AA · WCAG 2.2

2.5.8 Zielgröße (Minimum)

Ziele für Zeigereingaben sind mindestens 24 × 24 CSS-Pixel groß — oder haben genug Abstand ringsum.

Teilweise automatisch Manche Verstöße sind erkennbar, der Rest braucht Bewertung.

Woran es in der Praxis scheitert

Eine Reihe 16px großer Social-Icons im Footer mit vier Pixeln Abstand. Ein Schließen-Button, den man auf dem Handy nicht trifft.

Wie man es repariert

Vergrößern Sie die Trefferfläche über Padding statt das Icon — das Ziel darf größer sein als das, was man sieht.

Auf einen Blick

Stufe: Stufe AA — die Stufe, die EN 301 549 verlangt, und damit die, an der BFSG und EAA gemessen werden.
Prinzip: Bedienbar
Richtlinie: 2.5 Eingabemodalitäten
Neu in: WCAG 2.2
EN 301 549: In EN 301 549 v3.2.1 nicht referenziert
Englische Bezeichnung: Target Size (Minimum)
Automatische Prüfung: Teilweise automatisch

Offizielle Definition beim W3C lesen

So prüfen Sie es von Hand

Suchen Sie die kleinen Ziele: Icon-Buttons, Schließen-Buttons, Seitennavigation, Links im Footer und in Filterlisten, Plus und Minus neben einer Menge.
Messen Sie jedes in den Entwicklertools: Ab 24 × 24 CSS-Pixeln ist es erfüllt.
Ein kleineres Ziel besteht nur, wenn ein Kreis mit 24 Pixeln Durchmesser um seine Mitte kein anderes Ziel und keinen Kreis eines anderen kleinen Ziels berührt – die Abstandsausnahme.
Links im Fließtext sind ausgenommen, ebenso Bedienelemente, deren Größe der Browser bestimmt, und Ziele, deren Größe wesentlich ist. Prüfen Sie noch einmal in Handybreite: Ziele schrumpfen mit dem Layout.

Im Code

Nicht erfüllt

/* Icons mit 16 × 16 px, 4 px Abstand */
.social a {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 4px;
}

Erfüllt

/* Das Icon bleibt 16 px, das Ziel wächst auf 24 */
.social a {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px;
}

Teilweise automatisch

Wie weit eine automatische Prüfung kommt

Ein Werkzeug findet hier einen Teil der Verstöße und sieht den Rest nicht. Ein sauberes automatisches Ergebnis heißt: die vorhandenen Prüfungen haben nichts gefunden — nicht, dass das Kriterium erfüllt ist. Genau diese Lücke lässt einen grünen Scan wie eine barrierefreie Website aussehen, und genau dort arbeiten der Tastatur-Agent, die Agenten in Entwicklung und ein Mensch weiter.

Wird automatisch aus der gerenderten Geometrie gemessen, samt Abstandsausnahme — und auf einer Seite je Template auch in Menüs, die sich bei Hover oder Fokus öffnen und beim Laden geschlossen sind.

Regeln, die dieses Kriterium prüfen

target-sizeKlickfläche zu klein

Die Regel-IDs stammen aus axe-core (Version 4.14.0), der Open-Source-Engine, auf der unser Scan läuft, und von unserem Tastatur-Agenten – so heißen sie auch in einem Bericht oder im CI-Log. Eine unterstrichene ID hat hier eine eigene Seite.

Alle Regeln erklärt

Weiterlesen

Zielgröße
Klick- und Tippflächen müssen mindestens 24 × 24 CSS-Pixel groß sein oder genug Abstand zu anderen Zielen haben (WCAG 2.5.8, Stufe AA, neu in 2.2).
target-size
Die axe-Regel target-size meldet Buttons und Links unter 24 × 24 px ohne genug Abstand (WCAG 2.5.8). Ursachen und Lösung mit Codebeispiel.

Finden Sie heraus, welche Kriterien Ihre Website verfehlt

Wir prüfen bis zu 100 Seiten gegen WCAG 2.2 AA, schicken den Tastatur-Agenten durch die Seite, die Sie benennen, und senden Ihnen den Bericht per E-Mail — einmal, kostenlos, ohne Bedingungen.

Kostenlosen Scan anfordern So testet der Agent

Bericht innerhalb eines Werktags.