Dokunma hedefleri çok küçük: mobilde butonlar ve linkler ne kadar büyük olmalı?

Telefonda bir menü bağlantısına dokunmaya çalışıyorsunuz ama yanındaki bağlantı açılıyor. Alt bilgideki sosyal medya ikonları o kadar küçük ve sık ki doğru olanı seçmek neredeyse imkânsız.

KTYAPTECH SEO Analyzer bu sorunu RENDER-SMALL-TAP-TARGETS-001 koduyla, “Dokunma hedefleri çok küçük” başlığı altında ve orta önem derecesiyle raporlar (Mobil). Bu rehber, bulgunun ne anlama geldiğini, neden önemli olduğunu ve adım adım nasıl düzeltileceğini anlatıyor.

Küçük dokunma hedefleri nedir?

Dokunma hedefi, parmakla dokunulan bağlantı, buton veya form öğesidir. SEO Analyzer sayfayı telefon genişliğinde render edip önerilen boyutun altında kalan veya birbirine çok yakın hedefleri raporlar.

WCAG 2.2, hedeflerin en az 24×24 CSS pikseli (veya yeterli aralık) olmasını ister; Google'ın ve platformların önerisi ise yaklaşık 48×48 pikseldir.

Neden önemli? SEO ve kullanıcı deneyimine etkisi

Küçük ve sık hedefler yanlış dokunmalara, kullanıcı hayal kırıklığına ve formların yarım bırakılmasına yol açar. Motor becerileri kısıtlı kullanıcılar için site kullanılamaz hale gelebilir.

Sorun nasıl tespit edilir?

• SEO Analyzer raporundaki “Dokunma hedefleri çok küçük” bulgusunda öğeleri görün.
• Lighthouse'ta dokunma hedefleri ve hedef boyutu denetimlerine bakın.
• Sayfayı gerçek bir telefonda başparmakla kullanmayı deneyin.

Adım adım çözüm

1. Küçük hedefleri listeleyin; önce menü, butonlar ve form öğelerinden başlayın.
2. Görsel boyutu büyütmek istemiyorsanız dolgu (padding) ile dokunma alanını genişletin.
3. Hedefler arasına yeterli boşluk bırakın.
4. Form öğelerini <label> ile ilişkilendirin; etikete dokunmak da öğeyi seçer.
5. Dikey bağlantı listelerinde satır yüksekliğini artırın.

Görseli büyütmeden alanı büyütmek

Küçük bir ikonun etrafına dolgu eklemek, görünümü değiştirmeden dokunma alanını büyütür. min-width ve min-height değerleriyle alanın asgari boyutunu garanti edebilirsiniz.

Sık yapılan hatalar

• Dokunma alanını büyütmek için görsel tasarımı tamamen değiştirmek.
• Etiketsiz form öğeleri kullanmak.

Düzeltmeyi nasıl doğrularsınız?

• Lighthouse denetimlerini yeniden çalıştırın.
• SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

Metin içindeki bağlantılar da büyük olmalı mı?

Paragraf içindeki bağlantılar için WCAG istisna tanır; ancak art arda sıralanan bağlantılarda yeterli aralık önemlidir.

44 mü, 48 piksel mi?

İkisi de yaygın önerilerdir; önemli olan en az 24 pikselin altına düşmemek ve mümkün olduğunca rahat bir alan sağlamaktır.

Özet

Mobilde dokunma hedefleri rahatça dokunulabilecek büyüklükte ve aralıkta olmalıdır. Dolgu ile dokunma alanını genişletin, form öğelerini etiketlerle ilişkilendirin ve sık bağlantıların arasını açın.

Sitenizde bu ve benzeri sorunların olup olmadığını görmek için KTYAPTECH Ücretsiz SEO Analizi aracını kullanabilirsiniz: rapordaki her bulgunun yanında, sorunu anlatan çözüm rehberine giden bir bağlantı bulunur.