Tıklanabilir Öğeler Birbirine Çok Yakın Hatası ve Çözümü

“Tıklanabilir öğeler birbirine çok yakın” hatası, sayfadaki bağlantı ve butonların telefonda parmakla dokunulamayacak kadar küçük veya bitişik olduğunu, bu yüzden kullanıcıların yanlış öğeye dokunabileceğini gösterir. Google’ın önerisi, dokunma hedeflerinin en az 48 × 48 CSS piksel olması ve aralarında yaklaşık 8 piksel boşluk bulunmasıdır. Çözüm; menü ve butonlara yeterli padding ve margin vermek, yan yana dizilmiş küçük bağlantıları ayırmak ve metin içi bağlantılarda satır aralığını artırmaktır.

Tıklanabilir Öğeler Neden Birbirine Yakın Olur?

• Masaüstü için tasarlanmış yatay menünün telefonda aynı şekilde gösterilmesi
• Alt bilgide (footer) yan yana dizilmiş çok sayıda küçük bağlantı
• Küçük yazı boyutu ve dar satır aralığıyla yazılmış metin içi bağlantılar
• Sosyal medya ikonlarının küçük ve bitişik yerleştirilmesi
• Sayfa yakınlaştırılamadığında (viewport’ta user-scalable=no) küçük öğelerin sorun yaratması

Nasıl Düzeltilir?

1. Buton ve menü bağlantılarını büyütün:

   nav a, .buton {
     display: inline-block;
     min-width: 48px;
     min-height: 48px;
     padding: 12px 16px;
     margin: 4px;
   }
   .entry-content { line-height: 1.6; }

2. Mobilde açılır menü kullanın: Çok sayıda menü öğesini hamburger menüde alt alta dizin.
3. Alt bilgi bağlantılarını alt alta dizin veya aralarına boşluk koyun.
4. Yazı boyutunu en az 16 piksel yapın (ayrıntılar: metin okunamayacak kadar küçük) ve satır aralığını artırın; metin içi bağlantılar birbirine yapışmaz.
5. Yakınlaştırmayı engellemeyin: Viewport etiketinde user-scalable=no kullanmayın. Ayrıntılar: viewport meta etiketi.

Butonların doğru HTML yapısı için HTML butona link verme, sayfanın yatay taşma sorunları için içerik ekrandan geniş yazılarına bakabilirsiniz.

Sıkça Sorulan Sorular