aria-label ve aria-labelledby Karşılaştırması
Satır içi ad ile başvurulan ad arasında seçim yapın.
aria-label ve aria-labelledby Karşılaştırması, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 2. 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, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Adlandırmanın İki Yolu
Yerel etiketleme yeterli olmadığında iki ARIA aracınız vardır: satır içi bir dize için aria-label ve mevcut metne işaret etmek için aria-labelledby.
aria-label Bir Dize Tutar
Ödünç alınabilecek görünür bir metin olmadığında aria-label kullanın. Seslendirilecek adı doğrudan öğenin üzerine yazarsınız.
<button aria-label="Search">🔍</button>aria-labelledby Bir ID Tutar
Sayfadaki görünür metin ad olarak kullanılabiliyorsa aria-labelledby kullanın. Değeri bir dize değil, o öğenin id değeridir.
<h2 id="sec">Billing</h2>
<section aria-labelledby="sec">...</section>Görünür Metni Tercih Edin
Önce aria-labelledby kullanmayı düşünün. Ekrandaki metni yeniden kullanmak, seslendirilen ad ile görünür adın otomatik olarak eş zamanlı kalmasını sağlar.
labelledby Birden Çok ID Birleştirebilir
aria-labelledby değerine boşluklarla ayrılmış birden çok id verin; tarayıcı bunların metinlerini sırayla birleştirerek tek bir ad oluşturur.
<span aria-labelledby="verb noun">Go</span>
<span id="verb">Delete</span> <span id="noun">file</span>labelledby label'ı Geçersiz Kılar
İkisi de varsa aria-labelledby önceliklidir. Tarayıcı aria-label değerini tamamen yok sayar; bu nedenle ikisinin birleşmesini beklemeyin.
Bir Öğe Kendini Adlandırabilir
aria-labelledby ile bir öğe kendi id değerine başvurabilir. Bu, bir bölgeyi görünür başlık metniyle adlandırmak için kullanışlıdır.
label Görünmezdir
Bir aria-label ekranda asla görünmez. Yalnızca yardımcı teknolojinin duyurduğu şeyi değiştirir; gören kullanıcılar herhangi bir fark görmez.
Çeviri Tuzaklarına Dikkat Edin
Bir aria-label, sayfa çevirmenlerinin çoğu zaman atladığı düz metindir; labelledby ise çevrilen görünür içeriği yeniden kullanır.
ID'ler Tam Olarak Eşleşmelidir
Bir aria-labelledby id değeri gerçek bir öğenin id değeriyle eşleşmelidir. Bir yazım hatası, öğeyi sessizce tamamen hesaplanmış bir addan yoksun bırakır.
Gerçeğin Kaynağına Göre Seçin
Adın nerede bulunduğunu düşünün. Zaten ekrandaysa aria-labelledby kullanın; yalnızca yardımcı teknoloji için mevcutsa aria-label kullanın.
Hızlı Kontrol
Bir bölümde zaten h2 başlığı görünüyor. Bölümü nasıl adlandırmalısınız?
Özet: label mı, labelledby mi
Mevcut görünür metin için aria-labelledby, görünmez satır içi adlar için aria-label kullanmayı ve bunların birleşmesini asla beklememeyi öğrendiniz. 🎯
Sıkça Sorulan Sorular
“aria-label ve aria-labelledby Karşılaştırması” dersi ücretsiz mi?
Evet — “aria-label ve aria-labelledby Karşılaştırması” 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 Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“aria-label ve aria-labelledby Karşılaştırması” dersinde ne öğreneceğim?
Satır içi ad ile başvurulan ad arasında seçim yapın. Web Accessibility 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.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility 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 2. dersidir.
“aria-label ve aria-labelledby Karşılaştırması” 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 Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility 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
- Erişilebilir Ad Hesaplaması Açıklanıyor
- aria-label ve aria-labelledby Karşılaştırması
- Ek Bağlam İçin aria-describedby
- Denetimleri Sessiz Bırakan Yaygın Adlandırma Hataları