Dokunma hedefleri uygun boyutta değil

Dokunma hedefleri, bir web sayfasında dokunmatik cihazların kullanıcılarının etkileşim kurabileceği alanlardır. Düğmelerin, bağlantıların ve form öğelerinin dokunma hedefleri vardır.

Birçok arama motoru, sayfaları mobil uyumlu olup olmadıklarına göre sıralar. Dokunma hedeflerinin yeterince büyük ve birbirinden yeterince uzakta olduğundan emin olmak, sayfanızı daha mobil uyumlu ve erişilebilir hale getirir.

Lighthouse dokunma hedefleri denetimi nasıl başarısız oluyor?

Lighthouse, aşağıdaki koşulların ikisini de karşılayan dokunma hedeflerine sahip sayfaları işaretler:

  • Hedef 48 piksele 48 pikselden küçük.
  • Hedefin merkezinden 48 piksel uzaklıktaki hedef alanın en az% 25'i başka bir hedefle çakışıyor.
Uygunsuz boyutlu dokunma hedeflerini gösteren Lighthouse denetimi

Denetim başarısız olduğunda Lighthouse, sonuçları üç sütunlu bir tabloda listeler:

Dokunma Hedefi Uygunsuz boyuta sahip dokunma hedefi.
Boyut Hedefin sınırlayıcı dikdörtgeninin piksel cinsinden boyutu.
Çakışan Hedef Varsa çok yakın olan diğer dokunma hedefleri.

Dokunma hedeflerinizi düzeltme

1. Seçenek: Çok küçük olan dokunma hedeflerinin boyutunu artırın. 48 piksel x 48 piksel boyutlarındaki dokunma hedefleri hiçbir zaman denetimde başarısız olur. Daha büyük görünmemesi gereken öğeleriniz (örneğin, simgeler) varsa padding özelliğini artırmayı deneyin:

Uygun boyutta dokunma hedefleri
Bir öğenin görünümünü değiştirmeden dokunma hedeflerini büyütmek için padding öğesini kullanın.

2. Seçenek: margin gibi özellikleri kullanarak birbirine çok yakın olan dokunma hedefleri arasındaki boşluğu artırın. Dokunma hedefleri arasında 8 piksel iyi bir başlangıç noktasıdır, ancak özellikle çok küçük hedeflerde denetimi geçmek için her zaman yeterli boşluk olmaz.

Kaynaklar