TL;DR: Alt text tidak memiliki aturan universal 125 karakter. Teks harus sesingkat mungkin dan sepanjang yang diperlukan untuk menggantikan fungsi gambar dalam konteks. Gambar informatif sederhana sering membutuhkan satu kalimat ringkas. Gambar fungsional menjelaskan tindakan. Gambar dekoratif biasanya memakai alt kosong. Grafik kompleks membutuhkan label pendek dan informasi rinci dalam teks di dekatnya.

Panjang alt text sering dipersempit menjadi satu angka, tetapi aksesibilitas tidak bekerja seperti itu. Deskripsi sepuluh kata dapat terlalu panjang untuk gambar dekoratif dan terlalu pendek untuk grafik. Teks yang tepat bergantung pada alasan gambar muncul dan informasi yang hilang jika seseorang tidak dapat melihatnya.

Panduan ini menjelaskan cara menulis alt text untuk gambar informatif, fungsional, dekoratif, dan kompleks. Panduan juga membahas kesalahan umum, seperti keyword stuffing, caption berulang, dan deskripsi yang hanya mencantumkan detail visual tanpa menyampaikan fungsi. Tujuannya adalah teks pengganti yang berguna, bukan skor karakter sempurna.

Tulis deskripsi dalam konteks, lalu periksa ukurannya dengan penghitung karakter. Penghitungan membantu menemukan deskripsi yang terlalu padat, tetapi tidak boleh memaksa Anda menghapus informasi yang dibutuhkan untuk memahami halaman.

Panduan panjang dan penulisan alt text gambar

Seberapa panjang alt text seharusnya?

Alt text harus sesingkat mungkin dan sepanjang yang diperlukan untuk menyampaikan fungsi gambar. Satu kalimat ringkas sering cocok untuk gambar informatif sederhana. Ikon fungsional mungkin hanya membutuhkan beberapa kata. Grafik kompleks biasanya membutuhkan atribut pendek dan penjelasan lebih panjang di tempat lain.

Tidak ada maksimum universal 125 karakter dalam HTML atau WCAG. Angka itu adalah rekomendasi praktis yang dipakai beberapa tim dan alat lama, bukan aturan yang membuat teks lebih panjang otomatis tidak aksesibel.

Baca halaman tanpa gambar dan tanyakan informasi apa yang hilang. Tulis hanya pengganti itu. Jika deskripsi menjadi satu paragraf, pindahkan detail ke teks tubuh yang terlihat agar dapat dipakai lebih banyak orang.

Apa yang harus dijelaskan oleh alt text?

Jelaskan fungsi gambar dan informasi yang ditambahkan dalam konteks tertentu. Jangan daftar setiap benda yang terlihat jika detailnya tidak penting. Foto yang sama dapat membutuhkan alt text berbeda pada berita, halaman produk, atau profil pribadi.

W3C mewajibkan konten nonteks memiliki alternatif teks dengan fungsi setara, dengan pengecualian seperti dekorasi. Pohon keputusan alternatif gambar membantu memilih deskripsi, label fungsional, penjelasan di dekatnya, atau atribut alt kosong.

Hindari memulai dengan “gambar dari” atau “foto dari” kecuali media itu sendiri penting. Pembaca layar dan markup sekitar biasanya sudah mengenali konten sebagai gambar.

Gambar informatif, fungsional, dan dekoratif

Klasifikasikan gambar sebelum menulis. Kategori menentukan apakah teks perlu menjelaskan isi, menerangkan tindakan, atau tetap kosong.

  • Gambar informatif: sampaikan fakta atau makna yang ditambahkan. Contoh: “Sepeda merah terparkir di samping pintu masuk stasiun.”
  • Gambar fungsional: jelaskan tindakan atau tujuan. Tombol kaca pembesar membutuhkan “Cari”, bukan “Kaca pembesar”.
  • Gambar dekoratif: gunakan atribut alt kosong dalam HTML saat gambar tidak menambah informasi dan harus diabaikan.
  • Gambar teks: sertakan kata penting jika tidak tersedia sebagai teks nyata di dekatnya.
  • Logo: identifikasi organisasi saat logo memberikan informasi itu. Di dalam tautan beranda, teks dapat berupa “Nama perusahaan, beranda”.

