2.5.3 Label di Nama

Apa itu WCAG 2.5.3?

Setiap kontrol atau komponen yang menggunakan label teks juga harus menggunakan nama yang sama secara programatik di dalam kode. Nama programatik ini juga disebut "nama yang dapat diakses" dari komponen, karena ini yang digunakan oleh teknologi bantu untuk menjalankan input suara.

Konsistensi ini berarti bahwa pengguna yang mengandalkan teknologi bantu dapat mempelajari kontrol dan komponen di halaman dengan mendengarkan label visual dan kemudian menggunakan nama yang cocok untuk berinteraksi dengan komponen tersebut.

Tujuan dari kriteria ini adalah untuk memastikan bahwa label visual dari kontrol dan komponen dapat digunakan sebagai cara untuk memicu aktivasi suara dengan memastikan bahwa mereka cocok dengan nama programatik atau nama yang dapat diakses.

Contoh input yang perlu memenuhi kriteria ini adalah:

• <button>
• Kolom input formulir
• <a>
• Bidang pencarian
• Elemen input HTML
• Komponen input kustom yang menggunakan aria-label atau aria-labelledby

Mengapa ini penting?

Konsistensi antara label yang terlihat dan nama programatik meningkatkan pengalaman pengguna untuk pengguna pengenalan suara. Hal ini memungkinkan mereka untuk bernavigasi dengan mengucapkan teks yang terlihat yang mereka lihat di layar. Misalnya, mengatakan "Klik Kirim" hanya berhasil jika label yang terlihat dan nama programatik keduanya adalah "Kirim".

Pengguna screen reader juga mendapat manfaat karena apa yang mereka dengar cocok dengan apa yang terlihat secara visual, mengurangi kebingungannya, dan membantu mereka bernavigasi dengan lancar. Ketika label yang terlihat tidak cocok dengan nama yang dapat diakses, pengguna bisa saja tidak dapat mengaktifkan kontrol tertentu atau bahkan berpindah fokus ke kontrol lain.

Konsistensi ini juga membantu pengguna dengan disabilitas kognitif dengan membuat label yang terlihat lebih jelas dan memudahkan mereka untuk memahami apa yang mereka lakukan. Dengan memastikan teks cocok dengan nama programatik, kita bisa lebih memikirkan label dan memastikan bahwa mereka intuitif serta menjelaskan interaksinya.

Siapa yang terpengaruh?

Pengguna dengan mobilitas terbatas, pengguna netra, pengguna dengan disabilitas kognitif.

Pengguna dengan mobilitas terbatas yang menggunakan pengenalan suara mengandalkan konsistensi nama yang dapat diakses untuk bernavigasi dan berinteraksi dengan elemen web di halaman. Dengan mengucapkan teks yang terlihat yang mereka lihat di layar, mereka dapat berinteraksi dengan kontrol dan komponen tanpa menggunakan mouse atau keyboard.

Pengguna netra dan menggunakan teknologi speech-to-text mendapat manfaat dari pelabelan yang konsisten karena memastikan bahwa apa yang mereka dengar dari screen reader cocok dengan konten visual, mengurangi kebingungannya, dan meningkatkan navigasi. Jika tidak, mereka mungkin terjebak dalam situasi di mana fungsi kontrol tertentu tidak jelas.

Pengguna dengan disabilitas kognitif mendapatkan manfaat dari konsistensi ini karena meminimalkan beban kognitif yang diperlukan untuk memahami dan berinteraksi dengan elemen halaman web, membuat pengalaman online mereka lebih intuitif dan tidak terlalu membebani secara mental.

Cara menerapkan WCAG 2.5.3

Cocokkan atau sertakan label dengan nama yang dapat diakses

Mencocokkan label yang terlihat dengan nama yang dapat diakses sering dilakukan dengan mengikuti WCAG 1.3.1 Informasi dan Relasi dan menggunakan praktik semantik yang benar. Banyak elemen mendapatkan nama aksesibel mereka dengan menyusun elemen-elemen tersebut dengan benar atau menggunakan atribut spesifik. Sebaiknya gunakan elemen dan semantik asli untuk menetapkan nama yang dapat diakses, karena ini memastikan bahwa nama tersebut cocok dengan label yang terlihat.

