Chrome DevTools meluncurkan hierarki aksesibilitas penuh sehingga memudahkan developer mendapatkan ringkasan keseluruhan hierarki. Dalam postingan ini, temukan cara pembuatan pohon ini dan penggunaannya dalam pekerjaan Anda.
Apa itu pohon aksesibilitas?
Teknologi pendukung seperti pembaca layar menggunakan API aksesibilitas Chromium untuk berinteraksi dengan konten web. Model dasar API ini adalah hierarki aksesibilitas: hierarki objek aksesibilitas yang dapat dikueri oleh teknologi pendukung untuk atribut dan properti serta menjalankan tindakan. Developer web membentuk dan memanipulasi hierarki aksesibilitas terutama melalui properti DOM seperti atribut ARIA untuk HTML.
Di Chrome DevTools, kami menyediakan panel aksesibilitas untuk membantu developer memahami cara konten mereka terpapar teknologi pendukung. Konkretnya, bila sebuah node dipilih dalam penampil hierarki DOM, properti dari node aksesibilitas yang sesuai akan ditampilkan dalam panel bersama dengan tampilan ancestor node dan turunan langsungnya.
Bagaimana hierarki dibuat?
Sebelum sampai ke tampilan hierarki penuh yang baru ini di DevTools, mari kita bahas secara singkat pohon aksesibilitas secara lebih jelas. Hierarki aksesibilitas adalah turunan dari hierarki DOM. Strukturnya kurang lebih sama, tetapi disederhanakan untuk menghapus node tanpa konten semantik seperti elemen <div> yang murni digunakan untuk gaya visual. Setiap node dalam hierarki memiliki peran seperti Button atau Heading, dan sering kali nama yang dapat berasal dari atribut ARIA atau berasal dari konten node. Jika kita melihat dokumen HTML:
<html>
<head>
<title>How old are you?</title>
</head>
<body>
<label for="age">Age</label>
<input id="age" type="number" name="age" value="42">
<div>
<button>Back</button>
<button>Next</button>
</div>
</body>
</html>
Perender di Chromium, yang bernama Blink, memperoleh hierarki aksesibilitas internal kurang lebih seperti berikut.
role='rootWebArea' focusable name='How old are you?'
role='genericContainer' ignored
role='genericContainer' ignored
role='labelText'
role='staticText' name='Age'
role='spinButton' editable focusable name='Age' value='42'
role='genericContainer' editable
role='staticText' editable name='42'
role='genericContainer'
role='button' focusable name='Back'
role='staticText' name='Back'
role='button' focusable name='Next'
role='staticText' name='Next'
Perhatikan, representasi ini berisi beberapa node berlebihan dengan peran genericContainer, yang tampaknya bertentangan dengan pernyataan di atas bahwa hierarki aksesibilitas adalah turunan sederhana dari hierarki DOM. Namun, sebagian besar node ini hanya terjadi di hierarki internal dan tidak akan terpapar teknologi pendukung. Karena DevTools mengumpulkan informasi aksesibilitasnya langsung dari proses perender, ini adalah representasi hierarki yang ditangani DevTools.
Hierarki aksesibilitas penuh di DevTools
Hierarki baru dan penuh aksesibilitas yang disinkronkan dengan hierarki DOM sehingga developer dapat beralih antara kedua hierarki. Kami berharap pohon baru ini akan lebih dapat dieksplorasi, berguna, dan lebih mudah digunakan.
Setelah mengetahui cara kerja hierarki aksesibilitas, Anda dapat menggunakan DevTools untuk melihat tampilan hierarki baru. Dokumen HTML berikut dengan judul, tajuk, dan dua tombol digunakan untuk menampilkan hierarki.
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
Tampilan hierarki sebelumnya hanya memungkinkan Anda menjelajahi satu node dan ancestor-nya.
Kini, bila Anda mengalihkan hierarki baru, tampilan hierarki DOM akan digantikan oleh tampilan hierarki DOM dan memungkinkan Anda melihat hierarki aksesibilitas lengkap untuk halaman tersebut:
Konstruksi pohon lambat
Agar dapat berperforma baik bahkan untuk situs yang lebih besar, pohon ini dibuat dengan lambat di frontend saat dijelajahi. Setelah node diperluas dalam hierarki, turunan untuk node tersebut akan diambil melalui Chrome DevTools Protocol (CDP) dan hierarki tersebut akan dibangun ulang.
Live
Tampilan hierarki baru aktif dan diperbarui secara dinamis jika hierarki aksesibilitas berubah di perender. Fungsi ini terhubung ke mekanisme yang sama yang akan memberi tahu teknologi pendukung tentang perubahan pada hierarki, dan menggunakannya untuk memunculkan peristiwa ke frontend DevTools dengan node yang diperbarui. Dalam praktiknya, backend CDP memproses update pada hierarki, melacak node mana yang telah diminta sebelumnya, dan mengirimkan peristiwa ke frontend DevTools jika salah satu node ini berubah.
Kisah banyak pohon
Dalam deskripsi apa itu hierarki aksesibilitas, Anda telah mempelajari cara Blink membuat hierarki aksesibilitas untuk DOM yang sedang dirender, dan DevTools mengambil pohon ini melalui CDP. Meskipun benar, kami meninggalkan beberapa detail dalam deskripsi ini. Pada kenyataannya, ada berbagai cara untuk merasakan hierarki aksesibilitas di Chromium. Saat mendesain tampilan hierarki baru untuk DevTools, kami telah membuat beberapa pilihan di sepanjang proses tentang bagian internal aksesibilitas Chromium yang ingin ditampilkan.
Platform
Setiap platform memiliki API aksesibilitas yang berbeda dan meskipun bentuk hierarki sama di semua platform, API untuk berinteraksi dengan hierarki dapat berbeda, dan nama atribut dapat berbeda-beda. DevTools menampilkan hierarki internal Chromium dengan peran dan atribut yang cenderung sesuai dengan yang ditetapkan dalam spesifikasi ARIA.
Beberapa frame dan isolasi situs
Karena Chromium tidak hanya menempatkan konten setiap tab dalam proses perender yang berbeda, tetapi juga mengisolasi dokumen lintas situs dalam proses perender yang berbeda, kita harus terhubung ke setiap dokumen turunan di luar proses secara terpisah melalui CDP dan mengambil hierarki aksesibilitasnya. Kemudian, kami menggabungkan subtree ini di frontend untuk memberikan ilusi satu pohon yang koheren, meskipun subtree tersebut hidup dalam proses perender yang berbeda di Chromium.
Node yang diabaikan dan tidak menarik
Kami menyembunyikan beberapa node per default: node yang diabaikan, dan node dengan peran “generik” tanpa nama. Node ini tidak memiliki makna semantik dan, dalam kasus node yang diabaikan, tidak diekspos ke teknologi pendukung. Kami menyembunyikan node ini agar tampilan hierarki tidak berantakan. Jika tidak, pohon aksesibilitas untuk sebagian besar halaman web akan terlihat seperti ini:
Yang perlu diwaspadai adalah hal ini pada dasarnya berarti kita perlu membuat pohon lain selain yang tersedia di backend. Misalnya, kita memiliki simpul A, B, C, dan X yang mana A memiliki turunan X dan B, dan X memiliki turunan C. Jika X adalah simpul yang diabaikan, kita memangkas X dari pohon dan sebagai gantinya membuat pohon dengan C adalah turunan dari A.
Di frontend, kita membangun pohon lengkap, termasuk node yang diabaikan, dan hanya memangkasnya tepat sebelum merender node. Kami melakukannya karena dua alasan:
- Menangani update node dari backend menjadi jauh lebih mudah, karena kita memiliki struktur hierarki yang sama di kedua endpoint. Misalnya, jika node B dihapus dalam contoh, kita akan menerima update untuk node X (karena turunannya telah berubah), tetapi jika kita memangkas node tersebut, kita akan kesulitan mencari tahu apa yang harus diupdate.
- Cara ini memastikan bahwa semua node DOM memiliki node aksesibilitas yang sesuai. Bila hierarki diubah, kita akan memilih node yang sesuai dengan node yang saat ini dipilih dalam hierarki DOM. Jadi untuk contoh sebelumnya, jika pengguna mengubah-ubah hierarki sementara simpul DOM yang sesuai dengan X dipilih, kita memasukkan X di antara simpul A dan B, lalu memilih X di pohon itu. Hal ini memungkinkan pengguna memeriksa node aksesibilitas untuk semua node DOM dan membantu menentukan alasan node diabaikan.
Ide mendatang
Peluncuran hierarki aksesibilitas baru hanyalah permulaan. Kami memiliki beberapa ide untuk project mendatang yang dapat kami bangun berdasarkan tampilan baru ini, tetapi kami juga ingin mendengar masukan Anda.
Pemfilteran alternatif
Seperti yang dijelaskan di atas, saat ini kami memfilter node yang dianggap tidak menarik. Kami dapat memberikan cara untuk menonaktifkan perilaku ini dan menampilkan semua node, atau memberikan pemfilteran alternatif seperti Tampilkan node tempat terkenal atau Tampilkan judul.
Menyoroti masalah a11y
Kita dapat menyertakan analisis "praktik terbaik aksesibilitas" pada hierarki dan menyoroti masalah aksesibilitas langsung pada node yang bermasalah.
Tampilkan tindakan aksesibilitas di DevTools
Hierarki yang saat ini kami tampilkan hanya bersifat satu arah: Fitur ini memungkinkan kami mendapatkan gambaran tentang informasi yang akan diberikan ke teknologi pendukung saat menjelajahi halaman web tertentu. Tindakan aksesibilitas mewakili komunikasi ke arah lain: Tindakan ini memungkinkan teknologi pendukung bertindak pada UI yang ditampilkan. Kita dapat menampilkan tindakan tersebut di DevTools untuk memungkinkan tindakan seperti “mengklik”, men-scroll, atau mengubah nilai di halaman menggunakan API yang tersedia untuk teknologi pendukung.