Bu kural ne anlama geliyor

WCAG 3.1.1, her web sayfasının birincil dilini <html> öğesindeki lang niteliği ile tanımlamasını gerektirir. Bu, yardımcı teknolojilerin, tarayıcıların ve arama motorlarının içeriği doğru işlemesini sağlar — ekran okuyucuların doğru telaffuz kurallarını seçmesi ve oluşturma için doğru yazıtipleri ve metin yönünün kullanılması dahil.

lang niteliği geçerli bir BCP 47 dil etiketi kullanmalıdır (örneğin "en", "fr", "tr", "zh-Hans"). Geçersiz veya eksik bir dil bildirimi, yardımcı teknolojinin tahmin yapması gerektiğini ve bu durumun ekran okuyucu kullanıcıları için bozuk telaffuzla sonuçlandığını gösterir.

Neden önemlidir

Ekran okuyucular, doğru telaffuz motorunu yüklemek için sayfa dilini kullanır. Türkçe bir sayfada lang="tr" olmadığı zaman, ekran okuyucu Türkçe kelimeleri İngilizce telaffuz kurallarıyla okumaya çalışabilir ve içerik anlaşılmaz hale gelir. Bu durum dünya genelinde milyonlarca ekran okuyucu kullanıcısını etkiler.

Erişilebilirliğin ötesinde, lang niteliği tarayıcıların çeviri sunmasına yardımcı olur, arama motorlarının doğru dil sürümünü sunmasını destekler ve :lang() seçicileri ile dile özgü tireleme gibi CSS özelliklerini etkinleştirir. Ayarlayabileceğiniz en basit ve en etkili HTML niteliklerinden biridir.

İlgili axe-core kuralları

html-has-lang — <html> öğesinin lang niteliği taşıdığını doğrular.
html-lang-valid — lang niteliği değerinin geçerli bir BCP 47 dil etiketi olduğunu doğrular.
html-xml-lang-mismatch — <html> öğesindeki xml:lang ve lang niteliklerinin eşleşmesini doğrular.

Nasıl test edilir

Otomatik araçlar eksik veya geçersiz lang niteliklerini güvenilir biçimde yakalar. Dil etiketinin gerçek sayfa içeriğiyle eşleşmesini doğrulamak için manuel kontrol gerekir.

axe DevTools veya Lighthouse çalıştırın — html-has-lang ve html-lang-valid ihlallerini kontrol edin.
DevTools ile <html> öğesini inceleyin ve lang niteliğinin mevcut ve doğru olduğunu doğrulayın.
XHTML sayfaları için xml:lang ile lang niteliklerinin eşleştiğini kontrol edin.
Dil etiketinin yalnızca arayüzle değil, sayfa içeriğinin birincil diliyle eşleşmesini doğrulayın.

Nasıl düzeltilir

<html> öğesine geçerli bir lang niteliği ekleyin:

Yanlış uygulama

<!-- lang niteliği eksik -->
<html>
  <head><title>Sayfam</title></head>
  <body>...</body>
</html>

<!-- Geçersiz lang değeri -->
<html lang="türkçe">
  <head><title>Sayfam</title></head>
  <body>...</body>
</html>

Doğru uygulama

<!-- Türkçe sayfa -->
<html lang="tr">
  <head><title>Sayfam</title></head>
  <body>...</body>
</html>

<!-- İngilizce sayfa -->
<html lang="en">
  <head><title>My Page</title></head>
  <body>...</body>
</html>

Sık yapılan hatalar

lang nitelgini tamamen atlama — özellikle sablonlarda en yaygın sorun.
"en" veya "tr" yerine "english" veya "türkçe" gibi geçersiz dil alt etiketi kullanma.
Yanlış dil ayarlama — örneğin içeriği Türkçe olan bir sayfada lang="en" kullanma.
XHTML belgelerinde lang ile xml:lang arasında uyumsuzluk.
Temel dil olmadan bölge alt etiketi kullanma (örneğin lang="en-US" yerine lang="US").

3.1.1 Sayfa Dili