Yang rendah hati <label>. Itu umum. Itu jelas. Ini dasar. Itu biasa saja. Di wajahnya, tidak ada yang istimewa tentang itu. Sering digunakan hanya sebagai target CSS untuk menata beberapa teks. Apa lagi yang perlu diketahui? Tampar teman kecil itu di atas bidang formulir Anda dan kami kembali ke Javascript untuk CSS agar halaman kami dinamis dan menarik, bukan?

Bisa tidak.

Pembukaan

Saya berani bertaruh jumlah yang berguna yang telah ditulis oleh hampir setiap profesional 11y dengan akses ke server HTTP tentang label. Akan mudah untuk menyebut pemukulan ini sebagai kuda mati, tetapi menurut Laporan Sejuta WebAIM tahun 2023 , dari jutaan beranda teratas di internet, 96,3% di antaranya memiliki setidaknya satu kesalahan aksesibilitas yang terdeteksi, dan dari laman tersebut 45,9% berisi kesalahan dengan label formulir. Itu menempatkannya pada masalah aksesibilitas paling umum ke-4 setelah kontras warna yang tidak mencukupi, gambar tanpa teks alternatif, dan tautan tanpa nama yang dapat diakses. Kedua angka tersebut cenderung menurun dalam 5 tahun terakhir, tetapi masih banyak pekerjaan yang harus dilakukan untuk menurunkannya. Jika posting ini membuat setidaknya satu orang berpikir "Woah, saya tidak tahu itu" saya akan menganggap ini sukses besar

Tujuan Label

Saat memikirkan label dalam pembingkaian aplikasi web, kemungkinan besar kita membayangkan sebuah formulir, bersebelahan dengan elemen seperti bidang teks, tombol radio, kotak centang, dan sebagainya. Mereka menyampaikan nilai yang diharapkan seperti nama dan tanggal atau apa yang mewakili pilihan lain. Secara visual itu masuk akal, tetapi ada lebih banyak yang berperan.

Mengapa Itu Penting

Ketika kita mengupas kembali istilah monolitik “pengguna” kita harus memahami bahwa pengguna adalah manusia. Orang-orang itu unik dan kompleks, dan itu bisa hilang dalam dunia pengembangan perangkat lunak yang bergerak cepat. Untuk merancang dengan mempertimbangkan inklusivitas membutuhkan perubahan mental; ketika kami hanya membayangkan pengguna "rata-rata" sebagai target kami, maka kami mengambil risiko mengecualikan sebagian besar orang dari aplikasi kami. Penyandang disabilitas menanggung beban terberat dari pengecualian ini, tetapi tidak harus seperti itu.

Dan kabar baiknya: Label yang dapat diakses itu mudah. Saya berpendapat bahwa mereka adalah salah satu "kemenangan" aksesibilitas termudah yang dapat dicapai tim. Mari selami dan pelajari apa yang membuat label dapat diakses dan, sama pentingnya, dapat digunakan.

Mari Jadikan Ini Dapat Diakses

Bayangkan dua orang dengan situasi yang berbeda.

Jeremy berusia 41 tahun. Dia bekerja sebagai penasihat keuangan di bank lokal. Dia suka berenang, hiking, dan berkemah bersama teman dan keluarga. Jeremy juga buta, akibat komplikasi dari operasi otak di usia awal 30-an. Jeremy menggunakan pembaca layar untuk berinteraksi dengan teknologi baik sebagai fungsi pekerjaannya maupun di waktu senggangnya.

Violet berusia 73 tahun. Dia pensiun setelah sukses berkarier sebagai pengacara. Di masa pensiunnya, dia berkeliling dunia untuk mengunjungi tempat-tempat bersejarah dan kampung halaman orang tuanya, yang merupakan imigran dari Eropa timur. Dia baru saja pindah untuk tinggal lebih dekat dengan cucunya. Violet menderita radang sendi di kedua tangannya. Dia lebih suka menggunakan perangkat lunak pengenalan suara untuk berinteraksi dengan komputer dan teleponnya untuk menghindari rasa sakit yang tidak perlu.

