Image

Elemen visual yang digunakan untuk menampilkan foto, ilustrasi, atau grafik. Gambar harus memiliki makna dan dapat diakses oleh semua pengguna.

Gambar yang Aksesibel (WCAG 2.2)

Gambar informatif tanpa caption

Perempuan tunanetra berkacamata hitam dan memakai headphone sedang mengetik di keyboard komputer.

Gambar dengan caption

Penguji memegang papan klip dan pena sambil melakukan panggilan video dengan dua orang di layar komputer. — Sesi pengujian aksesibilitas jarak jauh bersama pengguna disabilitas.

Gambar dekoratif

Daftar periksa WCAG 2.2

Periksa heading, landmark, dan atribut ARIA di halaman Anda satu per satu.

Gambar kompleks (grafik) dengan deskripsi panjang

Perceivable

Operable

Understandable

Robust

Hasil satu contoh audit: Perceivable 42 temuan, Operable 27, Understandable 15, dan Robust 9. Temuan terbanyak ada pada prinsip Perceivable.

<!-- Informative image: alt describes what matters, with explicit size -->
<img src="/assets/keyboard-1.png" width="200" height="240"
  alt="Perempuan tunanetra berkacamata hitam dan memakai headphone sedang mengetik di keyboard komputer.">

<!-- Image with a caption: alt and caption complement each other -->
<figure>
  <img src="/assets/hero.png" width="200" height="191"
    alt="Penguji memegang papan klip dan pena sambil melakukan panggilan video dengan dua orang di layar komputer.">
  <figcaption>Sesi pengujian aksesibilitas jarak jauh bersama pengguna disabilitas.</figcaption>
</figure>

<!-- Decorative image: empty alt, the text next to it says it all -->
<div class="card">
  <img src="/assets/checklist.png" width="96" height="96" alt="">
  <h4>Daftar periksa WCAG 2.2</h4>
  <p>Periksa heading, landmark, dan atribut ARIA di halaman Anda satu per satu.</p>
</div>

<!-- Complex image: short name + long description linked by aria-describedby -->
<figure>
  <div role="img" aria-label="Grafik batang jumlah temuan aksesibilitas per prinsip WCAG"
    aria-describedby="chart-desc">
    <!-- bars: Perceivable 42, Operable 27, Understandable 15, Robust 9 -->
  </div>
  <figcaption id="chart-desc">
    Hasil satu contoh audit: Perceivable 42 temuan, Operable 27, Understandable 15,
    dan Robust 9. Temuan terbanyak ada pada prinsip Perceivable.
  </figcaption>
</figure>

Membuat Gambar yang Aksesibel

Sertakan alt text yang deskriptif dan bermakna untuk gambar informatif
Bedakan gambar informatif dan dekoratif: beri alt="" pada gambar dekoratif agar dilewati pembaca layar
Sediakan caption atau deskripsi panjang untuk gambar kompleks seperti grafik dan diagram, lalu hubungkan dengan figcaption atau aria-describedby
Gunakan teks asli, bukan gambar berisi teks; jika tidak terhindarkan, pastikan kontrasnya memadai dan teksnya ada di alt text
Tetapkan width dan height, serta optimalkan ukuran dan format gambar

Gambar yang Tidak Aksesibel (Harap Dihindari)

Contoh tidak aksesibel. Jangan ditiru.

Gambar tanpa alt text

Alt text berupa nama file

Alt text "Gambar dari..." yang mengulang caption

Gambar dari sesi pengujian aksesibilitas jarak jauh bersama pengguna disabilitas Sesi pengujian aksesibilitas jarak jauh bersama pengguna disabilitas.

Gambar dekoratif dengan alt text deskriptif

Ilustrasi perempuan berkuncir kuda duduk di kursi sambil mengetik di komputer, dengan tulisan aria-xxx, nav, h1, dan h2 di atasnya