Prüfpunkt 2.5.8Stufe AAZeiger, Gesten und Zielgrößen
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.
Beispiele
Symbol-Links in einer Zeile
.symbol { width: 16px; height: 16px; margin: 0; }.symbol { width: 24px; height: 24px; }
/* oder: 16 px Symbol mit 8 px Abstand zum Nachbarn */Auf Stufe AA sind 24 × 24 CSS-Pixel die Grenze, oder ein Abstand, der einen 24-Pixel-Kreis um das Ziel frei hält. Links im Fließtext sind ausgenommen.
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.
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.
Foto: Gilles Lambert, CC0
.jpg){kind=link}