Menjelajahi Chrome DevTools dengan teknologi pendukung

Rob Dodson

Panduan ini bertujuan untuk membantu pengguna yang terutama mengandalkan teknologi pendukung (AT), seperti pembaca layar, untuk mengakses dan menggunakan Chrome DevTools. Chrome DevTools adalah rangkaian alat developer web yang terintegrasi ke browser Google Chrome. Tinjau Referensi Aksesibilitas jika Anda mencari fitur DevTools yang terkait dengan peningkatan aksesibilitas halaman web.

Aksesibilitas DevTools masih dalam tahap pengembangan. Beberapa panel dan tab berfungsi lebih baik dengan AT daripada yang lain. Panduan ini akan memandu Anda melalui panel yang paling mudah diakses dan menyoroti masalah tertentu yang mungkin Anda temui.

Ringkasan

DevTools dibagi menjadi serangkaian panel yang disusun ke dalam ARIA tablist. Contoh:

Di dalam area konten setiap panel, terdapat sejumlah alat yang berbeda, yang sering disebut sebagai tab atau panel dalam dokumentasi. Misalnya, panel Elemen berisi tab tambahan untuk memeriksa pemroses peristiwa, hierarki aksesibilitas, dan banyak lagi. Perbedaan antara tab dan panel agak arbitrer. Satu-satunya alasan Anda melihat satu istilah atau istilah lainnya adalah untuk mempertahankan konsistensi dengan dokumentasi DevTools resmi lainnya.

Pintasan keyboard

Referensi Pintasan Keyboard DevTools adalah cheatsheet yang bermanfaat. Pastikan untuk menandainya dan merujuknya kembali saat Anda menjelajahi berbagai panel.

Membuka DevTools

Untuk memulai, baca Membuka Chrome DevTools. Ada beberapa cara untuk membuka DevTools, baik melalui pintasan keyboard maupun item menu.

Beralih antar-panel

Anda dapat beralih antar-panel menggunakan keyboard, Menu Perintah, atau menggunakan mouse atau trackpad.

Beralih menggunakan keyboard

  • Dengan DevTools terbuka, tekan Control+] atau Command+] (Mac) untuk memfokuskan panel berikutnya.
  • Tekan Control+[ atau Command+[ (Mac) untuk memfokuskan panel sebelumnya.
  • Anda juga dapat menggunakan Shift+Tab untuk memindahkan fokus ke panel tablist dan menggunakan tombol panah untuk mengubah panel, meskipun mungkin lebih cepat menggunakan pintasan yang disebutkan sebelumnya.

Masalah umum

  • Beberapa panel, seperti panel Konsol dan Performa, dapat memindahkan fokus ke area kontennya segera setelah diaktifkan. Hal ini dapat menyulitkan navigasi menggunakan tombol panah.
  • Nama panel yang dipilih akan diumumkan, tetapi hanya setelah pembaca layar membaca konten yang difokuskan di panel. Hal ini dapat membuat Anda sangat mudah melewatkannya.

Beralih menggunakan Menu Perintah

Untuk memfokuskan panel tertentu, gunakan Menu Perintah:

  1. Dengan DevTools terbuka, tekan Control+Shift+P atau Command+Shift+P (Mac) untuk membuka Menu Perintah. Menu Perintah adalah kotak gabungan pelengkapan otomatis penelusuran fuzzy.
  2. Ketik nama panel yang ingin Anda buka, lalu gunakan keyboard Panah Bawah untuk membuka opsi yang benar.
  3. Tekan Enter untuk menjalankan perintah.

Misalnya, untuk membuka panel Elemen:

  1. Buka Menu Perintah.
  2. Ketik E, lalu L. Opsi Panel > Tampilkan Elemen dipilih.
  3. Tekan Enter untuk menjalankan perintah yang membuka panel.

Membuka panel dengan cara ini akan mengarahkan fokus ke konten panel itu sendiri. Dalam kasus panel Elemen, fokus akan berpindah ke Hierarki DOM.

Panel elemen

Memeriksa elemen di halaman

  1. Buka elemen yang ingin Anda periksa menggunakan kursor pembaca layar.
  2. Simulasikan klik kanan mouse pada elemen untuk membuka menu konteks.
  3. Pilih opsi Periksa. Tindakan ini akan membuka panel Elemen dan memfokuskan elemen di Hierarki DOM.

Hierarki DOM disusun sebagai ARIA tree. Lihat contohnya di Menavigasi Hierarki DOM dengan keyboard.

Menyalin kode untuk elemen di Hierarki DOM

  1. Dengan fokus pada node di Hierarki DOM, buka menu konteks klik kanan.
  2. Luaskan opsi Salin.
  3. Pilih Salin outerHTML.

Masalah umum

  • Salin outerHTML sering memilih node induk, bukan node yang dimaksud node. Namun, konten elemen harus tetap disalin dalam outerHTML.

Mengubah atribut elemen di Hierarki DOM

  • Dengan fokus pada node di Hierarki DOM, tekan Enter untuk membuatnya dapat diedit.
  • Tekan Tab untuk berpindah antar-nilai atribut. Saat Anda mendengar "spasi", Anda berada di dalam input teks kosong dan dapat mengetik nilai atribut baru.
  • Tekan Control+Enter atau Command+Enter (Mac) untuk menerima perubahan dan mendengar seluruh konten elemen.

Masalah umum

  • Saat Anda mengetik ke dalam input teks, Anda tidak akan mendapatkan masukan. Jika Anda melakukan kesalahan ketik dan menggunakan tombol panah untuk menjelajahi input, Anda tidak akan mendapatkan masukan. Cara termudah untuk memeriksa pekerjaan Anda adalah menerima perubahan, lalu mendengarkan seluruh elemen yang akan diumumkan.

Mengedit HTML elemen di Hierarki DOM

  • Dengan fokus pada node di Hierarki DOM, tekan Enter untuk membuatnya dapat diedit.
  • Tekan Tab untuk berpindah antar-nilai atribut. Saat Anda mendengar nama elemen, misalnya,