Referensi fitur aksesibilitas

Halaman ini merupakan referensi komprehensif tentang fitur aksesibilitas di Chrome DevTools. Panduan ini ditujukan bagi developer web yang:

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

Tujuan referensi ini adalah untuk 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 tentang menavigasi DevTools dengan teknologi pendukung seperti pembaca layar.

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

Ringkasan fitur aksesibilitas di Chrome DevTools

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

Saat menentukan apakah halaman dapat diakses, Anda perlu mempertimbangkan 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 nomor 2, karena error ini mudah dideteksi secara otomatis. Pertanyaan nomor 1 juga sama pentingnya, tetapi sayangnya DevTools tidak dapat membantu Anda di sana. Satu-satunya cara untuk menemukan error terkait pertanyaan nomor 1 adalah dengan mencoba menggunakan sendiri halaman dengan keyboard atau pembaca layar. Lihat Cara Melakukan Peninjauan Aksesibilitas untuk mempelajari lebih lanjut.

Mengaudit aksesibilitas halaman

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

• Halaman diberi markup dengan benar untuk pembaca layar.
• Elemen teks pada halaman memiliki rasio kontras yang memadai. Lihat juga Membuat situs Anda 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 secara berbeda dan mengubah ukuran area pandang. Jika tampilan halaman versi seluler berbeda dengan versi desktop, opsi ini dapat memberikan pengaruh yang signifikan pada hasil audit Anda.

4. Di bagian Lighthouse, pastikan Aksesibilitas diaktifkan. Nonaktifkan kategori lainnya jika Anda ingin mengecualikannya dari laporan Anda. Tetap aktifkan setelan ini 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 beban. Opsi ini tidak boleh relevan dengan skor aksesibilitas, jadi Anda dapat menggunakan apa pun yang diinginkan.

6. Dengan kotak centang Clear Storage, Anda dapat menghapus semua penyimpanan sebelum memuat halaman, atau mempertahankan penyimpanan di antara pemuatan halaman. Opsi ini juga mungkin tidak relevan dengan skor aksesibilitas, sehingga Anda dapat menggunakan apa pun yang Anda sukai.

7. Klik Buat Laporan. Setelah 10 hingga 30 detik, DevTools akan memberikan laporan. Laporan Anda memberikan 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. Kabel tersebut umumnya memberikan informasi yang sama, karena aXe adalah mesin dasar yang menggerakkan panel Lighthouse. Ekstensi aXe memiliki UI yang berbeda dan menjelaskan audit dengan sedikit berbeda.

Salah satu keuntungan yang dimiliki ekstensi aXe dibandingkan panel Audit adalah Anda dapat 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 Anda periksa.
3. Klik tab Aksesibilitas. Tab ini mungkin tersembunyi di balik tombol More Tabs .

Melihat posisi elemen dalam hierarki aksesibilitas

Hierarki aksesibilitas adalah subset dari hierarki DOM. Class 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 untuk menjelajahi hanya satu node dan ancestor-nya. Untuk menjelajahi seluruh hierarki aksesibilitas, ikuti langkah-langkah di bawah ini.

(Pratinjau) Menjelajahi hierarki aksesibilitas halaman penuh

Tampilan halaman penuh dari hierarki aksesibilitas memungkinkan Anda menjelajahi keseluruhan hierarki dan membantu Anda lebih memahami bagaimana konten web Anda diekspos 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 meluaskan node atau mengklik untuk melihat detailnya di bagian Properti komputasi.

5. Pilih node, lalu klik tombol Switch to DOM tree view untuk beralih kembali ke hierarki DOM.

   Node DOM yang sesuai dipilih sekarang. Inilah cara terbaik untuk memahami pemetaan antara simpul DOM dan simpul pohon 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 urutan munculnya di sumber. Hal ini mungkin membingungkan pengguna yang bergantung pada teknologi bantu untuk menjelajahi web.

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

1. Periksa elemen di halaman.
2. Di Elemen > Aksesibilitas > Source Order Viewer, centang Tampilkan urutan sumber.

Di area pandang, DevTools membuat garis besar elemen bertingkat 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 Computed Properties 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 Membuat situs Anda lebih mudah dibaca untuk mempelajari lebih lanjut.