Kategori
Web Accessibility

Pemakaian Elemen LABEL yang Mudah Diakses

Diperbarui 4 April 2010 oleh Dani Iswara

Teks label merupakan salah satu elemen X/HTML yang sering menyertai elemen input, textarea, dan select. Fungsinya adalah untuk menunjang aksesibilitas Web. Memberi petunjuk bagi pengguna pembaca layar atau ‘screen reader’.

Label implisit dan eksplisit

Menurut standar Web versi Konsorsium WWW atau W3C, pemakaian elemen ‘label’ dikelompokkan menjadi 2. Perhatikan posisi label penutup:

  • Label implisit.
    Misalnya:

    <label>Nama depan <input type="text" name="firstname"></label>
  • Label eksplisit.
    Misalnya:

    <label>Nama depan</label> <input type="text" name="firstname">

Keduanya bisa digunakan. Hanya saja, untuk label implisit, beberapa perangkat lunak pembaca layar seperti JAWS dan Windows-Eyes disebutkan tidak mampu membacanya dengan baik di semua bagian. Disarankan untuk memakai label model eksplisit.

Selain label, atribut title sebenarnya bisa digunakan. Jika label tidak tersedia, atribut title yang akan terbaca atau terdengar. Hanya saja, seperti sudah diketahui, atribut title tidak aksesibel. Tergantung dengan pemakaian tetikus atau ‘mouse’. Pun, tidak semua pembaca layar mampu membaca atribut tersebut jika tidak mengubah setelan bawaan perangkat masing-masing.

Teknik penempatan label yang dianjurkan WCAG 2.0

Label diposisikan di dekat atau di sebelah kontrol formulir. Mengikuti pola eksplisit. Misalnya:

<label for="search">Find</label><input id="search" name="search" type="text" value="" /><input id="btnSearch" type="submit" name="submit" value="Go" />

Atribut for memiliki nilai yang sama dengan id (tetap unik) dan name.

Dari sisi aksesibilitas, karena kebergunaannya, elemen label disarankan untuk dimunculkan. Sehingga tujuan ‘input’ menjadi lebih jelas. Walau memang bisa disembunyikan dengan bantuan CSS.

Elemen label umumnya bisa ditempatkan sebelum atau sesudah ‘input’. Saya mendukung penempatan label sebelum atau di atas kolom ‘input’. Karena urutannya terasa lebih logis. Saat ini, penempatan label di sebelah kanan ‘input’ mungkin dirasa lebih ‘usable’ dari sisi visual. Seperti di kebanyakan formulir komentar yang ada. Khusus untuk ‘input’ type="checkbox" dan type="radio", penempatan label tetap di kanan.

Elemen label tidak digunakan untuk struktur di bawah. Karena fungsi label sudah dilakukan oleh suatu nilai atribut:

  • input type="submit" untuk tombol ‘submit’ atau input type="reset" untuk tombol ‘reset’,
  • input type="image", untuk tombol berbasis gambar,
  • input type="hidden",
  • input type="button"> atau oleh tombol <button> sendiri.

Jika tidak ingin mengecek manual satu-satu, validator X/HTML W3C akan membantu. Atau sekalian memakai perangkat daring ATRC Accessibility Checker.

Bacaan: H44: Using label elements to associate text labels with form controls – Techniques for WCAG 2.0.

7 tanggapan untuk “Pemakaian Elemen LABEL yang Mudah Diakses”

wah…harus renovasi lagi nih :) tapi it’s OK…pelajarannya makin seru! Izin unduh, Bos! Buat referensi ceritanya. Siapa tahu saya bisa pergi ke bulan dengan koleksi draft yang karena kemalasan akhirnya hanya jadi tumpukan kertas tak bermakna. :)

Anis Fahrunisa,
uups, ini bukan untuk mengajak berepot-repot ria merenovasi yang sudah bagus. Sekadar wacana dan catatan tidak penting saja, kok. :)

Lhah, aku merasa ketinggalan kereta disini, tapi malah sudah ada yang mau terbang ke bulan. :)
Anyway,.. yang bikin gemes adalah pengguna WordPress yang juga menggunakan service email subscription feedburner saat akan melakukan ujicoba ATRC, WAI atau sejenisnya. Duhh sang <label> jadi kejedot pintu tag_key bernama 'email' :(
Punya solusinya ga Rayimas ?

Harry,
maaf Pakdhe, saya lupa solusinya. Sepertinya dulu pernah saya coba. Tapi jika memakai javascript, nyerah deh. Kalau tidak salah, saya pakai model pranala saja dibanding form.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.