3.3.2 Label atau Instruksi

Apa itu WCAG 3.3.2?

Kolom formulir yang membutuhkan input dari pengguna harus memberikan label dan instruksi yang jelas supaya pengguna tahu informasi apa yang harus mereka masukkan. Tujuannya adalah memberikan arahan yang cukup agar pengguna tahu apa yang harus diisi dan dengan format yang benar. Namun, jangan sampai memberi terlalu banyak informasi hingga malah membingungkan.

Label dan instruksi yang jelas membantu pengguna menghindari kebingungan atau frustrasi, serta membuat proses mengisi formulir lebih lancar dengan mengurangi kesalahan dan pengiriman ulang.

Perlu dicatat bahwa pedoman ini tidak fokus pada:

• Memastikan bahwa kolom dan label terhubung secara programatik (WCAG 1.3.1 Informasi dan Relasi)
• Mensyaratkan bahwa label atau instruksi harus deskriptif (WCAG 2.4.6 Heading dan Label)
• Memeriksa apakah atribut ARIA digunakan untuk memberi label atau deskripsi pada kolom formulir (WCAG 4.1.2 Name, Role, dan Value)
• Elemen seperti tombol atau tautan yang tidak melibatkan pengisian data

Kriteria ini hanya mensyaratkan bahwa kolom input data harus memiliki label serta instruksi yang diperlukan.

Mengapa ini penting?

Jika sebuah situs web atau aplikasi tidak memiliki label atau instruksi untuk kolom input data, pengguna mungkin tidak tahu informasi apa yang diperlukan, yang bisa menyebabkan kebingungan. Hal ini bisa membingungkan siapa saja dan menjadi hambatan besar bagi orang dengan disabilitas kognitif.

Tanpa instruksi yang jelas, pengguna lebih mungkin memasukkan informasi yang salah atau memasukkan informasi yang benar dengan format yang salah. Misalnya, jika tidak jelas bahwa tanggal harus dalam format tertentu, pengguna bisa saja memasukkannya dengan cara yang salah. Dan ketika pengguna membuat kesalahan karena instruksi yang tidak jelas, mereka sering kali harus kembali dan memperbaikinya, yang bisa sangat menjengkelkan dan memakan waktu.

Bagi pengguna screen reader atau teknologi bantu lainnya, kurangnya label yang tepat bisa membuat hampir tidak mungkin untuk memahami dan mengisi formulir. Teknologi bantu mengandalkan label-label ini untuk menyampaikan fungsi masing-masing kolom input. Pengguna mungkin akan melewatkan kolom input jika mereka tidak yakin apa yang harus dimasukkan, yang akan menghasilkan formulir yang tidak lengkap dan tidak dapat diproses.

Siapa yang terpengaruh?

Pengguna dengan disabilitas kognitif, pengguna dengan disabilitas visual, dan pengguna dengan gangguan mobilitas.

Pengguna dengan disabilitas kognitif mungkin kesulitan memproses informasi, mengetahui informasi apa yang dibutuhkan, atau memahami tujuan dari kolom-kolom yang berbeda tanpa label dan instruksi yang jelas.

Pengguna dengan disabilitas penglihatan yang mengandalkan screen reader atau teknologi bantu lainnya memerlukan kolom yang diberi label dengan benar untuk memahami informasi apa yang diperlukan. Tanpa label ini, screen reader tidak dapat menyampaikan rincian yang diperlukan, sehingga sulit atau bahkan tidak mungkin untuk mengisi formulir.

Pengguna dengan gangguan mobilitas yang kesulitan menggunakan mouse atau keyboard dengan efisien mungkin merasa frustrasi ketika harus memperbaiki kesalahan atau menavigasi formulir beberapa kali karena instruksi atau label yang tidak jelas.

Cara menerapkan WCAG 3.3.2

Beri label yang jelas untuk komponen interaktif

Periksa bahwa kolom formulir <input> memiliki <label> yang selalu terlihat dan dengan jelas mengidentifikasi:

• Tujuan dari kolom atau komponen
• Menyertakan instruksi yang diperlukan untuk menggunakan komponen
• Mencantumkan aturan format untuk pengisian data atau memberikan contoh

Label input data harus selalu terlihat agar semua pengguna dapat memahami tujuannya. Menggunakan placeholder yang menghilang begitu pengguna mulai mengetik di kolom tidak cukup untuk memberi label kolom input.

<label for="date">Enter Your Birth Date (dd-mm-yyyy), for example "22-06-1997"</label>
<input type="text" name="date" id="date" />

Harap dicatat bahwa untuk teknik ini, kamu harus mengikuti petunjuk yang tercantum di atas dan menggabungkannya dengan saran dalam salah satu subbagian berikut.

Tempatkan label secara tepat untuk kolom input formulir

Selain memberikan label yang jelas, posisi label juga penting untuk memenuhi pedoman ini. Ketika label kolom formulir ditempatkan di tempat yang diharapkan oleh pengguna, lebih mudah untuk memahami dan menavigasi formulir yang kompleks.

Untuk bahasa yang menggunakan tulisan dari kiri ke kanan (seperti bahasa Indonesia), label biasanya ditempatkan di kiri atau di atas kolom. Sedangkan untuk bahasa yang menggunakan tulisan dari kanan ke kiri (seperti bahasa Arab), label ditempatkan di kanan atau di atas. Untuk tombol radio dan checkbox, label biasanya ditempatkan setelah checkbox atau tombol terkait.

