# Gambar harus memiliki teks alternatif

<https://www.fixreports.com/id/issues/image-alt>

WCAG 1.1.1 Non-text Content · Level A

Gambar tidak memiliki alternatif teks, sehingga pengguna pembaca layar tidak tahu apa yang ditampilkannya.

## Yang diperiksa aturan ini
Pastikan elemen <img> memiliki teks alternatif atau role none atau presentation.

## Mengapa ini penting
WCAG 1.1.1 mensyaratkan alternatif teks untuk gambar yang bermakna. Tanpa itu, pengguna pembaca layar tidak dapat mengetahui produk mana yang ditampilkan sebuah foto.

## Cara memperbaikinya
### Di website apa pun
1. Tambahkan deskripsi singkat dan spesifik ke teks alt setiap gambar di CMS atau template Anda.
2. Jelaskan apa yang penting bagi pembeli: nama produk, warna, dan sudut yang ditampilkan (misalnya 'Tas tote kanvas warna zaitun, tampak depan').
3. Gambar dekoratif sebaiknya memiliki atribut alt kosong (alt="") agar dilewati pembaca layar.

### Di Shopify
1. Di admin Shopify, buka Produk > [produk] > Media, klik setiap gambar dan isi teks alt ('Alt text'). Untuk gambar section, buka Toko Online > Tema > Sesuaikan dan atur teks alt gambar di pengaturan section.
2. Jelaskan apa yang penting bagi pembeli: nama produk, warna, dan sudut yang ditampilkan (misalnya 'Tas tote kanvas warna zaitun, tampak depan').
3. Gambar dekoratif sebaiknya memiliki atribut alt kosong (alt="") agar dilewati pembaca layar.

### Di WooCommerce dan WordPress
1. Di WordPress, buka Media > Pustaka, pilih setiap gambar dan isi 'Teks Alternatif' ('Alternative Text'). Gambar galeri produk menggunakan kolom yang sama.
2. Jelaskan apa yang penting bagi pembeli: nama produk, warna, dan sudut yang ditampilkan (misalnya 'Tas tote kanvas warna zaitun, tampak depan').
3. Gambar dekoratif sebaiknya memiliki atribut alt kosong (alt="") agar dilewati pembaca layar.

## Cara mengecek perbaikannya
- Pindai ulang halaman yang terdampak.
- Gunakan pembaca layar (VoiceOver: Cmd+F5 di Mac) untuk mendengar gambar produk dibacakan.

## Sumber
- Dokumentasi aturan axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Memahami WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content