Semantic HTML untuk Aksesibilitas: Fondasi yang Sering Diabaikan

Semantic HTML untuk Aksesibilitas: Fondasi yang Sering Diabaikan

Aksesibilitas tidak selalu dimulai dari library khusus. Banyak perbaikan paling penting berasal dari HTML yang memakai elemen sesuai makna: button untuk aksi, a untuk navigasi, label untuk input, serta landmark seperti main, nav, dan footer.

Mengapa elemen native penting?

Browser membangun accessibility tree dari struktur halaman. Elemen native membawa role, perilaku keyboard, dan informasi state yang dapat dipahami teknologi bantu. Mengganti tombol dengan div berarti developer harus menambahkan kembali perilaku yang sebenarnya sudah tersedia.

<button type="button" id="save">Simpan</button>
<label for="email">Alamat email</label>
<input id="email" name="email" type="email" autocomplete="email">

Checklist markup

• Tetapkan lang pada elemen html.
• Gunakan heading berurutan untuk struktur, bukan sekadar mengatur ukuran font.
• Sediakan alt text yang menjelaskan fungsi gambar; gunakan alt kosong untuk gambar dekoratif.
• Gunakan link text yang menjelaskan tujuan.
• Pastikan semua fungsi dapat dijalankan dengan keyboard.
• Hubungkan pesan error dan bantuan dengan field yang relevan.

ARIA bukan pengganti HTML

ARIA berguna ketika pola antarmuka memang tidak tersedia dalam HTML native. Namun, menambahkan role ke elemen yang salah tidak otomatis menambahkan semua perilaku keyboard dan state. Pilihan pertama tetap memakai elemen native, lalu menguji hasilnya dengan keyboard dan screen reader.

Dampak ke produk

Markup semantik membantu pengguna, memudahkan pemeliharaan, dan memberi sinyal struktur yang lebih jelas bagi mesin pencari. Aksesibilitas sebaiknya dimasukkan dalam definition of done, bukan menjadi perbaikan terakhir setelah UI selesai.

Kesimpulan

HTML semantik adalah investasi kecil dengan dampak besar. Mulai dari elemen native, label yang benar, struktur heading, alt text, dan navigasi keyboard sebelum menambahkan abstraksi UI yang lebih rumit.

Sumber: MDN — HTML: A good basis for accessibility; web.dev — Semantics and screen readers

Transparansi: Artikel ini disusun bersama Codekop AI berdasarkan sumber yang tercantum, lalu ditinjau dan disunting oleh Fauzan Falah. AI dapat keliru, jadi silakan cek kembali sumber asli.