# Imej mesti mempunyai teks alternatif

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

WCAG 1.1.1 Non-text Content · Tahap A

Imej tiada alternatif teks, jadi pengguna pembaca skrin tidak tahu apa yang dipaparkannya.

## Apa yang disemak oleh peraturan ini
Pastikan elemen <img> mempunyai teks alternatif atau peranan none atau presentation.

## Mengapa ia penting
WCAG 1.1.1 menetapkan alternatif teks untuk imej yang bermakna. Tanpanya, pengguna pembaca skrin tidak dapat mengetahui produk yang dipaparkan dalam foto.

## Cara membaikinya
### Di mana-mana laman web
1. Tambah penerangan yang ringkas dan khusus pada teks alt setiap imej dalam CMS atau templat anda.
2. Huraikan apa yang penting kepada pembeli: nama produk, warna dan sudut yang dipaparkan (contohnya 'Beg tote kanvas berwarna zaitun, pandangan hadapan').
3. Imej hiasan sepatutnya mempunyai atribut alt kosong (alt="") supaya pembaca skrin melangkaunya.

### Di Shopify
1. Dalam pentadbir Shopify, buka Produk > [produk] > Media, klik setiap imej dan isikan 'Teks alt' (Alt text). Untuk imej bahagian (section), buka Kedai Dalam Talian > Tema > Sesuaikan dan tetapkan teks alt imej dalam tetapan bahagian.
2. Huraikan apa yang penting kepada pembeli: nama produk, warna dan sudut yang dipaparkan (contohnya 'Beg tote kanvas berwarna zaitun, pandangan hadapan').
3. Imej hiasan sepatutnya mempunyai atribut alt kosong (alt="") supaya pembaca skrin melangkaunya.

### Di WooCommerce dan WordPress
1. Dalam WordPress, buka Media > Pustaka, pilih setiap imej dan isikan 'Teks Alternatif' (Alternative Text). Imej galeri produk menggunakan medan yang sama.
2. Huraikan apa yang penting kepada pembeli: nama produk, warna dan sudut yang dipaparkan (contohnya 'Beg tote kanvas berwarna zaitun, pandangan hadapan').
3. Imej hiasan sepatutnya mempunyai atribut alt kosong (alt="") supaya pembaca skrin melangkaunya.

## Cara menyemak pembaikan
- Imbas semula halaman yang terjejas.
- Gunakan pembaca skrin (VoiceOver: Cmd+F5 pada Mac) untuk mendengar cara imej produk diumumkan.

## Sumber
- Dokumentasi peraturan 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