Dil Seçici Tasarımı: Kullanıcı Dostu, Erişilebilir ve SEO Uyumlu Dil Menüsü

İyi bir dil seçici tasarımı; ziyaretçinin dil menüsünü her sayfada aynı yerde, genellikle sağ üst köşede bulabildiği, dilleri kendi dillerindeki adlarıyla (Deutsch, Español, Türkçe) gördüğü ve seçim yaptığında ana sayfaya değil, bulunduğu sayfanın o dildeki karşılığına gittiği bir menüdür. Bayraklar yalnızca dil adının yanında yardımcı bir işaret olarak kullanılmalı, klavye ve ekran okuyucuyla da kullanılabilmelidir. Bu yazıda dil seçicinin yerini, bayrak ve dil adı tartışmasını, otomatik yönlendirmenin risklerini, erişilebilirlik kurallarını ve WordPress'te dil seçiciyi doğru kurmanın yollarını anlatıyoruz. Örnek olarak bu sitede kullandığımız dil seçiciyi de açıklıyoruz.

Dil seçici nereye konmalı?

Kullanıcılar dil seçiciyi büyük ölçüde sağ üst köşede, üst menünün yanında arar. Bu alışkanlığı bozmak için iyi bir neden yoksa dil seçiciyi oraya yerleştirin ve her sayfada aynı konumda tutun. Alt bilgide (footer) ikinci bir dil listesi bulundurmak, sayfanın sonuna kadar inen ziyaretçiler için faydalıdır. Mobilde ise dil seçici ya üst çubukta küçük bir düğme olarak görünmeli ya da açılan menünün içinde belirgin bir bölüm olarak yer almalıdır; menünün en altına gizlenmiş küçük bir bağlantı çoğu zaman fark edilmez.

Bayrak mı, dil adı mı?

Bayraklar ülkeleri, diller ise insanları temsil eder. İngilizce için Birleşik Krallık mı ABD mi, İspanyolca için İspanya mı Meksika mı, Arapça için hangi ülke? Yalnızca bayraktan oluşan bir dil seçici, bazı ziyaretçileri yanlış anlamaya, bazılarını ise rahatsız etmeye açıktır. Bu yüzden dil adını her zaman yazın ve dilin kendi adını kullanın: Almanca konuşan biri “Almanca” yerine “Deutsch” kelimesini tanır. Bayrakları tamamen kaldırmak zorunda değilsiniz; dil adının yanında küçük bir görsel işaret olarak tarama hızını artırırlar. Önemli olan, bir dil için tek bir bayrak seçip her yerde tutarlı kullanmaktır.

Ülke ile dilin ayrıştığı durumlar da vardır. Dünya genelinde tek bir para birimiyle satılan yazılımlarda ziyaretçinin ülkesi değil dili önemlidir; örneğin spor tesisleri için geliştirdiğimiz Multi Score Screen skorbord yazılımı planlarını ABD doları üzerinden sunar, bu yüzden böyle bir ürün sitesinde ülke seçimi yerine dil seçimi yeterlidir. Ülkeye göre fiyat, kargo veya hukuki metin değişiyorsa dil ve ülke seçimini ayrı menüler olarak sunmak daha doğrudur.

Emoji bayraklar neden sorun çıkarır?

Bayrak emojileri (örneğin 🇩🇪) bazı işletim sistemlerinde bayrak olarak değil, iki harf olarak görünür; Windows'taki yaygın tarayıcılar bayrak emojilerini çizmez. Bu sitede bu yüzden bayrakları küçük ve satır içi SVG olarak çizdik: harici bir dosya veya hizmete istek yapılmaz, her sistemde aynı görünür ve ekran okuyuculardan gizlenir; dil adı ise her zaman yazılı olarak yanında durur.

Seçim yapınca nereye gitmeli?

Dil değiştiren bir ziyaretçiyi ana sayfaya göndermek en sık yapılan hatadır. Hizmetler sayfasındaki biri Almancaya geçtiğinde Almanca hizmetler sayfasını görmek ister. Her dil bağlantısı, bulunulan sayfanın o dildeki karşılığına gitmelidir. Bir sayfanın çevirisi yoksa ziyaretçiyi bunu açıkça belirterek en yakın sayfaya, örneğin o dildeki blog listesine yönlendirin ve çevrilmemiş sayfalar için hreflang etiketi üretmeyin. Bu kuralların teknik ayrıntılarını hreflang rehberimizde anlattık.

Otomatik yönlendirme: dikkatli olun

