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, semakin banyak pengujian yang 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.

Manfaat pengujian aksesibilitas manual:

  • Cukup mudah dan cepat dijalankan
  • Menemukan persentase masalah yang lebih tinggi daripada pengujian otomatis saja
  • Hanya memerlukan sedikit alat dan keahlian untuk berhasil

Kekurangan pengujian aksesibilitas manual:

  • Lebih kompleks dan memakan waktu daripada 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 akan terdeteksi.

Dapat diotomatisasi Tidak dapat diotomatisasi
Kontras warna teks pada latar belakang solid Kontras warna teks pada gradien/gambar
Teks alternatif gambar ada Teks alternatif gambar akurat dan ditetapkan dengan benar
Judul, daftar, dan tempat terkenal ada Judul, daftar, dan tempat terkenal ditandai dengan benar dan semua elemen diperhitungkan
ARIA ada ARIA digunakan dengan benar dan diterapkan ke elemen yang benar
Mengidentifikasi elemen yang dapat difokuskan keyboard Elemen mana yang tidak memiliki fokus keyboard, urutan fokusnya logis, dan indikator fokusnya terlihat
Deteksi judul iFrame iFrame, urutan fokusnya logis, dan indikator fokusnya 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.

Kami 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 mulai dengan a checklist aksesibilitas manual dari sumber yang bereputasi baik dan buat checklist pengujian manual terfokus Anda sendiri untuk kebutuhan tim dan produk digital Anda yang spesifik.

Pemeriksaan keyboard

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

Pengujian keyboard menjawab pertanyaan seperti:

  • Apakah halaman web atau fitur memerlukan mouse agar berfungsi?
  • Apakah urutan tab logis dan intuitif?
  • Apakah indikator fokus keyboard selalu terlihat?
  • Apakah Anda dapat terjebak dalam elemen yang tidak boleh menjebak fokus?
  • Apakah Anda dapat menavigasi 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 Berpindah maju dari satu elemen aktif ke elemen aktif lainnya
Shift + Tab Berpindah mundur dari satu elemen aktif ke elemen aktif lainnya
Panah Berpindah-pindah kontrol terkait
Bilah spasi Mengalihkan status dan bergerak ke bawah halaman
Shift + Bilah spasi 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 situs atau aplikasi terkait aksesibilitas.

Pemeriksaan visual dapat memberi tahu Anda:

  • Apakah ada masalah kontras warna yang tidak dapat ditemukan oleh alat otomatis, seperti teks di atas gradien atau gambar?
  • Apakah ada elemen yang terlihat seperti judul, daftar, dan elemen struktural lainnya, tetapi tidak dikodekan seperti itu?
  • Apakah link navigasi dan input formulir konsisten di seluruh situs atau aplikasi?
  • Apakah ada kedipan, strobing, atau animasi yang melebihi rekomendasi?
  • Apakah konten memiliki spasi yang tepat? Untuk huruf, kata, baris, dan paragraf?
  • Dapatkah Anda melihat semua konten menggunakan kaca 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 teks itu sendiri, tetapi juga harus meninjau konteksnya untuk memastikan teks tersebut masuk akal bagi orang lain.

Pemeriksaan konten 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 apakah Anda menggunakan teks generik seperti "baca selengkapnya" atau "klik di sini"?
  • Apakah ada perubahan pada bahasa dalam halaman?
  • Apakah bahasa yang digunakan sederhana dan apakah semua akronim dieja saat pertama kali direferensikan?

Beberapa pemeriksaan konten dapat diotomatisasi, sebagian. 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 dan menemukan serta memperbaiki delapan jenis masalah yang berbeda. Sekarang kami siap menjalankan pemeriksaan manual untuk melihat apakah kami dapat menemukan lebih banyak masalah aksesibilitas.

Langkah 1

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

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

Langkah 2

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

Masalah 1: Indikator fokus yang terlihat

Anda akan segera 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 di modul Fokus keyboard, Anda harus menghapus baris kode ini agar browser web dapat menambahkan fokus yang terlihat untuk pengguna. Anda dapat melangkah lebih jauh dan membuat indikator fokus yang ditata gaya untuk memenuhi estetika produk digital Anda.

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

Masalah 2: Urutan fokus

Setelah mengubah indikator fokus dan indikator tersebut terlihat, pastikan untuk menekan tab di halaman. Saat melakukannya, Anda akan melihat bahwa kolom input formulir yang digunakan untuk berlangganan newsletter tidak menerima fokus. Kolom tersebut 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 newsletter kami, yang perlu kami lakukan adalah menghapus tabindex negatif atau menetapkannya ke nol agar input dapat difokuskan keyboard lagi.

<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 melakukan pengujian keyboard dengan menekan tab ke atas dan ke bawah halaman demo, Anda mungkin melihat keyboard yang berfokus pada tiga link yang tersembunyi secara visual dalam paragraf tentang berbagai kondisi medis.

Agar halaman kami dapat diakses, link harus menonjol dari teks di sekitarnya dan menyertakan perubahan gaya non-warna saat kursor mouse diarahkan dan fokus keyboard.

Mari kita perbaiki.

Solusi cepatnya adalah menambahkan garis bawah ke link di dalam paragraf agar link tersebut menonjol. Hal ini akan menyelesaikan masalah aksesibilitas, tetapi mungkin tidak sesuai dengan estetika desain keseluruhan yang ingin Anda capai.

Jika 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 tanpa garis bawah juga harus memenuhi persyaratan kontras warna 3:1 terhadap teks di sekitarnya.

Salah satu opsinya adalah mengubah warna link agar sesuai dengan elemen lain di halaman. Namun, jika Anda mengubah warna link menjadi hijau, teks isi juga harus diubah agar memenuhi persyaratan kontras warna 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 WCAG A.
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. Di 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 rata kanan kiri. Seperti yang Anda pelajari di modul Tipografi, hal ini akan membuat "sungai ruang", yang dapat membuat teks sulit dibaca oleh beberapa 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 baris tersebut sepenuhnya dari CSS, karena kiri adalah perataan default untuk browser. Pastikan untuk menguji kode, jika gaya turunan lainnya menghapus perataan teks default.

p.bullet {
   text-align: left;
}

Langkah 4

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

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

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

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

Sebelumnya
Pengujian aksesibilitas otomatis
Berikutnya
Pengujian Teknologi Pendukung