# Dapat may alternatibong text ang mga larawan

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

WCAG 1.1.1 Non-text Content · Level A

May mga larawang walang text alternative, kaya hindi alam ng mga gumagamit ng screen reader kung ano ang ipinapakita ng mga ito.

## 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
1. Magdagdag ng maikli at tiyak na paglalarawan sa alt text ng bawat larawan sa iyong CMS o template.
2. Ilarawan ang mahalaga sa isang mamimili: pangalan ng produkto, kulay at ang anggulong ipinapakita (halimbawa 'Canvas tote in olive, front view').
3. Dapat may walang lamang alt attribute (alt="") ang mga dekoratibong larawan para laktawan ang mga ito ng mga screen reader.

### Sa Shopify
1. 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.
2. Ilarawan ang mahalaga sa isang mamimili: pangalan ng produkto, kulay at ang anggulong ipinapakita (halimbawa 'Canvas tote in olive, front view').
3. Dapat may walang lamang alt attribute (alt="") ang mga dekoratibong larawan para laktawan ang mga ito ng mga screen reader.

### Sa WooCommerce at WordPress
1. 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.
2. Ilarawan ang mahalaga sa isang mamimili: pangalan ng produkto, kulay at ang anggulong ipinapakita (halimbawa 'Canvas tote in olive, front view').
3. 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.

## Mga sanggunian
- Dokumentasyon ng axe-core rule (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Understanding WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content