Pengujian aksesibilitas manual

Dasar-dasar pengujian manual

Pengujian aksesibilitas manual menggunakan tes keyboard, visual, dan kognitif, alat, alat otomatis untuk menemukan masalah yang tidak dapat diatasi oleh alat otomatis. Sebagai otomatis tidak mencakup semua kriteria keberhasilan yang diidentifikasi dalam WCAG, tapi penting bahwa Anda tidak menjalankan pengujian aksesibilitas otomatis, kemudian menghentikan pengujian.

Seiring kemajuan teknologi, lebih banyak pengujian dapat dicakup oleh alat otomatis saja, tetapi saat ini, pemeriksaan teknologi manual dan pendukung perlu ditambahkan ke protokol pengujian Anda untuk mencakup semua pos pemeriksaan WCAG yang berlaku.

Kelebihan pengujian aksesibilitas manual:

• Cukup mudah dan cepat dijalankan
• Menangkap persentase masalah yang lebih tinggi daripada pengujian otomatis saja
• Sedikit alat dan keahlian yang diperlukan untuk meraih kesuksesan

Kekurangan pengujian aksesibilitas manual:

• Lebih kompleks dan memakan waktu dibandingkan pengujian otomatis
• Mungkin sulit untuk diulang dalam skala besar
• Memerlukan lebih banyak keahlian aksesibilitas untuk menjalankan pengujian dan menginterpretasikan hasilnya

Mari kita bandingkan elemen aksesibilitas dan detail yang saat ini dapat dideteksi oleh alat otomatis, dibandingkan dengan yang tidak akan terdeteksi.

Jenis pengujian manual

Ada banyak alat dan teknik manual yang perlu dipertimbangkan saat melihat laman web atau aplikasi untuk aksesibilitas digital. Tiga bidang fokus terbesar dalam pengujian manual adalah fungsionalitas {i>keyboard<i}, tinjauan yang berfokus pada visual, dan pemeriksaan konten secara umum.

Kita akan membahas masing-masing topik secara umum dalam modul ini, tetapi pengujian berikut tidak dimaksudkan sebagai daftar lengkap dari semua pengujian manual yang dapat atau harus dijalankan. Sebaiknya mulai dengan checklist aksesibilitas manual dari sumber terkemuka dan kembangkan daftar periksa pengujian manual Anda sendiri yang terfokus untuk kebutuhan tim dan produk digital spesifik Anda.

Pemeriksaan keyboard

Diperkirakan sekitar 25% dari semua masalah aksesibilitas digital terkait hingga kurangnya dukungan {i>keyboard<i}. Seperti yang telah kita pelajari di modul fokus keyboard, hal ini memengaruhi semua jenis pengguna, termasuk pengguna khusus keyboard yang dapat melihat, pengguna pembaca layar tunanetra/penglihatan rendah, dan pengguna yang menggunakan software pengenalan suara yang menggunakan teknologi yang mengandalkan konten yang dapat diakses dengan keyboard.

Pengujian keyboard menjawab pertanyaan seperti:

• Apakah halaman web atau fitur memerlukan mouse agar dapat berfungsi?
• Apakah urutan {i>tabbing <i}logis dan intuitif?
• Apakah indikator fokus keyboard selalu terlihat?
• Bisakah Anda terjebak dalam elemen yang seharusnya tidak menghalangi fokus?
• Bisakah Anda menavigasi di belakang atau di sekitar elemen yang seharusnya menghalangi 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, lalu menguji situs Anda hanya dengan menggunakan keyboard. Perintah berikut sangat penting untuk pengujian keyboard.

Pemeriksaan visual

Pemeriksaan visual berfokus pada elemen visual halaman dan memanfaatkan 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 diambil 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 efek flash, menyala-nyala, atau animasi yang melebihi rekomendasi?
• Apakah konten memiliki spasi yang sesuai? 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 salinannya sendiri, tetapi Anda juga harus meninjau konteksnya untuk memastikan bahwa konten tersebut masuk akal bagi orang lain.

Pemeriksaan konten menjawab pertanyaan seperti:

• Apakah judul halaman, tajuk, dan label formulir jelas dan deskriptif?
• Apakah alternatif gambar ringkas, akurat, dan berguna?
• Apakah warna saja digunakan sebagai satu-satunya cara menyampaikan makna atau informasi?
• Apakah link bersifat deskriptif atau Anda menggunakan teks umum seperti “baca selengkapnya” atau “klik di sini?”
• Apakah ada perubahan pada bahasa di halaman?
• Apakah bahasa sederhana sedang digunakan dan apakah semua akronim dieja saat pertama kali direferensikan?

Sebagian pemeriksaan konten dapat dilakukan secara otomatis. Misalnya, Anda dapat menulis linter JavaScript yang memeriksa "Click here" dan menyarankan untuk 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 dan menemukan serta memperbaiki delapan jenis masalah yang berbeda. Sekarang kami siap menjalankan pemeriksaan manual untuk melihat apakah kami dapat menemukan masalah aksesibilitas lainnya.