Untuk setiap kontrol atau komponen input, pastikan bahwa nama yang dapat diakses yang ada dalam kode atau semantik cocok dengan label yang ada di sampingnya. Sebagai alternatif, nama yang dapat diakses hanya perlu mencakup teks label yang terlihat secara tepat di dalam string tersebut.

aria-label dan aria-labelledby

Elemen dapat memiliki perhitungan nama yang dapat diakses yang digantikan menggunakan aria-label atau aria-labelledby, yang mengutamakan label teks yang terlihat. Namun, ini harus digunakan dengan hati-hati untuk memastikan bahwa nama yang dapat diakses cocok dengan label yang terlihat ketika diperlukan.

Sebagai contoh, nama yang dapat diakses default untuk elemen tombol, “Send Message,” digantikan dengan atribut aria-label menjadi “Click Me.”

<button aria-label="Click me">Send Message</button>

Temukan nama aksesibel

Cara mudah untuk memeriksa teknik ini adalah dengan menggunakan alat aksesibilitas bawaan browser. Di Chrome, misalnya, memeriksa elemen dan menggunakan properti aksesibilitas yang dihitung dapat membantu Anda menentukan nama yang dapat diakses.

Pelajari urutan komputasi nama aksesibel

Nama yang dapat diakses dari suatu elemen dapat berasal dari berbagai sumber, tetapi ada urutan prioritas, dan beberapa sumber dapat mengutamakan yang lain. Berikut adalah urutan komputasi:

1. Gunakan atribut aria-label atau aria-labelledby
2. Gunakan elemen <label> yang terkait; dalam beberapa kasus, Anda mungkin perlu menggunakan label dari subpohon elemen.

3. Gunakan atribut khusus untuk:

   1. Input umum: Gunakan atribut title; jika tidak ada, gunakan nilai placeholder.
   2. Input tombol: Gunakan atribut value; jika tidak ada, gunakan string yang didefinisikan oleh implementasi.
   3. Input gambar dan gambar: Gunakan atribut alt; jika tidak ada, gunakan string yang didefinisikan oleh implementasi atau atribut title.
   4. Elemen area: Gunakan atribut alt.
   5. Elemen iframe: Gunakan atribut title.
   6. Elemen table: Gunakan atribut title.
   7. Elemen bagian dan pengelompokan: Gunakan atribut title.
   8. Elemen teks seperti <p> dll: Gunakan atribut title.
4. String yang didefinisikan oleh implementasi: Jika langkah-langkah sebelumnya tidak menghasilkan string teks yang dapat digunakan, gunakan string yang didefinisikan oleh implementasi (misalnya, string yang diterjemahkan untuk "kirim").
5. Tidak ada nama yang dapat diakses: Jika tidak ada langkah di atas yang menghasilkan string teks yang dapat digunakan, maka tidak ada nama yang dapat diakses.

Urutan komputasi nama aksesibel selengkapnya.

Posisikan label berdampingan dengan kontrol

Secara konvensional, label yang terlihat untuk kontrol atau komponen adalah teks yang terletak berdampingan. Sebagian besar komponen secara alami menggunakan standar posisi ini selama tidak ada CSS atau skrip yang mengubahnya. Periksa setiap kontrol dan komponen input di halaman dan pastikan label yang sesuai terletak bersebelahan dan muncul secara intuitif.

Tergantung pada komponen yang kamu kerjakan, posisi-posisinya bisa sebagai berikut:

• Di sebelah kiri atau di atas combo-box, dropdown list, input teks
• Di sebelah kanan checkbox dan radio button
• Di dalam tombol dan tab
• Di bawah ikon yang berfungsi sebagai tombol

Kesimpulan

Mengimplementasikan WCAG 2.5.3 dengan menyelaraskan label yang terlihat dengan nama programatiknya sangat meningkatkan kegunaan bagi pengguna yang mengandalkan teknologi pengenalan suara atau text-to-speech. Dengan memastikan nama label cocok dengan nama programatik, kamu dapat memastikan bahwa kontrol dan komponen di halaman web dapat dengan mudah berinteraksi. Dan, praktik ini juga membuat halaman lebih intuitif dan mudah dipahami oleh semua pengguna karena kamu dapat lebih memikirkan nama apa yang kamu berikan pada setiap komponen dan kontrol.