ARIA Hatalarını Ayıklamak İçin Erişilebilirlik Ağacını Okuma
Rolleri ve durumları tarayıcı denetleyicisinde doğrulayın.
ARIA Hatalarını Ayıklamak İçin Erişilebilirlik Ağacını Okuma, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 4. 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.
Erişilebilirlik Ağacı Nedir
Tarayıcı, DOM'dan bir erişilebilirlik ağacı oluşturur. Bu, ekran okuyucuların gerçekten okuduğu sadeleştirilmiş sürümdür.
Neden Doğrudan Hata Ayıklamalısınız
Ağaca bakmak gerçeği gösterir: işaretlemenizin üretmesini umduğunuz şeyi değil, öğenin gerçek adını, rolünü ve durumunu.
Chrome DevTools'u Açın
Chrome'da DevTools'u açın ve Elements panelindeki Accessibility bölmesini seçin. Hesaplanan a11y verilerini incelemek için herhangi bir düğümü seçin.
Hesaplanan Özellikleri Okuyun
Bölme, öğenin hesaplanan rolünü ve adını ve ayrıca durumlarını gösterir. Yardımcı teknolojinin duyuracağı bilgiler tam olarak bunlardır.
Firefox'ta da Bulunur
Firefox, kendi DevTools sekmesi olarak bir Accessibility denetçisi sunar; bu denetçi yaygın karşıtlık ve adlandırma sorunlarını kontrol etmek için kullanışlı bir özelliğe sahiptir.
Eksik Adı Yakalayın
Ağacın ortaya çıkardığı en yaygın hata, boş ada sahip bir denetimdir. Simge düğmesinin adı yoksa kullanıcılar yalnızca düğme sözcüğünü duyar.
<button><svg>...</svg></button>
<!-- name in the tree: empty -->Yanlış Rolü Belirleyin
Bir düğme beklediğiniz hâlde ağaç generic diyorsa rolünüz uygulanmamıştır. Üzerine daha fazla ARIA eklemeden önce işaretlemeyi düzeltin.
Durum Güncellemelerini Canlı Olarak Doğrulayın
Bileşeninizi değiştirin ve ağacı izleyin. Bölmede aria-expanded değişmiyorsa JavaScript'iniz durumu eş zamanlı güncellemiyordur.
Gizli Alt Ağaçları Bulun
aria-hidden olarak ayarlanan bir öğe ağaçtan tamamen çıkar. Dekoratif içeriğin doğru biçimde atlandığını doğrulamak için bunu kullanın.
Önce Ağaç, Sonra Gerçek Ekran Okuyucu
Ağaç amacı gösterir, ancak gerçek bir ekran okuyucu deneyimi gösterir. Hata ayıklamak için ağacı kullanın, ardından NVDA veya VoiceOver ile doğrulayın.
Hızlı Bir Hata Ayıklama Döngüsü
Şu alışkanlığı edinin: işaretlemeyi değiştirin, düğümü yeniden seçin, adını, rolünü ve durumunu okuyun. Kısa döngüler ARIA hatalarını hızla yakalar.
Hızlı Kontrol
Özel düğmeniz etiketsiz olarak yalnızca düğme şeklinde okunuyor. Eksik adı nerede doğrularsınız?
Özet: Gerçeği İnceleyin
Erişilebilirlik ağacının, AT'nin gerçekten okuduğu şey olduğunu öğrendiniz. Adları, rolleri ve durumları doğrulamak için ağacı DevTools'ta inceleyin, ardından gerçek bir ekran okuyucuyla kontrol edin. 🔍
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
“ARIA Hatalarını Ayıklamak İçin Erişilebilirlik Ağacını Okuma” dersi ücretsiz mi?
Evet — “ARIA Hatalarını Ayıklamak İçin Erişilebilirlik Ağacını Okuma” 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 Hatalarını Ayıklamak İçin Erişilebilirlik Ağacını Okuma” dersinde ne öğreneceğim?
Rolleri ve durumları tarayıcı denetleyicisinde doğrulayı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 4. dersidir.
“ARIA Hatalarını Ayıklamak İçin Erişilebilirlik Ağacını Okuma” 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
- İlk Kural: Kötü ARIA'dansa Hiç ARIA Olmaması İyidir
- Roller Bir Şeyin Ne Olduğunu Tanımlar
- Durumlar ve Özellikler: expanded, checked, disabled
- ARIA Hatalarını Ayıklamak İçin Erişilebilirlik Ağacını Okuma