Intinya...

Instruksi dan deskripsi harus tidak bergantung dengan fitur sensorik saja, seperti warna, bentuk, ukutan, lokasi visual, atau suara.

Selalu sertakan teks tambahan untuk memperjelas makna.

Apa itu WCAG 1.3.3?

Bayangkan kamu memberi instruksi kepada pengguna untuk menekan tombol yang benar di panel penuh tombol. Kalau kamu bilang “tekan tombol hijau”, pengguna dengan gangguan penglihatan atau defisiensi penglihatan warna tidak akan bisa menemukannya. Kalau kamu bilang “tekan tombol bulat”, pengguna yang kesulitan mengenali bentuk juga akan kesulitan. Kalau tombol itu berbunyi dan kamu bilang “tekan tombol yang berbunyi”, maka pengguna dengan gangguan pendengaran juga tidak bisa menemukannya.

Sering kali, saat kita memberi arahan di halaman web, kita menggunakan ciri-ciri indra seperti warna, bentuk, posisi visual, orientasi, atau suara. Kita bisa saja menulis “ikuti instruksi di kolom kanan” atau “tekan tombol oranye untuk lanjut”.

WCAG 1.3.3 meminta kita untuk tidak hanya mengandalkan satu ciri indra saja, tapi menambahkan informasi tambahan agar semua pengguna bisa memahami instruksinya.

Misalnya, daripada bilang “tekan tombol hijau”, lebih baik bilang “tekan tombol hijau berbentuk bulat yang bertuliskan ‘Lanjut’.”

Dengan begitu, kita memberi lebih banyak petunjuk agar pengguna bisa mengenali tombol yang dimaksud, meskipun mereka tidak bisa melihat warnanya, bentuknya, atau mendengar suaranya.

Mengapa ini penting?

Tidak semua orang bisa merasakan informasi dengan cara yang sama. Kalau kamu hanya mengandalkan satu ciri, seperti warna atau bentuk, maka pengguna yang tidak bisa melihat atau mengenali hal tersebut jadi tidak bisa mengikuti instruksi.

Dengan menambahkan beberapa ciri indra, kita membuat instruksi yang lebih fleksibel dan bisa dipahami lebih banyak pengguna.

Ini juga membantu menghindari kebingungan. Misalnya, kalau kamu bilang “klik tombol bulat” tapi ada beberapa tombol bulat, itu bisa membingungkan siapa pun. Tapi kalau kamu bilang “klik tombol bulat bertuliskan ‘Simpan’ di pojok kanan bawah”, instruksinya jadi jelas.

Mari ambil contoh formulir kontraktor berikut.

Penerapan formulir yang salah

Formulir kontraktor dengan hanya tombol panah menghadap ke kiri dan kanan untuk menunjukkan pembagian halaman. Tidak ada petunjuk lain yang diberikan kepada pengguna untuk melanjutkan ke langkah berikutnya dan sebelumnya dalam formulir.

Tampilannya memang menarik, tapi sebenarnya membingungkan. Pengguna yang tidak bisa melihat bentuk, warna, ukuran, atau posisi tombol tidak akan tahu kalau ada langkah berikutnya dalam formulir ini. Bayangkan betapa repotnya kalau mereka bahkan tidak bisa menemukan cara untuk lanjut atau mengirim formulir saat ingin menyewa kontraktor.

Penerapan formulir yang benar

Formulir kontraktor dengan tombol panah menghadap ke kiri dan kanan untuk menunjukkan pembagian halaman. Kali ini tanda panah ditandai dengan label 'Previous' 'Next' dan menunjukkan urutan halaman 'Page 2 of 5'. Ada instruksi yang menyatakan, 'To move to the next page of the form, select the Green arrow labeled ‘Next’ in the lower right hand corner below the last field.'

Siapa yang terpengaruh?

Pengguna dengan gangguan penglihatan (termasuk defisiensi penglihatan warna), pengguna dengan disabilitas kognitif atau neurologis, dan pengguna dengan gangguan pendengaran.

