Alternative Text

Kita sudah membahas alt dua kali di Section Images: chapter alt-attribute mengajarkan aturan wajibnya, chapter alternative-text melatih cara menulisnya. Chapter ini memperdalam dari sisi penerima: bagaimana isi alt dibacakan pembaca layar, dan bagaimana keputusan jenis gambar menentukan isi yang tepat.

Kuncinya satu: pembaca layar membacakan alt tepat pada posisi gambar di dalam urutan teks. Kalimat dalam alt menjadi bagian dari kalimat halaman — didengar sekali, di tempat itu, tanpa gambar aslinya. Segala keputusan lain mengikuti dari mekanisme ini.

Tiga Perilaku Pembaca Layar #

Perilaku pembaca layar terhadap atribut alt punya tiga keadaan yang perlu kita hafal:

1. alt berisi teks — teks itu dibacakan menggantikan gambar, lengkap dengan pengumuman “gambar”.
2. alt tidak ditulis sama sekali — sebagian pembaca layar membacakan nama berkasnya, sebagian lain cukup mengumumkan “gambar”; keduanya sama-sama tidak membantu.
3. alt="" (kosong sengaja) — gambar dilewati tanpa suara, seolah tidak ada; ini cara sah menandai gambar hias.

Detail penting pada keadaan ketiga: kosong berarti kosong. Menulis alt="gambar dekoratif" justru memaksa pengguna mendengar pengumuman yang tidak berisi informasi — gambar yang mau dilewati malah diperkenalkan. Kalau keputusannya dekoratif, biarkan pembaca layar benar-benar diam.

Empat Keputusan Berdasarkan Peran #

Aturan untuk gambar fungsional tegas: alt menyebut aksi, bukan penampilan. Tombol ikon pencarian memakai alt="Cari", bukan alt="kaca pembesar" — pengguna butuh tahu apa yang terjadi saat tombol ditekan, bukan bagaimana ikonnya tampak.

Contoh Empat Jenis #

<img src="ornamen-garis.svg" alt="">

<img src="kopi-susu.jpg" alt="Segelas kopi susu di atas meja kayu kedai">

<button type="button">
  <img src="ikon-cari.svg" alt="Cari">
</button>

<figure>
  <img src="grafik-penjualan.png" alt="Grafik penjualan naik tiga bulan berturut-turut">
  <figcaption>Penjualan Juli sampai September 2026. Rincian angka pada tabel di bawah grafik.</figcaption>
</figure>

Mari kita bedah keempat keputusannya:

1. Baris 1 (alt=""): ornamen garis tidak membawa informasi — dilewati senyap; halaman tetap terbaca utuh tanpanya.
2. Baris 3 (alt deskriptif): foto produk informatif — isinya menjawab apa dan di mana, mengikuti latihan penulisan pada Section Images.
3. Baris 5-7 (alt="Cari" di dalam button): gambar fungsional — aksi tombol menjadi nama tombolnya; pengguna mendengar “tombol Cari” saat fokus tiba.
4. Baris 9-12 (grafik kompleks): alt merangkum tren utama, figcaption mengarahkan pembaca ke rincian — data lengkapnya hidup sebagai tabel di teks, bukan dipadatkan ke dalam satu atribut.

Ringkasan #

• Pembaca layar membacakan alt pada posisi gambar, sebagai bagian dari teks halaman.
• alt="" melewati gambar hias sepenuhnya — jangan menulis “gambar dekoratif”.
• Gambar fungsional memakai alt berisi aksi: “Cari”, bukan “kaca pembesar”.
• Grafik kompleks: ringkas tren di alt, letakkan data lengkap sebagai teks atau tabel terdekat.

Gambar bukan satu-satunya konten yang butuh nama. Kontrol form membutuhkan label yang terbaca saat difokuskan — chapter berikutnya.