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, h2, Anda berada di dalam input teks dan dapat mengubah jenis elemen.
  • Tekan Control+Enter atau Command+Enter (Mac) untuk menerima perubahan.

Misalnya, mengetik h3 dan menekan Control+Enter atau Command+Enter (Mac) akan mengubah tag awal dan akhir elemen menjadi h3.

Tab panel elemen

Panel Elemen berisi tab tambahan untuk memeriksa hal-hal seperti CSS yang diterapkan ke elemen atau tempatnya di hierarki aksesibilitas.

  • Dengan fokus pada node di Hierarki DOM, tekan Tab hingga Anda mendengar bahwa panel Gaya dipilih.
  • Gunakan Panah Kanan untuk menjelajahi tab lain yang tersedia.

Hierarki DOM mengubah elemen dengan atribut href menjadi link yang dapat difokuskan, sehingga Anda mungkin perlu menekan Tab lebih dari sekali untuk mencapai panel Gaya.

Masalah umum

Tab Breakpoint DOM dan Properti tidak dapat diakses menggunakan keyboard.

Panel gaya

Di panel Gaya , Anda akan menemukan kontrol untuk memfilter gaya, mengalihkan status elemen (seperti :active dan :focus), mengalihkan class, dan menambahkan class baru. Ada juga alat pemeriksaan gaya yang canggih untuk menjelajahi dan mengubah gaya yang diterapkan ke elemen yang menjadi fokus di Hierarki DOM.

Konsep utama yang perlu dipahami tentang panel Gaya adalah bahwa panel ini hanya menampilkan gaya untuk node yang saat ini dipilih di Hierarki DOM. Misalnya, Anda telah selesai memeriksa gaya node <header>, dan sekarang Anda ingin melihat gaya untuk node <footer>. Untuk melakukannya, Anda harus memilih node <footer> di Hierarki DOM.

Anda mungkin merasa lebih cepat menggunakan alur kerja Periksa untuk memeriksa node yang berada di sekitar node footer (seperti link dalam footer), yang memfokuskan Hierarki DOM, lalu menggunakan keyboard untuk membuka node yang Anda minati.

Menavigasi panel Gaya

Karena semua alat gaya terhubung dengan satu atau lain cara kembali ke panel Gaya, sebaiknya Anda menjadi ahli dalam alat ini terlebih dahulu.

  • Dengan fokus pada panel Gaya, tekan Tab untuk memindahkan fokus ke dalam dan menjelajahi kontennya.
  • Tekan Tab hingga gaya pertama menjadi aktif. Jika Anda menggunakan pembaca layar, gaya pertama ini akan diumumkan sebagai "element.style {}".
  • Tekan Panah Bawah untuk menavigasi daftar gaya sesuai urutan spesifisitas. Pembaca layar mengumumkan setiap gaya yang dimulai dengan nama file CSS, nomor baris tempat gaya muncul, dan nama gaya itu sendiri. Contoh: "main.css:233 .card__img {}"
  • Tekan Enter untuk memeriksa gaya secara lebih mendetail. Fokus dimulai pada versi nama gaya yang dapat diedit.
  • Tekan Tab untuk berpindah antar-versi yang dapat diedit dari setiap properti CSS dan nilai yang sesuai. Di akhir setiap blok gaya terdapat kolom teks kosong yang dapat diedit yang dapat Anda gunakan untuk menambahkan properti CSS tambahan.
  • Anda dapat terus menekan Tab untuk berpindah melalui daftar gaya, atau menekan Escape untuk keluar dari mode ini dan kembali ke navigasi menggunakan tombol panah.

Baca referensi keyboard panel Gaya untuk pintasan tambahan.

Masalah Umum
  • Jika Anda menggunakan kolom teks yang dapat diedit Filter, Anda tidak dapat menavigasi daftar gaya.

Mengalihkan status elemen

Untuk mengalihkan status elemen, seperti :active atau :focus:

  1. Buka panel Gaya dan tekan Tab hingga tombol Alihkan Status Elemen difokuskan.
  2. Tekan Enter untuk meluaskan kumpulan status elemen. Status elemen ditampilkan sebagai grup kotak centang.
  3. Tekan Tab hingga status pertama, :active, difokuskan.
  4. Tekan Spasi untuk mengaktifkannya. Jika elemen yang saat ini dipilih di Hierarki DOM memiliki gaya :active, gaya tersebut akan diterapkan.
  5. Terus tekan Tab untuk menjelajahi semua status yang tersedia.

Menambahkan class yang ada

Di samping tombol Alihkan Status Elemen terdapat tombol Class Elemen. Pindahkan fokus ke tombol tersebut dengan menekan Tab, lalu Enter. Fokus akan berpindah ke kolom teks edit berlabel Tambahkan Class Baru.

Tombol Class Elemen terutama digunakan untuk menambahkan class yang ada ke elemen. Misalnya, jika stylesheet Anda berisi class helper bernama .clearfix Anda dapat menekan . di dalam kolom teks edit untuk melihat daftar saran class dan menggunakan Panah Bawah untuk menemukan saran .clearfix. Atau, ketik nama class sendiri dan tekan Enter untuk menerapkannya.

Menambahkan aturan gaya baru

Di samping tombol Class Elemen terdapat tombol Aturan Gaya Baru. Pindahkan fokus ke tombol tersebut dengan menekan Tab dan tekan Enter. Fokus akan berpindah ke kolom teks yang dapat diedit di dalam pemeriksa gaya. Konten teks awal kolom adalah nama tag elemen yang dipilih di Hierarki DOM. Anda dapat mengetik nama class apa pun yang diinginkan ke dalam kolom ini, lalu menekan Tab untuk menetapkan properti CSS ke class tersebut.

