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
- Tambahkan deskripsi singkat dan spesifik ke teks alt setiap gambar di CMS atau template Anda.
- Jelaskan apa yang penting bagi pembeli: nama produk, warna, dan sudut yang ditampilkan (misalnya 'Tas tote kanvas warna zaitun, tampak depan').
- Gambar dekoratif sebaiknya memiliki atribut alt kosong (alt="") agar dilewati pembaca layar.
Di Shopify
- 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.
- Jelaskan apa yang penting bagi pembeli: nama produk, warna, dan sudut yang ditampilkan (misalnya 'Tas tote kanvas warna zaitun, tampak depan').
- Gambar dekoratif sebaiknya memiliki atribut alt kosong (alt="") agar dilewati pembaca layar.
Di WooCommerce dan WordPress
- Di WordPress, buka Media > Pustaka, pilih setiap gambar dan isi 'Teks Alternatif' ('Alternative Text'). Gambar galeri produk menggunakan kolom yang sama.
- Jelaskan apa yang penting bagi pembeli: nama produk, warna, dan sudut yang ditampilkan (misalnya 'Tas tote kanvas warna zaitun, tampak depan').
- 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.
Cara FixReports menemukannya
Pemindaian kami menjalankan aturan axe-core image-alt di browser Chrome sungguhan pada setiap halaman yang diuji, lalu melaporkan setiap elemen yang gagal beserta halamannya, markup-nya, dan, jika relevan, tangkapan layarnya.
Pengujian otomatis memastikan bahwa masalah spesifik ini memang ada. Pengujian itu tidak dapat menentukan apakah bagian lain halaman sudah aksesibel: beberapa hambatan baru terlihat ketika seseorang memeriksa halaman itu.