Intinya...

Sediakan bantuan tambahan (seperti petunjuk teks, tautan bantuan, atau tooltip) ketika label saja dapat menimbulkan ambiguitas atau kebingungan.

Apa itu WCAG 3.3.5?

Pengguna harus memiliki akses ke bantuan saat menyelesaikan tugas yang bisa membingungkan atau rawan kesalahan. Tujuannya adalah menyediakan bantuan kontekstual—yaitu bantuan yang muncul tepat di tempat dan waktu pengguna membutuhkannya, dan terhubung langsung dengan input atau tugas tertentu.

Panduan ini biasanya berlaku untuk formulir atau proses di mana input yang diminta tidak langsung jelas atau harus mengikuti format tertentu. Ini memastikan pengguna tidak perlu menebak-nebak. Bantuan bisa berupa:

  • Tautan di samping pertanyaan yang membingungkan
  • Penjelasan singkat di sebelah kumpulan isian yang kompleks
  • Petunjuk format atau contoh isian

Yang penting, tidak semua isian harus disertai bantuan—tapi kamu diwajibkan menyediakan bantuan jika label atau instruksi saja tidak cukup untuk membantu pengguna memahami apa yang harus dilakukan.

Bantuan perlu disertakan ketika:

  • Input menggunakan format yang tidak umum
  • Isian bisa diartikan lebih dari satu cara
  • Tugasnya berisiko tinggi (formulir legal, pelaporan pajak, lamaran kerja, dll)
  • Kamu menerima umpan balik dari pengguna atau menemukan kebingungan saat uji kegunaan

Perbandingan dengan WCAG 3.3.2

WCAG 3.3.2 Labels atau Instruksi (Level A) memastikan setiap input memiliki label atau instruksi yang jelas. WCAG 3.3.5 Bantuan (Level AAA) membangun dari itu dengan menambahkan panduan tambahan yang opsional selama tugas yang kompleks, saat label dan instruksi saja tidak cukup.

Mengapa ini penting?

Tidak semua orang mengisi formulir dengan cara yang sama. Beberapa orang bisa terhambat oleh pertanyaan yang tidak dikenal atau kebingungan dengan aturan format, seperti cara menulis tanggal atau nomor telepon. Bagi pengguna dengan disabilitas kognitif, tantangan memori, atau kesulitan membaca, ketidakjelasan ini bisa menjadi hambatan besar.

Menyediakan bantuan langsung di konteks tempat bantuan dibutuhkan membantu mencegah frustrasi, mencegah pengguna menyerah, atau memasukkan informasi yang salah. Ini memberi mereka rasa percaya diri untuk menyelesaikan tugas secara mandiri dan berhasil.

Sebagai contoh, formulir lamaran kerja mungkin menyertakan pertanyaan yang tidak jelas bagi pelamar pertama kali. Tautan bantuan kecil atau catatan di samping setiap isian dapat memberikan kejelasan tanpa mengganggu alur pengisian formulir.

Siapa yang terdampak?

Orang dengan disabilitas kognitif. Orang dengan literasi teknologi yang terbatas.

Orang dengan disabilitas kognitif mungkin mengalami kesulitan memahami instruksi yang tidak jelas atau formulir yang kompleks, sehingga lebih sulit bagi mereka untuk menyelesaikan tugas tanpa kesalahan atau rasa frustrasi.

Orang yang kurang terbiasa menggunakan alat digital mungkin merasa kewalahan atau tidak yakin tanpa panduan dan bantuan tambahan.

Menyediakan bantuan akan bermanfaat untuk semua pengguna, tetapi terutama bagi mereka yang paling berisiko mengalami kebingungan atau melakukan kesalahan.

Cara menerapkan WCAG 3.3.5

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

Bantuan kontekstual di tempat yang dibutuhkan

Sediakan bantuan yang relevan di dekat isian formulir atau komponen lain tempat pengguna mungkin memerlukan panduan tambahan. Ini bisa berupa:

  • Ikon “Bantuan” atau “?” yang terhubung ke teks penjelasan
  • Penjelasan singkat di samping isian atau di awal formulir
  • Tooltip atau bagian yang dapat diperluas
  • Asisten bawaan, avatar, atau wizard
  • Petunjuk format atau contoh konkret

Pastikan konten bantuan mudah dipahami, tersedia di halaman yang sama, dan jelas terhubung dengan tugas yang dimaksud.

Tambahkan tautan bantuan

Sebaiknya sertakan minimal satu tautan bantuan per halaman formulir yang relevan dengan tugas secara keseluruhan. Untuk isian yang dianggap sulit, kamu bisa menambahkan tautan bantuan khusus di samping input tersebut.

Praktik terbaik:

  • Letakkan tautan bantuan tepat sebelum atau sesudah isian
  • Gunakan elemen <label> untuk membungkus tautan bantuan dan isian agar pengguna pembaca layar dapat mendengar teks bantuan sebagai bagian dari label
  • Atur tautan bantuan eksternal agar terbuka di tab atau jendela baru, untuk mencegah hilangnya data yang sudah diisi pengguna

Kolom formulir untuk Nomor Jaminan Sosial dengan tautan bantuan berlabel 'Apa itu SSN?'

Sertakan penjelasan singkat

Beberapa formulir memiliki serangkaian isian yang mengikuti aturan yang sama. Menambahkan blok instruksi singkat dapat mencegah kesalahpahaman.

