Tap-Ziele auf Mobil: Mindestgröße nach WCAG 2.5.8 richtig umsetzen
Zu kleine Buttons und Links lassen sich auf dem Smartphone schwer treffen. So prüfen und beheben Sie Tap-Ziele unter 24×24 CSS-Pixel.
Inhaltsverzeichnis
Ein Link oder Button, der auf dem Desktop mit der Maus präzise treffbar ist, kann auf dem Smartphone zur Fehlerquelle werden, wenn er zu klein oder zu dicht neben anderen Elementen platziert ist. EverAudit prüft dafür jedes interaktive Element gegen die Mindestgröße von 24×24 CSS-Pixel und meldet Unterschreitungen als tap-target-size.
Was ist das Problem#
Finger sind ungenauer als ein Mauszeiger. Was am Bildschirm optisch klein und elegant wirkt — ein schmales Icon, ein knapper "×"-Button zum Schließen eines Overlays, dicht gepackte Social-Media-Icons in der Fußzeile — wird auf dem Touchscreen schnell zum Problem. Ist die tatsächlich klickbare Fläche kleiner als etwa 24×24 CSS-Pixel oder liegen mehrere solcher Ziele ohne ausreichenden Abstand nebeneinander, tippen Besucher regelmäßig daneben oder lösen versehentlich das falsche Element aus.
Besonders häufig betroffen sind Icon-only-Buttons ohne sichtbaren Text, eng gesetzte Navigationspunkte, Pagination-Links mit einzelnen Ziffern und Formularsteuerelemente wie kleine Checkboxen oder Radiobuttons ohne vergrößerten Klickbereich.
Warum prüft EverAudit das#
EverAudit misst bei jedem geprüften Viewport die tatsächliche Bounding-Box jedes interaktiven Elements — Buttons, Links, Formularfelder — und vergleicht sie mit der WCAG-Mindestgröße. Die Prüfung erfasst dabei die reale klickbare Fläche inklusive Padding, nicht nur die sichtbare Icon- oder Textgröße, da genau diese Fläche darüber entscheidet, ob ein Tipp trifft oder daneben geht.
Welche Auswirkung hat es#
Nutzer: Zu kleine Tap-Ziele sind eine der häufigsten Ursachen für Frustration auf Mobilgeräten. Besucher brauchen mehrere Versuche, um ein Element zu treffen, lösen versehentlich die falsche Aktion aus oder geben ganz auf. Bei geschäftskritischen Elementen — dem "In den Warenkorb"-Button, dem Absenden eines Kontaktformulars, einem Navigationslink — führt das direkt zu abgebrochenen Vorgängen.
SEO: Google bewertet die mobile Nutzererfahrung als Teil des Rankings. Ein Layout, das auf dem Smartphone schwer bedienbar ist, wirkt sich indirekt auf die Sichtbarkeit aus, etwa über höhere Absprungraten und kürzere Verweildauer.
Barrierefreiheit: Die Mindestgröße für Tap-Ziele ist in WCAG 2.5.8 ("Zielgröße Minimum") als Erfolgskriterium der Stufe AA verankert. Für Websites, die dem Barrierefreiheitsstärkungsgesetz (BFSG) unterliegen, gehört eine ausreichende Zielgröße damit zu den technischen Grundanforderungen an barrierefreie Bedienbarkeit.
Wie beheben#
Der zuverlässigste Fix ist, die klickbare Fläche per Padding zu vergrößern, ohne das sichtbare Element selbst zu verändern:
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
padding: 8px; /* vergrößert die Trefferfläche um das Icon herum */
}Bei eng stehenden Navigationspunkten oder Pagination-Links hilft zusätzlicher horizontaler Abstand zwischen den Elementen:
.pagination a {
padding: 10px 14px;
margin: 0 2px;
}Bei Formularsteuerelementen wie Checkboxen und Radiobuttons lässt sich die Trefferfläche vergrößern, indem das zugehörige <label> als klickbarer Container fungiert und selbst ausreichend Padding erhält, statt nur das kleine native Eingabeelement anklickbar zu lassen.
Prüfen Sie nach jeder Anpassung mit den Browser-Entwicklertools (Element inspizieren → Box-Model), ob die tatsächliche Bounding-Box inklusive Padding mindestens 24×24 CSS-Pixel erreicht — und testen Sie das Ergebnis auf einem echten Smartphone oder in der mobilen Emulation, da Mausklicks am Desktop kleinere Ziele oft unbemerkt lassen.
Dieser Fix ist unabhängig vom eingesetzten CMS oder Framework: Ob klassisches HTML/CSS, ein Component-Framework wie React oder ein Page-Builder — die zugrunde liegende CSS-Regel für Padding und Mindestgröße funktioniert überall gleich.
Fazit#
Zu kleine Tap-Ziele sind unsichtbar am Desktop und sehr spürbar auf dem Smartphone — genau deshalb werden sie häufig übersehen. Mit gezieltem Padding lassen sie sich in der Regel beheben, ohne das visuelle Design zu verändern, und die mobile Bedienbarkeit Ihrer Seite verbessert sich unmittelbar.
Häufige Fragen
Wie groß muss ein Tap-Ziel auf dem Smartphone mindestens sein?
Nach WCAG 2.5.8 (Zielgröße Minimum) sollten interaktive Elemente wie Buttons und Links mindestens 24×24 CSS-Pixel groß sein. Das entspricht ungefähr der Fläche, die ein Finger auf einem Touchscreen zuverlässig treffen kann, ohne benachbarte Elemente auszulösen.
Was zählt als Tap-Ziel im Sinne dieser Prüfung?
Jedes klickbare oder antippbare Element zählt dazu — Buttons, Links, Formularfelder, Icon-Schaltflächen und Navigationselemente. Reiner Fließtext ohne Interaktion ist nicht betroffen, wohl aber kleine Icons wie Schließen-Kreuze oder Social-Media-Symbole.
Muss ich das sichtbare Icon vergrößern, um die Vorgabe zu erfüllen?
Nein — meist reicht es, die klickbare Fläche per Padding zu vergrößern, während das sichtbare Icon oder der Text optisch gleich groß bleibt. So bleibt das Design unverändert, aber die Trefferfläche wächst auf die geforderte Mindestgröße.
Gibt es Ausnahmen von der 24×24-Pixel-Regel?
Ja — WCAG 2.5.8 erlaubt kleinere Ziele, wenn ausreichend Abstand zu benachbarten interaktiven Elementen besteht, wenn eine gleichwertige größere Alternative an anderer Stelle verfügbar ist, oder wenn die Größe durch den Fließtext-Kontext (Inline-Links im Satz) vorgegeben ist.
EverAudit Redaktion
Fachredaktion für Web-Qualität, Barrierefreiheit und DSGVO. Wir prüfen jeden Ratgeber gegen die Kriterien unserer Audit-Engine.