Die Touch-Zielgröße ist die Fläche, auf der ein Bedienelement einen Fingertipp annimmt. Sie hat mit der sichtbaren Größe nichts zu tun: Ein Icon von 16 Pixeln kann eine Trefferfläche von 48 Pixeln haben. Die Regelwerke von W3C, Apple und Google nennen dafür Mindestmaße, die sich unterscheiden.
- Touch-Zielgröße
Die Fläche, auf der ein Bedienelement einen Fingertipp annimmt, unabhängig davon, wie groß es aussieht.
Beispiel: „Die Icons in der Fußzeile sehen klein aus, ihre Touch-Zielgröße liegt aber bei 44 Pixeln.“Auch: Touch Target Size, Trefferfläche, Hit Area. Gemessen wird das umschließende Rechteck des klickbaren Elements.
Abgrenzung: Der Eintrag Touch Gesten nennt Erfolgskriterium 2.5.8 nur im Überblick. Hier stehen die Maße selbst, ihre Ausnahmen und die Umsetzung im CSS.
Drei Regelwerke, drei Zahlen
Die Maße kommen aus unterschiedlichen Quellen und meinen leicht unterschiedliche Einheiten.
Regelwerk | Mindestmaß | Verbindlichkeit |
|---|---|---|
WCAG 2.2, Erfolgskriterium 2.5.8 Target Size (Minimum) | 24 × 24 CSS-Pixel | Stufe AA |
WCAG 2.2, Erfolgskriterium 2.5.5 Target Size (Enhanced) | 44 × 44 CSS-Pixel | Stufe AAA |
Apple Human Interface Guidelines | 44 × 44 Punkt | Empfehlung |
Material Design | 48 × 48 dp | Empfehlung |
Für die Praxis heißt das: 24 Pixel sind die Grenze, unter der eine Website Stufe AA verletzt. Als Zielwert nehmen wir 44 Pixel, weil dieselbe Zahl in der AAA-Stufe und bei Apple steht und ein Daumen ungenauer trifft als ein Mauszeiger.
Die Ausnahmen entscheiden über den Prüfbericht
Erfolgskriterium 2.5.8 kennt fünf Ausnahmen, und eine davon greift im Webdesign ständig. Die Abstandsausnahme erlaubt kleinere Flächen, solange ein Kreis mit 24 Pixeln Durchmesser um die Mitte jedes Ziels kein anderes Ziel und keinen seiner Kreise schneidet. Ein Symbol von 20 Pixeln bleibt also zulässig, wenn ringsum genug Luft ist; sitzt ein zweites daneben, fällt die Ausnahme weg.
Die übrigen vier betreffen gleichwertige Alternativen auf derselben Seite, Ziele im laufenden Text, Darstellungen des Browsers selbst und Fälle, in denen die Größe inhaltlich gefordert ist. Inline-Links im Fließtext sind damit ausgenommen.
Trefferfläche vergrößern, ohne das Layout anzufassen
Der häufigste Fall in unseren Projekten sind Icon-Buttons, deren Fläche zu klein ist. Padding hilft, verschiebt aber die Nachbarn. Ein Pseudo-Element legt die Fläche stattdessen über das Icon hinaus, ohne im Layout Platz zu beanspruchen.
.icon-button {
position: relative;
}
.icon-button::after {
content: "";
position: absolute;
inset: -10px; /* 24px Icon plus 2 × 10px = 44px Trefferfläche */
}Zwei Dinge sind zu prüfen. Die unsichtbare Fläche darf sich nicht mit der des Nachbarn überlappen, sonst tippt der Besucher auf das falsche Element. Und ein später folgendes Element mit eigener Stapelebene legt sich darüber und fängt die Tipps ab.