Alt Text Mendalam

Menjelaskan Gambar Lewat Telepon

Bayangkan temanmu menelepon dan bertanya, "gambar apa yang sedang kamu lihat?" Kamu tidak akan menjawab "gambar" saja, kan? Kamu akan menjelaskan apa yang penting dari gambar itu untuk percakapan kalian. Kalau kalian membahas resep, kamu akan bilang "sepiring rendang dengan taburan bawang goreng". Kalau membahas fotografi, kamu mungkin bilang "foto close-up rendang dengan depth of field dangkal, diambil saat golden hour".

Atribut alt pada img bekerja persis seperti itu: ia adalah penjelasan gambar untuk orang yang tidak bisa melihatnya, yaitu pengguna screen reader, dan untuk mesin pencari yang "buta" terhadap isi piksel. Alt yang baik menjawab pertanyaan: informasi apa yang hilang jika gambar ini tidak ada? Jawabannya selalu bergantung pada konteks, bukan cuma objek di dalam gambar.

Kenapa Alt Penting

Tiga alasan alt bukan sekadar formalitas. Pertama, aksesibilitas: sekitar 2,2 miliar orang di dunia punya gangguan penglihatan. Tanpa alt, screen reader hanya mengumumkan "gambar" atau worse, membacakan nama file seperti "IMG_20260112_081522.jpg". Kedua, SEO: mesin pencari memakai alt untuk memahami isi gambar, yang memengaruhi peringkat di pencarian gambar dan pencarian umum. Ketiga, ketahanan: kalau gambar gagal dimuat karena koneksi buruk, alt tampil sebagai pengganti teks, sehingga halaman tetap masuk akal.

Kapan Alt Dikosongkan, Kapan Deskriptif

Aturannya terbagi tiga:

1. Gambar informatif: tulis alt deskriptif. Gambar yang membawa informasi (foto produk, diagram, infografis) wajib punya alt yang menyampaikan informasi yang sama.

<img src="grafik-penjualan.png" alt="Grafik batang: penjualan kopi naik dari 120 cangkir di Januari menjadi 340 cangkir di Juni" />

2. Gambar dekoratif murni: kosongkan alt (alt=""). Gambar yang hanya pemanis dan tidak menambah informasi (pola latar, garis hias, ikon di samping teks yang sudah menjelaskan) harus punya alt kosong agar screen reader melewatinya diam-diam.

<img src="pola-batik.png" alt="" />

3. Gambar fungsional: alt menjelaskan fungsi, bukan rupa. Gambar di dalam link atau tombol harus menjelaskan apa yang terjadi saat diklik, seperti dibahas di modul link pada gambar.

<a href="/unduh-laporan.pdf">
  <img src="ikon-pdf.svg" alt="Unduh laporan tahunan (PDF)" />
</a>

Contoh 1: Salah versus Benar

Lihat perbedaan kualitas alt berikut untuk foto yang sama: barista menuang latte art berbentuk hati ke cangkir putih.

<!-- SALAH: mengulang kata "gambar", tidak informatif -->
<img src="barista.jpg" alt="gambar" />

<!-- SALAH: membacakan nama file -->
<img src="barista.jpg" alt="IMG_20260112_081522.jpg" />

<!-- SALAH: menjejalkan kata kunci (keyword stuffing) -->
<img src="barista.jpg" alt="kopi, kopi susu, latte art, barista, warkop, kopi enak, kopi murah" />

<!-- BENAR untuk artikel tentang teknik -->
<img src="barista.jpg" alt="Barista menuang susu membentuk latte art hati di atas cangkir kopi putih" />

<!-- BENAR untuk halaman lowongan kerja (konteks berbeda, alt berbeda) -->
<img src="barista.jpg" alt="Suasana kerja barista di bar kopi Warkop Doa Ambu yang ramai" />

Contoh terakhir adalah pelajaran terpenting modul ini: foto yang sama butuh alt berbeda di konteks berbeda. Alt ditulis untuk konteks halaman, bukan untuk objek di foto.

Contoh 2: Artikel dengan Banyak Gambar

Contoh realistis: artikel tutorial membuat kopi tubruk dengan tiga gambar yang perannya berbeda.

<article>
  <h1>Cara Membuat Kopi Tubruk Sempurna</h1>

  <img src="biji-kopi.jpg"
       alt="Biji kopi arabika sangrai medium yang mengilap" />

  <p>Pilih biji arabika sangrai medium seperti pada foto di atas...</p>

  <h2>Langkah 1: Takaran</h2>
  <img src="timbangan.jpg"
       alt="Timbangan digital menunjukkan 15 gram bubuk kopi" />
  <p>Timbang 15 gram kopi untuk satu cangkir...</p>

  <h2>Hasil Akhir</h2>
  <img src="hiasan-garis.png" alt="" />
  <img src="kopi-jadi.jpg"
       alt="Segelas kopi tubruk pekat dengan buih tipis di permukaan" />
  <p>Kopi tubruk yang baik punya buih tipis...</p>
</article>

Perhatikan: gambar hiasan garis pembatas memakai alt="" karena tidak membawa informasi, sedangkan dua foto lainnya punya alt yang menjawab "apa yang perlu diketahui pembaca dari foto ini dalam konteks langkah tersebut".

Kesalahan Umum Pemula

Salah: mengawali alt dengan "gambar/foto dari..." Screen reader sudah mengumumkan "gambar" sebelum membacakan alt, sehingga hasilnya terdengar "gambar, gambar pantai". Langsung ke deskripsinya saja.

Salah: alt yang terlalu panjang seperti paragraf. Alt idealnya satu sampai dua kalimat (di bawah 125 karakter sebagai patokan umum). Kalau gambarnya kompleks seperti infografis, tulis ringkasannya di alt, lalu sediakan penjelasan lengkap sebagai teks biasa di dekat gambar.

<!-- BENAR untuk infografis -->
<img src="infografis.png" alt="Infografis: 5 tahap menyeduh kopi, dirinci di bawah" />
<p>Tahap 1 ... tahap 2 ... (penjelasan lengkap di sini)</p>

Salah: alt identik untuk semua gambar di galeri. "Foto produk 1", "Foto produk 2" tidak membantu siapa pun. Bedakan berdasarkan apa yang terlihat: warna, sudut, atau varian.

Salah: tidak menulis alt sama sekali. Tanpa atribut alt, screen reader terpaksa membacakan nama file atau URL gambar, pengalaman terburuk bagi penggunanya. Alt kosong (alt="") adalah keputusan sadar; tanpa alt sama sekali adalah kelalaian.

Catatan teknis: Uji kualitas alt-mu dengan trik sederhana: tutup matamu (atau matikan gambar di browser) lalu baca halaman hanya lewat alt. Kalau alur informasi tetap masuk akal, alt-mu sudah benar. Kalau ada bagian yang terasa janggal atau kosong, di situlah alt perlu diperbaiki. Trik ini mensimulasikan persis apa yang dialami pengguna screen reader setiap hari.