Tippziele sind die Bereiche einer Webseite, mit denen Nutzer auf Geräten mit Touchscreen interagieren können. Schaltflächen, Links und Formularelemente haben alle Tippziele.
Viele Suchmaschinen richten das Ranking einer Seite danach aus, wie gut sie für Mobilgeräte optimiert ist. Wenn du dafür sorgst, dass Tippziele groß genug und weit genug voneinander entfernt sind, wird deine Seite für Mobilgeräte optimiert und besser zugänglich.
Fehler bei der Prüfung von Tippzielen mit Lighthouse
Lighthouse kennzeichnet Seiten mit Tippzielen, die die beiden folgenden Bedingungen erfüllen:
- Das Ziel ist kleiner als 48 x 48 Pixel.
- Mindestens 25% der Zielregion innerhalb von 48 Pixeln vom Mittelpunkt des Ziels überlappen sich mit einem anderen Ziel.
Wenn die Prüfung fehlschlägt, listet Lighthouse die Ergebnisse in einer Tabelle mit drei Spalten auf:
| Auf Ziel tippen | Die Schaltfläche oder der Link hat nicht die richtige Größe. |
| Größe | Die Größe des Begrenzungsrahmens des Ziels in Pixeln. |
| Sich überschneidendes Ziel | Gibt an, welche anderen Tippziele zu nah beieinander liegen (falls vorhanden). |
Tippziele korrigieren
Option 1: Vergrößern Sie die zu kleinen Tippziele.
48 x 48 Pixel große Tippziele bestehen die Prüfung nie. Für Elemente, die nicht größer dargestellt werden sollen (z. B. Symbole), erhöhen Sie die Eigenschaft padding:
padding kannst du Tippziele vergrößern, ohne die Darstellung eines Elements zu ändern.
Option 2: Vergrößern Sie den Abstand zwischen Tippzielen, die zu nah beieinander liegen, mit Eigenschaften wie margin. 8 Pixel zwischen Tippzielen sind ein guter Ausgangspunkt, aber der Abstand reicht nicht immer aus, um die Prüfung zu bestehen, insbesondere bei sehr kleinen Zielen.
Ressourcen
- Barrierefreie Tippziele: Weitere Informationen dazu, wie Sie dafür sorgen, dass alle Nutzer auf Ihre Tippziele zugreifen können.
- Prüfung des Quellcodes für die nicht geeignete Größe von Tippzielen