Aksesibilitas Di Chrome DevTools
Diterbitkan: 2022-03-10Saya menghabiskan banyak waktu di DevTools, dan dengan melakukan itu, saya datang untuk mempelajari beberapa fitur yang lebih 'tersembunyi' di DevTools dan ingin membagikan beberapa di antaranya dengan Anda di artikel ini — khususnya seputar aksesibilitas.
Artikel ini menggunakan Google Chrome karena ini adalah browser yang saya gunakan dan saya rasa nyaman. Karena itu, Firefox, Safari, dan Edge semuanya telah membuat langkah besar dalam alat pengembang mereka, dan mereka pasti memiliki beberapa fitur terkait aksesibilitas yang hebat.
Anda mungkin sudah terbiasa dengan DevTools, tetapi berikut adalah pengingat singkat tentang cara memeriksa elemen di halaman web:
- Buka halaman web yang ingin Anda periksa, di Google Chrome
- Gunakan pintasan Cmd + Shift + C ( Ctrl + Shift + C di Windows)
- Pointer Anda dalam mode Inspect Element, lanjutkan dan klik salah satu elemen di halaman web
Sama seperti itu, Anda telah membuka DevTools dan mulai memeriksa elemen. Panel yang berbeda sesuai dengan fitur yang berbeda, misalnya seputar debugging JavaScript, kinerja, dan sebagainya.
Ada fitur terkait aksesibilitas yang tersebar di seluruh, jadi mari kita jelajahi apa yang mereka lakukan, di mana mereka tinggal, dan bagaimana menggunakannya.
Rasio Kontras
Ini adalah fitur untuk memeriksa apakah teks yang diperiksa memiliki kontras warna yang memuaskan terhadap warna latar belakang.
Biasanya, tingkat kontras yang tinggi antara warna teks dan warna latar belakang yang mendasari berarti teks yang lebih dapat dibaca untuk pengguna dengan kemampuan yang berbeda. Selain itu, ini membantu mendukung pengguna membaca teks Anda dalam berbagai kondisi lingkungan, pertimbangkan contoh berikut yang dapat memengaruhi cara pengguna memahami keterbacaan teks:
- Melihat layar saat berada di luar dengan banyak sinar matahari
- Perangkat seluler telah menurunkan kecerahan layarnya sepenuhnya untuk menghemat masa pakai baterai
“Tujuannya adalah untuk memberikan kontras yang cukup antara teks dan latar belakangnya sehingga dapat dibaca oleh orang-orang dengan penglihatan yang cukup rendah.”
— Memahami Kriteria Keberhasilan 1.4.3: Kontras (Minimum)
Menggunakan alat rasio kontras dapat memberi kita jawaban ya/tidak langsung untuk pertanyaan: apakah teks ini memenuhi standar kontras minimum. Menggunakan alat ini dapat membantu memengaruhi desain dan skema warna situs web Anda, yang dapat menghasilkan konten yang lebih mudah dibaca bagi pengguna dengan gangguan penglihatan.
Tersedia di alat pemilih warna, fitur rasio kontras dapat memberi tahu Anda apakah persyaratan kontras minimum telah terpenuhi. Untuk mengakses fitur ini:
- Periksa elemen teks dengan DevTools
- Temukan properti warna di panel Styles, dan klik kotak kecil berwarna untuk membuka alat pemilih warna
- Klik pada teks yang mengatakan 'rasio kontras' yang menyajikan informasi lebih lanjut tentang hal ini
Tiga rasio mewakili:
- Rasio kontras Anda saat ini
- Rasio kontras minimum (AA)
- Rasio kontras yang ditingkatkan (AAA)
Sebagai latihan untuk Anda sendiri: seret alat pemilih warna melingkar melintasi spektrum warna dan amati titik di mana kontras minimum dan rasio kontras yang ditingkatkan terpenuhi.
Fitur ini juga dapat dilaporkan kepada Anda melalui Laporan Mercusuar, tercakup dalam bagian Mercusuar artikel ini.
Inspektur Aksesibilitas
Ini merujuk ke panel DevTools yang memungkinkan Anda melihat berbagai properti aksesibilitas dan informasi ARIA untuk node DOM.
ARIA mengacu pada kumpulan properti, biasanya digunakan dalam HTML, yang pada gilirannya membuat situs web Anda lebih mudah diakses oleh individu dengan kemampuan berbeda. Ini benar-benar layak digunakan di situs web Anda sendiri, tetapi itu memang membutuhkan pemahaman dasar-dasar aksesibilitas web untuk memastikan Anda menggunakannya dengan cara yang akan membantu pengguna Anda.
Sebagai contoh perhatikan potongan HTML berikut:
<p class="alert" role="alert"> That transaction was successful </p> Perangkat bantu, seperti pembaca layar, dapat menggunakan properti role="alert" untuk mengumumkan informasi tersebut kepada pengguna. Panel Aksesibilitas dalam DevTools dapat memilih properti ( role ) seperti itu dan menyajikannya kepada Anda, jadi jelas properti terkait aksesibilitas yang dimiliki suatu elemen.
Memvalidasi informasi yang Anda lihat di panel ini dapat membantu menjawab pertanyaan: “Apakah saya salah mengkodekan aksesibilitas”, apakah itu secara sintaksis atau struktural, hanya perlu diingat, menerapkan teknik aksesibilitas dengan sintaks yang benar, dan memiliki situs web yang dapat diakses, adalah dua hal yang berbeda hal-hal!
Untuk mulai menggunakan ini, Anda dapat membuka panel Aksesibilitas dengan elemen yang diperiksa:
- Periksa setiap elemen pada halaman, misalnya hyperlink atau kotak pencarian
- Buka panel Aksesibilitas yang ditemukan di Panel Elemen
Kiat bonus : daripada harus mencari panel (tidak terbuka secara default), saya mencari 'Show Accessibility' di Command Menu ( Cmd + Shift + P ).
Anda akan menemukan banyak informasi di sini, seperti:
- Pohon aksesibilitas (bagian dari pohon DOM)
- Atribut ARIA
- Properti aksesibilitas yang dihitung (misalnya sesuatu yang dapat difokuskan, dapat diedit, apakah lulus validasi formulir)
Bergantung pada elemen yang diperiksa, beberapa informasi ini mungkin tidak berlaku, misalnya, mungkin suatu elemen secara sah tidak memerlukan atribut ARIA.
Seperti kebanyakan fitur di DevTools, apa yang Anda lihat di panel ini adalah 'langsung' — perubahan yang Anda buat di Elemen Panel DOM Tree direfleksikan kembali ke panel ini dengan segera, sehingga membantu untuk mengoreksi atribut ARIA yang salah eja misalnya.
Jika Anda yakin dengan penggunaan Aksesibilitas Anda, mungkin karena Anda menggunakan alat pengujian otomatis alternatif seperti kapak, maka Anda mungkin tidak terlalu sering menggunakan panel ini, dan tidak apa-apa.
Jika Anda tertarik untuk mempelajari lebih lanjut sambil melihat situs web dunia nyata, saya telah membuat video berdurasi 14 menit tentang debugging Aksesibilitas dengan Chrome DevTools.
Mercu suar
Lighthouse adalah pemeriksa situs web otomatis yang dapat memindai praktik terbaik, aksesibilitas, keamanan, dan banyak lagi.
Jika Anda telah membaca beberapa teori aksesibilitas, dan Anda ingin mempelajari cara menerapkannya secara efektif ke situs web Anda sendiri, ini adalah alat yang hebat untuk digunakan karena ini benar-benar antarmuka titik-dan-klik — tidak diperlukan instalasi. Selain itu, semua auditnya sangat instruksional, memberi tahu Anda apa yang gagal, dan mengapa sesuatu gagal.
Mengikuti saran dari alat ini hampir pasti akan membantu meningkatkan aksesibilitas situs Anda.
Saat memeriksa keamanan, praktik terbaik web umum, kinerja sangat membantu. Mari kita fokus pada cara menjalankan audit aksesibilitas di Lighthouse:
- Arahkan ke panel Lighthouse di DevTools
- Hapus centang semua kategori, tetapi tetap centang 'Aksesibilitas'
- Klik 'Buat Laporan'
- Dalam laporan yang dihasilkan, klik berbagai saran untuk mempelajari lebih lanjut tentangnya
Jika Anda ingin mempelajari lebih lanjut tentang Aksesibilitas (saya tentu saja melakukannya!), mengklik melalui gagal, tetapi bahkan lulus audit adalah cara yang bagus untuk belajar karena hampir setiap tautan audit ke dokumentasi pengembang web khusus pada audit itu sendiri, dan mengapa itu penting.
Untuk sebagian besar, halaman dokumentasi audit sangat ringkas dan saya sangat merekomendasikannya. Mari kita lihat dokumentasi audit untuk memastikan elemen <title> ada. Ini menentukan:
- Bagaimana audit judul Mercusuar gagal
- Bagaimana cara menambahkan judul?
- Kiat untuk membuat judul yang bagus
- Contoh judul yang tidak boleh digunakan, beserta judul yang layak digunakan
Dan dalam kasus dokumentasi judul dokumen, hanya butuh 300 kata untuk menjelaskan 4 poin di atas.
Satu hal yang menarik untuk diperhatikan, tidak seperti panel Aksesibilitas, Lighthouse Audits secara default sangat instruksional, menjadikan panel Lighthouse tempat yang bagus untuk dikunjungi saat Anda baru memulai.
Saat Anda menjadi lebih mahir dalam membuat halaman yang dapat diakses, Anda dapat beralih dari audit yang telah ditentukan sebelumnya dan menghabiskan lebih banyak waktu di panel aksesibilitas.
“
Meniru Kekurangan Penglihatan
Ini adalah fitur DevTools untuk menerapkan kekurangan penglihatan, seperti penglihatan kabur, ke halaman saat ini.
“Secara global, sekitar 1 dari 12 pria (8%) dan 1 dari 200 wanita memiliki kekurangan penglihatan warna.”
— Persyaratan Aksesibilitas untuk Orang dengan Penglihatan Rendah
Anda akan ingin menggunakan fitur ini untuk membantu memastikan situs web Anda memenuhi kebutuhan pengguna Anda. Jika situs web Anda menampilkan gambar penting, Anda mungkin menemukan bahwa gambar ini sulit untuk dipahami oleh seseorang dengan tritanopia (gangguan penglihatan biru dan kuning), atau bahkan sulit untuk dipahami oleh seseorang dengan penglihatan kabur.
“Beberapa ketajaman visual yang rendah dapat dikoreksi dengan kacamata, lensa kontak, atau operasi – dan beberapa tidak. Oleh karena itu, beberapa orang akan memiliki penglihatan kabur (ketajaman visual yang rendah) tidak peduli apa.”
— Persyaratan Aksesibilitas untuk Orang dengan Penglihatan Rendah
Misalnya, dalam kasus gambar, Anda mungkin menemukan bahwa ada gambar beresolusi lebih tinggi yang tersedia untuk diunduh sambil mengemulasi penglihatan kabur melalui DevTools, daripada pengguna dengan penglihatan kabur dapat menggunakan dan pada gilirannya memahami apa yang ditampilkan gambar. Ini akan membutuhkan beberapa keterampilan pemecahan masalah berbasis desain/UX — mungkin dari Anda/rekan kerja Anda — tetapi ini bisa menjadi perbedaan antara memenuhi kebutuhan pengguna Anda, atau tidak memenuhi kebutuhan mereka.
️ Harap diperhatikan : Gambar berikut diburamkan sebagian, untuk menunjukkan fitur emulasi 'Penglihatan kabur' dari DevTools.
Anda dapat mencoba fitur ini dengan langkah-langkah berikut:
- Buka Menu Perintah ( Cmd + Shift + P atau Ctrl + Shift + P di Windows)
- Cari dan pilih 'Tampilkan rendering'
- Pilih kekurangan penglihatan seperti 'Penglihatan kabur' dari bagian Meniru kekurangan penglihatan di Panel Rendering.
Berikut adalah beberapa contoh kekurangan penglihatan yang dapat Anda terapkan melalui DevTools:
- Penglihatan kabur
Dimana penglihatan kurang tepat - Protanopia
Buta warna akibat ketidakpekaan terhadap cahaya merah - Tritanopia
Gangguan penglihatan biru dan kuning
Fitur emulasi seperti ini tidak akan sepenuhnya menjelaskan perbedaan halus dalam bagaimana kekurangan tersebut memanifestasikan dirinya dengan individu, apalagi berbagai kekurangan penglihatan di luar sana. Meskipun demikian, fitur ini masih dapat membantu kami sebagai pengembang web untuk memahami dan meningkatkan aksesibilitas halaman kami.
Periksa Tooltip Elemen
Fitur ini mengacu pada tooltip yang ditingkatkan yang sekarang memunculkan informasi terkait aksesibilitas saat Anda menggunakan fitur 'Inspect Element'. Ini adalah fitur yang halus, namun masih sangat penting karena dapat memberi tahu Anda tentang bagaimana elemen dapat diakses, dengan cepat.
Saya katakan ini penting karena dalam kasus empat fitur lain yang disebutkan dalam artikel ini, mereka memerlukan tindakan yang disengaja dari pihak kita (klik tombol buat laporan, navigasikan ke panel Aksesibilitas, buka alat pemilih warna, dan seterusnya). Namun, untuk fitur ini, fitur ini muncul di salah satu tindakan DevTools yang paling umum saat memeriksa sebuah elemen.
Sebagai tantangan singkat untuk diri sendiri, lihatlah dua tangkapan layar berikut. Mereka mendemonstrasikan tooltip DevTools Inspect Element yang ditingkatkan yang sekarang memiliki bagian aksesibilitas di sana. Bisakah Anda mengidentifikasi apa yang diwakili oleh properti di bagian itu?
Anda mungkin memperhatikan bahwa ini adalah informasi yang sama persis yang kita lihat sebelumnya — sebagai bagian dari bagian Rasio Kontras dan Pemeriksa Aksesibilitas. Mereka adalah properti yang sama tetapi muncul dengan cara (semoga) lebih sederhana.
Catatan: Ada juga properti "Keyboard-focusable" di tooltip itu (item terakhir). Ini menunjukkan apakah item tersebut dapat diakses oleh keyboard atau tidak. Jika benar, ini biasanya akan menyarankan elemen tersebut dapat difokuskan dengan tab ke itu.
Cara saya melihatnya: Inspect Element adalah kasus penggunaan yang sangat umum dalam browser DevTools, jadi memilih properti terkait aksesibilitas yang berguna untuk tooltip Inspect Element dapat berfungsi sebagai pengingat yang berguna, dan mendorong kami sebagai pengembang web untuk menyelidiki lebih lanjut dan memastikan apa yang kita sedang membangun dapat diakses.
Kesimpulan
Alat pengembang web untuk meningkatkan aksesibilitas telah meningkat pesat selama bertahun-tahun, tetapi terkadang alat ini disembunyikan atau tidak didokumentasikan. Dalam artikel ini, kami menjelajahi beberapa fitur yang diharapkan dapat membantu kami saat menerapkan praktik terbaik aksesibilitas ke situs web yang kami buat.
Berikut adalah pengingat dari apa yang kami bahas:
- rasio kontras
Periksa apakah elemen teks yang diperiksa memiliki rasio kontras yang memuaskan. - Inspektur Aksesibilitas
Lihat berbagai properti aksesibilitas dan informasi ARIA. - Mercu suar
Pemeriksa situs web yang mencakup praktik terbaik, aksesibilitas, dan banyak lagi. - Meniru kekurangan penglihatan
Alat untuk menerapkan kekurangan penglihatan (seperti penglihatan kabur) ke halaman. - Periksa Tooltip Elemen
Tooltip yang ditingkatkan yang menampilkan informasi terkait aksesibilitas.
Saya membuat milis Dev Tips jika Anda ingin tetap up to date dengan lebih dari 200 tips pengembangan web! Saya juga memposting banyak sumber daya pengembangan web bonus di Twitter saya.
Itu saja untuk saat ini! Terima kasih telah membaca.