Touch-Zielflächen und Zeigertypen: Bedienelemente für Finger und Maus dimensionieren

Worum es geht

Eine Zeiger-Zielfläche ist der Bereich, der auf einen Klick oder Tap reagiert. Das WCAG-2.2-Erfolgskriterium 2.5.8 Target Size (Minimum), Stufe AA, verlangt für diese Zielfläche mindestens 24 mal 24 CSS-Pixel, mit den genannten Ausnahmen: Spacing (eine zu kleine Zielfläche ist zulässig, wenn ein auf ihr zentrierter 24-Pixel-Kreis keine andere Zielfläche oder einen solchen Kreis schneidet), Equivalent (dieselbe Funktion ist über eine Zielfläche auf der Seite erreichbar, die die Grösse erfüllt), Inline (Zielflächen innerhalb von Sätzen oder begrenzt durch die Zeilenhöhe des umgebenden Texts), User Agent Control (standardmässig gerenderte, vom Autor nicht gestaltete Bedienelemente) und Essential. Das ältere Kriterium 2.5.5 Target Size (Enhanced), Stufe AAA, verlangt 44 mal 44 CSS-Pixel mit einer ähnlichen Ausnahmeliste.

CSS kann erkennen, womit gezeigt wird. Das Media Feature pointer meldet die Genauigkeit der primären Eingabe: none, coarse (eingeschränkte Genauigkeit, etwa ein Finger auf einem Touchscreen) oder fine (ein genaues Gerät wie eine Maus); any-pointer erfasst alle verfügbaren Eingaben. Das begleitende Feature hover meldet, ob die primäre Eingabe bequem hovern kann.

Warum es wichtig ist

Finger sind breit und ungenau, Tremor und Sehschwäche erschweren kleine Zielflächen, und dichte Symbolleisten sind der Ort, an dem Fehltipps passieren. Nur per Hover verfügbare Elemente (Menüs, die bei Mouseover öffnen, Tooltips mit erforderlicher Information) sind auf einem Touchscreen unerreichbar.

So wird es angewendet

• Interaktiven Bedienelementen über min-width/min-height oder Padding eine Mindestbox von 24 mal 24 CSS-Pixeln geben, bei primären Aktionen höher zielen; reine Icon-Buttons sind die üblichen Übeltäter.
• Wo Zielflächen in einer Reihe sitzen (Paginierung, Symbolleisten-Icons), diese entweder vergrössern oder so mit Abstand versehen, dass sich die 24-Pixel-Kreise nicht überlappen, mit gap statt Margin auf dem letzten Element.
• Unter @media (pointer: coarse) das Padding von Bedienelementen, Checkboxen und Listenzeilen erhöhen und die Schieberegler-Griffe verbreitern; unter (pointer: fine) ist ein dichteres Layout akzeptabel.
• Sich nie allein auf Hover verlassen: Alles, was bei Hover erscheint, muss auch bei Fokus und bei Tap erscheinen, und @media (hover: none) kann ein Hover-Menü in eines umschalten, das per Klick öffnet.
• Die gesamte Zeile oder Karte zur Zielfläche machen, wenn das der naheliegende Tap-Bereich ist, ohne dass verschachtelte Bedienelemente sie überlappen.

Stolpersteine

CSS-Pixel sind keine Gerätepixel; das 24-Pixel-Minimum ist unabhängig von der Bildschirmdichte. Die Inline-Ausnahme gilt für Zielflächen innerhalb eines Satzes oder begrenzt durch die Zeilenhöhe des umgebenden Texts, nicht für Icons in einer Symbolleiste oder Liste. Den klickbaren Bereich mit transparentem Padding zu vergrössern, verändert das Layout; ein ::before-Pseudoelement mit negativen Insets vergrössert den Trefferbereich, ohne Nachbarn zu verschieben. Geräte mit sowohl Touch als auch Maus melden nur den primären Zeiger; any-pointer prüfen, wenn beides relevant ist.