Teks alternatif untuk gambar

Hiasan lengkung dan grafik penjualan sama-sama memakai elemen img, tetapi teks alt yang tepat untuk yang pertama adalah string kosong dan untuk yang kedua adalah kalimat utuh.

Untuk apa teks alt

Pembaca layar mengubah halaman menjadi suara atau braille. Saat sampai pada gambar, ia tidak bisa melihat pikselnya, jadi ia membaca atribut alt sebagai gantinya. Teks yang sama muncul saat gambar gagal dimuat, dan teks itulah yang diterima mesin pencari atau browser teks saja. WCAG 2.2 menaruh hal ini paling depan: kriteria keberhasilan 1.1.1 Konten Nonteks, pada level A, meminta agar setiap gambar, ikon, atau grafik yang membawa informasi punya alternatif teks yang memenuhi tujuan yang sama.

Kata kuncinya adalah "tujuan yang sama". Teks alt bukan keterangan gambar dan bukan daftar semua yang ada di bingkai. Tanyakan apa yang didapat pembaca yang bisa melihat dari gambar di tempat ini, lalu tulis itu. Foto roti di halaman depan sebuah toko roti mungkin cukup diberi "Roti sourdough, diiris". Foto yang sama dalam artikel tentang warna kulit roti mungkin perlu "Roti sourdough dengan kulit gelap yang hampir hitam dan bagian dalam berpori besar". File sama, tugas berbeda, teks berbeda.

Empat kasus umum

Tutorial gambar W3C membagi kebanyakan gambar ke dalam beberapa kelompok. Gambar informatif, seperti foto atau diagram sederhana, diberi deskripsi singkat tentang apa yang ditampilkannya. Gambar dekoratif, seperti garis pemisah atau tekstur latar, diberi alt kosong, ditulis alt="", yang memberi tahu teknologi bantu untuk melewatinya. Gambar fungsional, seperti logo yang menautkan ke beranda atau kaca pembesar yang mengirim pencarian, diberi teks yang menyatakan apa yang terjadi: "Beranda Corner Bakery" atau "Cari", bukan "logo" atau "kaca pembesar". Gambar berisi teks diberi kata-kata yang ada di gambar itu.

Tidak menulis atributnya tidak sama dengan mengosongkannya. Tanpa alt sama sekali, sebagian pembaca layar beralih membaca nama file, sehingga pendengar mungkin mendengar sesuatu seperti "IMG garis bawah 4032 titik jpeg". Alt kosong adalah pilihan yang disengaja yang berarti "tidak ada yang perlu dilihat di sini". Untuk grafik yang rumit, buat alt-nya singkat ("Diagram batang penjualan bulanan, dijelaskan di bawah") dan taruh angka-angkanya dalam tabel atau paragraf di sebelahnya, tempat semua orang bisa membacanya.

Gambar yang bukan elemen img

Gambar juga bisa hadir sebagai SVG sebaris atau gambar latar CSS. Latar CSS sama sekali tidak punya tempat untuk teks alt, jadi sebaiknya hanya dipakai untuk hiasan; apa pun yang membawa makna harus ada di HTML. svg sebaris yang murni hiasan bisa disembunyikan dengan aria-hidden="true", yang dijelaskan di unit 6. WCAG tidak menetapkan batas jumlah karakter untuk teks alt, tetapi tutorial W3C terus kembali ke nasihat yang sama: singkat saja dan berikan yang penting dalam konteks ini. Kalau kamu sampai menulis tiga kalimat, isinya mungkin lebih cocok ditaruh di teks halaman, tempat semua orang bisa membacanya.

Kamu bisa memeriksa halamanmu sendiri tanpa perangkat lunak khusus. Lihat sumber halaman lalu cari <img: setiap hasilnya harus punya atribut alt, kosong atau tidak. Alat pengembang di browser-browser utama juga punya panel aksesibilitas yang menunjukkan nama akhir setiap gambar. Membaca nama-nama itu berurutan, lepas dari konteksnya, adalah uji yang bagus. Kalau daftarnya berbunyi "gambar, gambar, grafik, logo", pengguna pembaca layar mendengar persis itu.