ARIA DevTools - Web sitesi erişilebilirlik ağacını görselleştirme
(chromewebstore.google.com)- ARIA DevTools, web uygulamalarını ekran okuyucuların yorumladığı yapı üzerinden incelemeyi sağlayan ve erişilebilirlik sorunlarını geliştirme aşamasında bulmayı kolaylaştıran bir Chrome uzantısıdır
- Sayfa öğelerini açık ve örtük ARIA rolleri temelinde gösterir; başlıklar, görseller, tablolar ve form alanları da birlikte incelenebilir
- Eksik ARIA etiketleri, hatalı rol atamaları ve yetersiz klavye desteği gibi, gerçek yardımcı teknoloji kullanım deneyimini bozabilecek sorunları denetlemeye odaklanır
- Chrome Web Store verilerine göre 10.000 kullanıcıya sahiptir, puanı 4,9/5'tir, 33 değerlendirmesi vardır ve Developer Tools kategorisinde listelenir
- Geliştirici, kullanıcı verilerini toplamadığını veya kullanmadığını belirtmiştir; projenin durumu GitHub deposu ve issue sayfası üzerinden takip edilebilir
Ekran okuyucu perspektifinden erişilebilirlik ağacını inceleme
- ARIA DevTools, erişilebilir web uygulamaları geliştirme ve test etmeye yardımcı olan bir geliştirici aracı uzantısıdır
- Web sitesini, ekran okuyucuların görme engelli kullanıcılara aktardığı biçimde gösterir
- Sayfa öğeleri, açık veya örtük ARIA rolleri temelinde düzenlenir
- Başlıklar
- Görseller
- Tablolar
- Form alanları
- Diğer sayfa öğeleri
Denetlenebilen erişilebilirlik sorunları
- Eksik ARIA etiketlerini daha kolay görmeyi sağlar
- Yanlış kullanılan ARIA rollerini bulmaya yardımcı olur
- Yetersiz klavye desteği de birlikte denetlenebilir
- Amaç, erişilebilir web siteleri geliştirme ve test etme sürecini azaltmaktır
Chrome Web Store kayıt bilgileri
- Chrome Web Store'da listelenen bir uzantıdır ve Developer Tools kategorisine dahildir
- Kayıt bilgilerine göre kullanıcı sayısı 10.000'dir
- Puanı 4,9/5, değerlendirme sayısı 33'tür
- Sürümü 1.4.3, boyutu 156KiB'dir
- Proje, GitHub üzerinde açık kaynak olarak yayımlanmaktadır
Gizlilik
- Geliştirici, bu uzantının kullanıcı verilerini toplamadığını veya kullanmadığını belirtmektedir
- Veriler üçüncü taraflara satılmaz
- Veriler, uzantının temel işleviyle ilgisiz amaçlar için kullanılmaz veya aktarılmaz
- Veriler, kredi değerlendirmesi veya kredi verme amaçlarıyla kullanılmaz ya da aktarılmaz
1 yorum
Hacker News yorumları
Harika görünüyor. iframe içinde de çalışmasını sağlayabilir misiniz? Storybook/Playroom'da kullanabilmek gerçekten iyi olurdu.
Firefox bağlantısı: https://addons.mozilla.org/en-US/firefox/addon/aria-devtools...
Şu anki gibi "ARIA DevTools" simgesine tıklayıp yalnızca mevcut sekmeye erişim izni vermek yerine, ziyaret ettiğiniz tüm web sitelerindeki tüm verilere erişim izni vermek gerekiyor. Yine de son baktığımdan beri durum değişmiş mi diye tekrar araştıracağım.
Hem hızlı kontroller hem de eğitim için çok faydalı bir araç. Bu görselleştirme, teknik olmayan paydaşlara erişilebilirliği, özellikle de ekran okuyucuları nasıl düşünmeleri gerektiğini göstermeye yardımcı olabilir.
WCAG'nin zorluklarının yarısı, paydaşları yalnızca uyumluluk kutucuklarını işaretleme seviyesinin ötesine taşımakta yatıyor.
Çok güzel. Yakın zamanda kendi erişilebilirlik ağacı görselleştirmemi uyguladım [1]; bu araç ise ağacın kendisinden ziyade tekil birimlerin gruplanmasına daha çok odaklanan bir görselleştirme olduğu için ilginç.
Ben tüm yapıyı göstermeyi ve bunun üzerinden sayfanın mantıksal akışına odaklanmaya yardımcı olmayı düşünmüştüm. Buna karşılık ağacı ayrı blokların toplamı olarak görüp her bloğun içindeki bütünlüğü daha önemli sayan yaklaşım oldukça ilginç. Karşılaştırmak isterseniz memnuniyetle konuşmak isterim.
[1] https://polypane.app/blog/polypane-20-1-the-accessibility-tr...
Temiz görünüyor ve https://wave.webaim.org/ adresinden çok daha düzenli.
Bu tür araçlarda ayrıntılar önemli olduğundan, adil olmak gerekirse WAVE muhtemelen daha doğru olabilir.
Oldukça temiz ve hoşuma gitti. Geliştirmekte olduğum TV programı meta verisi sayfasında test ettim.
Bir öğe, her biri içeriği
aria-labelile açıklayanspan'ler içeren birdivgrubundan oluşuyor; MacOS'taki VoiceOver bunu doğru okuyor ve Chrome'un erişilebilirlik ağacı da yakalıyor, ancak bu araçaria-label'ı göstermiyor ve değerleri arka arkaya bir dize olarak gösteriyor. Ayrıca::before { content: ", " / ""; }ifadesini, valueolarak yakalamış; bunun desteği genel olarak pek iyi değil.Güzel. Erişilebilirlik desteğiyle çok ilgileniyorum.
Web siteleri artık asıl işim değil, ama eskiden sorumluluğumdaki sitelerin çok erişilebilir olacak şekilde yapılmasına her zaman dikkat ederdim.
Bu tür araçlarda ARIA mantığının UI'dan ayrılmasını isterim. Karmaşık ARIA işlemlerinin bir kütüphaneye konması ve iyi test edilmiş ortak bir kod tabanının üzerine çeşitli UI'ların eklenmesi iyi olurdu.
Biraz tanıtım yapmış olayım: https://github.com/xi/aria-api
Chrome'un yerleşik aracıyla (https://developer.chrome.com/docs/devtools/accessibility/ref...) karşılaştırınca nasıl?
Örneğin sayfada yalnızca klavyeyle gezinmeniz gerekiyor. Bir açılır menü erişilebilir değilse bu kullanıcıya hemen belli oluyor. Tablolarda da aynı anda yalnızca bir hücre ve onun başlığı gösteriliyor. Gerçek ekran okuyucu kullanıcı deneyimine çok yakın olduğunu düşünüyorum.
İyi fikir ve iyi uygulama. Yan projemde mutlaka deneyeceğim. Tam da Mandy Michael'ın HTML performansı ve erişilebilirlik sunumunu [1] izleyip, tarayıcının yerleşik erişilebilirlik ağacı görüntüleyicisinden daha iyi bir araç olup olmadığını merak ediyordum.
Harika bir araç. Son zamanlarda erişilebilirliği daha derinlemesine inceliyorum ve özellikle ekran okuyucu kullanıcı deneyimini iyileştirmeye çalışıyorum.
Daha deneyimli kişilerden büyük formlar veya dinamik tablolar gibi karmaşık durumlarda bu aracı test eden oldu mu? Böyle durumlarda diğer erişilebilirlik araçlarıyla nasıl karşılaştırıldığını merak ediyorum. İpuçları veya içgörüler varsa minnettar olurum.