Jangan ulangi caption kata demi kata. Pengulangan menambah waktu mendengar tanpa makna baru. Gunakan Pembanding Teks untuk membandingkan caption dan alt text saat menduga keduanya sama.

Bagaimana menulis alt text untuk grafik dan gambar kompleks?

Gunakan atribut pendek untuk mengidentifikasi grafik dan pesan utamanya, lalu berikan data, hubungan, atau proses penting dalam teks di dekatnya. Informasi kompleks jarang cocok dalam satu atribut panjang. Deskripsi terlihat juga membantu orang dengan penglihatan rendah atau disabilitas kognitif.

Untuk grafik garis, sebutkan topik dan tren utama: “Permintaan dukungan bulanan naik dari 120 pada Januari menjadi 210 pada Juni.” Tambahkan tabel data atau paragraf jika nilai bulanan yang tepat penting.

Untuk diagram, jelaskan urutan atau hubungan yang digunakan halaman. Jangan menjelaskan setiap bentuk, warna panah, atau posisi kecuali mengubah makna. analisis keterbacaan dapat membantu menyederhanakan deskripsi terlihat yang panjang tanpa menghapus langkah penting.

Kesalahan umum alt text

Alt text buruk sering bukan terlalu panjang atau pendek. Teksnya tidak relevan, berulang, atau ditulis untuk mesin pencari alih-alih manusia.

  • Menggunakan nama berkas seperti “IMG_2048.jpg”.
  • Menulis “gambar dari” sebelum setiap deskripsi.
  • Mengulangi caption, judul, atau paragraf di dekatnya.
  • Memasukkan kata kunci produk yang tidak disampaikan gambar.
  • Menjelaskan warna atau posisi tanpa menjelaskan makna.
  • Memberikan deskripsi lisan untuk gambar dekoratif.
  • Menggunakan alt kosong saat gambar menjadi satu-satunya label tautan atau tombol.

Bersihkan deskripsi salinan dengan penghapus spasi berlebih agar pergantian baris dan format tersembunyi tidak masuk ke kolom CMS.

Bagaimana memeriksa alt text sebelum menerbitkan?

Tinjau gambar dalam konteks halaman sebenarnya. Tentukan fungsinya, hapus informasi berulang, uji halaman tanpa gambar, dan pastikan teks pengganti mendukung tugas yang sama. Lalu periksa HTML atau hasil CMS agar atribut ada dan kosong dengan benar saat dekoratif.

  1. Identifikasi jenis gambar: informatif, fungsional, dekoratif, berbasis teks, atau kompleks.
  2. Baca isi sekitar: hindari mengulang informasi yang sudah tersedia.
  3. Tulis pengganti: fokus pada fungsi dan informasi berguna.
  4. Periksa panjang: pendekkan hanya jika kata-katanya berulang atau terlalu padat.
  5. Tinjau aksesibilitas visual: gunakan simulator kontras saat teks atau grafik penting ada di dalam gambar.
  6. Uji hasil: pastikan alt kosong ditulis sebagai atribut kosong, bukan dihilangkan.

Pemeriksa otomatis dapat menemukan atribut yang hilang, tetapi tidak dapat menentukan apakah kata-katanya berguna. Tinjauan manusia diperlukan karena deskripsi yang tepat bergantung pada konteks.

Panjang alt text adalah keputusan kualitas, bukan target SEO tetap. Gambar sederhana membutuhkan pengganti ringkas, gambar fungsional membutuhkan tindakan jelas, gambar dekoratif harus diam, dan visual kompleks membutuhkan detail di luar atribut.

Tulis deskripsi di samping gambar, lalu gunakan penghitung karakter untuk menemukan panjang yang tidak perlu. Pertahankan setiap kata yang membantu seseorang memahami atau memakai halaman dan hapus hanya detail yang tidak mendukung fungsi gambar.