Mobil menü, ziyaretçinin siteyi keşfettiği ilk yerdir; aynı zamanda arama motoru botlarının iç sayfaları bulduğu ana yoldur. Hamburger simgesinin arkasına gizlenen menü yanlış kurgulanırsa hem kullanıcı hem tarayıcı önemli sayfalara ulaşamaz. İyi bir menü, ikisinin ihtiyacını aynı kodla karşılar.
Menü bağlantıları HTML içinde gerçek bağlantı olmalı
Taranabilirliğin ilk koşulu, menü öğelerinin href özelliği olan standart a etiketleriyle yazılmasıdır. Tıklanınca JavaScript ile adres değiştiren div veya span öğeleri botlar için bağlantı sayılmayabilir. Menü içeriği sayfa ilk yüklendiğinde kaynak kodda yer almalı; yalnızca kullanıcı simgeye dokununca sunucudan çekiliyorsa bot bu bağlantıları kaçırabilir. Mobil ve masaüstü sürümde aynı ana bağlantıların bulunması da önemlidir, çünkü arama motorları siteyi öncelikle mobil sürümüyle değerlendirir. Menüyü CSS ile gizlemek sorun değildir, ancak öğeleri DOM’dan tamamen silmek sorun yaratır.
Erişilebilir açılır menü için doğru işaretleme
Menü düğmesi mutlaka button etiketiyle yapılmalıdır; böylece klavye ve ekran okuyucu desteği hazır gelir. Düğmeye aria-expanded değeri verip menü açıldığında true, kapandığında false yapın, aria-controls ile de menü kapsayıcısını işaretleyin. Simge yalnızca görsel ise düğmeye “Menüyü aç” gibi anlaşılır bir erişilebilir ad ekleyin. Menü kapsayıcısı nav etiketiyle sarılmalı ve aria-label ile ayırt edilmelidir. Alt menüler için de aynı mantık geçerlidir: her açılır bölümün kendi düğmesi ve durum bilgisi olmalıdır. Hover’a bağlı alt menüler dokunmatik cihazlarda çalışmaz, bu yüzden açma işlemini dokunmaya veya Enter tuşuna bağlayın.
Dokunma alanı, odak ve kontrast
Dokunulabilir öğeler en az 44×44 piksel olmalı, birbirine yakın bağlantılar arasında yeterli boşluk bırakılmalıdır. Aksi halde yanlış sayfaya geçiş artar ve hemen çıkma oranı yükselir. Klavyeyle gezinen kullanıcı için odak sırası görsel sırayla uyumlu olmalı, odaktaki öğe belirgin bir çerçeveyle gösterilmelidir; outline özelliğini alternatifsiz kaldırmayın. Menü açıldığında odağı menü içine taşıyın, Escape tuşuyla kapatılmasını sağlayın ve kapanınca odağı düğmeye geri verin. Yazı ile arka plan arasındaki kontrast oranı normal metinde en az 4,5:1 olmalıdır.
Sadeleştirme ve test
Menüde çok sayıda öğe taranabilirliği zayıflatır. Ana kategorileri beş ile yedi arasında tutun, etiketleri açık ve tahmin edilebilir yazın, “Hizmetler” gibi genel ifadeler yerine içeriği anlatan kelimeler seçin. Derin sayfalara ulaşım için menüye ek olarak ekmek kırıntısı ve içerik içi bağlantılar kullanın. Düzenli test için Search Console’daki URL denetimini, tarayıcı geliştirici araçlarındaki erişilebilirlik panelini ve ekran okuyucuyla elle gezinmeyi birlikte kullanın.
Kısacası, gerçek bağlantılar, anlamlı işaretleme ve rahat dokunma alanları aynı anda hem sıralamaya hem kullanım rahatlığına katkı sağlar. Menünüzü düzenli aralıklarla telefonda ve klavyeyle deneyin.