WCAG 2.5.8 Zielgröße (Minimum)

Das Erfolgskriterium 2.5.8 ist neu in WCAG 2.2. Es macht Buttons und Links leichter treffbar für Menschen mit Zittern oder eingeschränkter Fingerfertigkeit, Menschen mit Kopfmaus oder Mundstab und alle, die ihr Smartphone mit einer Hand bedienen. Kleine, dicht gepackte Ziele führen zu Fehltipps — die falsche Größe, die falsche Farbe, „Entfernen“ statt „+1“. Es gehört zur Konformitätsstufe AA und ist Teil von EN 301 549 (Abschnitt 9.2.5.8). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Das Ziel für Zeigereingaben ist mindestens 24 mal 24 CSS-Pixel groß, außer wenn:

• Abstand: zu kleine Ziele so angeordnet sind, dass sich Kreise mit 24 CSS-Pixeln Durchmesser, die auf dem umgebenden Rechteck jedes Ziels zentriert sind, weder mit einem anderen Ziel noch mit dem Kreis eines anderen zu kleinen Ziels überschneiden;
• Gleichwertig: die Funktion über ein anderes Bedienelement auf derselben Seite erreichbar ist, das das Kriterium erfüllt;
• Inline: das Ziel in einem Satz steht oder seine Größe anderweitig durch die Zeilenhöhe von umgebendem Text begrenzt ist;
• Bedienelement des User Agents: die Größe vom Browser bestimmt und vom Autor nicht verändert wird;
• Wesentlich: eine bestimmte Darstellung des Ziels für die vermittelte Information wesentlich oder gesetzlich vorgeschrieben ist.

Ziele, bei denen ein Wert über die Position innerhalb des Ziels gewählt wird (etwa eine Slider-Schiene), zählen als ein Ziel. Das Ziel ist die klickbare Fläche, nicht nur das sichtbare Icon. Stufe AAA (2.5.5) verlangt 44 × 44 CSS-Pixel.

Typische Fehler in Onlineshops

• Farbfelder von 16–20 px direkt nebeneinander;
• Mengen-Buttons „−“ und „+“ von etwa 20 px neben dem Zahlenfeld;
• ein kleines „ד, um einen Artikel aus dem Mini-Warenkorb zu entfernen oder ein Pop-up zu schließen;
• dicht gepackte Social-Media- und Zahlungs-Icons im Footer;
• Paginierungslinks („1 2 3 …“) mit wenig Innenabstand;
• Karussell-Punkte von wenigen Pixeln ohne Abstand.

So prüfen Sie es

Automatisch: Unser Checker misst Größe und Abstand klickbarer Ziele und markiert solche unter 24 × 24 CSS-Pixeln, die auch den Abstandstest nicht bestehen (target-size-Regel). Die Ausnahmen für gleichwertige Bedienelemente, Inline-Links oder wesentliche Darstellungen kann er nicht immer beurteilen — prüfen Sie markierte Ziele daher manuell.

Manuell: Messen Sie kleine Bedienelemente — Farbfelder, Mengenzähler, Schließen-Buttons, Icons — mit den Entwicklertools des Browsers. Ist eines kleiner als 24 × 24, prüfen Sie den Abstand, indem Sie sich einen 24-px-Kreis auf seiner Mitte vorstellen. Testen Sie die Seite auf einem echten Smartphone und tippen Sie die kleinen Bedienelemente mit dem Daumen an.

So beheben Sie es

• Geben Sie Icon-Buttons eine Mindestgröße: min-width: 24px; min-height: 24px (44 px sind für Touch besser).
• Vergrößern Sie den Innenabstand statt des Icons selbst — entscheidend ist die klickbare Fläche.
• Fügen Sie zwischen benachbarten kleinen Zielen wie Farbfeldern und Paginierungslinks einen Abstand ein.
• Vergrößern Sie Karussell-Punkte oder ersetzen Sie sie durch Zurück/Weiter-Buttons.

Verwandte Kriterien

• 2.5.2 Zeigeraufhebung — versehentliches Tippen muss sich abbrechen lassen.
• 2.5.7 Ziehbewegungen — Ziehen braucht eine Alternative mit einem einzelnen Zeiger.
• WCAG-2.2-Checkliste — was in WCAG 2.2 sonst noch neu ist.

Häufige Fragen

Wie groß müssen Ziele nach WCAG 2.2 mindestens sein?

Mindestens 24 mal 24 CSS-Pixel für Ziele von Zeigereingaben auf Stufe AA (2.5.8). Stufe AAA (2.5.5 Zielgröße (Erweitert)) verlangt 44 mal 44 CSS-Pixel.

Darf ein Button kleiner als 24 px sein?

Ja, wenn er genug Abstand hat: Ein auf ihm zentrierter Kreis mit 24 px Durchmesser darf kein anderes Ziel und keinen Kreis eines anderen kleinen Ziels schneiden. Weitere Ausnahmen gelten für ein gleichwertiges größeres Bedienelement auf der Seite, Links im Fließtext, unveränderte Browser-Bedienelemente und wesentliche oder gesetzlich vorgeschriebene Darstellungen.

Müssen Textlinks in einem Absatz 24 px groß sein?

Nein. Ziele in einem Satz oder solche, deren Größe durch die Zeilenhöhe des umgebenden Textes begrenzt ist, sind durch die Inline-Ausnahme befreit.

Ist das Ziel das sichtbare Icon oder die klickbare Fläche?

Die klickbare Fläche. Ein 16-px-Icon in einem 24 × 24 px großen Button mit Innenabstand erfüllt die Größenanforderung.