Libreng tool para sa Accessibility

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.

Libre. Sinusuri ang address na inilagay mo sa loob ng mga 20 segundo.

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 larawang walang alt text: paano ayusin ang mga ito sa Shopify, WooCommerce at anumang site

Mga tanong tungkol sa tool na ito

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

Mga kaugnay na tool

Nagsisimula ang Ulat sa Accessibility ($174, isahang bayad) sa buong libreng scan at nagdadagdag ng mas maraming page, ng pagbabagong gagawin para sa bawat natuklasan, ng PDF at ng mga re-test para matiyak ang mga inayos mo.

Tungkol sa Ulat sa Accessibility