Sebagai contoh, penjelasan ini bisa disertakan di samping serangkaian kolom untuk mengisi tanggal diterbitkan dan tanggal kedaluwarsa pada lisensi:

“Butuh bantuan? Gunakan format tanggal mm/dd/yyyy. Contoh: 05/10/2025. Anda biasanya bisa menemukan tanggal diterbitkan dan tanggal kedaluwarsa di bagian depan lisensi Anda. Jika lisensi Anda tidak memiliki tanggal kedaluwarsa, biarkan kolom tersebut kosong.”

Atau, teks dapat disertakan di awal formulir untuk mengatur ekspektasi terhadap bagian-bagian yang kompleks:

“Sebelum memulai: Beberapa bagian dalam formulir ini mungkin akan meminta detail seperti nomor identitas, rentang tanggal, atau dokumen pendukung. Kami akan menyediakan contoh dan tips sepanjang proses untuk membantu Anda mengisi informasi dengan benar. Jika Anda tidak yakin dengan suatu kolom, cari ikon bantuan di sampingnya.”

Kolom formulir berlabel 'Total Penghasilan Tahunan (USD)' dengan penjelasan singkat di atas input

Tooltip bantuan atau bagian yang dapat diperluas

Bantuan juga dapat disediakan melalui tooltip atau bagian yang dapat diperluas yang ditempatkan di samping isian formulir atau kontrol lainnya. Pendekatan ini memungkinkan pengguna mengakses panduan tambahan tanpa membuat halaman terlihat ramai.

  • Tooltip menampilkan petunjuk singkat saat pengguna mengarahkan kursor atau fokus ke ikon, seperti tanda tanya.
  • Bagian yang dapat diperluas, seperti tautan “Info lebih lanjut”, menampilkan penjelasan lebih panjang saat diklik.

Pastikan tooltip dan bagian yang dapat diperluas dapat diakses oleh pengguna pembaca layar dan keyboard. Elemen-elemen ini harus dapat difokuskan, dapat ditutup, dan tetap terlihat cukup lama untuk dibaca.

Sebuah kolom formulir berlabel 'Nama Lengkap' menyertakan ikon tanda tanya berwarna biru di samping label. Sebuah tooltip bergaya balon percakapan muncul dari ikon tersebut dan menampilkan teks bantuan singkat.

Asisten bawaan atau avatar

Asisten atau avatar dapat diprogram untuk membantu pengguna mengisi formulir. Fitur ini harus mendukung kemampuan untuk memutar, menjeda, memundurkan, dan sebagainya, serta wajib memenuhi semua persyaratan aksesibilitas yang relevan untuk multimedia, seperti teks alternatif atau transkrip.

Sebagai contoh, portal formulir pajak dapat menyertakan avatar yang menjelaskan cara mengisi setiap bagian formulir, dengan transkrip teks tersedia di bawah video bagi pengguna yang lebih memilih membaca.

Kolom formulir 'Nomor Routing Bank' dengan karakter asisten yang memberikan panduan langkah demi langkah kepada pengguna.

Tunjukkan format dan contoh yang benar kepada pengguna

Jangan biarkan pengguna menebak-nebak format yang dibutuhkan. Jika suatu kolom memerlukan format tertentu, seperti struktur tanggal atau pola angka khusus, jelaskan secara langsung di dekat kolom input dengan mendeskripsikannya atau memberikan contoh cepat.

Kolom 'Tanggal Lahir' dengan instruksi format dan tanggal contoh di atas kolom input.

Pemeriksa ejaan dan saran kata

Pemeriksa ejaan dan saran membantu pengguna yang mungkin mengalami kesulitan mengetik, mengeja, atau mengingat.

Bantuan semacam ini dapat diberikan dalam beberapa cara:

  • Kolom pencarian menampilkan pesan “Maksud Anda: kata yang dikoreksi” saat pengguna mengirimkan istilah yang salah eja.
  • Kolom input kota menawarkan daftar dropdown berisi saran kota saat pengguna mengetik, dengan kecocokan terdekat ditampilkan pertama.
  • Kolom komentar menyoroti kata-kata yang salah eja dan memungkinkan pengguna mengklik kanan untuk memilih koreksi yang disarankan.
  • Jika terdeteksi salah ketik, kolom input email otomatis menyarankan nama domain seperti “gmail.com” atau “outlook.com”.

Saran ejaan otomatis dan saran cerdas untuk isian formulir. Satu contoh memperbaiki kota yang salah eja; lainnya menawarkan perbaikan untuk kesalahan pengetikan pada email.

Ingat untuk menguji bantuan itu sendiri

Menambahkan konten bantuan saja tidak cukup. Kamu juga harus memastikan bahwa bantuan tersebut dapat diakses oleh semua orang.

  • Apakah pembaca layar dapat mengaksesnya?
  • Dapatkah bantuan dibuka, dibaca, dan ditutup dengan keyboard?
  • Apakah bantuan tetap terbuka cukup lama untuk dibaca?
  • Apakah isi bantuan ditulis dengan bahasa yang jelas dan sederhana?

Kesimpulan

WCAG 3.3.5 Bantuan bertujuan untuk mendukung pengguna saat label dan instruksi saja tidak cukup. Dengan menyediakan bantuan kontekstual yang mudah diakses, ditulis dengan jelas, dan muncul tepat di tempat dibutuhkan, kamu dapat mengurangi kebingungan, mencegah kesalahan, dan menciptakan pengalaman yang lebih baik untuk semua orang.