Gambar Aksesibel — Alt/Dekoratif/Diagram 2025

Pendahuluan

Keteraksesan dan SEO saling tumpang tindih, tapi tujuannya berbeda. Artikel ini fokus pada perancangan alt yang “berkomunikasi”, serta membedakan gambar dekoratif, informatif, dan diagram. Untuk SEO, lihat SEO Gambar 2025 — Alt text, data terstruktur, dan sitemap secara praktis.

Prinsip alt

• Dekoratif: alt="" agar pembaca layar melewatinya.
• Informatif: sampaikan inti secara ringkas; hindari pengulangan isi teks.
• Diagram: alt berisi gist; angka/satuan diletakkan di teks di sekitar atau caption.

Kasus umum

• Gambar bertaut: alt harus mencerminkan tujuan tautan. Hindari nama file atau deskripsi bertele-tele.
• Pratinjau OGP: sering menduplikasi isi halaman; buat alt minimal. Catatan desain: Desain thumbnail OGP 2025 — Terbaca, ringan, tidak terpotong.

Jebakan implementasi

• Jangan berlebihan memakai role="presentation"; lebih baik HTML semantik dengan alt yang tepat.
• Cegah over-delivery: kombinasikan srcset/sizes. Detail: Desain gambar responsif 2025 — Panduan praktis srcset/sizes.

Tips praktis

• Gunakan Pemotong gambar untuk memeriksa keterbacaan diagram/komposisi.
• Hasilkan sumber responsif dengan Generator Srcset.
• Buat thumbnail OGP dengan Pembuat Thumbnail OGP.

Keputusan awal: dekoratif, informatif, atau UI

1. Dekoratif (hanya suasana) → alt="".
2. Informatif (perlu untuk memahami teks) → gist singkat; hindari duplikasi.
3. Ikon/ tombol UI → alt/nama aksesibel sesuai label yang terlihat.

Kontrak alt

• Alt adalah satu kalimat yang masuk akal saat dibacakan di tempatnya.
• Kata seperti “gambar/foto” biasanya berlebihan.
• Untuk grafik data, alt = gist+satuan; deskripsi panjang di teks/caption.

Contoh alt buruk vs. baik

• Buruk: alt="grafik"

  • Kurang: metrik dan tren apa?

• Baik: alt="Pendapatan bulanan 2024; meningkat menuju Q4"

• Buruk: alt="tombol"

• Baik: alt="Tambah ke keranjang" (untuk tombol UI)

• Buruk: alt="logo perusahaan"

• Baik: alt="Unified Image Tools" (sesuaikan dengan tujuan tautan jika ditautkan)

Menangani diagram kompleks (teks panjang di tempat lain)

• Alt tetap ringkas; angka/penjelasan detail ditempatkan di dekat gambar.
• Gunakan <figcaption> untuk konteks; pembaca layar lebih nyaman dibanding alt yang terlalu panjang.

Contoh (Next.js)

<figure>
  <Image src="/charts/sales-2024.png" alt="Pendapatan bulanan 2024; meningkat menuju Q4" width={960} height={540} />
  <figcaption>Pendapatan naik sejak Juli. Satuan: 10K.</figcaption>
</figure>

Ikon UI dan nama aksesibel

• Jika ikon murni dekoratif, gunakan alt="" dan sembunyikan dari pohon aksesibilitas.
• Jika ikon adalah satu-satunya isi kontrol, sediakan aria-label atau teks terlihat.
• Hindari duplikasi alt dan aria-label pada elemen yang sama.

Performa dan a11y bersama-sama

• Untuk gambar LCP, gunakan prioritas/preload sambil menjaga alt tetap ringkas.
• Optimalkan sizes/srcset agar tidak boros; bandwidth juga aspek a11y.
• Pertahankan kontras teks; prioritaskan teks HTML daripada teks di dalam gambar.

Gambar OGP/media sosial

• Alt tetap minimal untuk menghindari pengulangan dengan isi halaman.
• Banyak konteks pratinjau tidak membaca alt; pastikan inti ada di body.
• Rincian di Desain thumbnail OGP 2025 — Terbaca, ringan, tidak terpotong.

Uji dan verifikasi

• Pembaca layar (NVDA/VoiceOver): cek urutan baca dan redundansi.
• Pemeriksaan otomatis (Axe/Pa11y): deteksi alt kosong/gambar bermakna.
• Di halaman nyata: fokus keyboard dan perilaku saat gambar gagal dimuat.

Daftar periksa sebelum rilis

• Gambar dekoratif dibisukan dengan alt="".
• Gambar informatif punya gist singkat tanpa duplikasi.
• Ikon UI punya nama aksesibel sesuai label.
• Diagram: satuan/tren ada di teks; alt singkat.
• Pengiriman responsif dikonfigurasi (srcset/sizes, format, preload) tanpa merusak a11y.

Terkait

• SEO Gambar 2025 — Alt text, data terstruktur, dan sitemap secara praktis
• Desain gambar responsif 2025 — Panduan praktis srcset/sizes
• Generator Srcset