Pengujian aksesibilitas manual

Dasar-dasar pengujian manual

Pengujian aksesibilitas manual menggunakan pengujian, alat, dan teknik keyboard, visual, dan kognitif untuk menemukan masalah yang tidak dapat ditemukan oleh alat otomatis. Karena alat otomatis tidak mencakup semua kriteria keberhasilan yang diidentifikasi dalam WCAG, Anda harus menjalankan pengujian aksesibilitas otomatis dan terus melakukan pengujian.

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

Manfaat pengujian aksesibilitas manual:

  • Cukup mudah dan cepat dijalankan
  • Menemukan persentase masalah yang lebih tinggi daripada pengujian otomatis saja
  • Alat dan keahlian yang diperlukan untuk meraih kesuksesan sangat sedikit

Kekurangan pengujian aksesibilitas manual:

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

Bandingkan elemen dan detail aksesibilitas yang dapat dideteksi oleh alat otomatis, dengan elemen dan detail yang tidak dapat dideteksi.

Dapat diotomatiskan Tidak dapat diotomatiskan
Kontras warna teks pada latar belakang solid Kontras warna dari teks pada gradien dan gambar
Teks alternatif gambar ada Teks alternatif gambar akurat dan ditetapkan dengan benar
Judul, daftar, dan tempat terkenal ada Judul, daftar, dan penanda ditandai dengan benar dan semua elemen diperhitungkan
ARIA ada ARIA digunakan dengan tepat dan diterapkan ke elemen yang benar
Mengidentifikasi elemen yang dapat difokuskan keyboard Elemen mana yang tidak memiliki fokus keyboard, urutan fokusnya masuk akal, dan indikator fokusnya terlihat
Deteksi judul iFrame iFrame, urutan fokus masuk akal, dan indikator fokus terlihat
Elemen video ada Elemen video memiliki media alternatif yang sesuai (seperti teks dan transkrip)


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 semua pengujian manual yang dapat atau harus Anda jalankan. Sebaiknya Anda memulai dengan daftar periksa aksesibilitas manual dari sumber tepercaya dan membuat daftar periksa pengujian manual yang berfokus untuk produk digital dan kebutuhan tim Anda.

Pemeriksaan keyboard

Diperkirakan sekitar 25% dari semua masalah aksesibilitas digital terkait dengan kurangnya dukungan keyboard. Seperti yang kita pelajari dalam modul fokus keyboard, hal ini memengaruhi semua jenis pengguna, termasuk pengguna yang hanya menggunakan keyboard dan memiliki penglihatan normal, pengguna pembaca layar yang memiliki gangguan penglihatan/tunanetra, dan orang yang menggunakan software pengenalan suara yang menggunakan teknologi yang mengandalkan konten yang dapat diakses keyboard.

Pengujian keyboard menjawab pertanyaan seperti:

  • Apakah halaman web atau fitur memerlukan mouse agar dapat berfungsi?
  • Apakah urutan tab logis dan intuitif?
  • Apakah indikator fokus keyboard selalu terlihat?
  • Apakah Anda terjebak dalam elemen yang seharusnya tidak menjebak fokus?
  • Dapatkah Anda menjelajahi di belakang atau di sekitar elemen yang seharusnya menjebak 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 menyingkirkan mouse atau menginstal paket JavaScript kecil dan menguji situs Anda hanya menggunakan keyboard. Perintah berikut penting untuk pengujian keyboard.

Kunci Hasil
Tab Memindahkan satu elemen aktif ke elemen aktif lainnya
Shift + Tab Berpindah mundur dari satu elemen aktif ke elemen aktif lainnya
Panah Berpindah-pindah pada kontrol terkait
Bilah spasi Mengalihkan status dan berpindah ke bawah halaman
Shift + Spacebar Bergerak ke atas halaman
Enter Memicu kontrol tertentu
Escape Menutup objek yang ditampilkan secara dinamis

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 dideteksi oleh alat otomatis, seperti teks di atas gradasi atau gambar?
  • Apakah ada elemen yang terlihat seperti heading, daftar, dan elemen struktural lainnya, tetapi tidak dikodekan seperti itu?
  • Apakah link navigasi dan input formulir konsisten di seluruh situs atau aplikasi?
  • Apakah ada kilatan, strobo, atau animasi yang melebihi rekomendasi?
  • Apakah konten memiliki jarak yang tepat? 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, pergerakan, dan warna, pemeriksaan konten berfokus pada kata-kata di halaman. Anda tidak hanya harus melihat teksnya, tetapi juga harus meninjau konteksnya untuk memastikan teks tersebut masuk akal bagi orang lain.

Pemeriksaan konten menjawab pertanyaan seperti:

  • Apakah judul halaman, heading, dan label formulir jelas dan deskriptif?
  • Apakah alternatif gambar ringkas, akurat, dan bermanfaat?
  • Apakah warna saja digunakan sebagai satu-satunya cara untuk menyampaikan makna atau informasi?
  • Apakah link deskriptif, atau apakah Anda menggunakan teks umum seperti "baca selengkapnya" atau "klik di sini"?
  • Apakah ada perubahan bahasa dalam satu halaman?
  • Apakah bahasa sederhana digunakan dan apakah semua akronim dieja saat pertama kali dirujuk?

