Halaman ini adalah referensi komprehensif tentang fitur aksesibilitas di Chrome DevTools. Panduan 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 Pelajari Aksesibilitas jika Anda ingin mempelajari cara mengembangkan situs yang mudah diakses.
Ringkasan fitur aksesibilitas di Chrome DevTools
Bagian ini menjelaskan kesesuaian DevTools dengan toolkit aksesibilitas Anda secara keseluruhan.
Saat menentukan apakah halaman dapat diakses, Anda perlu memikirkan 2 pertanyaan umum:
- Dapatkah saya membuka halaman dengan keyboard atau pembaca layar?
- Apakah elemen halaman diberi markup dengan benar untuk pembaca layar?
Secara umum, DevTools dapat membantu Anda memperbaiki error yang terkait dengan pertanyaan #2, karena error ini mudah dideteksi secara otomatis. Pertanyaan nomor 1 sama pentingnya, tetapi sayangnya DevTools tidak dapat membantu Anda di sana. Satu-satunya cara untuk menemukan error yang terkait dengan 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 bagian panel Lighthouse untuk menentukan apakah:
- Halaman diberi markup 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:
- Buka URL yang ingin Anda audit.
Di DevTools, klik panel Lighthouse. DevTools menampilkan berbagai opsi konfigurasi.