Referensi fitur aksesibilitas

Kayce Basques

Sofia Emelianova

Halaman ini adalah referensi komprehensif tentang fitur aksesibilitas di Chrome DevTools. Ditujukan bagi developer web yang:

• Memiliki pemahaman dasar tentang DevTools, seperti cara membukanya.
• Memahami prinsip-prinsip aksesibilitas dan praktik terbaik.

Tujuan dari referensi ini adalah membantu Anda menemukan semua alat yang tersedia di DevTools yang dapat membantu Anda memeriksa aksesibilitas halaman.

Lihat Menavigasi Chrome DevTools dengan Teknologi Pendukung jika Anda mencari bantuan untuk menavigasi DevTools dengan teknologi pendukung seperti pembaca layar.

Lihat Mempelajari Aksesibilitas jika Anda ingin mempelajari cara membuat situs yang mudah diakses.

Ringkasan fitur aksesibilitas di Chrome DevTools

Bagian ini menjelaskan bagaimana DevTools sesuai dengan toolkit aksesibilitas Anda secara keseluruhan.

Saat menentukan apakah suatu halaman dapat diakses, Anda harus memikirkan 2 pertanyaan umum:

1. Dapatkah saya membuka halaman dengan keyboard atau pembaca layar?
2. Apakah elemen halaman di-markup dengan benar untuk pembaca layar?

Secara umum, DevTools dapat membantu Anda memperbaiki error terkait pertanyaan #2, karena error ini mudah dideteksi secara otomatis. Pertanyaan #1 sama pentingnya, tetapi sayangnya DevTools tidak dapat membantu Anda di sana. Satu-satunya cara untuk menemukan error terkait pertanyaan #1 adalah dengan mencoba menggunakan halaman dengan keyboard atau pembaca layar sendiri. Lihat Cara Melakukan Peninjauan Aksesibilitas untuk mempelajari lebih lanjut.

Mengaudit aksesibilitas halaman

Secara umum, gunakan pemeriksaan aksesibilitas pada panel Lighthouse untuk menentukan apakah:

• Halaman ditandai dengan benar untuk pembaca layar.
• Elemen teks pada halaman memiliki rasio kontras yang memadai. Lihat juga Menjadikan situs lebih mudah dibaca.

Untuk mengaudit halaman:

1. Buka URL yang ingin Anda audit.

2. Di DevTools, klik tab Lighthouse. DevTools menampilkan berbagai opsi konfigurasi.

   

3. Untuk Perangkat, pilih Seluler jika Anda ingin menyimulasikan perangkat seluler. Opsi ini mengubah string agen pengguna Anda secara berbeda dan mengubah ukuran area tampilan. Jika versi seluler halaman ditampilkan dan berbeda dengan versi desktop, opsi ini dapat sangat berpengaruh pada hasil audit Anda.

4. Di bagian Lighthouse, pastikan Aksesibilitas diaktifkan. Nonaktifkan kategori lainnya jika Anda ingin mengecualikannya dari laporan. Biarkan opsi ini tetap aktif jika Anda ingin menemukan cara lain untuk meningkatkan kualitas halaman.

5. Bagian Throttling memungkinkan Anda men-throttle jaringan dan CPU, yang berguna saat menganalisis performa pemuatan. Opsi ini seharusnya tidak relevan dengan skor aksesibilitas, sehingga Anda dapat menggunakan apa pun yang Anda inginkan.

6. Kotak centang Hapus Penyimpanan memungkinkan Anda menghapus semua penyimpanan sebelum memuat halaman, atau mempertahankan penyimpanan di antara pemuatan halaman. Opsi ini mungkin juga tidak relevan dengan skor aksesibilitas, jadi Anda bisa menggunakan apa pun yang Anda inginkan.

7. Klik Buat Laporan. Setelah 10 hingga 30 detik, DevTools memberikan laporan. Laporan Anda memberi Anda berbagai tips tentang cara meningkatkan aksesibilitas halaman.

   

8. Klik audit untuk mempelajarinya lebih lanjut.

   

9. Klik Pelajari Lebih Lanjut untuk melihat dokumentasi audit tersebut.

   

Lihat juga: ekstensi aXe

