4.1.2 Nama, Role, Value

Apa itu WCAG 4.1.2?

Elemen atau komponen yang dikodekan secara kustom perlu kompatibel, dapat dipahami, dan dapat berinteraksi bagi pengguna yang menggunakan teknologi bantu. Ini berarti komponen kustom harus memiliki nama, role, state, dan value yang tepat yang dibangun ke dalam kode agar dapat digunakan oleh pengguna teknologi bantu.

Ini membantu pengguna tetap diberi informasi tentang perubahan dan mengontrol elemen dengan benar. Elemen HTML standar biasanya menangani ini dengan baik, tetapi komponen kustom membutuhkan perhatian lebih agar dapat diakses.

Komponen kustom lebih umum daripada yang kamu kira. Misalnya, bagian yang dapat diperluas seperti akordion atau tab, dialog pop-up atau tooltip, slider, atau progress bar, semuanya adalah elemen kustom.

Untuk kejelasan:

• Nama: Bagaimana teknologi bantu mengenali sebuah komponen
• Role: Apa yang dilakukan elemen tersebut (misalnya, tombol, kotak centang, teks yang dapat diedit)
• Value: Nilai awal dari elemen interaktif, yang juga dapat berfungsi sebagai nama jika tidak ada yang disediakan
• State: Status saat ini dari elemen (misalnya, tercentang/tidak tercentang, aktif/non-aktif, dipilih)

Mengapa ini penting?

Tanpa perhatian khusus terhadap komponen yang dikodekan secara kustom, pengguna yang bergantung pada teknologi bantu mungkin tidak dapat memahami atau berinteraksi dengan elemen-elemen ini.

Hal ini dapat menyebabkan berbagai masalah, seperti pengguna:

• Tidak mengetahui bahwa komponen tersebut ada di halaman
• Tidak tahu bagaimana cara mengaktifkan atau menggunakan elemen tersebut
• Tidak dapat mengaktifkan atau menggunakan elemen tersebut karena elemen tersebut hanya dirancang untuk bekerja dengan mouse
• Tidak mengetahui value atau state elemen tersebut, apakah checkbox tercentang atau tidak?

Akibatnya, ini dapat membuat navigasi halaman menjadi sulit atau menciptakan hambatan pada fungsi tertentu. Misalnya, sebuah checkbox kustom yang state-nya saat ini tidak ditentukan secara programatik akan menyulitkan screen reader untuk menyampaikan apakah checkbox tersebut tercentang atau tidak, yang bisa menyebabkan kebingungannya, terutama jika checkbox tersebut diperlukan untuk pengiriman formulir.

Siapa yang terdampak?

Pengguna low vision atau memiliki penglihatan terbatas, pengguna netra, pengguna dengan mobilitas terbatas, dan pengguna yang tidak memakai mouse standar.

Pengguna dengan penglihatan terbatas atau netra bergantung pada teknologi bantu seperti screen reader, pembesar layar, atau perangkat lunak pengenalan suara untuk berinteraksi dengan halaman web.

Pengguna dengan mobilitas terbatas, seperti mereka yang menderita RSI (repetitive strain injury-cedera akibat gerakan berulang), mungkin merasa kesulitan berinteraksi dengan komponen kustom dan mengendalikannya karena memerlukan gerakan yang presisi. Mereka bergantung pada teknologi bantu yang dapat dengan akurat mengidentifikasi dan berinteraksi dengan komponen kustom untuk mereka.

Pengguna yang tidak menggunakan mouse standar mungkin tidak dapat mengoperasikan komponen interaktif kustom. Perangkat teknologi bantu alternatif juga perlu dapat mengubah state dan value komponen tersebut.

Cara menerapkan WCAG 4.1.2

Gunakan komponen standar

Cara paling sederhana untuk memenuhi kriteria ini adalah dengan menggunakan elemen dan komponen HTML standar. Teknologi bantu sudah dapat menemukan nama, role, state, dan value jika digunakan dengan benar.

Dengan mengikuti aturan dan menggunakan HTML dengan cara yang benar, alat seperti screen reader dan teknologi bantu lainnya dapat menafsirkan dan menampilkan konten dengan benar. Untuk melakukan ini, kamu perlu:

• Gunakan hanya fitur HTML yang didukung secara resmi, hindari fitur kustom atau non-standar.
• Gunakan elemen dan atribut sesuai dengan fungsinya, bukan hanya untuk efek visual.
• Strukturkan kode HTML dengan benar agar browser dan alat bantu dapat memprosesnya.

Gunakan fitur markup

Jika kamu bekerja dengan komponen standar tetapi kehilangan nama, role, state, atau value, coba beberapa teknik berikut.

Elemen dan atribut HTML untuk formulir dan tautan

Atribut HTML tertentu sangat penting saat menggunakan elemen <form> dan <a>. Atribut ini memberikan pengguna pemahaman yang lebih baik tentang cara berinteraksi dengan elemen-elemen ini dengan menambahkan detail seperti nama, role, state, dan value.

Untuk setiap elemen <form> dan <a>, pastikan atribut nama, state, dan value diatur sesuai dengan spesifikasi elemen HTML.

Misalnya, saat menggunakan elemen <a>, pastikan elemen tersebut memiliki nama dan value. Kamu bisa menggunakan atribut alt dan href seperti ini:

<a href="https://en.wikipedia.org/wiki/Aardvark">
    <img alt="Aardvark emerging from burrow" src="aardvark.png">
</a>

