Bildirimleri, Yükleyicileri ve Sayıları Duyurma
Asenkron kullanıcı arayüzü değişikliklerini duyulabilir hâle getirin.
Bildirimleri, Yükleyicileri ve Sayıları Duyurma, 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.
Eş Zamansız Arayüzün Bir Sesi Olmalı
Bildirimler, yükleniyor göstergeleri ve sonuç sayıları, sayfa yeniden yüklenmeden sayfayı değiştirir. Canlı bir bölge olmadığında ekran okuyucu kullanıcıları bunları tamamen kaçırır.
Bildirimler Duyurulmalı
Bildirim, kısa süre görünen açılır bir iletidir. Kapsayıcısına durum rolü verin; böylece ekran okuyucu metni göründüğü anda seslendirir. 🍞
<div role="status">Item added to cart</div>Bildirim Bölgesini Kalıcı Tutun
Yükleme sırasında boş bir bildirim bölgesi oluşturun ve iletileri bunun içine ekleyin. Her seferinde yeni bir bölge oluşturmak çoğu zaman duyurunun yapılmamasına neden olur.
<div id="toasts" role="status"></div>Yükleyiciler Kullanıcılara Beklemelerini Söyler
Veriler yüklenirken bunu duyurun. Yükleniyor gibi nazik bir durum iletisi, kullanıcıların tahmin yürütmek yerine bilgi sahibi olmasını sağlar. ⏳
out.textContent = 'Loading results';Ardından Tamamlandığını Duyurun
Yükleme sona erdiğinde aynı bölgeyi sonuçla güncelleyin. Başlangıç ve bitiş iletilerini birlikte kullanmak, ilerleme hakkında net bir fikir verir.
out.textContent = 'Results loaded';Sonuç Sayılarını Duyurun
Bir arama veya filtrelemeden sonra kaç öğenin eşleştiğini seslendirin. Kısa bir sayı iletisi, sayfayı görsel olarak tarayamayan kullanıcıların konumlarını anlamasına yardımcı olur.
out.textContent = '12 results found';Sayılar Sessizlikten İyidir
Bir sonuç listesini sayı vermeden güncellemek, ekran okuyucu kullanıcılarının herhangi bir şeyin değişip değişmediğinden emin olamamasına yol açar. Seslendirilen tek bir sayı bunu düzeltir.
İletileri Kısa Tutun
Canlı duyurular okuma akışını böler; bu nedenle her iletiyi kısa tutun. Kaydedildi, Değişiklikleriniz az önce başarıyla kaydedildi ifadesinden daha iyidir.
Her Güncellemeyi Farklılaştırın
Yeni metin eskisiyle aynıysa bazı ekran okuyucular sessiz kalır. Yeniden okunmasını zorlamak için ifadeyi değiştirin veya önce bölgeyi temizleyin.
display none ile Gizlemeyin
display none olarak ayarlanmış bir canlı bölge duyuru yapmaz. Görsel olarak gizlemek için, erişilebilirlik ağacında kalmasını sağlayan görsel olarak gizli bir sınıf kullanın.
Tek Bölge, Çok Sayıda İleti
Uygulama genelindeki bildirimler ve sayılar için genellikle yalnızca bir nazik bölgeye ihtiyacınız vardır. Güncellemeleri çok sayıda canlı öğeye dağıtmak yerine bu bölge üzerinden yönlendirin.
Hızlı Kontrol
Bildirim bölgeniz hiçbir zaman duyuru yapmıyor. CSS onu display none ile gizliyor. Olası çözüm nedir?
Özet: Eş Zamansız Arayüzü Duyurmak
Bildirimleri, yükleyicileri ve sayıları kalıcı, nazik bir bölge üzerinden seslendirmeyi; iletileri kısa tutmayı ve hiçbir zaman display none kullanmamayı öğrendiniz. ✅
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
“Bildirimleri, Yükleyicileri ve Sayıları Duyurma” dersi ücretsiz mi?
Evet — “Bildirimleri, Yükleyicileri ve Sayıları Duyurma” 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.
“Bildirimleri, Yükleyicileri ve Sayıları Duyurma” dersinde ne öğreneceğim?
Asenkron kullanıcı arayüzü değişikliklerini duyulabilir hâle getirin. 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.
“Bildirimleri, Yükleyicileri ve Sayıları Duyurma” 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
- polite ve assertive: Aciliyeti Seçme
- status, alert ve log Rolleri
- Bildirimleri, Yükleyicileri ve Sayıları Duyurma
- Canlı Bölgeler Neden Çalışmaz ve Nasıl Düzeltilir