Ano ang sinusuri ng patakarang ito
Tiyaking may alternatibong text o role na none o presentation ang mga <img> element.
Bakit ito mahalaga
Hinihingi ng WCAG 1.1.1 ang text alternative para sa mga makabuluhang larawan. Kung wala ito, hindi malalaman ng gumagamit ng screen reader kung aling produkto ang nasa larawan.
Paano ito ayusin
Sa anumang website
- Magdagdag ng maikli at tiyak na paglalarawan sa alt text ng bawat larawan sa iyong CMS o template.
- Ilarawan ang mahalaga sa isang mamimili: pangalan ng produkto, kulay at ang anggulong ipinapakita (halimbawa 'Canvas tote in olive, front view').
- Dapat may walang lamang alt attribute (alt="") ang mga dekoratibong larawan para laktawan ang mga ito ng mga screen reader.
Sa Shopify
- Sa Shopify admin, buksan ang Products > [product] > Media, i-click ang bawat larawan at punan ang 'Alt text'. Para sa mga larawan ng section, buksan ang Online Store > Themes > Customize at itakda ang alt text ng larawan sa mga setting ng section.
- Ilarawan ang mahalaga sa isang mamimili: pangalan ng produkto, kulay at ang anggulong ipinapakita (halimbawa 'Canvas tote in olive, front view').
- Dapat may walang lamang alt attribute (alt="") ang mga dekoratibong larawan para laktawan ang mga ito ng mga screen reader.
Sa WooCommerce at WordPress
- Sa WordPress, buksan ang Media > Library, piliin ang bawat larawan at punan ang 'Alternative Text'. Ganito rin ang field na ginagamit ng mga larawan sa product gallery.
- Ilarawan ang mahalaga sa isang mamimili: pangalan ng produkto, kulay at ang anggulong ipinapakita (halimbawa 'Canvas tote in olive, front view').
- Dapat may walang lamang alt attribute (alt="") ang mga dekoratibong larawan para laktawan ang mga ito ng mga screen reader.
Paano susuriin ang ayos
- I-scan ulit ang mga apektadong page.
- Gumamit ng screen reader (VoiceOver: Cmd+F5 sa Mac) para marinig kung paano binibigkas ang mga larawan ng produkto.
Paano ito nahahanap ng FixReports
Pinapatakbo ng aming scan ang axe-core rule na image-alt sa isang totoong Chrome browser sa bawat page na tine-test nito, at iniuulat ang bawat bumabagsak na elemento kasama ang page nito, ang markup nito at, kung naaangkop, isang screenshot.
Kinukumpirma ng isang awtomatikong test na naroroon ang partikular na problemang ito. Hindi nito masasabi kung accessible ang natitirang bahagi ng page: may mga hadlang na lumalabas lang kapag may taong sumuri sa page.