Tunjukkan kolom input formulir yang wajib diisi

<label> juga harus menyertakan teks untuk menunjukkan bahwa kolom tersebut wajib diisi untuk pengiriman formulir yang berhasil. Untuk setiap kolom yang wajib diisi, pastikan label mencantumkan teks yang menandainya sebagai kolom yang wajib diisi. Misalnya, “Nama Depan (wajib)”.

Gunakan aria-describedby untuk menyediakan informasi deskriptif tambahan

Jika elemen <label> untuk kolom formulir tidak memberikan informasi yang cukup, atribut aria-describedby dapat digunakan untuk menghubungkan informasi deskriptif tambahan ke kolom tersebut.

Dalam contoh ini, sebuah kolom teks digunakan untuk mengumpulkan nama lengkap pengguna. Atribut aria-describedby menghubungkan isi elemen <p> dengan kolom <input> menggunakan atribut id yang diset ke “name-desc”.

<form>
    <label for="name">Full name</label>
    <input aria-describedby="name-desc" id="name" type="text"/>
    <p id="name-desc">
        Please enter your full name; including your first, middle, and last name.
    </p>
</form>

Gunakan aria-labelledby untuk menggabungkan beberapa label

Properti aria-labelledby dapat menggabungkan beberapa label dan memberikan urutan sehingga screen reader dapat membacanya sebagai satu label yang terus-menerus. Ini bisa berguna ketika:

• Nilai <input> terpisah perlu dimasukkan dalam label.
• Ruang terbatas untuk teks label tambahan, dan label dapat diambil dari lokasi lain di halaman.

Untuk menerapkan aria-labelledby, tetapkan atribut id yang unik untuk setiap string label yang harus digabungkan menjadi satu label untuk elemen <input>. Value dari atribut aria-labelledby adalah daftar id yang dipisahkan dengan spasi sesuai urutan yang harus dibaca oleh screen reader.

Pada contoh berikut, sebuah tabel <input> mengambil value untuk tempat penampungan hewan yang menyimpan kantong makanan anjing dan kucing. Karena bidang input adalah bagian dari tabel, ruangnya cukup terbatas. Dalam hal ini, <label> untuk bidang input ditarik dan digabungkan menggunakan properti aria-labelledby dengan judul tabel yang sudah ada.

Label untuk bidang teks pertama adalah “Dog Food Number of Bags”. Dan yang kedua adalah “Cat Food Number of Bags”.

<table>
    <tr>
        <td></td>
        <th id="dogFood">Dog Food</th>
        <th id="catFood">Cat Food</th>
    </tr>
    <tr>
        <th id="bags">Number of Bags</th>
        <td><input type="text" size="20" aria-labelledby="dogFood bags" /></td>
        <td><input type="text" size="20" aria-labelledby="catGood bags" /></td>
    </tr>
</table>

Gunakan aria-labelledby dan role "group" untuk menandai bidang terkait

Sekelompok bidang terkait dapat berbagi label yang sama dengan menggunakan aria-labelledby pada elemen pembungkus, bersama dengan properti role yang diset ke “group”.

Dalam contoh berikut, satu set bidang yang digunakan untuk mengumpulkan alamat penagihan semuanya berbagi label yang sama yaitu “Enter Your Billing Address””.

<div role="group" aria-labelledby="billingAddress">
    <span id="billingAddress">Enter Your Billing Address</span>
    <input type="text" title="Street Address"/>
    <input type="text" title="City"/>
    <input type="text" title="State"/>
    <input type="text" title="Zip Code"/>
</div>

Kelompokkan kontrol formulir secara semantik

Gunakan elemen <fieldset> untuk membungkus bidang yang terkait, dimulai dengan <legend> untuk label deskriptif. Pengelompokan sangat penting untuk radio button dan checkbox yang terkait untuk menyampaikan konteks kolektif mereka.

Teknologi bantu sering menampilkan legend sebelum setiap label bidang individu untuk mengingatkan pengguna tentang konteks grup. Harap dicatat bahwa ini adalah metode yang lebih disarankan dibandingkan menggunakan aria-labelledby dan properti role "group".

<fieldset>
    <legend>Choose your favorite type of pets:</legend>
    <div>
        <input checked="checked" id="dogs" name="dogs" type="radio" value="a">
        <label for="dogs">Dogs and Puppies</label>
    </div>
    <div>
        <input id="cats" name="cats" type="radio" value="b">
        <label for="cats">Cats and Kittens</label>
    </div>
</fieldset>

Gunakan tombol di samping kolom input untuk menandainya

Ketika sebuah tombol di samping bidang input memiliki label yang jelas, tombol tersebut dapat bertindak sebagai label untuk bidang tersebut, membantu pengguna memahami tujuannya tanpa menambahkan teks tambahan. Tombol-tombol ini biasanya berada setelah elemen <input>.

Kesimpulan

Menerapkan label yang jelas dan petunjuk untuk bidang formulir sangat penting untuk menciptakan pengalaman web yang dapat diakses dan ramah pengguna. Dengan mengikuti pedoman WCAG 3.3.2, situs web yang memberikan label dengan benar pada bidang dapat mengurangi kesalahan dan frustrasi, membuat proses pengisian formulir lebih lancar dan lebih efisien bagi pengunjung.