Seni Menulis Alt Text: Lebih dari Sekadar Deskripsi

Seni Menulis Alt Text: Lebih dari Sekadar Deskripsi

Atribut alt (Teks Alternatif) pada gambar adalah fitur aksesibilitas tertua dan paling mendasar di web (berasal dari HTML 2.0 tahun 1995). Ironisnya, hingga hari ini, ia masih menjadi salah satu kriteria WCAG yang paling sering dilanggar atau disalahpahami oleh pengembang dan pembuat konten.

Berdasarkan wawasan dari Bab 1 buku Practical Web Accessibility oleh Ashley Firth, artikel ini akan mengeksplorasi mengapa menulis alt text bukanlah ilmu pasti, melainkan sebuah seni merangkai konteks. Kami akan membahas kapan harus mengosongkannya, kapan harus mendetailkannya, dan kata-kata apa yang harus diharamkan.

---

1. Mitos: Semua Gambar Harus Memiliki Alt Text yang Panjang

Kesalahan paling umum yang dilakukan developer pemula—atau alat CMS otomatis—adalah memberikan deskripsi panjang pada setiap elemen grafis di halaman.

Jika sebuah gambar murni bersifat Dekoratif (hanya ada untuk memperindah tata letak visual tanpa memberikan informasi unik apa pun), gambar tersebut wajib memiliki atribut alt yang kosong (disebut sebagai null alt attribute).

<!-- BENAR: Gambar dekoratif diabaikan oleh Screen Reader -->
<img src="garis-pembatas-bunga.png" alt="">

<!-- SALAH: Membuang waktu pengguna Screen Reader -->
<img src="garis-pembatas-bunga.png" alt="Garis pembatas berwarna merah dengan motif bunga mawar">

Ketika Screen Reader menemukan alt="", ia akan melompati gambar tersebut sepenuhnya, menyelamatkan pendengar dari kebisingan (noise) yang tidak relevan.

[!CAUTION] Jangan Menghapus Atribut Alt: Jika Anda menghapus atribut alt sepenuhnya (alih-alih mengosongkannya), beberapa Screen Reader akan membacakan nama file gambar tersebut sebagai gantinya (contoh: "Grafik-garis-bunga-final-revisi.png"). Ini adalah mimpi buruk UX.

---

2. Gambar Informatif vs Gambar Fungsional

Jika gambar tersebut bukan dekorasi, Anda harus menentukan apakah ia informatif atau fungsional.

A. Gambar Informatif

Gambar ini menyampaikan data, emosi, atau konteks yang tidak ada di dalam teks sekitarnya. Bayangkan Anda sedang membaca artikel berita tentang unjuk rasa. - Buruk: `alt="Polisi dan demonstran"` (Terlalu singkat, tidak ada konteks) - Baik: `alt="Ratusan demonstran berpawai di depan gedung DPR sambil membawa spanduk menolak RUU"` (Memberikan emosi dan konteks berita).

B. Gambar Fungsional (Ikon)

Gambar ini adalah tombol atau tautan. Konteksnya adalah apa yang akan terjadi jika diklik, bukan apa bentuk visualnya. Misalnya, ikon kaca pembesar (🔍) yang berfungsi sebagai tombol cari. - Buruk: `alt="Kaca pembesar"` (Pengguna tunanetra akan kebingungan mengapa ada kaca pembesar di sana). - Baik: `alt="Cari di situs ini"` (Menjelaskan fungsi elemen interaktif tersebut).

---

3. Tiga Aturan Emas Menulis Alt Text (Menurut Ashley Firth)

1. Jangan Pernah Menggunakan "Gambar dari" atau "Foto dari": Screen Reader sudah membacakan tag <img> dengan mengucapkan kata "Grafik" atau "Gambar" sebelum membacakan teks alternatif Anda. Jika Anda menulis alt="Gambar seekor anjing", pengguna akan mendengar: "Gambar, Gambar seekor anjing". Langsung saja ke intinya: alt="Seekor anjing ras Golden Retriever".

   Insight Terkait

   Menerapkan 7 Prinsip Universal Design dalam Konteks Web

2. Konteks adalah Segalanya: Sebuah gambar anjing yang sama akan memiliki alt text yang berbeda tergantung pada situs webnya.

   • Di situs web dokter hewan: alt="Seekor anjing Golden Retriever menunjukkan tanda-tanda infeksi telinga."
   • Di situs web adopsi hewan: alt="Buster, anjing Golden Retriever berumur 3 tahun yang ceria dan siap diadopsi."

3. Batasi Panjangnya (Sekitar 125 Karakter): Meskipun tidak ada batas resmi dalam spesifikasi HTML, banyak Screen Reader populer (seperti JAWS) memotong pembacaan alt text menjadi blok-blok 125 karakter. Jika Anda mendeskripsikan infografis atau bagan yang kompleks, jangan menjejalkan semuanya ke dalam alt. Gunakan atribut aria-describedby untuk menunjuk ke paragraf panjang yang mendeskripsikan data tersebut, atau sediakan tabel data sebagai alternatif.

---

4. Kesimpulan

Menulis teks alternatif bukan sekadar tentang memuaskan alat audit otomatis atau meningkatkan peringkat SEO gambar Anda di Google. Ini tentang mentransfer pengalaman visual dan makna kepada manusia yang tidak bisa melihat layar.

Sebelum Anda mengetik isi alt="...", tutuplah mata Anda dan tanyakan pada diri sendiri: "Jika seseorang membacakan halaman web ini kepada saya melalui telepon, informasi grafis apa yang hilang jika gambar ini tidak disebutkan?" Jawaban dari pertanyaan itulah yang menjadi Alt Text Anda.

---

Referensi

Filosofi perbedaan mendasar antara gambar dekoratif, fungsional, dan informatif dalam artikel ini diekstrak dari argumen teknis dalam Practical Web Accessibility oleh Ashley Firth (Bab 1). Aturan praktis seperti penghindaran frasa "Gambar dari" dan rekomendasi pembatasan panjang teks merujuk pada standar inklusif yang dijabarkan dalam literatur tersebut.