Gangguan penglihatan dan disabilitas kognitif bisa membuat seseorang kesulitan melihat dan memahami detail visual seperti warna, bentuk, ukuran, posisi, dan orientasi. Jika kita hanya menggunakan satu cara ini tanpa bantuan teknologi bantu seperti screen reader, pengguna akan sulit mendeteksi dan memahami informasi di layar. Untuk mereka, menambahkan petunjuk teks atau alternatif teks untuk konten yang dijelaskan akan sangat membantu.

Demikian juga, gangguan pendengaran membuat pengguna sulit memahami petunjuk yang hanya berupa suara. Misalnya, dalam kelas online dengan kuis berbatas waktu. Jika satu-satunya tanda bahwa kuis selesai hanyalah suara bel, pengguna dengan gangguan pendengaran bisa kesulitan mengetahui apakah waktu mereka sudah habis. Dalam kasus seperti ini, memberikan alternatif berupa teks seperti timer yang terlihat menghitung mundur, atau menampilkan pesan saat waktu habis, adalah solusi terbaik.

Timer dengan angka 0:00 dan pilihan jawaban Apples dan Oranges

Sebuah timer di kuis dengan pesan yang mengatakan bahwa waktu sudah habis.

Konten yang tidak memberikan petunjuk tambahan selain satu jenis isyarat bisa menyulitkan pengguna dengan gangguan penglihatan, disabilitas kognitif, atau gangguan pendengaran. Dengan menyediakan bentuk isyarat tambahan, kita membantu mereka mendapatkan pengalaman yang jauh lebih mudah diakses.

Cara menerapkan WCAG 1.3.3

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Gunakan teks yang jelas

Selain menggunakan ciri-ciri sensorik seperti posisi, bentuk, dan ukuran, akan sangat membantu jika kita juga menyebutkan teks spesifik yang muncul pada tombol, tautan, atau judul bagian. Teks ini bisa dengan mudah dibaca oleh screen reader (screen reader) dan perangkat braille, sehingga semua orang bisa menemukan konten yang dimaksud.

Berikut ini contoh menu online tempat pengguna bisa memesan makanan.

Sistem pemesanan menu yang menerapkan beberapa ciri sensorik

Sebuah sistem pemesanan menu online. Ada sidebar yang menampilkan berbagai kategori, disertai teks yang berbunyi: 'Untuk menavigasi menu, silakan gunakan menu berwarna biru di sebelah kanan yang berjudul 'Kategori'.' Sidebar ini juga memiliki judul yang jelas dan kategori yang diberi label dengan baik.

Sistem pemesanan menu yang hanya memiliki 1 ciri sensorik

Sebuah sistem pemesanan menu online. Tidak ada teks yang memberi tahu di mana menemukan kategori untuk memesan makanan. Menu di sidebar juga tidak diberi label dengan jelas.

Kombinasikan beberapa ciri indra

Menggabungkan berbagai petunjuk sensorik untuk menyampaikan informasi kepada pengguna juga sangat membantu. Dengan cara ini, kamu tidak hanya menyasar kelompok kecil, tapi menjangkau lebih banyak orang, termasuk mereka yang memiliki gangguan penglihatan, disabilitas kognitif, dan gangguan pendengaran. Ini adalah cara yang bagus untuk memastikan tidak ada yang tertinggal.

Contoh yang baik seperti ini:

Kuis yang memakai isyarat suara dan visual

Sebuah kuis yang memberikan isyarat suara untuk memberi tahu pengguna bahwa jawabannya salah. Teks juga ditampilkan yang menunjukkan '9/10 jawaban benar'. Ada simbol peringatan/kesalahan, dan tambahan teks berwarna merah (sesuai standar WCAG) yang menyatakan bahwa jawabannya salah.

Contoh yang bisa menyulitkan pengguna:

Kuis yang hanya memakai isyarat suara

Sebuah kuis yang hanya memberikan isyarat suara untuk memberi tahu pengguna bahwa jawabannya salah. Tidak ada petunjuk lain, hanya teks '9/10 jawaban benar'.

Kesimpulan

Memenuhi kriteria WCAG 1.3.3 dengan menggunakan petunjuk sensorik tambahan untuk menyampaikan informasi akan memastikan bahwa konten kamu dapat diakses oleh semua pengguna tanpa membuat mereka frustrasi atau bingung. Dengan mengikuti panduan ini, semua orang bisa memahami, menangkap, dan fokus pada informasi yang disampaikan.