Ne Yaptığını Bildiren Düğmeler
Göremeyen kullanıcılar için eylemleri açıkça etiketleyin.
Ne Yaptığını Bildiren Düğmeler, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 3. 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.
Düğmelerin Adı Olmalıdır
Kullanıcılar ne yaptığını bilmiyorsa bir düğme işe yaramaz. Erişilebilir adı, düğmeye basmadan önce ekran okuyucunun sesli okuduğu addır.
Metin Ad Olur
Normal bir düğmede içindeki görünür metin erişilebilir addır. Açık kelimeler, açık bir duyuru sağlar.
<button>Save changes</button>İşlemi Söyleyin
Düğmeyi gerçekleştirdiği işlemi belirtecek şekilde etiketleyin; örneğin Kaydet, Sil veya Sepete ekle. Bir fiil, kullanıcılara tam olarak ne olacağını söyler.
Belirsiz Etiketlerden Kaçının
Birden çok düğme aynı etiketi taşıdığında OK, Gönder veya Git gibi etiketler belirsiz kalır. Her birinin tek başına anlaşılması için belirli işlemi adlandırın.
Yalnızca Simgeden Oluşan Düğme Sorunu
Metin içermeyen bir simge düğmesinin erişilebilir adı yoktur. Ekran okuyucu yalnızca düğme diyebilir ve kullanıcıyı ne yapacağını tahmin etmeye bırakabilir. 🤔
<button><svg>...</svg></button>Simge Düğmesine Ad Verin
Metinsiz bir düğmeye aria-label ile ad verin. Böylece simge görünmeye devam eder, yardımcı teknoloji ise ne yaptığını duyurur.
<button aria-label="Close dialog"><svg>...</svg></button>Dekoratif Simgeleri Gizleyin
Bir etiket işlemi zaten adlandırıyorsa içteki simgeyi aria-hidden olarak işaretleyin; böylece gereksiz ek bir ses olarak okunmaz.
<svg aria-hidden="true">...</svg>Durum Değişikliklerini Duyurun
Açma-kapama düğmesi durumunu bildirmelidir. Ekran okuyucuların açık veya kapalı olduğunu söylemesi için aria-pressed kullanın.
<button aria-pressed="true">Mute</button>İçeriği Genişletme
Bir paneli gösteren veya gizleyen düğmede aria-expanded bulunmalıdır; böylece kullanıcılar panelin açık mı yoksa daraltılmış mı olduğunu duyar.
<button aria-expanded="false">Details</button>Etiketleri Kısa ve Doğru Tutun
İyi bir etiket kısa ama gerçeğe uygun olur. Düğmeye bastığınızda ne olacağını, sonrasında sürpriz yaşatmadan tam olarak belirtir.
Görünür ve Erişilebilir Metni Eşleştirin
Bir düğmenin görünür metni varsa bu kelimeleri erişilebilir adının içinde tutun; böylece sesle denetim kullananlar gördükleri etiketi söyleyebilir.
Hızlı Kontrol
Yalnızca X işareti gösteren simge tabanlı kapatma düğmesine nasıl erişilebilir bir ad verirsiniz?
Özet
Her düğmeye yaptığı işlemin adını verin, yalnızca simge içerenleri etiketleyin ve durumu aria öznitelikleriyle bildirin. Böylece kullanıcılar düğmelerin ne yaptığını her zaman bilir. 👍
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Ne Yaptığını Bildiren Düğmeler” dersi ücretsiz mi?
Evet — “Ne Yaptığını Bildiren Düğmeler” 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.
“Ne Yaptığını Bildiren Düğmeler” dersinde ne öğreneceğim?
Göremeyen kullanıcılar için eylemleri açıkça etiketleyin. 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 3. dersidir.
“Ne Yaptığını Bildiren Düğmeler” 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
- Bağlantılar Yerlere, Düğmeler Eylemlere Götürür
- Bağlam Dışında da Anlamlı Bağlantı Metni
- Ne Yaptığını Bildiren Düğmeler
- href Olmadan Kullanılan Anchor Karşıt Deseni