# Libreng Image Alt Text Checker Maglagay ng address ng page para mailista ang bawat larawan dito kasama ang alt text nito, na binasa sa isang totoong browser matapos tumakbo ang mga script. Makita kung aling mga larawan ang walang alt text, alin ang minarkahang dekoratibo, at alin ang may alt text na walang inilalarawan. ## Ano ang sinusuri ng tool na ito - Mga larawang walang alt text: Bawat img element at image button na walang alt attribute at walang ibang accessible name, gaya ng aria-label. - Mga naka-link na larawang nag-iiwan sa link na walang pangalan: Mga logo at icon sa loob ng mga link o button na walang alt text at walang ibang text, kaya “link” lang ang kayang ianunsyo ng screen reader. - Alt text na mukhang file name: Mga value gaya ng IMG_2041.jpg, DSC0042 o mahabang hanay ng mga digit, na awtomatikong inilalagay ng maraming system kapag nag-upload. - Mga pangkalahatang salita: Walang sinasabi kaninuman tungkol sa ipinapakita ng larawan ang alt text na “image”, “photo”, “logo” o “banner” lang. - Paulit-ulit at sobrang text: Mga paglalarawang nagsisimula sa “image of”, inuulit ang link text sa tabi nito, o ginagamit muli sa tatlo o higit pang magkakaibang larawan. - Mga dekoratibo at nakatagong larawan: Hiwalay na nakalista ang mga larawang may alt="" o role="presentation", at ang mga larawang nakatago gamit ang aria-hidden o CSS, para makumpirma mong talagang dekoratibo ang bawat isa. - Preview ng bawat larawan: Isang thumbnail sa tabi ng alt text nito, para mahusgahan mo ang bawat paglalarawan sa loob ng ilang segundo. Ipinapakita ng mga filter ang mga problema lang o ang mga dapat suriin lang. ## Ano ang hindi nito kayang suriin - Sabihin kung tumpak ang alt text. Ang taong nakakakita sa larawan at nakakaalam kung bakit ito nasa page lang ang makakahusga niyon. - Suriin ang mga larawang naka-set bilang CSS background, o ang mga text alternative para sa SVG at canvas na graphic. Mga img element at image button ang inililista nito. - Suriin ang mga larawan sa loob ng mga frame, gaya ng mga naka-embed na video, mapa at ad. - Maglista ng higit sa 150 larawan. Sa napakahahabang page, ipinapakita nito ang unang 150 at sinasabi kung ilan ang lahat. - Mag-test ng ibang page. Sinusuri ng buong libreng scan ang alt text kasama ang iba pang bahagi ng WCAG sa hanggang limang pangunahing page. ## Bakit ito mahalaga Ang alt text ang binabasa ng screen reader kapalit ng isang larawan, at ang ipinapakita ng browser kapag hindi nag-load ang larawan. Hinihingi ng WCAG 2.2 success criterion 1.1.1, sa Level A, ang text alternative para sa bawat larawang may dalang impormasyon, at walang laman na alt para sa mga larawang wala nito. Ang kawalan ng alt text ang ikalawang pinakakaraniwang accessibility failure sa web: nakita ito ng pagsusuri ng WebAIM noong 2026 sa 53.1% ng nangungunang isang milyong home page, at walang alt text ang 16.2% ng lahat ng larawang sinuri nito. Binabasa rin ito ng mga search engine. Sinasabi ng Google na ginagamit nito ang alt text kasama ng computer vision at ng content ng page para maunawaan ang mga larawan, at na gumagana ang alt text ng isang naka-link na larawan na parang anchor text ng link. ## Paano basahin ang mga resulta - Walang alt text: Walang alt attribute at walang ibang pangalan ang larawan. Depende sa software, maaaring basahin ng screen reader ang file name o laktawan ang larawan. - Dekoratibo: alt="" o role="presentation": nilalaktawan ng mga screen reader ang larawan. Tama para sa dekorasyon; mali para sa larawang may dalang impormasyon o siyang tanging laman ng isang link. - May alt text: May paglalarawan ang larawan. Minamarkahan namin ang mga mukhang mali; kailangan pa ring suriin ng tao ang iba para matiyak na tumpak ang mga ito. - May pangalan mula sa ARIA o title: Walang alt attribute, pero may pangalan mula sa aria-label, aria-labelledby o title. Pumapasa ito sa mga awtomatikong test; mas maaasahan pa ring piliin ang alt. - Nakatago: Hindi ipinapakita, o nakatago sa assistive technology gamit ang aria-hidden. Walang dapat ayusin maliban kung dapat makita ang larawan. - Link na walang pangalan: Isang link o button na larawan lang na walang text alternative ang laman. Bagsak ito kahit dekoratibo ang larawan mismo. - Suriin: Alt text na mukhang file name o pangkalahatang salita, nagsisimula sa “image of”, inuulit ang link text, napakahaba, o ginagamit muli sa ilang larawan. ## Paano ayusin ang mga pinakakaraniwang problema - Mga larawan ng produkto at content: Ilarawan kung ano ang hindi makikita ng isang tao kung wala ang larawan, sa konteksto ng page. Para sa produkto: ang item, ang kulay nito at ang anggulong ipinapakita. Para sa larawan sa artikulo: kung ano ang ipinapakita nito na hindi sinasabi ng text. - Mga logo na nagli-link sa home page: Dapat sabihin ng naka-link na larawan kung saan papunta ang link. Para sa logo na nagli-link sa home page, gamitin ang pangalan ng kumpanya, halimbawa alt="Acme home", sa halip na “logo”. - Mga icon sa loob ng mga link at button: Bigyan ang icon ng alt text na nagsasabi ng aksyon, gaya ng “Search” o “Cart”, o bigyan ang link ng aria-label at markahang dekoratibo ang icon gamit ang alt="". - Mga dekoratibong larawan: Gamitin ang alt="" (walang lamang value, hindi nawawalang attribute) para sa mga divider, palamuti sa background at mga larawang inuulit ang text na nasa tabi mismo nila. - Mga file name na inilagay ng iyong platform: Kinokopya ng maraming platform ang file name sa alt field kapag nag-upload. I-edit ito kung saan pinamamahalaan ang larawan: sa Shopify, sa media ng produkto; sa WordPress, sa Alternative Text na field sa Media Library. - Mga chart at infographic: Maglagay ng maikling alt na nagsasabi kung ano ang ipinapakita ng chart, at ilagay ang data o isang buod sa text o sa isang table sa tabi nito. ## Mga madalas itanong ### Ano ang alt text? Nasa alt attribute ng isang larawan ang text alternative nito. Binabasa ito nang malakas ng mga screen reader, at ipinapakita ito ng mga browser kapag hindi maipakita ang larawan. ### Dapat bang may alt text ang bawat larawan? Dapat may alt attribute ang bawat img element. Para sa larawang may dalang impormasyon, inilalarawan nito ang larawan; para sa dekoratibong larawan, dapat itong walang laman (alt="") para laktawan ito ng mga screen reader. ### Gaano kahaba dapat ang alt text? Walang itinakdang limitasyon ang WCAG. Karaniwang maikling parirala o pangungusap ang mahusay na alt text. Kung kailangan ng larawan ng higit pa, ilarawan ito sa text ng page o sa isang caption at panatilihing maikli ang alt. Minamarkahan namin ang alt text na lampas 150 character para muling tingnan. ### Nakakatulong ba sa SEO ang alt text? Sinasabi ng Google na ginagamit nito ang alt text, kasama ng computer vision at ng content ng page, para maunawaan ang mga larawan, at na gumagana ang alt text ng naka-link na larawan na parang anchor text. Nagbababala rin ito na maaaring ituring na spam ang pagsisiksik ng mga keyword sa mga alt attribute. ### Pareho ba ang title attribute at ang alt? Hindi. Lumalabas ang title bilang tooltip kapag itinapat ang mouse at hindi ito maaasahang inaanunsyo ng mga screen reader o available sa mga touch screen. Tinatanggap ito ng mga awtomatikong test bilang pangalan kapag walang alt, pero ang alt ang maaasahang pagpipilian. ### Puwede bang AI ang sumulat ng aking alt text? Kaya nitong gumawa ng draft ng mga paglalarawan, pero hindi nito alam kung bakit nasa iyong page ang larawan. Suriin ang bawat draft: nakadepende ang tamang alt text sa kontekstong ikaw lang ang nakakaalam. ## Mga sanggunian - [W3C: Understanding WCAG 2.2 success criterion 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) - [W3C Images Tutorial: An alt decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) - [W3C Images Tutorial: Functional images](https://www.w3.org/WAI/tutorials/images/functional/) - [Google Search Central: Image SEO best practices](https://developers.google.com/search/docs/appearance/google-images) - [Deque: image-alt rule ng axe-core](https://dequeuniversity.com/rules/axe/4.13/image-alt) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)