Baik Jeremy dan Violet mencoba menggunakan halaman web yang sama: portal pasien di situs web penyedia medis mereka, yang menawarkan kemampuan untuk membayar tagihan medis, memperbarui informasi pribadi mereka, membuat janji temu, dan sebagainya.

Masalah Jeremy:

“Saya perlu menggunakan kartu kredit saya untuk membayar tagihan medis saya, tetapi saya tidak tahu bidang apa saja di halaman pembayaran itu.”

Jika label tidak diasosiasikan dengan benar dengan elemen formulir, pembaca layar hanya akan membaca tipe elemen, bukan teks terdekat.

Masalah Violet:

"Saya perlu mengubah alamat saya di file saya, tetapi apa pun yang saya katakan ke komputer, tombol Simpan tidak mau diklik."

Seperti contoh pembaca layar di atas, perangkat lunak pengenal ucapan juga mengandalkan asosiasi label yang tepat untuk menavigasi dan mengaktifkan bidang formulir dan tombol.

Itu benar. Kedua masalah ini disebabkan oleh elemen formulir yang tidak diberi label secara memadai. Mari kita lihat beberapa kode yang biasanya memberikan hasil ini.

Masalah Jeremy dalam Kode

Mari kita periksa formulir pembayaran.:

<form>
  <label>Card Number</label>
  <input type=”text” id=”card-number” />
  <label>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

Atribut for_

Cara paling sederhana adalah dengan menggunakan foratribut. Ini adalah atribut asli dari <label>elemen. Nilai yang diharapkan adalah idatribut dari elemen bentuk target. Dalam contoh kami, kami memiliki tiga input dengan ids: card-number, expiration-date, dan security-code. Kita dapat menambahkan foratribut ke label dan menetapkan nilainya ke id masukan yang sesuai. Mari kita lihat seperti apa.

<form>
  <label for=”card-number”>Card Number</label>
  <input type=”text” id=”card-number” />
  <label for=”expiration-date”>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label for=”security-code”>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

Beberapa hal yang perlu diingat

• Atribut forharus pada <label>elemen, bukan input.
• Elemen input harus memiliki idatribut. The <label>mungkin masih memiliki atributnya sendiri id, tetapi tidak relevan di sini.
• Hubungan antara label dan input adalah one-to-one.

Menggunakan ARIA

ARIA adalah kumpulan atribut canggih yang dapat ditambahkan ke elemen untuk menginformasikan teknologi pendukung tentang nama, status, dan peran elemen. Dalam kasus kami, kami dapat menggunakan atribut aria-labelledby untuk mengaitkan label dengan input. Mari kita lihat cara kerjanya.

<form>
  <label id="card-number-label">Card Number</label>
  <input type="text" aria-labelledby="card-number-label" />
  <label id="expiration-date-label">Expiration Date</label>
  <input type="text" aria-labelledby="expiration-date-label"/>
  <label id="security-code-label">Security Code</label>
  <input type="text" aria-labelledby="security-code-label"/>
  <button type="submit" id="submit">Submit</button>
</form>

<form>
 <label id=”card-number-label”>Card Number</label>
 <label id=”card-number-instructions”>Enter the 16 digit number on the front of your card</label>
 <input type=”text” id=”card-number” aria-labelledby=”card-number-label card-number-instructions”/>
 ...
</form>

Sekarang setelah kita mengatasi masalah yang dihadapi Jeremy, mari kita periksa apa yang salah dengan halaman yang digunakan Violet.

Masalah Violet dalam Kode

Halaman yang Violet gunakan berisi kolom formulir untuk informasi kontaknya, dan tombol di bilah alat untuk melakukan fungsi simpan dan batalkan. Kedua tombol ini hanya diwakili oleh ikon, tanpa label tekstual yang terlihat. Ini dengan sendirinya dapat diperbaiki, tetapi di dunia nyata itu adalah situasi yang umum ditemui.