Dan berikut ini contoh elemen <textarea> yang ditulis dengan buruk. Elemen ini tidak memiliki elemen label yang menyertainya dan menggunakan value yang tidak jelas seperti “Enter text here” langsung di dalam elemennya. Dalam kondisi ini, elemen tersebut tidak memiliki name karena tidak ada label. Selain itu, meskipun elemen ini memiliki value, pengguna bisa bingung karena value-nya digunakan sebagai teks petunjuk (placeholder), sehingga mereka harus menghapus teks tersebut terlebih dahulu sebelum mengetik:

<textarea>Enter text here</textarea>

Pelabelan untuk komponen interaktif

Pastikan bidang input formulir memiliki elemen <label> yang jelas dan selalu terlihat untuk menjelaskan:

• Apa fungsi bidang atau komponen tersebut
• Instruksi penggunaan (jika perlu)
• Aturan format data atau contoh pengisian

Label input harus selalu terlihat untuk membantu semua pengguna memahami tujuannya. Menggunakan placeholder yang menghilang saat pengguna mulai mengetik tidak cukup untuk memberi label pada bidang input.

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

Gunakan elemen <title> pada <iframe>

Saat menggunakan iframe, pastikan halaman asal (origin page) yang dimuat di dalam iframe memiliki elemen <title> supaya pengguna tahu apa isi dari <iframe> tersebut. Elemen <title> harus ditambahkan di bagian <head> dari halaman HTML yang di-embed. Dengan begitu, setiap <iframe>akan memiliki label, dan pengguna dapat memilih apakah mereka ingin masuk ke dalam frame tersebut atau melewatinya.

Sebagai contoh, berikut ini gambaran sederhana tentang seperti apa halaman asal tersebut seharusnya:

<head>
    <title>Advertisement</title>
</head>
<body>
    <h1>Here's my advertisement</h1>
</body>

Dan, kamu bisa membuat iframe untuk halaman ini di tempat lain, dan pengguna akan mengetahui name elemen ini melalui elemen <title> dari halaman asalnya.

<iframe src="banner-ad.html" name="ad-iframe"></iframe>

Atribut ARIA untuk name, role, dan state

Perlu dicatat bahwa ARIA biasanya adalah metode cadangan untuk aksesibilitas, bukan pilihan utama. ARIA paling baik digunakan bersama teknik utama yang sudah disebutkan sebelumnya.

Atribut aria-labelledby

Atribut aria-labelledby membantu memberi nama dan mengidentifikasi kontrol formulir dan grup elemen.

Dalam kasus ini, bidang teks <input> tidak memiliki konten yang bisa digunakan sebagai nama, jadi kita menggunakan aria-labelledby supaya alat bantu seperti screen reader bisa merujuk ke elemen dengan ID "searchbtn", untuk mencari nama elemen tersebut, yaitu "Search".

<input type="text" aria-labelledby="searchbtn">
<input id="searchbtn" type="submit" value="Search">

Atribut aria-label

Atribut aria-label digunakan untuk memberikan nama yang dapat diakses pada elemen interaktif ketika tidak ada label yang terlihat, mungkin karena pilihan desain atau karena konteks visual sudah cukup jelas tentang apa fungsi elemen tersebut. Saat menggunakan aria-label, pastikan deskripsinya akurat menjelaskan apa yang dilakukan elemen tersebut.

Dalam contoh ini, aria-label digunakan pada tombol "X" di sebuah pop-up supaya perangkat bantu bisa memberitahu pengguna bahwa tombol tersebut berfungsi untuk menutup pop-up:

<div id="box">
    This is a pop-up box.
    <button aria-label="Close">X</button>
</div>

Atribut role

Atribut role mendefinisikan apa fungsi sebuah elemen, dan mengikuti nilai-nilai spesifik dari pedoman WAI-ARIA. Role ini membantu pengguna memahami cara berinteraksi dengan elemen kustom, jadi pilihlah role yang benar-benar sesuai dengan fungsi elemen tersebut.

Berikut contoh di mana role-nya adalah "navigation" karena <div> tersebut berisi tautan untuk membantu pengguna berpindah di dalam situs:

<nav role="navigation" aria-label="Main Menu">
    <ul>
        <li><a href="#about">About</a>
        <li><a href="#services">Services</a>
        <li><a href="#contact">Contact</a>
    </ul>
</nav>

Atribut state dan property

Saat kamu menggunakan atribut role, pastikan juga memeriksa atribut state dan property dari ARIA. Atribut-atribut ini membantu pengguna memahami status terkini dari elemen kustom dan mendapatkan pemberitahuan saat ada perubahan.

Kamu perlu meninjau pedoman role ARIA, karena beberapa role memiliki daftar state dan property yang wajib atau didukung. Pastikan semua state yang diwajibkan sudah ada dan diperbarui sesuai perubahan elemen.

Sebagai contoh, role checkbox membutuhkan state aria-checked untuk memberi tahu pengguna apakah checkbox tersebut dicentang atau tidak. State ini harus diperbarui setiap kali checkbox diklik.

<div role="checkbox" <strong> aria-checked="false" </strong>
<span id="checkboxLabel">Subscribe to newsletter</span>
</div>
<script>
    function toggleCheck() {
    const checkbox = document.getElementById('customCheckbox');
    const isChecked = checkbox.getAttribute('aria-checked') === 'true';
    checkbox.setAttribute('aria-checked', !isChecked);
    }
</script>

Kesimpulan

Membuat komponen kustom menjadi aksesibel dengan cara mengkodekan nama, role, state, dan value dengan benar sangat penting bagi pengguna yang mengandalkan teknologi bantu. Elemen HTML standar biasanya sudah cukup, tapi elemen kustom memerlukan perhatian ekstra. Dengan menggunakan atribut yang tepat atau menambahkan ARIA, kamu bisa memastikan semua pengguna, tanpa memandang kemampuan mereka, dapat menavigasi dan berinteraksi dengan situsmu secara efektif.