Sebagian pemeriksaan konten dapat diotomatisasi. Misalnya, Anda dapat menulis linter JavaScript yang memeriksa "Klik di sini" dan menyarankan Anda melakukan perubahan. Namun, solusi kustom ini sering kali masih memerlukan manusia untuk mengubah teks menjadi sesuatu yang kontekstual.

Demo: Pengujian manual

Sejauh ini, kami telah menjalankan pengujian otomatis di halaman web demo kami serta menemukan dan memperbaiki delapan jenis masalah yang berbeda. Sekarang kita siap menjalankan pemeriksaan manual untuk melihat apakah kita dapat menemukan lebih banyak masalah aksesibilitas.

Langkah 1

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

Lihat dalam mode debug untuk melanjutkan ke pengujian berikutnya. Hal ini penting karena akan 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 Anda dengan menyisihkan mouse atau trackpad dan menavigasi DOM ke atas dan ke bawah hanya menggunakan keyboard.

Masalah 1: Indikator fokus yang 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: none" yang ditakuti ditambahkan ke codebase.

  :focus {
    outline: none;
  }
Mari kita perbaiki.

Seperti yang Anda pelajari dalam 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 indikator fokus yang ditata agar sesuai dengan estetika produk digital Anda.

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

Masalah 2: Urutan fokus

Setelah Anda mengubah indikator fokus dan indikator tersebut terlihat, pastikan untuk menekan tab di seluruh halaman. Saat melakukannya, Anda akan melihat bahwa kolom input formulir yang digunakan untuk berlangganan newsletter tidak menerima fokus. Elemen 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>
Mari kita perbaiki.

Karena kami ingin orang menggunakan kolom ini untuk mendaftar ke newsletter kami, yang perlu kami lakukan adalah menghapus tabindex negatif atau menyetelnya ke nol agar input dapat difokuskan kembali dengan keyboard.

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

Langkah 3

Setelah fokus keyboard diperiksa, kita akan melanjutkan ke pemeriksaan visual dan konten.

Saat Anda melakukan pengujian keyboard dengan menekan tab ke atas dan ke bawah di halaman demo, Anda mungkin melihat keyboard berfokus pada tiga link yang tersembunyi secara visual dalam paragraf tentang berbagai kondisi medis.

Agar halaman kita dapat diakses, link harus terlihat berbeda dari teks di sekitarnya dan menyertakan perubahan gaya non-warna saat kursor mouse diarahkan ke link dan saat fokus keyboard berada di link.

Mari kita perbaiki.

Solusi cepatnya adalah menambahkan garis bawah pada link di dalam paragraf agar link tersebut terlihat jelas. Tindakan 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 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 normal dan latar belakang. Namun, link yang tidak digarisbawahi juga harus memenuhi persyaratan kontras warna 3:1 terhadap teks di sekitarnya.

Salah satu opsi adalah mengubah warna link agar sesuai dengan elemen lain di halaman. Namun, jika Anda mengubah warna link menjadi hijau, teks isi juga harus diubah untuk memenuhi persyaratan kontras warna secara keseluruhan antara ketiga elemen: link, latar belakang, dan teks di sekitarnya.

Screenshot WebAIM untuk teks link menunjukkan bahwa link ke teks isi gagal memenuhi level A WCAG.
Jika link dan teks isi sama, pengujian akan gagal.
Screenshot WebAIM menunjukkan bahwa semua pengujian berhasil saat warna link berwarna hijau.
Jika link dan teks isi berbeda, pengujian akan lulus.

Masalah 4: Kontras warna ikon

Masalah kontras warna lain yang terlewat adalah ikon media sosial. Dalam modul warna dan kontras, Anda 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.

Screenshot demo dengan penganalisis warna yang menunjukkan kontras warna ikon yang gagal.

Masalah 5: Tata letak konten

Jika Anda melihat tata letak konten paragraf, teksnya akan sepenuhnya dijustifikasi. Seperti yang Anda pelajari dalam modul Tipografi, hal ini akan menciptakan "sungai ruang", yang dapat membuat teks sulit dibaca oleh sebagian pengguna.

p.bullet {
   text-align: justify;
}
Mari kita perbaiki.

Untuk mereset perataan teks dalam demo, Anda dapat memperbarui kode menjadi text-align: left; atau menghapus seluruh baris tersebut 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

Screenshot situs demo Medical Mysteries Club.
Semua masalah manual kini telah diselesaikan dalam demo, seperti yang ditunjukkan dalam gambar ini.

Setelah Anda mengidentifikasi dan memperbaiki semua masalah aksesibilitas manual yang diuraikan pada langkah-langkah sebelumnya, halaman Anda akan terlihat serupa dengan screenshot kami.

Anda mungkin menemukan lebih banyak masalah aksesibilitas dalam pemeriksaan manual Anda daripada 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 yang telah diperbarui, yang telah menerapkan semua perbaikan aksesibilitas otomatis dan manual.

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

Sebelumnya
Pengujian aksesibilitas otomatis
Berikutnya
Pengujian Teknologi Pendukung