Pemakaian Elemen LABEL yang Mudah Diakses

Noted: Sunday, April 4, 2010 at 00:50:53. Words count: 356.
Last updated: Sunday, April 4, 2010 at 00:52:47.

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.

Dani Iswara, [myfirstnamelastname]@gmail.com.

7 comments to "Pemakaian Elemen LABEL yang Mudah Diakses"

  1. Cahya

    Saya baru tahu ada elemen label, besok kasih kursus ya Bli… :)

  2. Anis

    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. :)

  3. dani

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

  4. Tinjauan Aksesibilitas Web tanpa CSS - Unessential Weblog

    […] kembali Label yang Mudah Diakses. Saat elemen ‘label’ diklik dengan kursor atau papan ketik, kursor akan fokus pada […]

  5. Harry

    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 ?

  6. dani

    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.

  7. Mencuri Source Code = Melanggar Hak Cipta? | KafeGue.com

    […] lain, terkait dengan masukan Pak Dani Iswara mengenai posisi label pada form isian komentar. Tidak banyak pikir, saya langsung mengintip source-code untuk form […]