Referensi fitur aksesibilitas

Kayce Basques

Sofia Emelianova

Halaman ini adalah referensi komprehensif tentang fitur aksesibilitas di Chrome DevTools. Fitur ini ditujukan untuk developer web yang:

• Memiliki pemahaman dasar tentang DevTools, seperti cara membukanya.
• Memahami 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 Asistif jika Anda mencari bantuan untuk menavigasi DevTools dengan teknologi asistif seperti pembaca layar.

Lihat Learn Accessibility jika Anda ingin mempelajari cara mengembangkan situs yang aksesibel.

Ringkasan fitur aksesibilitas di Chrome DevTools

Bagian ini menjelaskan cara DevTools cocok dengan toolkit aksesibilitas Anda secara keseluruhan.

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

1. Dapatkah saya membuka halaman dengan keyboard atau pembaca layar?
2. Apakah elemen halaman ditandai 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 di panel Lighthouse untuk menentukan apakah:

• Halaman ditandai dengan benar untuk pembaca layar.
• Elemen teks di 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 panel Lighthouse. DevTools menampilkan berbagai opsi konfigurasi.

   

3. Untuk Perangkat, pilih Seluler jika Anda ingin menyimulasikan perangkat seluler. Opsi ini mengubah string agen pengguna Anda dan mengubah ukuran area tampilan. Jika versi seluler halaman ditampilkan 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. Biarkan opsi ini tetap aktif jika Anda ingin menemukan cara lain untuk meningkatkan kualitas halaman Anda.

5. Bagian Pembatasan memungkinkan Anda membatasi jaringan dan CPU, yang berguna saat menganalisis performa pemuatan. Opsi ini tidak relevan dengan skor aksesibilitas Anda, jadi Anda dapat menggunakan opsi 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 juga mungkin tidak relevan dengan skor aksesibilitas Anda, jadi Anda dapat menggunakan opsi apa pun yang Anda sukai.

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

   

8. Klik audit untuk mempelajari lebih lanjut.

   

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

   

Lihat juga: Ekstensi aXe

Anda mungkin lebih suka menggunakan ekstensi aXe atau ekstensi Lighthouse daripada panel Lighthouse yang tersedia secara default di Chrome. Secara umum, keduanya memberikan informasi yang sama, karena aXe adalah mesin pokok yang mendukung panel Lighthouse. Ekstensi aXe memiliki UI yang berbeda dan menjelaskan audit dengan sedikit berbeda.

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

Menguji penataan ulang konten dengan Toolbar Perangkat

Kriteria penyesuaian tata letak untuk Panduan Aksesibilitas Konten Web (WCAG) merekomendasikan agar konten web tetap dapat dilihat tanpa kehilangan informasi meskipun ukuran area tampilan diubah atau orientasinya diubah. Dengan menyelaraskan konten ke satu kolom, pengguna yang menggunakan teks yang diperbesar akan didukung. Untuk menguji cara penyesuaian konten Anda, ubah ukuran area pandang secara dinamis dengan Toolbar perangkat di panel Lighthouse.

Untuk mengubah ukuran area pandang, tarik tuas ke dimensi yang Anda butuhkan. Untuk dimensi tertentu yang akan diuji, lihat kriteria keberhasilan penataan ulang WCAG.

Tab Aksesibilitas

Tab Aksesibilitas adalah tempat Anda dapat melihat pohon aksesibilitas, atribut ARIA, dan properti aksesibilitas terkomputasi dari node DOM.

Untuk membuka tab Aksesibilitas:

1. Klik panel Elemen.
2. Di DOM Tree, pilih elemen yang ingin Anda periksa.
3. Klik tab Aksesibilitas. Tab ini mungkin tersembunyi di balik tombol Tab Lainnya keyboard_double_arrow_right .

Anda dapat menarik tab Aksesibilitas ke depan untuk akses yang lebih cepat pada masa mendatang.

Melihat posisi elemen dalam hierarki aksesibilitas

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

Untuk memeriksa posisi elemen dalam hierarki aksesibilitas dari tab Aksesibilitas, aktifkan/nonaktifkan Tampilkan hierarki aksesibilitas.

Tombol ini menggantikan hierarki DOM di panel Elemen dengan hierarki aksesibilitas layar penuh. Pohon ini membantu Anda lebih memahami cara konten web Anda ditampilkan ke teknologi pendukung.

Untuk menjelajahi hierarki aksesibilitas, Anda dapat meluaskan dan memilih node untuk melihat detailnya di bagian Properti yang dikomputasi.

Kapan saja Anda dapat beralih kembali ke hierarki DOM. Node DOM yang sesuai tetap dipilih. Ini adalah cara yang tepat 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.

Melihat atribut ARIA elemen di tab Aksesibilitas.

Melihat urutan sumber elemen di layar

Elemen di halaman tidak selalu muncul dalam urutan yang sama dengan urutan di sumber. Hal ini dapat membingungkan pengguna yang mengandalkan teknologi pendukung untuk menjelajahi web.

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

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

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

Melihat properti aksesibilitas terhitung elemen

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

Melihat properti aksesibilitas terhitung elemen di tab Aksesibilitas.

Tab Rendering

Gunakan tab Rendering untuk meniru fitur media CSS tertentu tanpa menentukannya secara manual dalam kode atau lingkungan pengujian Anda. Fitur media ini mengubah tampilan halaman web Anda berdasarkan preferensi perangkat pengguna. Untuk menguji aksesibilitas visual halaman Anda, buka tab Rendering dan pelajari opsi berikut:

• Emulasikan kekurangan daya penglihatan untuk melihat halaman Anda melalui beberapa simulasi kekurangan daya penglihatan yang berbeda.
• Emulasikan fitur media CSS prefers-color-scheme untuk melihat tampilan halaman Anda dengan mode gelap atau terang diaktifkan. Banyak orang menganggap mode gelap sebagai pilihan estetika, tetapi Mode gelap sebagai alat aksesibilitas menunjukkan kegunaannya.
• Emulasikan jenis media CSS untuk melihat halaman Anda dalam gaya media cetak atau layar.
• Emulasikan fitur media CSS forced-colors untuk melihat tampilan halaman Anda jika agen pengguna mengaktifkan mode warna paksa.
• Emulasikan fitur media CSS prefers-contrast untuk melihat konten web Anda dengan nilai kontras yang lebih tinggi, lebih rendah, atau spesifik.
• Emulasikan fitur media CSS prefers-reduced-motion untuk melihat konten web Anda dengan gerakan yang dikurangi. Beberapa pengguna mengalami gangguan atau mual akibat konten animasi. Gunakan opsi ini untuk melihat tampilan halaman Anda tanpa animasi atau hal-hal seperti scroll halus.
• Emulasi fitur media CSS prefers-reduced-transparency untuk melihat tampilan konten web Anda jika pengguna meminta untuk mengurangi efek lapisan transparan atau tembus cahaya yang digunakan di perangkat.

Menemukan dan memperbaiki teks kontras rendah

DevTools dapat secara 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.