lang Özniteliği ve Ekran Okuyucular
Doğru telaffuz için sayfa ve öğe dilini bildirin
lang Özniteliği ve Ekran Okuyucular, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
lang Özniteliği Ne İşe Yarar
lang özniteliği, BCP-47 dil etiketi kullanarak bir öğenin içeriğinin dilini belirtir. Ekran okuyucular doğru telaffuz motorunu ve sesi seçmek için bu bilgiyi kullanır; arama motorları da dile göre dizinlemek için bundan yararlanır.
html Öğesinde Ayarlama
Her sayfa, kök öğe üzerinde birincil dilini belirtmelidir: İngilizce için <html lang="en">, Türkçe için <html lang="tr">, Japonca için <html lang="ja">. Bu bilgi olmazsa ekran okuyucular kullanıcının sistem varsayılanına geri döner ve çoğu zaman her kelimeyi yanlış telaffuz eder.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>BCP-47 Etiketleri
Etiketler BCP-47'yi izler: dil kodu (en, tr, ja), isteğe bağlı olarak bölge (en-US, en-GB, zh-Hant, zh-Hans) ve nadiren yazı sistemi. Doğru olan en ayrıntılı etiketi kullanın; bölgesel yazım önemli olmadığında yalnızca "en" kullanılması uygundur.
Sayfanın Ortasında Dil Değişiklikleri
Farklı dildeki bir bölüm için kendi lang özniteliğini kullanın: <blockquote lang="fr">Bonjour</blockquote>. Ekran okuyucu bu bölüm için sesini değiştirerek çok dilli sayfalarda bile doğru telaffuz sağlar.
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>CSS Dil Seçicileri
CSS, dili :lang(en) ile hedefleyebilir: blockquote:lang(fr)::before { content: "« "; }. Seçici, en yakın üst öğenin lang özniteliğiyle eşleşir. Dillere göre değişen tipografik kurallar (tırnak işaretleri, boşluklandırma) için kullanın.
Telaffuz Açısından Önemi
İngilizcedeki "Live" ile Fransızcadaki "Live" sözcüklerinin telaffuzu farklıdır. Almancadaki "Wir", "wear" değil, "veer" şeklinde telaffuz edilir. İngilizce için yapılandırılmış bir ekran okuyucu, çevresindeki bölümün Almanca veya Fransızca olduğu belirtilmedikçe her ikisini de yanlış telaffuz eder.
Bağlantılı Diller için hreflang
Bağlantılardaki hreflang özniteliği (<a href="/fr/" hreflang="fr">Français</a>), arama motorlarına ve yardımcı teknolojilere bağlantı verilen sayfanın dilini bildirir. Uluslararası arama motoru optimizasyonu kapsamını tamamlamak için bunu site genelindeki hreflang bağlantı etiketleriyle birleştirin.
Kullanıcı Dilini Algılama
JavaScript, kullanıcının tercih ettiği dilleri navigator.languages içinden okuyabilir (öncelik sırasına göre düzenlenmiş bir BCP-47 etiketi dizisi). Bunu varsayılan yerel ayarı seçmek veya dil değiştirmeyi önermek için kullanın; ancak kullanıcının açık seçimine her zaman tarayıcının varsayılanından daha fazla öncelik verin.
Sunucu Tarafında Algılama
HTTP Accept-Language istek üstbilgisi, kullanıcının tarayıcı yapılandırmasındaki dil tercihlerini listeler. İlk istekte doğru yerelleştirilmiş HTML'yi göndermek için bunu sunucuda kullanın; böylece kullanıcı herhangi bir JavaScript çalışmadan önce kendi dilini görür.
Tek Sayfada Birden Çok Dil
Wikipedia makaleleri, dil öğrenme uygulamaları ve sözlükler düzenli olarak dilleri karıştırır. Kısa olsalar bile her pasajı kendi lang özniteliğiyle işaretleyin. Bölüm bazında lang kullanılmazsa ekran okuyucunun sesi ve CSS tırnak işaretleri sayfanın varsayılanına döner.
Yaygın Hatalar
<html> üzerinde lang bulunmaması (çok yaygındır), yanlış dil kodu kullanılması (lang="english" yerine lang="en") veya dil tek başına yeterliyken bölgesel kodların kullanılması yaygın hatalardır. Bunları sürekli tümleştirme sürecinde yakalamak için W3C doğrulayıcısını ve Lighthouse erişilebilirlik denetimini kullanın.
Bilginizi Sınayın
Ekran okuyucu kullanıcıları için üzerindeki lang özniteliği neden özellikle önemlidir?
Özet
Sayfanın dilini <html> üzerinde bir BCP-47 etiketiyle (en, tr, ja, zh-Hant) belirtin. Sayfanın ortasındaki dil değişikliklerini span/section lang öznitelikleriyle işaretleyerek ekran okuyucuların seslerini değiştirmesini sağlayın. CSS :lang() dile özgü tipografiyi uygulayabilir. lang'i her zaman ayarlayın; hiçbir maliyeti yoktur ve ekran okuyucu telaffuzunu, arama motoru optimizasyonunu ve CSS hedeflemesini büyük ölçüde iyileştirir.
Sıkça Sorulan Sorular
“lang Özniteliği ve Ekran Okuyucular” dersi ücretsiz mi?
Evet — “lang Özniteliği ve Ekran Okuyucular” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“lang Özniteliği ve Ekran Okuyucular” dersinde ne öğreneceğim?
Doğru telaffuz için sayfa ve öğe dilini bildirin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“lang Özniteliği ve Ekran Okuyucular” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- lang Özniteliği ve Ekran Okuyucular
- Sağdan Sola Metin için dir=rtl
- bdi ve bdo Öğeleri
- charset ve Unicode Yönetimi: Özel Karakterler