Tab yang dihitung

Dengan fokus pada tab Dihitung, tekan Tab untuk memindahkan fokus ke dalam dan menjelajahi kontennya. Di dalam tab Dihitung , terdapat kontrol untuk menjelajahi properti CSS mana yang sebenarnya diterapkan ke elemen sesuai urutan spesifisitas.

Menjelajahi semua gaya yang dihitung

Tekan Tab hingga Anda mencapai kumpulan gaya yang dihitung. Gaya ini ditampilkan sebagai tree ARIA. Meluaskan listbox akan menampilkan selektor CSS yang menerapkan gaya yang dihitung. Selektor ini disusun berdasarkan spesifisitas.

Pembaca layar mengumumkan nilai yang dihitung, pemilih CSS yang cocok, nama file stylesheet yang berisi pemilih, dan nomor baris untuk pemilih.

Masalah umum

  • Jika Anda menggunakan kolom teks Filter , Anda tidak akan dapat lagi memeriksa gaya.

Tab pemroses peristiwa

Dari dalam panel Elemen , Anda dapat memeriksa pemroses peristiwa yang diterapkan ke elemen menggunakan tab Pemroses Peristiwa. Dengan fokus pada panel Gaya, tekan Panah Kanan untuk membuka tab Pemroses Peristiwa.

Menjelajahi pemroses peristiwa

Pemroses peristiwa ditampilkan sebagai tree ARIA. Anda dapat menggunakan tombol panah untuk menavigasinya. Pembaca layar mengumumkan nama objek DOM yang dilampirkan ke pemroses peristiwa, serta nama file tempat pemroses peristiwa ditentukan dan nomor barisnya.

Panel aksesibilitas

Dengan fokus pada panel Aksesibilitas, tekan Tab untuk memindahkan fokus ke dalam dan menjelajahi kontennya. Di dalam panel Aksesibilitas , terdapat kontrol untuk menjelajahi hierarki aksesibilitas, atribut ARIA yang diterapkan ke elemen, dan properti aksesibilitas yang dihitung.

Hierarki Aksesibilitas

Hierarki Aksesibilitas ditampilkan sebagai ARIA tree dengan setiap treeitem sesuai dengan elemen di DOM. Hierarki mengumumkan peran yang dihitung untuk node yang dipilih. Elemen umum, seperti div dan span, diumumkan sebagai "GenericContainer" di hierarki. Gunakan tombol panah untuk melintasi hierarki dan menjelajahi hubungan induk-turunan.

Masalah umum

  • Jenis hierarki ARIA yang digunakan oleh panel Aksesibilitas mungkin tidak tersedia di Chrome untuk pembaca layar mac OS, seperti VoiceOver. Subscribe ke masalah Chromium #868480 untuk mendapatkan informasi tentang progres masalah ini.
  • Bagian Atribut ARIA dan Properti yang Dihitung ditandai sebagai hierarki ARIA, tetapi tidak menyertakan pengelolaan fokus. Artinya, bagian ini tidak dapat dioperasikan menggunakan keyboard.

Panel audit

Panel Audit memungkinkan Anda menjalankan serangkaian pengujian terhadap situs untuk memeriksa masalah umum terkait performa, aksesibilitas, SEO, dan sejumlah kategori lainnya.

Mengonfigurasi dan menjalankan audit

  1. Saat panel Audit pertama kali dibuka, fokus akan ditempatkan pada tombol Jalankan Audit di akhir formulir. Secara default, formulir dikonfigurasi untuk menjalankan audit untuk setiap kategori menggunakan emulasi seluler pada koneksi 3G yang disimulasikan.
  2. Gunakan Shift+Tab atau kembali ke mode Jelajahi untuk mengubah setelan audit.
  3. Saat Anda siap menjalankan audit, kembali ke tombol Jalankan Audit dan tekan Enter.
  4. Fokus akan berpindah ke jendela modal dengan tombol Batal yang memungkinkan Anda keluar dari audit. Anda mungkin mendengar serangkaian earcon saat audit berjalan dan memuat ulang halaman beberapa kali.

Masalah umum

  • Berbagai bagian formulir konfigurasi tidak ditandai dengan elemen fieldset. Mungkin lebih mudah untuk menavigasinya dalam mode Jelajahi untuk mengetahui kontrol mana yang terkait dengan setiap bagian.
  • Tidak ada earcon atau pengumuman live region saat audit selesai dijalankan. Biasanya diperlukan waktu sekitar 30 detik, setelah itu Anda akan dapat membuka hasilnya. Gunakan mode Jelajahi untuk mencapai hasil dengan cepat.

Menavigasi laporan audit

Laporan audit disusun ke dalam bagian yang sesuai dengan setiap kategori audit. Laporan akan terbuka dengan daftar skor untuk setiap kategori. Skor ini juga merupakan link yang dapat digunakan untuk langsung membuka bagian yang relevan. Di dalam setiap bagian terdapat elemen details yang dapat diperluas, yang berisi informasi terkait audit yang lulus atau gagal. Secara default, hanya audit yang gagal yang ditampilkan. Setiap bagian diakhiri dengan elemen details akhir yang berisi semua audit yang lulus.

Untuk menjalankan audit baru, gunakan Shift+Tab untuk keluar dari laporan dan cari tombol Lakukan Audit.