Zielgröße 24x24 Pixel: Die neue WCAG-2.2-Regel für Buttons und Links

Ein Icon-Button in der Navigation, das kleine X zum Schließen eines Menüs, drei Social-Media-Symbole im Footer: Auf vielen Betriebs-Websites sind genau diese Elemente zu klein, um sie mit dem Finger oder einer unsicheren Hand zuverlässig zu treffen. Seit der Überarbeitung der Web Content Accessibility Guidelines (WCAG, internationaler Standard für barrierefreie Websites) auf Version 2.2 gibt es dafür eine klare, messbare Regel. Sie heißt Zielgröße (Minimum), Kriterium 2.5.8, und sie lässt sich ohne Fachwissen nachvollziehen.

Was genau steht in der Regel?

WCAG 2.2 wurde am 5. Oktober 2023 vom World Wide Web Consortium (W3C) veröffentlicht und hat gegenüber der Vorgängerversion 2.1 neun neue Erfolgskriterien ergänzt. Eines davon ist 2.5.8 Zielgröße (Minimum), eingestuft auf der mittleren Konformitätsstufe AA – also eine Anforderung, die in der Praxis regelmäßig als Mindeststandard herangezogen wird. Die Regel verlangt: Jede klickbare oder antippbare Fläche – Button, Link, Formularfeld, Icon – muss mindestens 24 mal 24 CSS-Pixel groß sein. CSS-Pixel sind die Maßeinheit, mit der Browser Layouts berechnen; sie unterscheidet sich von der physischen Pixeldichte eines Bildschirms, bleibt aber über Geräte hinweg vergleichbar.

Wer die strengere Variante kennt: Das zusätzliche, freiwillige Kriterium 2.5.5 auf der höchsten Stufe AAA fordert sogar 44 mal 44 Pixel. Für die Praxis auf normalen Betriebs-Websites reicht die Orientierung an den 24 Pixeln aus Kriterium 2.5.8.

Wo auf Ihrer Website sitzen die zu kleinen Flächen?

Die Regel betrifft nicht nur Menschen mit motorischen Einschränkungen oder Zittern in der Hand. Sie betrifft jeden, der unterwegs mit dem Smartphone in Bus oder Bahn eine Website bedient. Typische Problemstellen:

• Icon-Buttons ohne Text, etwa Lupe für die Suche, Warenkorb-Symbol oder das Hamburger-Menü (die drei Striche für die mobile Navigation) – oft nur als kleines Grafikelement ohne zusätzlichen Klickbereich umgesetzt.
• Social-Media-Icons im Footer, häufig dicht nebeneinander und nur so groß wie das sichtbare Symbol selbst.
• Schließen-Symbole (X) in Pop-ups, Cookie-Bannern und aufklappenden mobilen Menüs.
• Checkboxen und Radiobuttons in Formularen, die im Browser oft deutlich kleiner als 24 Pixel dargestellt werden, wenn kein zusätzlicher Klickbereich per Beschriftung oder Abstand ergänzt wurde.
• Listen mit einzelnen Link-Wörtern, etwa kurze Produktnamen oder Jahreszahlen in einer Tabelle, bei denen nur das Wort selbst klickbar ist.

Wann ist eine kleine Fläche trotzdem in Ordnung?

Die Regel kennt Ausnahmen, und die sind für Betriebe wichtig, damit niemand unnötig umbaut. Eine zu kleine Fläche ist zulässig, wenn:

• genug Abstand zu benachbarten klickbaren Elementen besteht (grob: ein gedachter Kreis mit 24 Pixel Durchmesser um jedes Ziel darf sich nicht mit dem Kreis des Nachbarelements überschneiden),
• eine gleichwertige Alternative in ausreichender Größe auf derselben Seite vorhanden ist,
• das Element Teil eines Fließtexts ist, zum Beispiel ein einzelnes verlinktes Wort mitten im Satz,
• die Größe vom Browser selbst vorgegeben wird und nicht gestaltbar ist, oder
• eine bestimmte Darstellung zwingend notwendig ist, etwa bei einer Landkarte mit vielen eng beieinanderliegenden Markierungen.

