ARIA DevTools - Visualisasi pohon aksesibilitas situs web

• ARIA DevTools adalah ekstensi Chrome yang membantu memeriksa struktur yang ditafsirkan screen reader pada aplikasi web, sehingga masalah aksesibilitas lebih mudah ditemukan sejak tahap pengembangan
• Ekstensi ini menampilkan elemen halaman berdasarkan peran ARIA eksplisit maupun implisit, dan memungkinkan pemeriksaan judul, gambar, tabel, item formulir, serta elemen lainnya
• Fokusnya adalah memeriksa masalah yang dapat merusak pengalaman nyata pengguna teknologi bantu, seperti label ARIA yang hilang, penetapan peran yang salah, dan dukungan keyboard yang tidak lengkap
• Berdasarkan Chrome Web Store, ekstensi ini memiliki 10.000 pengguna, rating 4,9/5, 33 ulasan, dan terdaftar dalam kategori Developer Tools
• Pengembang menyatakan tidak mengumpulkan atau menggunakan data pengguna, dan status proyek dapat dilihat melalui repositori GitHub serta halaman issue

---

Memeriksa pohon aksesibilitas dari sudut pandang screen reader

• ARIA DevTools adalah ekstensi alat pengembang yang membantu pengembangan dan pengujian aplikasi web yang aksesibel
• Menampilkan situs web sebagaimana screen reader menyampaikannya kepada pengguna tunanetra
• Elemen halaman diatur berdasarkan peran ARIA eksplisit atau implisit
  • Judul
  • Gambar
  • Tabel
  • Item formulir
  • Elemen halaman lainnya

Masalah aksesibilitas yang bisa diperiksa

• Memudahkan pengecekan label ARIA yang hilang
• Membantu menemukan peran ARIA yang digunakan secara keliru
• Juga memungkinkan pemeriksaan dukungan keyboard yang belum lengkap
• Tujuannya adalah menyederhanakan proses pengembangan dan pengujian situs web yang aksesibel

Informasi listing Chrome Web Store

• Ini adalah ekstensi yang terdaftar di Chrome Web Store dan termasuk dalam kategori Developer Tools
• Berdasarkan listing, jumlah penggunanya adalah 10.000
• Ratingnya 4,9/5, dengan 33 ulasan
• Versinya adalah 1.4.3 dan ukurannya 156KiB
• Proyek ini adalah open source yang dipublikasikan di GitHub
  • Repositori GitHub aria-devtools
  • Halaman dukungan dan issue

Penanganan privasi

• Pengembang menyatakan bahwa ekstensi ini tidak mengumpulkan atau menggunakan data pengguna
• Data tidak dijual kepada pihak ketiga
• Data tidak digunakan atau dipindahkan untuk tujuan yang tidak terkait dengan fungsi inti ekstensi
• Data tidak digunakan atau dipindahkan untuk penilaian kredit maupun tujuan pinjaman

[GN⁺]

Opini Hacker News

• Terlihat bagus. Bisakah dibuat agar berjalan juga di dalam iframe? Akan sangat bagus kalau bisa dipakai di Storybook/Playroom
  Tautan Firefox: https://addons.mozilla.org/en-US/firefox/addon/aria-devtools...

  • Senang Anda menyukainya. Alasan terbesar saya belum menambahkan dukungan iframe adalah karena cakupan izinnya menjadi jauh lebih luas
    Alih-alih seperti sekarang, mengeklik ikon "ARIA DevTools" lalu hanya mengizinkan akses ke tab saat ini, ekstensi harus diberi izin untuk mengakses semua data di semua situs web yang Anda kunjungi. Namun saya akan menyelidiki lagi apakah situasinya sudah berubah sejak terakhir kali saya mengeceknya
  • Saya penasaran apakah iframe bisa dibuka di tab baru lalu ekstensi digunakan di sana

• Ini alat yang sangat berguna baik untuk pemeriksaan cepat maupun untuk edukasi. Visualisasi ini sepertinya akan membantu menunjukkan kepada pemangku kepentingan nonteknis bagaimana seharusnya memikirkan aksesibilitas, terutama pembaca layar
  Setengah dari kesulitan WCAG adalah membuat para pemangku kepentingan melampaui sekadar mencentang kotak kepatuhan

  • "Kan sudah berupa teks, bukankah pembaca layar tinggal membacanya saja?"
  • Sampai batas tertentu itu masuk akal. Jika 98% pengguna bisa memakai situs yang tidak aksesibel tanpa masalah, apalagi mengingat orang yang banyak menggunakan komputer umumnya lebih muda, mengapa harus melakukan lebih dari sekadar mencentang kotak? Itu tampak seperti pilihan dengan nilai ekspektasi negatif

