Kesalahan markup yang paling sunyi bukan tag yang salah, melainkan atribut yang tidak pernah ditulis. Halaman tampil normal, validator kadang diam, tetapi fungsi penting hilang tanpa suara: pembaca layar kehilangan informasi, tombol berperilaku tak terduga, dan fokus keyboard melompati elemen. Berbeda dengan kesalahan nesting yang menggeser struktur, atribut yang hilang tidak menggeser apa pun — halaman hanya kehilangan makna.
Chapter ini memetakan enam atribut yang paling sering tertinggal beserta gejalanya, lalu memperbaiki satu potongan kode nyata.
Enam Atribut yang Sering Hilang #
| Atribut yang hilang | Gejala | Perbaikan |
|---|---|---|
img tanpa alt | pembaca layar membaca nama file, misalnya “logo-kedai.png” | tulis alt yang menggambarkan isi gambar |
input tanpa label | pembaca layar mengumumkan “edit text” tanpa nama — pengguna tidak tahu apa yang diminta | hubungkan label dan kontrol lewat for dan id |
html tanpa lang | pembaca layar memakai bahasa bawaannya; pelafalan bahasa Indonesia bisa salah | lang="id" pada elemen html |
button tanpa type | di dalam form, tombol mengirim data padahal kita hanya ingin tombol biasa | type="button" untuk tombol non-submit |
a tanpa href | tautan tidak bisa difokuskan dengan Tab; tidak tampak sebagai tautan | isi href dengan tujuan |
video tanpa controls | video tidak bisa diputar; pengunjung hanya melihat bingkai pertama | tambahkan atribut controls |
Sebelum dan Sesudah #
Potongan form langganan berikut tampil normal di mata, tetapi memuat empat kekurangan dari tabel di atas:
<img src="logo-kedai.png">
<input type="email" id="surel">
<button>Kirim</button>Bentuk yang lengkap:
<img src="logo-kedai.png" alt="Logo Kedai Kopi Siti">
<label for="surel">Alamat email untuk kabar menu</label>
<input type="email" id="surel" name="surel">
<button type="submit">Kirim</button>Mari kita telaah perbaikannya baris per baris:
- Baris 1 (
alt="Logo Kedai Kopi Siti"): pembaca layar mengumumkan teks alt, bukan nama file. - Baris 2 (
label for="surel"): nilaiforsama denganidinput, sehingga label terhubung dengan kontrolnya — klik label ikut memfokuskan input, dan pembaca layar mengumumkan “Alamat email untuk kabar menu” saat fokus tiba di kontrol. - Baris 3 (
name="surel"): tanpaname, nilai input tidak ikut terkirim saat form disubmit (dibahas tuntas pada chapter Debugging Form). - Baris 4 (
type="submit"): type eksplisit membuat niat tombol terbaca tanpa mengandalkan bawaan.
Atribut yang hilang tidak menggeser tampilan saat semuanya sehat — tetapi hilangnya alt langsung terasa begitu gambar gagal termuat. Bandingkan ketiga gambar berikut:
Pada demo, logo-kedai.png sengaja tidak tersedia agar gejalanya muncul; dua gambar pertama memakai placeholder SVG menggantikan berkas lokal dengan ukuran yang sama.
Dua gambar pertama tampil sama persis — itulah yang membuat alt mudah terlupakan: perbedaannya hanya sampai ke pembaca layar, yang mengumumkan teks alt pada gambar pertama dan nama berkas logo-kedai.png pada gambar kedua. Gambar ketiga memuat baris pertama blok “sebelum” di atas: berkasnya gagal termuat dan, tanpa alt, satu-satunya yang tampil adalah ikon gambar gagal — tidak ada informasi pengganti bagi pengunjung, dan pembaca layar pun hanya punya nama berkas untuk dibacakan.
Cara Mendeteksi #
Validator W3C menangkap sebagian kecil: alt yang wajib pada img dilaporkan sebagai galat. Sisanya tidak — markup tanpa label, tanpa lang, atau tanpa controls tetap sah menurut baku. Untuk sisanya, dua kebiasaan bekerja paling baik. Pertama, audit manual lewat panel Elements: telusuri setiap img, input, dan button pada halaman. Kedua, uji keyboard: tekan Tab dari atas halaman — elemen yang tidak bisa difokuskan langsung terasa. Alat audit aksesibilitas pada DevTools memeriksa beberapa butir ini secara otomatis, dibahas pada chapter Memeriksa Accessibility HTML.
Atribut lengkap menyelesaikan separuh masalah; separuh lainnya adalah menjaga mutu keseluruhan dokumen. Chapter berikutnya melatih metodologi perbaikannya, langkah demi langkah.