- Stufe
- AA
- Seit
- WCAG 2.2
- Einträge
- 82 / 193
2.5.8 Zielgröße (Minimum)
Alles, was man antippt oder anklickt, muss mindestens 24 mal 24 CSS-Pixel groß sein oder genug freien Raum um sich haben, damit niemand versehentlich das benachbarte Bedienelement trifft.
/ Was es verlangt
Ein Ziel ist die Fläche, die auf einen Klick oder ein Antippen reagiert. Das Kriterium setzt dafür eine Untergrenze: 24 mal 24 CSS-Pixel, gemessen an der Fläche, die reagiert, und nicht am Symbol, das darin gezeichnet ist. Geschützt werden Menschen, die nicht genau zeigen können: Personen mit Tremor oder eingeschränkter Handbeweglichkeit, Menschen mit Kopfzeiger und alle, die einen kleinen Touchscreen bedienen. Sind Ziele winzig und dicht gedrängt, öffnen diese Nutzer den falschen Link oder löschen die falsche Zeile.
Ein kleineres Ziel besteht trotzdem in fünf Fällen, die das Kriterium nennt. Abstand: Ein Kreis mit 24 CSS-Pixeln Durchmesser, auf dem Ziel zentriert, berührt kein anderes Ziel und keinen solchen Kreis um ein anderes zu kleines Ziel. Gleichwertig: Ein anderes Bedienelement auf derselben Seite leistet dasselbe und hat die Größe. Im Fließtext: Das Ziel steht in einem Satz, oder die Zeilenhöhe des umgebenden Textes begrenzt es. Der Browser zeichnet das Bedienelement, und der Autor hat es nicht verändert. Eine bestimmte Darstellung ist wesentlich oder gesetzlich vorgeschrieben.
Dieses Kriterium ist neu in WCAG 2.2, eine Prüfung nach WCAG 2.1 enthält es also nicht.
/ Woran Seiten scheitern
- Eine Werkzeugleiste besteht aus 16 Pixel breiten Symbolschaltflächen, die ohne Zwischenraum aneinanderstoßen.
- Die Seitenzahlen einer Blätternavigation sind schmale Links im Abstand weniger Pixel.
- Die Schließen-Schaltfläche eines Dialogs ist ein kleines Kreuz, das in der Ecke an ein anderes Bedienelement gedrückt ist.
- Eine Reihe von Social-Media-Symbolen im Fußbereich ist 20 Pixel hoch und hat Abstände von 4 Pixeln.
- Das Kreuz zum Entfernen eines Filters ist wenige Pixel breit und liegt direkt neben dem Link des Filters selbst.
/ So prüfen Sie es selbst
- Stellen Sie den Browserzoom auf 100 Prozent und beginnen Sie mit dem Kleinen: Symbolschaltflächen, Blätternavigation, Schließen-Kreuze, Symbole im Fußbereich und selbst gebaute Kontrollkästchen.
- Untersuchen Sie jedes davon in den Entwicklerwerkzeugen. Die für das Element angezeigte Größe einschließlich Padding ist das Ziel, und Breite wie Höhe müssen 24 CSS-Pixel erreichen.
- Messen Sie bei allem, was kleiner ist, den Abstand zu den Nachbarn. Ein Kreis mit 24 Pixeln Durchmesser um die Mitte des Ziels darf kein anderes Ziel erreichen und auch nicht den gleichen Kreis um ein anderes kleines Ziel.
- Prüfen Sie, ob ein verbleibendes kleines Ziel unter eine der genannten Ausnahmen fällt, etwa als Link im Fließtext oder als natives Kontrollkästchen, das niemand umgestaltet hat.
- Öffnen Sie die Seite auf einem Telefon und notieren Sie, wo der Daumen das falsche Bedienelement trifft.
/ So beheben Sie es
- Setzen Sie min-width: 24px und min-height: 24px auf das Element button oder a selbst und nicht nur auf das svg darin.
- Vergrößern Sie die klickbare Fläche mit padding und belassen Sie das Symbol in der Größe, in der es gezeichnet ist.
- Wo das Design nicht wachsen kann, trennen Sie die Ziele mit margin oder mit gap in einem Flex- oder Grid-Container, bis sich die Kreise von 24 Pixeln nicht mehr berühren.
- Geben Sie einem Link, der nur ein Symbol enthält, display: inline-flex, damit Breite, Höhe und Padding auf ihn wirken.
- Ersetzen Sie ein winziges selbst gebautes Kontrollkästchen oder Optionsfeld durch das native input-Element, oder geben Sie dem eigenen 24 mal 24 CSS-Pixel.
/ Was unser Scanner prüft
Die Prüfung target-too-small misst die gerenderte Größe von Links, Schaltflächen, input- und select-Elementen sowie Elementen mit der Rolle button, link, checkbox oder switch. Sie überspringt Fließtext-Links in Absatz, Listenpunkt oder Tabellenzelle und meldet ein Ziel unter 24 mal 24 Pixeln nur, wenn der 24-Pixel-Kreis darum ein anderes Ziel erreicht. Sie sieht ein Desktop-Layout und beurteilt die Ausnahmen gleichwertig und wesentlich nicht.
/ Wer es verletzt, nach unseren eigenen Messungen
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Wie groß muss ein Ziel nach WCAG 2.2 mindestens sein?
Das Erfolgskriterium 2.5.8 legt 24 mal 24 CSS-Pixel auf Stufe AA fest. Ein Ziel darf kleiner sein, wenn es genug freien Raum um sich hat, wenn es ein Link in einem Satz ist, wenn ein anderes Bedienelement auf der Seite dasselbe leistet, wenn der Browser es unverändert zeichnet oder wenn seine Darstellung wesentlich oder gesetzlich vorgeschrieben ist.
Worin unterscheiden sich 2.5.8 und 2.5.5 zur Zielgröße?
Es sind zwei Kriterien auf zwei Stufen. 2.5.8 Zielgröße (Minimum) gehört zu Stufe AA und verlangt 24 mal 24 CSS-Pixel, mit einer Ausnahme für den Abstand. 2.5.5 gehört zu Stufe AAA und verlangt 44 mal 44 CSS-Pixel. Für die Konformität auf Stufe AA ist nur das erste der beiden erforderlich.
Müssen Links in einem Absatz 24 Pixel hoch sein?
Nein. Das Kriterium nimmt ein Ziel aus, das in einem Satz steht oder dessen Größe durch die Zeilenhöhe des umgebenden Textes begrenzt ist. Ein Link mitten im Absatz darf die Höhe seiner Zeile behalten. Die Ausnahme gilt nicht für eine Reihe von Schaltflächen oder ein Menü, in dem jeder Eintrag ein eigenes, für sich stehendes Ziel ist.