Chrome DevTools meluncurkan hierarki aksesibilitas lengkap yang memudahkan developer mendapatkan ringkasan keseluruhan hierarki. Dalam posting ini, cari tahu bagaimana pohon ini dibuat dan bagaimana menggunakannya dalam pekerjaan Anda.
Apa itu pohon aksesibilitas?
Teknologi pendukung seperti pembaca layar menggunakan API aksesibilitas Chromium untuk berinteraksi dengan konten web. Model yang mendasari API ini adalah hierarki aksesibilitas: pohon objek aksesibilitas yang dapat dibuat kueri oleh teknologi pendukung untuk atribut dan properti serta melakukan tindakan atas atribut dan properti tersebut. 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 bagaimana konten mereka diekspos ke teknologi pendukung. Konon, saat node dipilih di penampil hierarki DOM, properti node aksesibilitas terkait akan ditampilkan di panel bersama dengan tampilan ancestor node dan turunan langsungnya.
Bagaimana pohon itu dibuat?
Sebelum sampai ke tampilan hierarki lengkap yang baru ini di DevTools, mari kita bahas secara singkat pohon aksesibilitas dalam istilah yang 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 hanya digunakan untuk penataan gaya. Setiap node dalam hierarki memiliki peran seperti Button atau Heading, dan sering kali sebuah 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 kira-kira 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 bahwa 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 {i>node<i} ini hanya terjadi di pohon internal dan tidak akan diekspos ke teknologi pendukung. Karena DevTools mengumpulkan informasi aksesibilitasnya langsung dari proses perender, ini adalah representasi hierarki yang ditangani DevTools.
Hierarki aksesibilitas penuh di DevTools
Hierarki aksesibilitas penuh yang baru disinkronkan dengan hierarki DOM sehingga developer dapat beralih di antara kedua hierarki tersebut. Kami berharap hierarki baru ini akan lebih mudah dijelajahi, bermanfaat, dan digunakan.
Setelah mengetahui cara kerja pohon aksesibilitas, Anda bisa menggunakan DevTools untuk melihat tampilan tampilan hierarki baru. Dokumen HTML berikut dengan judul, heading, 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 akan memungkinkan Anda untuk menjelajahi satu node dan ancestor-nya.
Sekarang, bila Anda mengalihkan hierarki baru, tampilan ini akan menggantikan tampilan hierarki DOM dan memungkinkan Anda melihat hierarki aksesibilitas lengkap untuk halaman tersebut:
Konstruksi pohon malas
Agar pohon berperforma tinggi bahkan untuk situs yang lebih besar, hierarki dibuat dengan lambat di frontend saat dijelajahi. Setelah node diperluas di hierarki, turunan untuk node tersebut akan diambil melalui Chrome DevTools Protocol (CDP) dan hierarki akan dibuat ulang.
Live
Tampilan hierarki baru aktif dan diperbarui secara dinamis jika hierarki aksesibilitas berubah dalam perender. Alat ini terhubung ke mekanisme yang sama yang akan memberi tahu teknologi pendukung tentang perubahan pada hierarki, dan menggunakannya untuk memunculkan event ke frontend DevTools dengan node yang diperbarui. Dalam praktiknya, backend CDP mendengarkan pembaruan pohon, melacak node mana yang telah diminta sebelumnya, dan mengirimkan kejadian ke frontend DevTools jika salah satu node tersebut berubah.
Kisah banyak pohon
Pada deskripsi mengenai apa itu hierarki aksesibilitas, Anda telah mempelajari cara Blink membuat pohon aksesibilitas untuk DOM yang dirender, dan DevTools mengambil pohon ini melalui CDP. Meskipun ini benar, kami tidak menyertakan beberapa detail dalam deskripsi ini. Pada kenyataannya, ada cukup banyak cara berbeda untuk menggunakan hierarki aksesibilitas di Chromium. Saat mendesain tampilan hierarki baru untuk DevTools, kami telah membuat beberapa pilihan tentang bagian internal aksesibilitas Chromium yang ingin kami tampilkan.
Platform
Setiap platform memiliki API aksesibilitas yang berbeda dan meskipun bentuk pohon sama di semua platform, API untuk berinteraksi dengan hierarki berbeda, dan nama atribut dapat berbeda. DevTools menampilkan pohon internal Chromium dengan peran dan atribut yang cenderung cocok dengan yang ditentukan dalam spesifikasi ARIA.
Beberapa frame dan isolasi situs
Karena Chromium tidak hanya menempatkan konten dari setiap tab dalam proses perender yang berbeda, tetapi juga mengisolasi dokumen lintas situs dalam berbagai proses perender, kita harus terhubung ke setiap dokumen turunan di luar proses secara terpisah melalui CDP dan mengambil hierarki aksesibilitasnya. Kemudian, kami menggabungkan sub-pohon ini bersama-sama di frontend untuk memberikan ilusi tentang satu pohon yang koheren, meskipun sub-pohon tersebut hidup dalam proses perender yang berbeda di Chromium.
Node yang diabaikan dan tidak menarik
Kita menyembunyikan beberapa node per default: node yang diabaikan, dan node dengan peran “generik” tanpa nama. Node ini tidak memiliki makna semantik dan, jika terjadi node yang diabaikan, tidak diekspos ke teknologi pendukung. Kita menyembunyikan node ini agar tampilan hierarki tidak berantakan. Jika tidak, hierarki aksesibilitas untuk sebagian besar halaman web akan terlihat seperti ini:
Peringatan di sini adalah bahwa pada dasarnya kita perlu membuat hierarki lain dari yang tersedia di backend. Misalnya, kita memiliki node A, B, C, dan X yang A memiliki turunan X dan B, dan X memiliki turunan C. Jika X adalah simpul yang diabaikan, kita memangkas X dari hierarki dan membuat pohon dengan C sebagai turunan dari A.
Di frontend, kita membuat hierarki lengkap termasuk node yang diabaikan dan hanya memangkasnya tepat sebelum merender node. Kami melakukan ini 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 telah memangkas node tersebut, kita akan kesulitan untuk mengetahui apa yang harus diupdate.
- Node ini memastikan bahwa semua node DOM memiliki node aksesibilitas yang sesuai. Jika hierarki dialihkan, kita memilih node yang sesuai dengan node yang saat ini dipilih dalam hierarki DOM. Jadi untuk contoh sebelumnya, jika pengguna mengalihkan hierarki saat node DOM yang sesuai dengan X dipilih, kita memasukkan X di antara node A dan B, lalu memilih X di hierarki. Hal ini memungkinkan pengguna memeriksa node aksesibilitas untuk semua node DOM dan membantu menentukan mengapa node diabaikan.
Ide masa depan
Meluncurkan hierarki aksesibilitas baru hanyalah permulaan. Kami memiliki beberapa ide untuk project mendatang yang dapat kami kembangkan 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. Kita 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 bisa menggabungkan analisis "praktik terbaik aksesibilitas" dengan hierarki dan menyoroti masalah aksesibilitas langsung pada node yang bermasalah.
Memunculkan tindakan aksesibilitas di DevTools
Hierarki yang saat ini kami tampilkan murni bersifat satu arah: Hal ini memungkinkan kita untuk mendapatkan gambaran tentang informasi apa yang akan disalurkan ke teknologi pendukung saat menjelajahi halaman web tertentu. Tindakan aksesibilitas mewakili komunikasi dalam arah lain: Tindakan ini memungkinkan teknologi pendukung untuk bertindak pada UI yang ditampilkan. Kita dapat memunculkan tindakan tersebut di DevTools untuk memungkinkan tindakan seperti “mengklik”, men-scroll, atau mengubah nilai di halaman menggunakan API yang tersedia untuk teknologi pendukung.