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
- Tambah penerangan yang ringkas dan khusus pada teks alt setiap imej dalam CMS atau templat anda.
- Huraikan apa yang penting kepada pembeli: nama produk, warna dan sudut yang dipaparkan (contohnya 'Beg tote kanvas berwarna zaitun, pandangan hadapan').
- Imej hiasan sepatutnya mempunyai atribut alt kosong (alt="") supaya pembaca skrin melangkaunya.
Di Shopify
- 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.
- Huraikan apa yang penting kepada pembeli: nama produk, warna dan sudut yang dipaparkan (contohnya 'Beg tote kanvas berwarna zaitun, pandangan hadapan').
- Imej hiasan sepatutnya mempunyai atribut alt kosong (alt="") supaya pembaca skrin melangkaunya.
Di WooCommerce dan WordPress
- Dalam WordPress, buka Media > Pustaka, pilih setiap imej dan isikan 'Teks Alternatif' (Alternative Text). Imej galeri produk menggunakan medan yang sama.
- Huraikan apa yang penting kepada pembeli: nama produk, warna dan sudut yang dipaparkan (contohnya 'Beg tote kanvas berwarna zaitun, pandangan hadapan').
- 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.
Cara FixReports menemuinya
Imbasan kami menjalankan peraturan axe-core image-alt dalam pelayar Chrome sebenar pada setiap halaman yang diujinya, dan melaporkan setiap elemen yang gagal berserta halamannya, markupnya dan, jika berkenaan, tangkapan skrin.
Ujian automatik mengesahkan bahawa masalah khusus ini wujud. Ia tidak dapat menentukan sama ada bahagian lain halaman itu boleh diakses: sesetengah halangan hanya kelihatan apabila seseorang menyemak halaman itu.