Erişilebilirlik için Duyurular (aria-live)
Odağı çalmadan değişiklikleri duyurmak için aria-live bölgelerini kullanın. polite ile assertive arasında seçim yapın, aria-atomic'i ayarlayın ve duyuruları merkezileştirin.
Erişilebilirlik için Duyurular (aria-live), CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 3 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 3 dersten oluşur.
Duyurular neden?
Amaç: Odağı ele geçirmeden ekran okuyucularına değişiklikleri duyurmak.
- aria-live: kibar ve zorlayıcı
- role="status" / role="alert"
- Tam mesajlar için aria-atomic
Kibar ve zorlayıcı
- Kibar: yakında duyurur; sözünüzü kesmez
- Zorlayıcı: acildir; sözünüzü kesebilir
- Atomik: değiştiğinde düğümün tamamını okur
- Başarı bilgileri için status, hatalar için alert kullanmayı tercih edin
Örnek: kibar durum bölgesi
Bir status bölgesi, odağı taşımadan metin güncellemelerini duyurur.
<div id="root"></div>Örnek: useAnnounce kancası (kibar)
Duyuruları küçük bir Announcer bağlamı ve kancasıyla merkezi bir yerde toplayın.
<div id="root"></div>Örnek: zorlayıcı hata uyarısı
Dikkat gerektiren hatalar için zorlayıcı davranışı (veya role="alert") ölçülü kullanın.
<div id="root"></div>İpuçları ve kontrol listesi
- Başarı/bilgi için kibar (role=status) kullanmayı tercih edin
- Acil hatalar için alert/zorlayıcı kullanın
- Tam mesajlar için aria-atomic="true" ayarlayın
- Gerekmedikçe odağı taşımayın
Duyuru temelleri kontrolü
Özet
Özet: Rutin güncellemeler için merkezi bir aria-live bölgesi (kibar) ekleyin; acil hatalar için zorlayıcı/alert kullanın. Mesajları atomik tutun ve odağı ele geçirmekten kaçının.
Sıkça Sorulan Sorular
“Erişilebilirlik için Duyurular (aria-live)” dersi ücretsiz mi?
Evet — “Erişilebilirlik için Duyurular (aria-live)” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 3 dersten oluşur.
“Erişilebilirlik için Duyurular (aria-live)” dersinde ne öğreneceğim?
Odağı çalmadan değişiklikleri duyurmak için aria-live bölgelerini kullanın. polite ile assertive arasında seçim yapın, aria-atomic'i ayarlayın ve duyuruları merkezileştirin. React 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.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React 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, 3 dersinin 3. dersidir.
“Erişilebilirlik için Duyurular (aria-live)” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React 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
- Portallar, Odak Tuzağı, Escape ile Kapatma
- Genel Katman Yöneticisi (Context + Reducer)
- Erişilebilirlik için Duyurular (aria-live)