• Sangat keren. Baru-baru ini saya mengimplementasikan visualisasi pohon aksesibilitas versi saya sendiri [1], dan alat ini menarik karena visualisasinya lebih berfokus pada pengelompokan unit-unit individual daripada pada pohon itu sendiri
  Saya membayangkannya sebagai cara untuk menunjukkan keseluruhan struktur, dan lewat itu membantu orang fokus pada alur logis halaman. Sebaliknya, pendekatan yang melihat pohon sebagai kumpulan blok-blok individual dan menganggap kohesi di dalam tiap blok lebih penting ini cukup menarik. Kalau ingin saling membandingkan, saya senang untuk berdiskusi
  [1] https://polypane.app/blog/polypane-20-1-the-accessibility-tr...

• Tampak rapi, dan jauh lebih tertata daripada https://wave.webaim.org/

  • Terima kasih. Saya rasa ARIA DevTools punya banyak potensi. Menurut ukuran saya ini cukup populer, tetapi saya belum punya koneksi dengan orang-orang yang mendalami aksesibilitas web
    Karena detail itu penting untuk alat seperti ini, sejujurnya WAVE mungkin lebih akurat

• Cukup rapi dan saya suka. Saya mencobanya pada halaman metadata program TV yang sedang saya kembangkan
  Salah satu elemennya adalah kumpulan div yang berisi span yang masing-masing menjelaskan kontennya dengan aria-label; VoiceOver di MacOS membacanya dengan benar dan pohon aksesibilitas Chrome juga menangkapnya, tetapi alat ini tidak menampilkan aria-label dan malah menampilkan nilai-nilainya berderet sebagai string. Selain itu, ::before { content: ", " / ""; } terdeteksi sebagai , value, dan ini secara umum dukungannya tidak terlalu baik

  • Bisakah saya mendapatkan tautan halamannya? Saya ingin mengujinya langsung dan memperbaikinya

• Bagus. Saya sangat tertarik pada dukungan aksesibilitas
  Sekarang situs web bukan lagi pekerjaan utama saya, tetapi dulu saya selalu berusaha memastikan situs yang saya tangani dibuat sangat aksesibel

• Untuk alat seperti ini, saya berharap logika ARIA dipisahkan dari UI. Pemrosesan ARIA yang kompleks sebaiknya dimasukkan ke dalam pustaka, lalu beberapa UI dibangun di atas codebase umum yang sudah teruji dengan baik
  Sekalian promosi: https://github.com/xi/aria-api

• Bagaimana dibandingkan dengan alat bawaan Chrome (https://developer.chrome.com/docs/devtools/accessibility/ref...)?

  • Saat merancang alat ini, saya mencoba mencerminkan pengalaman pengguna pembaca layar, bukan hanya menampilkan role dan atribut ARIA
    Misalnya, halaman harus dinavigasi hanya dengan keyboard. Jika dropdown tidak aksesibel, itu langsung terlihat bagi pengguna. Tabel juga hanya menampilkan satu sel dan header-nya dalam satu waktu. Saya rasa ini sangat dekat dengan pengalaman pengguna pembaca layar yang sebenarnya

• Ide dan implementasinya bagus. Saya pasti akan mencobanya di side project. Kebetulan saya baru menonton presentasi Mandy Michael tentang performa dan aksesibilitas HTML [1], dan sedang bertanya-tanya apakah ada alat yang lebih baik daripada viewer pohon aksesibilitas bawaan browser

  1. https://youtu.be/cghb0VpCJqM?si=5pWNrkPOyUsohyGJ

• Alat yang keren. Belakangan ini saya makin mendalami aksesibilitas, khususnya mencoba meningkatkan pengalaman pengguna pembaca layar
  Apakah ada di antara yang lebih berpengalaman yang sudah menguji alat ini dalam skenario kompleks seperti formulir berskala besar atau tabel dinamis? Saya penasaran bagaimana perbandingannya dengan alat aksesibilitas lain dalam kasus seperti itu. Saya akan menghargai tips atau insight apa pun