HTML34 / 46

Alt text yang bermanfaat

Alt text yang baik menjawab: *informasi apa yang hilang kalau gambar tidak muncul?* Hindari 'gambar' atau 'foto' (screen reader sudah mengumumkan itu elemen gambar). Untuk gambar dekoratif murni, pakai alt="" (kosong) — itu memerintahkan screen reader melewatinya. Menghapus atribut alt sama sekali justru membuat screen reader membacakan nama file, yang jauh lebih buruk.

👀 Contoh dulu

<!-- informatif: jelaskan isinya -->
<img src="cuaca.png" alt="Ramalan cuaca: hujan sepanjang Sabtu">

<!-- dekoratif: kosongkan -->
<img src="garis-hias.svg" alt="">

Hasilnya: Keduanya tampil sama. Screen reader membacakan deskripsi gambar pertama, dan melewati gambar kedua sepenuhnya.

💡 Alt buruk: alt="cuaca.png" atau alt="gambar". Alt baik: menjawab "informasi apa yang hilang jika gambar tidak muncul?".

📝 Sekarang giliranmu

Buat dua gambar: satu informatif (src = grafik.png, alt yang deskriptif berisi kata penjualan), dan satu dekoratif (src = hiasan.svg, alt="").

Preview