Touch-Elemente bezeichnen die Bereiche einer Website, mit denen User auf Geräten mit Touch-Funktionalität (Smartphone oder Tablet) interagieren können. Dazu gehören z.B. Verlinkungen, Eingabefelder oder Bestätigungsboxen. Es ist wichtig, dass diese Touch-Elemente ausreichend groß und abgegrenzt voneinander erscheinen, um eine benutzerfreundliche und leicht zugängliche Website sicherzustellen.

Dieser Report zeigt Dir auf, auf welchen Seiten Deiner Website die Touch-Elemente zu eng beieinander liegen. Diese Seiten beinhalten Elemente, die entweder kleiner als 48x48 px sind oder weniger als 8px auseinander liegen.

Du kannst fehlerhafte Touch-Elemente fixen, indem Du die CSS-Eigenschaft "padding" auf mindestens 48dp sowie die Abstände zwischen einzelnen Touch-Elementen erhöhst. Es sollten mindestens 8px Abstand zwischen den Elementen liegen. Du kannst hier die CSS-Eigenschaft "margin" nutzen, um die Abstände entsprechend zu vergrößern. Solltest Du selbst nicht dazu in der Lage sein, das "padding" über Dein CMS zu ändern, starte einen Download der Liste und teile diese mit einem Web Developer.

Liegen die Touch-Elemente aufgrund einer fehlenden Viewport-Konfiguration zu eng beisammen (im Report unten in der jeweiligen Spalte angegeben), musst Du jeweils meta <meta name="viewport" content="width=device-width, initial-scale=1"> in den Header jeder Seite integrieren.

Die URLs in den Reports sind grundsätzlich auf Basis des OPR (OnPageRank, der die Anzahl der internen Links berücksichtigt) sortiert. Du kannst jedoch jederzeit auch auf Basis von Google Analytics-Daten filtern, um Deine wichtigsten Seiten zu identifizieren und zu priorisieren.

Erfahre mehr in diesem Artikel