Dasar-dasar pengujian manual
Pengujian aksesibilitas manual menggunakan pengujian, alat, dan teknik keyboard, visual, dan kognitif untuk menemukan masalah yang tidak dapat dilakukan oleh alat otomatis. Karena alat otomatis tidak mencakup semua kriteria keberhasilan yang diidentifikasi di WCAG, penting adalah Anda tidak menjalankan pengujian aksesibilitas otomatis, lalu menghentikan pengujian.
Seiring kemajuan teknologi, semakin banyak pengujian yang dapat dilakukan dengan alat otomatis saja, tetapi sekarang, pemeriksaan teknologi manual dan asistif perlu ditambahkan ke protokol pengujian untuk mencakup semua checkpoint WCAG yang berlaku.
Kelebihan pengujian aksesibilitas manual:
- Cukup mudah dan cepat untuk dijalankan
- Menangkap persentase masalah yang lebih tinggi daripada pengujian otomatis saja
- Sedikit alat dan keahlian yang dibutuhkan untuk sukses
Kekurangan pengujian aksesibilitas manual:
- Lebih kompleks dan memakan waktu daripada pengujian otomatis
- Mungkin sulit untuk diulang dalam skala besar
- Memerlukan lebih banyak keahlian aksesibilitas untuk menjalankan pengujian dan menafsirkan hasilnya
Mari kita bandingkan elemen dan detail aksesibilitas yang saat ini dapat dideteksi oleh alat otomatis dengan yang tidak akan terdeteksi.
Jenis pengujian manual
Ada banyak alat dan teknik manual yang perlu dipertimbangkan saat melihat halaman web atau aplikasi Anda untuk aksesibilitas digital. Tiga area fokus terbesar dalam pengujian manual adalah fungsi keyboard, ulasan yang berfokus pada visual, dan pemeriksaan konten umum.
Kita akan membahas setiap topik ini secara umum dalam modul ini, tetapi pengujian berikut tidak dimaksudkan sebagai daftar lengkap dari semua pengujian manual yang dapat atau harus Anda jalankan. Sebaiknya mulai dengan checklist aksesibilitas manual dari sumber tepercaya dan kembangkan checklist pengujian manual terfokus Anda sendiri untuk kebutuhan tim dan produk digital tertentu.
Pemeriksaan keyboard
Diperkirakan sekitar 25% dari semua masalah aksesibilitas digital terkait dengan kurangnya dukungan keyboard. Seperti yang telah kita pelajari dalam modul fokus keyboard, hal ini memengaruhi semua jenis pengguna, termasuk pengguna yang hanya dapat melihat dengan keyboard, pengguna yang memiliki gangguan penglihatan/buta, dan orang yang menggunakan software pengenalan suara yang menggunakan teknologi yang juga mengandalkan konten yang dapat diakses dari keyboard.
Pengujian keyboard menjawab pertanyaan seperti:
- Apakah halaman web atau fitur memerlukan mouse agar dapat berfungsi?
- Apakah urutan {i>tab<i} logis dan intuitif?
- Apakah indikator fokus keyboard selalu terlihat?
- Bisakah Anda terjebak pada elemen yang seharusnya tidak menjebak fokus?
- Dapatkah Anda menavigasi di belakang atau di sekitar elemen yang seharusnya menangkap fokus?
- Saat menutup elemen yang menerima fokus, apakah indikator fokus kembali ke tempat yang logis?
Meskipun dampak fungsi keyboard sangat besar, prosedur pengujiannya cukup sederhana. Yang perlu Anda lakukan adalah menyisihkan mouse atau menginstal paket JavaScript kecil dan menguji situs hanya menggunakan keyboard. Perintah berikut sangat penting untuk pengujian keyboard.
Pemeriksaan visual
Pemeriksaan visual berfokus pada elemen visual halaman dan menggunakan alat seperti pembesaran layar atau zoom browser untuk meninjau aksesibilitas situs atau aplikasi.
Pemeriksaan visual dapat memberi tahu Anda:
- Apakah ada masalah kontras warna yang tidak dapat dipahami oleh alat otomatis, seperti teks di atas gradien atau gambar?
- Apakah ada elemen yang terlihat seperti {i>heading<i}, daftar, dan elemen struktural lainnya tetapi tidak dikodekan seperti itu?
- Apakah link navigasi dan input formulir konsisten di seluruh situs atau aplikasi?
- Apakah ada lampu flash, menyala-nyala, atau animasi yang melebihi rekomendasi?
- Apakah konten memiliki spasi yang benar? Untuk huruf, kata, baris, dan paragraf?
- Dapatkah Anda melihat semua konten menggunakan pembesar layar atau zoom browser?
Pemeriksaan konten
Tidak seperti pengujian visual yang berfokus pada tata letak, gerakan, dan warna, pemeriksaan konten berfokus pada kata-kata di halaman. Anda tidak hanya harus melihat salinan itu sendiri, tetapi Anda harus meninjau konteks untuk memastikannya masuk akal bagi orang lain.
Konten akan menjawab pertanyaan seperti:
- Apakah judul halaman, judul, dan label formulir jelas dan deskriptif?
- Apakah alternatif gambar ringkas, akurat, dan berguna?
- Apakah warna saja digunakan sebagai satu-satunya cara untuk menyampaikan makna atau informasi?
- Apakah link deskriptif atau Anda menggunakan teks generik seperti "baca selengkapnya" atau "klik di sini?"
- Apakah ada perubahan pada bahasa di halaman?
- Apakah bahasa biasa digunakan dan semua akronim dieja saat pertama kali dirujuk?
Sebagian pemeriksaan konten dapat dilakukan secara otomatis. Misalnya, Anda dapat menulis linter JavaScript yang memeriksa "Click here" dan menyarankan Anda membuat perubahan. Namun, solusi kustom ini sering kali masih memerlukan manusia untuk mengubah salinan menjadi sesuatu yang kontekstual.
Demo: Pengujian manual
Sejauh ini, kami telah menjalankan pengujian otomatis di halaman web demo kami dan menemukan serta memperbaiki delapan jenis masalah berbeda. Kami kini siap menjalankan pemeriksaan manual untuk melihat apakah kami dapat menemukan lebih banyak masalah aksesibilitas.
Langkah 1
Demo CodePen yang telah diperbarui menerapkan semua pembaruan aksesibilitas otomatis.
Tampilkan dalam mode debug untuk melanjutkan
pengujian berikutnya. Hal ini penting karena menghapus <iframe> yang mengelilingi
halaman web demo, yang dapat mengganggu beberapa alat pengujian. Pelajari lebih lanjut mode debug CodePen.
Langkah 2
Mulai proses pengujian manual dengan menyisihkan mouse atau trackpad dan navigasikan ke atas dan ke bawah DOM hanya dengan menggunakan keyboard.
Masalah 1: Indikator fokus terlihat
Anda akan langsung melihat masalah keyboard pertama—atau lebih tepatnya, Anda tidak akan melihatnya—karena indikator fokus yang terlihat telah dihapus. Saat memindai CSS dalam demo, Anda akan menemukan "outline: tidak ada" yang ditakuti ditambahkan ke codebase.
:focus {
outline: none;
}
Mari kita perbaiki.
Seperti yang Anda pelajari di modul fokus keyboard, Anda perlu menghapus baris kode ini untuk memungkinkan browser web menambahkan fokus yang terlihat bagi pengguna. Anda dapat melangkah lebih jauh dan membuat indikator fokus yang ditata untuk memenuhi estetika produk digital Anda.
:focus {
outline: 3px dotted #008576;
}
Masalah 2: Fokuskan urutan
Setelah mengubah indikator fokus dan terlihat, pastikan untuk menekan tab di halaman. Saat melakukannya, Anda akan melihat bahwa kolom input formulir yang digunakan untuk berlangganan newsletter tidak menerima fokus. Ini telah dihapus dari urutan fokus alami oleh tabindex negatif.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
Karena kami ingin pengguna menggunakan kolom ini untuk mendaftar ke newsletter, yang perlu kami lakukan hanyalah menghapus tabindex negatif atau menyetelnya ke nol agar input tersebut menjadi dapat difokuskan lagi di keyboard.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
Langkah 3
Setelah fokus keyboard diperiksa, kita beralih ke pemeriksaan visual dan konten.
Masalah 3: Kontras warna link
Saat melakukan pengujian keyboard dengan menekan tombol tab ke atas dan ke bawah pada halaman demo, Anda mungkin memperhatikan bahwa keyboard berfokus pada tiga link yang tersembunyi secara visual dalam paragraf tentang berbagai kondisi medis.
Agar halaman dapat diakses, link harus menonjol dari teks di sekitarnya dan menyertakan perubahan gaya non-warna pada pengarahan kursor mouse dan fokus keyboard.
Mari kita perbaiki.
Solusi cepatnya adalah dengan menambahkan garis bawah pada tautan di dalam paragraf agar terlihat menonjol. Cara ini akan menyelesaikan masalah aksesibilitas, tetapi mungkin tidak sesuai dengan estetika desain keseluruhan yang ingin Anda capai.
Jika Anda memilih untuk tidak menambahkan garis bawah, Anda perlu memodifikasi warna sedemikian rupa untuk memenuhi persyaratan latar belakang dan teks.
Saat melihat demo menggunakan alat pemeriksa kontras link, Anda akan melihat bahwa warna link memenuhi persyaratan kontras warna 4,5:1 antara teks berukuran biasa dan latar belakang. Namun, link yang tidak digarisbawahi juga harus memenuhi persyaratan kontras warna 3:1 terhadap teks di sekitarnya.
Salah satu opsinya adalah mengubah warna tautan agar sesuai dengan elemen lain di laman tersebut. Namun, jika Anda mengubah warna link menjadi hijau, teks isi juga harus dimodifikasi untuk memenuhi persyaratan kontras warna keseluruhan antara ketiga elemen: link, latar belakang, dan teks di sekitarnya.
Masalah 4: Kontras warna ikon
Masalah kontras warna lain yang terlewatkan adalah ikon media sosial. Pada modul warna dan kontras, Anda telah mempelajari bahwa ikon penting harus memenuhi kontras warna 3:1 terhadap latar belakang. Namun, dalam demo, ikon media sosial memiliki rasio kontras 1,3:1.
Mari kita perbaiki.
Untuk memenuhi persyaratan kontras warna 3:1, ikon media sosial diubah menjadi abu-abu yang lebih gelap.
Masalah 5: Tata letak konten
Jika Anda melihat tata letak konten paragraf, teks sepenuhnya diratakan. Seperti yang Anda pelajari di modul Tipografi, cara ini akan menghasilkan "sungai ruang", yang mungkin membuat teks sulit dibaca oleh beberapa pengguna.
p.bullet {
text-align: justify;
}
Untuk mereset perataan teks dalam demo, Anda dapat memperbarui kode menjadi
text-align: left; atau menghapus baris tersebut sepenuhnya dari CSS, karena kiri adalah
perataan default untuk browser. Pastikan untuk menguji kode, jika gaya yang diwarisi lainnya menghapus perataan teks default.
p.bullet {
text-align: left;
}
Langkah 4
Setelah Anda mengidentifikasi dan memperbaiki semua masalah aksesibilitas manual yang diuraikan pada langkah sebelumnya, halaman Anda akan terlihat seperti screenshot kami.
Ada kemungkinan Anda akan menemukan lebih banyak masalah aksesibilitas di pemeriksaan manual Anda daripada yang kita bahas dalam modul ini. Kita akan menemukan banyak masalah ini dalam modul berikutnya.
Langkah berikutnya
Selamat! Anda telah menyelesaikan modul pengujian otomatis dan manual. Anda dapat melihat CodePen yang telah diperbarui, yang telah menerapkan semua perbaikan aksesibilitas otomatis dan manual.
Sekarang, lanjutkan ke modul pengujian terakhir yang berfokus pada pengujian teknologi pendukung.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang pengujian aksesibilitas manual
Elemen apa saja yang harus memenuhi standar kontras warna WCAG?