Anda dapat memilih untuk menggunakan ekstensi aXe atau ekstensi Lighthouse daripada panel Lighthouse yang tersedia secara default di Chrome. Mereka umumnya memberikan informasi yang sama, karena kapak adalah mesin yang mendasari panel Lighthouse. Ekstensi kapak memiliki UI yang berbeda dan mendeskripsikan audit dengan cara yang sedikit berbeda.

Salah satu keuntungan yang dimiliki ekstensi aXe dibandingkan panel Audit adalah kemampuan ini memungkinkan Anda memeriksa dan menandai node yang gagal.

Panel Aksesibilitas

Panel Aksesibilitas adalah tempat Anda dapat melihat hierarki aksesibilitas, atribut ARIA, dan properti aksesibilitas yang dikomputasi dari node DOM.

Untuk membuka panel Aksesibilitas:

1. Klik tab Elemen.
2. Di DOM Tree, pilih elemen yang ingin diperiksa.
3. Klik tab Accessibility. Tab ini mungkin tersembunyi di balik tombol More Tabs .

Melihat posisi elemen di hierarki aksesibilitas

Hierarki aksesibilitas adalah subset hierarki DOM. File ini hanya berisi elemen dari hierarki DOM yang relevan dan berguna untuk menampilkan konten halaman di pembaca layar.

Periksa posisi elemen di hierarki aksesibilitas dari Panel aksesibilitas.

Tampilan ini memungkinkan Anda menjelajahi hanya satu node dan ancestor-nya. Untuk menjelajahi seluruh hierarki aksesibilitas, ikuti langkah-langkah di bawah.

(Pratinjau) Menjelajahi hierarki aksesibilitas halaman penuh

Tampilan halaman penuh dari hierarki aksesibilitas memungkinkan Anda menjelajahi seluruh hierarki dan membantu Anda lebih memahami bagaimana konten web Anda terekspos ke teknologi pendukung.

Untuk menjelajahi hierarki aksesibilitas:

1. Centang Aktifkan hierarki aksesibilitas halaman penuh.

2. Pada panel tindakan di bagian atas, klik Muat ulang DevTools.

   

3. Di pojok kanan atas panel Elemen, alihkan tombol Beralih ke tampilan Hierarki Aksesibilitas .

   

4. Jelajahi hierarki aksesibilitas. Anda dapat memperluas node atau mengklik untuk melihat detail pada Properti komputasi.

5. Pilih node, lalu klik tombol Beralih ke tampilan hierarki DOM untuk beralih kembali ke hierarki DOM.

   Simpul DOM yang sesuai dipilih sekarang. Ini adalah cara yang bagus untuk memahami pemetaan antara node DOM dan node hierarki aksesibilitasnya.

Melihat atribut ARIA elemen

Atribut ARIA memastikan bahwa pembaca layar memiliki semua informasi yang diperlukan untuk merepresentasikan konten halaman dengan benar.

Lihat atribut ARIA elemen di panel Aksesibilitas.

Melihat urutan sumber elemen di layar

Elemen pada halaman tidak selalu muncul sesuai urutannya di sumber. Hal ini mungkin membingungkan pengguna yang bergantung pada teknologi pendukung untuk menavigasi web.

Untuk melihat dan men-debug urutan sumber di situs Anda:

1. Periksa elemen di halaman.
2. Di Elemen > Aksesibilitas > Penampil Urutan Sumber, centang Tampilkan urutan sumber.

Di area pandang, DevTools menguraikan elemen tersarang dengan batas dan menandainya dengan angka yang sesuai dengan urutan sumbernya.

Melihat properti aksesibilitas terkomputasi elemen

Beberapa properti aksesibilitas dihitung secara dinamis oleh browser. Properti ini dapat dilihat di bagian Properti Komputasi pada panel Aksesibilitas.

Lihat properti aksesibilitas terkomputasi elemen di panel Aksesibilitas.

Menemukan dan memperbaiki teks kontras rendah

DevTools dapat otomatis menemukan masalah kontras rendah dan menyarankan warna yang lebih baik untuk membantu Anda memperbaikinya. Lihat Menjadikan situs lebih mudah dibaca untuk mempelajari lebih lanjut.