Ini kode kami dengan masalahnya.

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only”></button>
  <button type=”button” id=”cancel” class=”icon-only”></button>
</form>

Menggunakan ARIA (Lagi)

Atribut aria-labeldapat digunakan untuk secara langsung memberikan nama yang dapat diakses oleh sebagian besar elemen HTML. Nilainya adalah teks yang terpapar teknologi bantu. Ini harus bahasa manusia, karena pembaca layar akan mengumumkan teks label aria dan pengguna perangkat lunak pengenalan suara akan menggunakannya untuk berinteraksi dengan elemen.

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only” aria-label=”Save”></button>
  <button type=”button” id=”cancel” class=”icon-only” aria-label=”Cancel”></button>
</form>

Ada banyak nuansa dengan aria-label tetapi mereka pantas mendapatkan artikelnya sendiri. Untuk contoh sederhana kami, ini sudah cukup. Berhati-hatilah untuk tidak menggunakan secara berlebihan aria-label when untuk or aria-labelledby would do the same job.

Kami Dapat Diakses Sekarang!

Dengan perubahan sederhana ini, Jeremy dan Violet dapat menyelesaikan tugas yang harus mereka lakukan di halaman masing-masing. Dengan menggunakan teknik ini, kami telah memastikan bahwa elemen pada formulir diidentifikasi dengan tepat oleh teknologi pendukung, dan informasi tersebut disampaikan kepada orang yang menggunakannya. Tampar stiker Accessible™ di atasnya dan hentikan.

… Tapi Kami Bisa Melakukan Lebih Baik

Kita tidak boleh berhenti pada titik di mana kita hanya mencentang kotak centang di sebelah kriteria keberhasilan WCAG 2.1. WCAG menetapkan garis dasar untuk menghilangkan hambatan bagi penyandang disabilitas saat menggunakan web, tetapi kita harus selalu berusaha untuk lebih baik dari sekadar "mungkin untuk digunakan" dan bertujuan untuk "menyenangkan untuk digunakan". Aksesibilitas dan kegunaan berjalan beriringan, dan ada teknik yang sangat sederhana yang dapat kami gunakan untuk meningkatkan pengalaman pengguna mengisi formulir secara drastis.

Persona Baru Kami

Bayangkan seseorang yang mungkin tidak langsung Anda pikirkan saat mendengar kata "aksesibilitas".

Mia adalah mahasiswa baru di University of Central Florida mengejar gelar di bidang Astrofisika. Dia adalah siswa yang sangat cerdas dan pekerja yang rajin. Perhatiannya terhadap detail dan selera fesyen yang tajam membuatnya menjadi ahli ketika salah satu temannya memperbarui lemari pakaian mereka. Saat pindah ke asramanya dan membongkar kotak, dia tanpa sengaja mengiris jari telunjuk tangan dominannya dengan pemotong kotak.

Beberapa kecacatan bersifat sementara. Bahkan cedera kecil dapat mengurangi jangkauan gerak seseorang, membuat tugas yang mereka anggap remeh jauh lebih sulit. Dengan jarinya yang terluka terbalut perban kasa, Mia harus menggunakan ponselnya dengan cara yang tidak biasa dia lakukan.

Masalah Mia

“Saya perlu memasukkan informasi kesehatan saya di situs dokter ini, tetapi saya terus mencentang kotak centang yang salah karena ponsel saya canggung untuk digunakan!”

Ini bisa menjadi tantangan untuk berinteraksi dengan bidang seperti kotak centang dan tombol radio pada ponsel pada saat terbaik, tetapi bahkan dengan cedera umum, hal itu dapat dengan cepat menjadi frustrasi. Mia perlu mencentang kotak di samping obat tiroid yang diminumnya untuk memberikan latar belakang kesehatannya, tetapi harus melakukannya dengan tangan lain, atau jari lain, terbukti sulit karena ukuran elemen yang lebih kecil.

Masalah Mia dalam Kode