In der Praxis greift bei Betriebs-Websites am häufigsten die Abstands-Ausnahme: Ein kleines Icon ist unkritisch, wenn links, rechts, oben und unten genug Luft zum nächsten klickbaren Element ist.

Wie messen Sie das auf Ihrer eigenen Website nach?

Sie brauchen dafür keine Entwicklerin und keine Spezial-Software:

1. Browser-Fenster auf 100 Prozent Zoom stellen (die Standardeinstellung).
2. Ein Lineal oder Maßband an den Bildschirm halten und die kritischen Elemente messen – Icon-Buttons, das Hamburger-Menü, die Social-Media-Icons im Footer.
3. Auf einem gewöhnlichen Bildschirm entsprechen 24 CSS-Pixel bei 100 Prozent Zoom ungefähr 0,6 Zentimetern. Das ist eine grobe Orientierung, keine exakte Messung – unterschiedliche Bildschirme und Auflösungen weichen leicht ab, für eine erste Einschätzung reicht es aber.
4. Zusätzlich auf dem Smartphone prüfen: Lässt sich das kleine X im Menü mit dem Daumen treffen, ohne zweimal anzusetzen?

Reicht ein größeres Icon, oder muss das ganze Design geändert werden?

Meistens reicht weniger, als man denkt. Oft genügt es, die klickbare Fläche um ein kleines Symbol herum per Innenabstand (Padding) zu vergrößern, ohne das Symbol selbst optisch zu verändern. Das Icon bleibt klein und unauffällig, der tatsächliche Klickbereich wächst auf 24 mal 24 Pixel. Das ist in der Regel eine kleine, risikoarme Anpassung im Stylesheet der Website – kein Website-Relaunch.

Warum das gerade jetzt relevant wird

Der europäische Standard EN 301 549, auf den sich unter anderem das Barrierefreiheitsstärkungsgesetz (BFSG) bezieht, wird derzeit auf WCAG 2.2 umgestellt. Die Zielgröße ist eines der neuen Kriterien aus dieser Version und damit eines der Themen, die in nächster Zeit stärker in den Fokus rücken – unabhängig davon, für welche Betriebe das Gesetz im Einzelfall greift. Unabhängig von rechtlichen Fristen gilt ohnehin: Ein Button, den Kundinnen und Kunden nicht treffen, kostet Umsatz, nicht nur Konformität.

Beide Maße zählen: Breite und Höhe müssen jeweils mindestens 24 Pixel erreichen. Ein breiter, aber zu flacher Button – etwa eine schmale Menüzeile von 16 Pixeln Höhe – erfüllt die Regel nicht, selbst wenn er optisch lang genug wirkt.

Was Sie konkret prüfen sollten

• Icon-Buttons ohne Beschriftung in Hauptnavigation und Footer messen.
• Mobile Menüs (Hamburger-Icon, Schließen-X) auf dem tatsächlichen Smartphone testen, nicht nur am Desktop-Monitor in der mobilen Vorschau.
• Checkboxen und Radiobuttons in Kontakt- und Bestellformularen prüfen – hier liegt eine der häufigsten Fehlerquellen.
• Bei eng stehenden Icons (zum Beispiel Social-Media-Reihen) den Abstand zwischen den Elementen checken, nicht nur die Icon-Größe selbst.

Diese Prüfung ist mit Lineal und Smartphone in wenigen Minuten pro Seite machbar und braucht keine Design- oder Programmierkenntnisse.

Automatisierter Check als erster Schritt

Unser kostenloser Barriere-Check durchsucht mehrere Seiten Ihrer Website automatisiert nach technisch messbaren Problemen, darunter auch zu kleine Klickflächen. Das ist ein automatisierter Vorab-Check auf Basis anerkannter WCAG-Prüfregeln (axe-core) – er ersetzt keine vollständige Prüfung, denn Dinge wie Tastaturbedienung, der Eindruck mit einem Screenreader oder die Verständlichkeit von Texten kann nur ein Mensch beurteilen. Er zeigt aber schnell, wo auf Ihrer Website ein erster Blick lohnt. Den Check finden Sie hier: kostenlosen Barriere-Check jetzt starten.