Atribut src memberi tahu browser di mana gambar berada; atribut alt memberi tahu apa isi gambar itu bagi siapa pun yang tidak melihatnya. Isi alt berfungsi ganda: menjadi teks pengganti saat gambar gagal termuat, dan menjadi keterangan yang dibacakan pembaca layar bagi pengunjung yang tidak bisa melihat layar. Keduanya sama pentingnya, dan keduanya sama-sama sering diabaikan penulis yang tergesa.

Dua Fungsi alt #

Aturannya: isi alt dipakai di dua tempat. Pertama, saat berkas gagal dimuat, browser menampilkan teksnya menggantikan gambar. Kedua, saat pembaca layar menemukan img, alat itu membacakan isi alt sebagai keterangan gambar. Spesifikasi HTML menuntut setiap img memiliki atribut alt.

Mekanismenya menentukan nasib img tanpa alt: pembaca layar memperlakukan gambar itu sebagai kotak tanpa label — sebagian alat membaca nama berkasnya, sebagian hanya mengumumkan “gambar”, dan keduanya tidak membantu siapa pun.

Tiga Variasi Penulisan #

Penulisan yang benar membedakan tiga keadaan. Dua pertama sah; yang ketiga pelanggaran:

html 
<img src="assets/kopi.jpg" alt="Segelas kopi tubruk di atas meja kayu">
<img src="assets/garis-hias.svg" alt="">
html 
<img src="assets/plantasi.jpg">

Hasil render saat gambarnya gagal termuat: img pertama menampilkan teks “Segelas kopi tubruk di atas meja kayu” di kotaknya; img kedua menampilkan ikon gagal termuat tanpa teks (memang tidak ada informasi yang hilang); img ketiga menampilkan ikon gagal termuat diiringi nama berkas — label yang tidak bermakna bagi siapa pun.

Mari kita telaah ketiganya:

  1. alt berisi deskripsi: gambar informatif — pengunjung yang gambarnya gagal termuat tetap menerima maknanya, dan pembaca layar membacakannya.
  2. alt="" (kosong): deklarasi gambar dekoratif — sah menurut spesifikasi dan justru penting: pembaca layar melewatinya sepenuhnya sehingga alur baca tidak terganggu.
  3. Atribut alt tidak ditulis sama sekali: berbeda dari alt="" — ini pelanggaran; pembaca layar tidak punya label dan cenderung membaca nama berkas.

Buktikan sendiri peran alt pada demo berikut: gambar pertama sengaja merujuk berkas yang tidak ada, sedangkan gambar kedua termuat normal — perhatikan teks alt gambar pertama yang tampil sebagai pengganti:

Gambar pertama memang sengaja dibiarkan gagal termuat agar perilaku alt terlihat; gambar kedua memakai placeholder SVG pengganti assets/kopi.jpg.

alt Kosong Bukan alt Hilang #

Ringkasan #

  • alt berfungsi ganda: teks pengganti saat gagal termuat dan keterangan yang dibacakan pembaca layar.
  • Spesifikasi menuntut alt pada setiap img.
  • alt="" sah dan penting untuk gambar dekoratif; melewatkan atribut adalah pelanggaran yang berbeda.
  • Nama berkas bukan isi alt yang berguna.

Menyadari alt wajib hanyalah separuh pekerjaan — chapter berikutnya melatih cara mengisi teksnya agar benar-benar bermakna.