Atribut alt

Gambar tidak selalu tampil: file bisa salah path, jaringan bisa terputus, dan sebagian pengguna tidak melihat gambar sama sekali. Atribut alt menjawab situasi tersebut dengan menyediakan teks pengganti. Pada Chapter ini kita melihat dua fungsi utama alt, berlatih menulis teks pengganti yang baik, lalu mengenal dua penulisan khusus: alt="" untuk gambar dekoratif dan alt yang menjelaskan tindakan pada gambar fungsional.

Dua Fungsi alt #

Atribut alt (alternative text) dibaca oleh dua pembaca yang berbeda. Pertama, bila file gambar gagal dimuat, browser menampilkan teks alt pada ruang gambar sehingga halaman tetap menyampaikan informasinya. Kedua, screen reader membacakan alt kepada pengguna yang mengandalkan pendengaran, misalnya pengguna tunanetra. Karena itu, alt ditulis sebagai deskripsi isi gambar, bukan keterangan teknis tentang file.

<img src="tas-anyaman.jpg" alt="Tas anyaman warna cokelat dengan tali kulit" width="200" height="150">

Output yang Dihasilkan:

Bila tas-anyaman.jpg ditemukan  -> gambar tas tampil pada halaman
Bila file tidak ada             -> ruang gambar berisi teks pengganti:
                                   "Tas anyaman warna cokelat dengan tali kulit"
Screen reader                   -> membacakan teks alt, bukan nama file

Menulis alt yang Baik #

Teks alt yang baik menggambarkan isi gambar yang relevan dengan konteks halaman, dalam satu kalimat pendek. Empat kebiasaan berikut menjadi panduan kita:

• Deskripsikan isi gambar yang penting bagi pembaca, bukan seluruh detail visual.
• Ringkas: satu frasa atau kalimat pendek cukup.
• Jangan diawali “gambar dari” atau “foto” — screen reader mengumumkan keberadaan gambar terlebih dahulu, sehingga awalan itu terdengar berulang.
• Jangan menuliskan nama file sebagai alt; nama seperti IMG_20240612.jpg tidak memberi makna apa pun.

Tabel berikut membandingkan penulisan untuk gambar tas yang sama:

alt="" untuk Gambar Dekoratif #

Tidak semua gambar membawa informasi: garis pemisah, pola latar, dan ikon hias hanya memperindah halaman. Untuk gambar dekoratif, tulis alt="" — atribut yang sengaja diberi nilai kosong. Nilai kosong tersebut menjadi sinyal bagi screen reader untuk melewati gambar, sehingga pengguna tidak mendengarkan deskripsi atas hal yang tidak penting. Jadi alt="" berarti “gambar ini boleh dilewati”, bukan “deskripsinya lupa ditulis”.

alt pada Gambar Fungsional #

Gambar yang dapat diklik bekerja seperti tombol: logo menuju beranda, ikon keranjang menuju katalog. Bagi gambar semacam ini, alt harus menjelaskan tujuan atau tindakannya, bukan bentuk gambarnya. Pengguna screen reader tidak perlu tahu wujud ikonnya; yang penting adalah apa yang terjadi setelah mengklik.

<a href="katalog.html">
  <img src="ikon-keranjang.svg" alt="Buka halaman katalog produk" width="48" height="48">
</a>

Pola yang sama berlaku pada gambar di dalam elemen button yang menanti kita pada section Forms: alt menjelaskan tindakan tombol, misalnya alt="Kirim pesan" untuk ikon amplop. Perhatikan pula bahwa alt="ikon keranjang" kurang tepat pada contoh di atas — bentuk gambar bukan hal yang perlu disampaikan.

Contoh Lengkap dalam Satu File #

File berikut memuat tiga jenis gambar sekaligus: informatif, dekoratif, dan fungsional. Ketiga file gambarnya sengaja tidak disertakan dalam bundle; buka file HTML-nya di browser dan amati teks pengganti yang tampil pada setiap ruang gambar yang gagal dimuat — justru di situ terlihat cara kerja alt:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Atribut alt</title>
</head>
<body>
  <h1>Galeri Toko Budi</h1>
  <img src="tas-anyaman.jpg" alt="Tas anyaman warna cokelat dengan tali kulit" width="200" height="150">
  <p>Galeri ini menampilkan produk anyaman buatan tangan dari Siti.</p>
  <img src="garis-hias.svg" alt="" width="200" height="10">
  <p>
    <a href="katalog.html">
      <img src="ikon-keranjang.svg" alt="Buka halaman katalog produk" width="48" height="48">
    </a>
  </p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Galeri Toko Budi"
  - Ruang gambar pertama berisi teks "Tas anyaman warna cokelat
    dengan tali kulit" (file gagal dimuat, teks alt tampil)
  - Paragraf penjelasan galeri
  - Ruang gambar kedua hampir kosong: alt="" membuatnya senyap
  - Ruang gambar ketiga berisi teks "Buka halaman katalog produk",
    seluruh ruangnya dapat diklik menuju katalog.html

Mari kita telaah ketiga img pada file di atas:

1. Baris 10 (img informatif): gambar tas menyampaikan informasi utama, sehingga alt berisi deskripsi lengkap gambar.
2. Baris 12 (img dekoratif): garis hias hanya memperindah, sehingga alt="" memerintahkan screen reader untuk melewatinya.
3. Baris 13-17 (img fungsional): gambar berada di dalam a, sehingga berperan sebagai link; alt menjelaskan tujuan klik, bukan wujud ikon.
4. Atribut width dan height pada ketiganya: mereservasi ruang gambar sesuai materi Chapter sebelumnya.
5. File gambar yang tidak disertakan: karena file tidak ada, semua gambar gagal dimuat dan teks penggantinya tampil — cara cepat mengamati efek alt tanpa menyiapkan file.

Dengan tiga pola di atas — deskriptif, kosong, dan fungsional — alt kita siap menemani sebagian besar gambar pada halaman nyata. Chapter berikutnya, Responsive Images, menghadapi gambar pada masalah yang berbeda: satu halaman yang dibuka dari ponsel berlayar kecil sampai monitor lebar.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen img
• W3C WAI — Images Tutorial
• MDN Web Docs — Images in HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Atribut alt</title>
</head>
<body>
  <h1>Galeri Toko Budi</h1>
  <img src="tas-anyaman.jpg" alt="Tas anyaman warna cokelat dengan tali kulit" width="200" height="150">
  <p>Galeri ini menampilkan produk anyaman buatan tangan dari Siti.</p>
  <img src="garis-hias.svg" alt="" width="200" height="10">
  <p>
    <a href="katalog.html">
      <img src="ikon-keranjang.svg" alt="Buka halaman katalog produk" width="48" height="48">
    </a>
  </p>
</body>
</html>