Mari kita lihat kotak centang. Sekilas, mereka tampak mudah diakses, dengan asosiasi label yang tepat. Tapi mari kita lihat lebih dekat.

<form>
  <label for=”synthroid”>Synthroid</label>
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  <label for=”levothroid”>Levothroid</label>
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  <label for=”levoxyl”>Levoxyl</label>
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
</form>

Ada teknik yang sangat sederhana yang dapat kita manfaatkan saat kontrol formulir memiliki label yang terlihat untuk menambah area yang dapat diklik atau diketuk, juga dikenal sebagai ukuran target . Yang perlu kita lakukan hanyalah meletakkan kontrol formulir di dalam <label>elemen. Jika kontrol formulir adalah turunan dari <label>maka mengeklik atau mengetuk label akan mengaktifkan bidang formulir yang terkait. Mari kita lihat perubahan itu sekarang.

<form>
  <label for=”synthroid”>
  Synthroid
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  </label>
  <label for=”levothroid”>
  Levothroid
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  </label>
  <label for=”levoxyl”>
  Levoxyl
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
  </label>
</form>

Beberapa detail tentang teknik khusus ini

• Ini adalah fitur dari <label>elemen asli. Jika Anda memberi label bidang formulir dengan elemen seperti <span>(dan seharusnya tidak!) Anda tidak mendapatkan fungsi ini secara gratis, dan harus diterapkan secara manual.
• Fitur ini hanya berlaku jika <label><elemen membungkus bidang formulirnya. Menggunakan aria-labelledbytidak secara otomatis memberi Anda perilaku yang sama.
• Elemen <label>harus tetap berisi foratribut, dan harus cocok dengan idatribut di bidang formulir.
• Jangan membungkus banyak input dalam satu label.

Sebelum Kita Pergi

Mari bertemu satu persona lagi. Sekali lagi, mungkin bukan seseorang yang Anda pikirkan saat mempertimbangkan aksesibilitas.

Ben adalah seorang arsitek perangkat lunak di sebuah startup teknologi di San Francisco. Perusahaannya sedang mengerjakan pembuatan Waffle Iron of the Future. Renyah sempurna setiap saat, dan juga membantu Anda melakukan pajak. Dia terpikat dengan proyek tersebut, dan menghabiskan sebagian besar waktunya untuk memikirkan bagaimana dia bisa membuatnya lebih baik. Ben naik bus ke kota saat dia harus pergi ke kantor. Dia tidak memiliki cacat apapun.

Ben, dengan blazer pikirannya terfokus pada besi wafel, lupa dia harus mengisi formulir yang sama dengan Mia untuk janji dengan dokternya sendiri. Dia juga menggunakan ponselnya untuk mengisi formulir. Lalu lintas berhenti-dan-pergi sehingga bus tiba-tiba bergerak maju saat dia bekerja.

Karena ukuran target dibuat lebih besar pada bidang formulir obat, Ben dapat melengkapi formulir dengan mudah. Dia tidak perlu khawatir mengklik kotak centang yang salah atau mengetuk tombol radio yang salah. Pikiran itu bahkan tidak pernah terlintas di benaknya. Dia mampu menyelesaikan formulir dan kembali memikirkan wafel.

Sekarang Kami Merancang Secara Universal!!

Dalam postingan ini kita telah melihat bagaimana bentuk sederhana dapat menghadirkan hambatan bagi penyandang disabilitas, dan bagaimana kita dapat menggunakan elemen <label> untuk menghilangkan hambatan tersebut. Kami juga telah melihat bagaimana perubahan sederhana dapat membuat formulir lebih mudah digunakan untuk orang dengan atau tanpa disabilitas. Ini adalah inti dari Desain Universal. Dengan mempertimbangkan kebutuhan penyandang disabilitas, kami dapat membuat aplikasi kami lebih baik untuk semua orang.

Terima kasih telah membaca. Saya harap Anda mempelajari sesuatu yang baru, atau mengingat sesuatu yang mungkin telah Anda lupakan.