Tarayıcı diline veya IP adresine bakarak ziyaretçiyi otomatik yönlendirmek cazip görünür, ancak iki riski vardır. Birincisi kullanıcı deneyimidir: Almanya'da yaşayan bir Türk, Almanca sürüme zorla gönderildiğinde rahatsız olur. İkincisi arama motorlarıdır: Google, kullanıcının algılanan diline göre otomatik yönlendirme yapılmamasını, bunun yerine tüm dil sürümlerine bağlantı verilmesini önerir; çünkü arama robotları her dil sürümünü görebilmelidir. Güvenli yöntem şudur: ilk ziyarette tarayıcı dilini öneri olarak kullanın, kullanıcının seçimini bir çerezde hatırlayın ve dil seçiciyi her zaman erişilebilir bırakın. AYM Multilingual'daki tarayıcı diline göre yönlendirme de ziyaretçinin seçimini hatırlayacak şekilde çalışır.

Erişilebilirlik: herkes için kullanılabilir bir menü

• Erişilebilir ad: Dil düğmesinin ekran okuyucuda “Dil: Türkçe” gibi anlaşılır bir adı olmalı.
• Durum bilgisi: Açılır menü kullanılıyorsa düğme menünün açık mı kapalı mı olduğunu bildirmeli.
• Klavye desteği: Menü Enter veya boşluk tuşuyla açılmalı, ok tuşlarıyla gezilmeli ve Esc ile kapanmalı.
• Dil işaretleri: Her bağlantıda hedef dil belirtilmeli ki ekran okuyucu dil adını doğru telaffuz etsin.
• Görünür odak: Klavyeyle gezinen kullanıcı hangi dilin seçili olduğunu net görmeli.
• Dekoratif bayraklar: Bayraklar ekran okuyuculardan gizlenmeli; bilgiyi dil adı taşımalı.

Bu ilkeleri uygulayan basit bir yapı şöyle görünür:

<div class="lang">
  <button type="button" aria-expanded="false" aria-controls="lang-menu"
          aria-label="Language: Deutsch">
    <svg aria-hidden="true" viewBox="0 0 5 3">…</svg> DE
  </button>
  <ul id="lang-menu" hidden>
    <li><a href="/tr/hizmetler" hreflang="tr" lang="tr">Türkçe</a></li>
    <li><a href="/services" hreflang="en" lang="en">English</a></li>
    <li><a href="/de/dienstleistungen" hreflang="de" lang="de" aria-current="true">Deutsch</a></li>
  </ul>
</div>

Kaç dil olunca açılır menü?

İki veya üç dil varsa dilleri yan yana birer bağlantı olarak göstermek en hızlı yoldur; ziyaretçi tek tıkla dil değiştirir. Dört ve daha fazla dilde açılır menü daha düzenli görünür. Açılır menüde seçili dili işaretleyin, dilleri alfabetik veya pazar önceliğine göre sabit bir sırada tutun ve menünün mobilde parmakla rahatça seçilebilecek büyüklükte olmasına dikkat edin.

WordPress'te dil seçiciyi kurmak

Uygulamada sık gördüğümüz hatalar

Çok dilli siteleri incelerken aynı hatalarla tekrar tekrar karşılaşıyoruz: dil seçici alt sayfalarda veya ödeme adımlarında kayboluyor, dil adları kendi dillerinde değil sayfanın dilinde yazılıyor, açılır menü fare ulaşmadan kapanıyor ya da çevrilmemiş sayfalara giden bağlantılar 404 hatasına düşüyor. Bunların hepsi yeni bir dili yayına almadan önce yapılacak kısa bir testle yakalanabilir. Dil seçiciyi farklı sayfa türlerinde; fareyle, dokunmatik ekranda ve klavyeyle mutlaka deneyin.

WordPress'te dil seçiciyi kurmak

Çok dilli eklentilerin çoğu dil seçiciyi menü öğesi, widget, blok veya kısa kod olarak ekleme imkânı verir. Kendi eklentimiz AYM Multilingual menüleri ve header ile footer bölümlerini her dil için eşleştirir, tarayıcı diline göre yönlendirmeyi ziyaretçinin seçimini hatırlayarak yapar. Sitenize ilk kez yeni bir dil ekliyorsanız, dil seçiciden önce URL yapısını ve çeviri iş akışını planlamanız gerekir; bunu WordPress siteye dil ekleme rehberimizde adım adım anlattık. Dil seçicinin başarısı, arkasındaki içeriğin kalitesine de bağlıdır; çevirinin yerel kullanıcıya hitap etmesi için yerelleştirme ve çeviri farkı yazımıza göz atabilirsiniz.

Kontrol listesi

1. Dil seçici her sayfada aynı yerde, mobilde de kolayca bulunuyor mu?
2. Diller kendi adlarıyla yazılıyor mu, bayraklar yalnızca yardımcı işaret mi?
3. Her bağlantı sayfanın o dildeki karşılığına gidiyor mu?
4. Otomatik yönlendirme zorla değil, öneri olarak mı çalışıyor ve seçim hatırlanıyor mu?
5. Menü klavye ve ekran okuyucuyla kullanılabiliyor mu?

Çok dilli sitenizin yapısını ve dil seçicisini profesyonelce kurmak isterseniz çok dilli WordPress hizmetimizi inceleyebilirsiniz.

Paylaş:XLinkedInWhatsApp