Cara Menulis Alt Text Gambar untuk Website: Contoh dan Latihan

Ilustrasi kartu gambar dengan keterangan alternatif berupa teks

Alt text membantu menyampaikan fungsi atau informasi gambar ketika gambar tidak dapat dilihat. Teks alternatif juga dibaca teknologi bantu. Isi yang tepat bergantung pada tujuan gambar di halaman, bukan sekadar daftar benda yang tampak.

Mulai dari tiga pertanyaan

  1. Apakah gambar menyampaikan informasi yang belum dijelaskan di sekitarnya?
  2. Apakah gambar menjadi tautan atau tombol?
  3. Apakah gambar hanya mempercantik halaman?

Jawab pertanyaan tersebut sebelum menulis. Satu foto dapat membutuhkan keterangan berbeda ketika dipakai dalam tutorial, katalog, atau halaman dekoratif.

Gambar informatif

Bayangkan tutorial memasang kabel jaringan. Keterangan yang membantu adalah posisi atau tindakan yang perlu dipahami pembaca. Hindari nama file dan pengulangan kata kunci.

HTML
<img src="kabel.webp" alt="Konektor Ethernet terpasang pada port LAN laptop">

Jika gambar berisi grafik rumit, tulis ringkasan singkat pada alt lalu jelaskan angka dan kesimpulan lengkap dalam teks atau tabel di halaman. Jangan memasukkan seluruh data panjang ke atribut alt.

Gambar dekoratif

Ornamen yang tidak menambah informasi dapat memakai alt kosong. Atribut tetap ditulis agar gambar dekoratif dapat dilewati teknologi bantu.

HTML
<img src="ornamen.webp" alt="">

Gambar sebagai tautan

Jika gambar merupakan satu-satunya isi tautan, jelaskan tujuan tautannya. Contohnya logo yang mengarah ke halaman utama dapat diberi alt “Kribbi Study — Beranda”. Bila sudah ada teks tautan yang jelas di samping gambar, hindari pengulangan yang tidak diperlukan.

Kesalahan yang perlu dihindari

  • Memakai nama seperti IMG_1234 sebagai keterangan.
  • Menumpuk kata kunci SEO yang tidak menjelaskan gambar.
  • Mengulang paragraf caption tanpa mempertimbangkan konteks.
  • Menghapus atribut alt pada gambar dekoratif, alih-alih memberi nilai kosong.

Latihan lima menit

Ambil satu halaman buatan sendiri. Catat setiap gambar dan tujuannya, lalu klasifikasikan sebagai informatif, fungsional, atau dekoratif. Tulis alternatifnya dan periksa apakah halaman tetap bisa dipahami tanpa melihat gambar. Uji pula tautan gambar dengan keyboard dan, bila tersedia, pembaca layar.

Untuk latihan HTML berikutnya, buka materi HTML di Kribbi Study. Fokus pada makna dan fungsi; alt text saja tidak menjamin seluruh halaman sudah aksesibel.

Referensi

Dokumentasi resmi, diperiksa 1 November 2026. Letak menu dapat berbeda menurut versi aplikasi.

No Comment! Be the first one.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *