Digital Transformation
Accessibility Tree
Accessibility tree adalah representasi paralel DOM yang dipakai screen reader dan tools aksesibilitas untuk memahami struktur, peran, dan state elemen di sebuah halaman web.
TL;DR: Accessibility tree adalah versi DOM yang disederhanakan untuk screen reader dan alat bantu lain. Setiap elemen punya role, name, dan state. Tree ini menentukan apakah sebuah website bisa dipakai pengguna disabilitas, dan secara tidak langsung memengaruhi sinyal kualitas SEO.
Apa itu Accessibility Tree?
Browser modern membangun accessibility tree dari DOM dengan hanya menyertakan elemen yang relevan untuk teknologi bantu. Setiap node memiliki tiga properti utama: role (tombol, link, heading), name (label yang dibacakan), dan state (selected, disabled, expanded). Tag semantic HTML yang tepat menghasilkan tree yang akurat tanpa atribut ARIA tambahan.
Komponen Utama
| Properti | Contoh | Sumber |
|---|---|---|
| Role | button, link, heading | Tag HTML atau ARIA |
| Name | "Kirim formulir" | Text content, aria-label |
| State | expanded=true | aria-expanded, checked |
| Description | "Akan membuka tab baru" | aria-describedby |
Kenapa Penting?
Aksesibilitas yang baik melindungi bisnis dari risiko hukum (UU 8/2016 di Indonesia), memperluas pasar ke 22 juta penyandang disabilitas, dan menjadi sinyal positif bagi crawler Google yang semakin memperhatikan WCAG sebagai bagian dari sinyal pengalaman pengguna.
Pertanyaan Umum
Apa beda DOM dan accessibility tree?
DOM merepresentasikan seluruh struktur halaman. Accessibility tree hanya berisi elemen yang punya makna untuk pengguna teknologi bantu, dan menyertakan role serta state.
Bagaimana cara cek accessibility tree?
Buka DevTools Chrome, pilih tab Accessibility di panel Elements. Untuk audit menyeluruh, gunakan Lighthouse atau axe DevTools.
Istilah Terkait