Canlı Bölgeler Neden Çalışmaz ve Nasıl Düzeltilir

Canlı bölgeler basit görünür ama sık sık çalışmaz. Yaygın tuzakları bilmek, gerçek bir ekran okuyucuyla saatlerce süren kafa karıştırıcı testlerden kurtarır. 🐛

Bölgeyi ve metnini aynı anda oluşturursanız birçok okuyucu bunu kaçırır. Değişiklik yapılmadan önce bölge boş olarak mevcut olmalıdır.

Canlı kapsayıcıyı sayfa yüklenirken metinsiz olarak ekleyin, ardından içeriğini güncelleyin. O zamana kadar ekran okuyucu onu zaten izliyor olur.

Aynı dizeyi iki kez yazmak çoğu zaman sessizliğe neden olur; çünkü okuyucu bir değişiklik görmez. Tekrarlanan sayılar ve durumlar bundan çok etkilenir.

Bölgeyi boşaltın, ardından yeni metni bir sonraki turda ayarlayın. Kısa süreli sıfırlama, okuyucunun bunu yeni bir duyuru olarak ele almasını sağlar.

Bir bölgeyi devasa bir metin bloğuyla güncellemek kullanıcıyı bilgiye boğar. Canlı bölgeler tam sayfa içeriği için değil, kısa güncellemeler içindir.

aria-atomic değerini true olarak ayarlarsanız okuyucu, yalnızca güncellenen kısmı değil, her değişiklikte bölgenin tamamını seslendirir. Birleşik iletiler için kullanışlıdır.

aria-relevant özniteliği, ekleme veya kaldırma gibi hangi değişiklik türlerinin duyurulacağını denetler. Eklemeler ile metinlerin varsayılan birleşimi çoğu durum için uygundur.

display none ile gizlenen bir bölge erişilebilirlik ağacından çıkarılır ve sessiz kalır. Bu, en yaygın hatalardan biridir.

Tarayıcı denetleyicileri bir bölgenin çalıştığını kanıtlamaz. Yayına almadan önce her zaman NVDA veya VoiceOver gibi gerçek bir ekran okuyucuyla doğrulayın.

Aynı canlı bölge, farklı ekran okuyucularda ve tarayıcılarda farklı duyulabilir. Yalnızca birine güvenmek yerine birkaç birleşimi test edin.

Artık canlı bölgelerde hata ayıklayabilirsiniz: önce boş olarak oluşturun, tekrarlar için temizleyip yeniden ayarlayın, display none kullanmayın ve her zaman gerçek bir okuyucuda test edin. ✅