Langkah 1

Demo CodePen kami yang telah diperbarui memiliki semua pembaruan aksesibilitas otomatis yang diterapkan.

Lihat dalam mode debug untuk melanjutkan proses pengujian berikutnya. Hal ini penting, karena menghapus <iframe> yang mengelilingi halaman web demo, yang dapat mengganggu beberapa alat pengujian. Pelajari selengkapnya tentang Mode debug CodePen.

Langkah 2

Mulai proses pengujian manual dengan mengesampingkan mouse atau trackpad, lalu menavigasi ke atas dan ke bawah DOM hanya menggunakan keyboard.

Masalah 1: Indikator fokus terlihat

Anda akan langsung melihat masalah keyboard pertama—atau lebih tepatnya, Anda tidak seharusnya melihatnya—karena indikator fokus yang terlihat telah dihapus. Saat memindai CSS dalam demo, Anda akan menemukan "garis besar: tidak ada" yang ditakuti ditambahkan ke codebase.

  :focus {
    outline: none;
  }

Mari kita perbaiki.

Seperti yang Anda pelajari di Modul fokus keyboard, Anda harus menghapus baris kode ini agar browser web dapat menambahkan fokus yang terlihat bagi pengguna. Anda dapat melangkah lebih jauh dan membuat gaya indikator fokus untuk memenuhi estetika produk digital Anda.

:focus {
  outline: 3px dotted #008576;
}

Masalah 2: Urutan fokus

Setelah Anda memodifikasi indikator fokus dan itu terlihat, pastikan untuk menjelajahi halaman. Saat melakukannya, Anda akan melihat bahwa bidang isian {i>input<i} yang digunakan untuk berlangganan buletin tidak menerima fokus. Sudah dihapus dari urutan fokus alami dengan tabindex negatif.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

Mari kita perbaiki.

Karena kita ingin orang menggunakan kolom ini untuk mendaftar ke newsletter, yang perlu kita lakukan adalah menghapus tabindex negatif atau menyetelnya ke nol agar input dapat difokuskan lagi ke 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 Anda melakukan tes {i>keyboard<i} dengan menekan tombol ke atas dan ke bawah halaman demo, Anda mungkin memperhatikan bahwa {i>keyboard<i} berfokus pada tiga tautan yang tersembunyi secara visual di tentang berbagai kondisi medis.

Agar halaman dapat diakses, link harus berbeda dari teks di sekitarnya dan menyertakan perubahan gaya non-warna pada pengarahan kursor mouse dan fokus keyboard.

Mari kita perbaiki.

Solusi cepat adalah menambahkan garis bawah ke link di dalam paragraf untuk membuatnya menonjol. Cara ini akan mengatasi masalah aksesibilitas, tetapi mungkin tidak sesuai dengan keseluruhan estetika desain yang ingin Anda capai.

Jika Anda memilih untuk tidak menambahkan garis bawah, Anda harus mengubah warna sedemikian rupa agar memenuhi persyaratan untuk 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 link agar sesuai dengan elemen lain pada halaman. Namun, jika Anda mengubah warna link menjadi hijau, teks isi juga harus dimodifikasi untuk memenuhi persyaratan kontras warna secara keseluruhan di antara ketiga elemen: link, latar belakang, dan teks di sekitarnya.

Masalah 4: Kontras warna ikon

Masalah kontras warna yang terlewat lainnya adalah ikon media sosial. Dalam modul warna dan kontras, Anda telah mempelajari bahwa ikon penting harus memenuhi kontras warna 3:1 dengan latar belakang. Namun, dalam demo tersebut, 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, ini menciptakan "sungai ruang", yang mungkin menyulitkan teks bagi sebagian untuk dibaca oleh pengguna.

p.bullet {
   text-align: justify;
}

Mari kita perbaiki.

Untuk mengatur ulang perataan teks dalam demo, perbarui kode agar text-align: left; atau hapus seluruh baris tersebut dari CSS, karena di sebelah kiri adalah penyelarasan default untuk browser. Pastikan untuk menguji kode, jika ada gaya yang diwariskan akan menghapus perataan teks default.

p.bullet {
   text-align: left;
}

Langkah 4

Setelah Anda mengidentifikasi dan memperbaiki semua masalah aksesibilitas manual yang diuraikan di langkah sebelumnya, halaman Anda akan terlihat seperti screenshot kami.

Anda mungkin akan menemukan lebih banyak masalah aksesibilitas dalam pemeriksaan manual dibandingkan yang kami bahas dalam modul ini. Kita akan menemukan banyak masalah ini di modul berikutnya.

Langkah berikutnya

Selamat! Anda telah menyelesaikan modul pengujian otomatis dan manual. Anda dapat melihat CodePen terbaru kami, yang menerapkan semua perbaikan aksesibilitas otomatis dan manual.

Sekarang, buka modul pengujian terakhir yang berfokus pada pengujian teknologi pendukung.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang pengujian aksesibilitas manual