Barrierefreiheit · Prüfpunkt
Wie groß muss eine Schaltfläche auf einer Website mindestens sein?
Eine Schaltfläche muss mindestens 24 mal 24 Bildpunkte groß sein — so verlangt es das mit WCAG 2.2 neu eingeführte Kriterium 2.5.8 „Zielgröße (Minimum)“. Kleinere Ziele verfehlen Menschen mit zitternden Händen oder breiten Fingern regelmäßig, besonders am Telefon. Ausgenommen sind Links im Fließtext und kleine Ziele mit ausreichend freiem Abstand zu den Nachbarzielen.
24 mal 24 Bildpunkte: die Untergrenze fürs Treffen
Ein Fingertipp ist ungenauer als ein Mausklick, und bei Zittern oder eingeschränkter Feinmotorik wächst die Streuung weiter. Ist das Ziel zu klein, landet der Tipp daneben — im besten Fall passiert nichts, im schlechteren öffnet sich der Nachbarlink. Typische Problemzonen sind Symbolleisten mit dicht gedrängten Icons, winzige Schließen-Kreuze an Hinweisfenstern und Datumsfelder in Kalendern. Die 24 mal 24 Bildpunkte sind dabei die Untergrenze, kein Komfortmaß. Zwei Ausnahmen sieht das Kriterium vor: Links im Fließtext dürfen der Textgröße folgen, und kleine Ziele sind zulässig, wenn rundherum genug freier Abstand bleibt, sodass kein Nachbarziel versehentlich getroffen wird.
So misst der Prüfservice die Zielgrößen
Der Prüfservice vermisst die sichtbaren Bedienelemente der Seite — Links, Schaltflächen, Formularfelder — in ihrer tatsächlich dargestellten Größe, bis zu 300 Ziele je Seite. Auf jedes zu kleine Ziel wendet er die Ausnahmen des Kriteriums an: Liegt es als Link im Fließtext, zählt es nicht; bleibt um seine Mitte ein ausreichender Kreis frei von Nachbarzielen, zählt es ebenfalls nicht. Bleibt danach mindestens ein Ziel unter 24 mal 24 Bildpunkten übrig, gilt das Kriterium als verstoßen — der Bericht nennt die Anzahl, das erste betroffene Element und legt ein Beleg-Bildschirmfoto bei. Die Größe der Stichprobe steht als Messnotiz im Bericht.
So gehen Sie es an
- Testen Sie Ihre Website am Telefon mit dem Daumen: Treffen Sie jedes Symbol im Kopfbereich beim ersten Versuch?
- Vergrößern Sie die Tippfläche kleiner Symbole über einen unsichtbaren Innenabstand — das Symbol darf klein aussehen, die Fläche muss groß sein.
- Prüfen Sie Schließen-Kreuze von Hinweisfenstern und Cookie-Bannern — sie gehören zu den häufigsten zu kleinen Zielen.
- Lassen Sie zwischen benachbarten kleinen Zielen ausreichend freien Abstand, wenn eine Vergrößerung gestalterisch nicht möglich ist.
Häufige Fragen
Welche Mindestgröße verlangen die WCAG für Schaltflächen?
Das Kriterium 2.5.8 aus WCAG 2.2 verlangt mindestens 24 mal 24 Bildpunkte für Bedienflächen — Schaltflächen, verlinkte Symbole, Formular-Elemente. Zwei Ausnahmen gibt es: Links im Fließtext dürfen der Textgröße folgen, und kleinere Ziele sind zulässig, wenn ausreichend freier Abstand zu den Nachbarzielen bleibt. Die Angabe meint die tatsächlich tippbare Fläche, nicht nur das sichtbare Symbol.
Warum sind zu kleine Schaltflächen ein Barriere-Problem?
Weil Treffen Präzision verlangt: Ein Fingertipp streut stärker als ein Mausklick, bei Zittern, Gelenkerkrankungen oder im fahrenden Bus noch mehr. Zu kleine Ziele werden verfehlt oder es wird der Nachbarlink getroffen — aus „Warenkorb öffnen“ wird „Konto abmelden“. Ausreichend große Flächen machen die Bedienung für alle sicherer, nicht nur für Menschen mit Einschränkungen.
Wie kann ein kleines Symbol trotzdem die Mindestgröße erfüllen?
Über die Tippfläche: Das sichtbare Symbol darf klein bleiben, wenn die anklickbare Fläche darum herum — per unsichtbarem Innenabstand — mindestens 24 mal 24 Bildpunkte misst. Alternativ genügt nach dem Kriterium ausreichender freier Abstand zu den Nachbarzielen, sodass ein danebengehender Tipp ins Leere geht statt auf den falschen Link.
Weiter im Prüfbereich Barrierefreiheit
- Warum muss eine Website ihre Sprache angeben?Jede Website muss ihre Sprache im Quelltext angeben, damit Vorleseprogramme richtig aussprechen. So prüfen wir WCAG-Kriterium 3.1.1 automatisch.
- Wann müssen fremdsprachige Wörter auf einer Website gekennzeichnet werden?Fremdsprachige Sätze und Zitate brauchen eine eigene Sprachangabe, damit Vorleseprogramme umschalten. So prüfen wir WCAG-Kriterium 3.1.2.
- Warum muss eine Website beim Ansteuern per Tastatur ruhig bleiben?Das bloße Ansteuern eines Elements darf noch nichts auslösen. Was WCAG-Kriterium 3.2.1 verlangt und wie wir es mit einer echten Tab-Wanderung messen.
- Was ist ein unerwarteter Kontextwechsel bei der Eingabe?Ein Kontextwechsel bei Eingabe: Die Seite wechselt schon beim Tippen oder Auswählen, ohne Absenden. So prüfen wir WCAG-Kriterium 3.2.2 mit einer Eingabe-Probe.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit — dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.