Ang alt text ng larawan ng produkto ang punto kung saan tahimik na nawawala ang spec diagram mo. Nag-load ang photo, nandiyan mismo ang mga sukat sa 48-point na letra, at bawat mambabasa na hindi pares ng mata ng tao — screen reader, search crawler, AI answer engine — walang nakukuha kundi blangko.
May numero ang e-commerce accessibility benchmark ng Baymard Institute kung gaano ito kadalas: 55% ng mga e-commerce site ay hindi gumagamit ng alt text para ipahayag ang core content ng mga informational na larawan, 64% ang nag-eembed ng text mismo sa loob ng larawan, at 9% ang naglalahad ng komplikadong impormasyon bilang larawan lang. Kung furniture, hardware o building materials ang binebenta mo, malamang ikaw ang nasa huling 9% na iyon, dahil JPEG ang size chart mo.
Nasa ibaba ang anim na alt text pattern na kinuha sa totoong listing gallery, kung bakit bumabagsak ang bawat isa, at kung ano ang dapat isulat sa halip.
Ano talaga ang trabaho ng alt text ng larawan ng produkto
Ang alt text ng larawan ng produkto ay ang text alternative na nakalagay sa alt attribute ng isang larawan — ang mga salitang binabasa ng screen reader kapalit ng litrato, at ang tanging paglalarawan ng larawang iyon na abot ng kahit anong sistemang hindi makakita.
Dalawa ang audience nito, at karamihan sa mga nagbebenta ay ang una lang ang inaasikaso:
| Mambabasa | Para saan ang alt text | Ang nakukuha kapag mali ang alt text |
|---|---|---|
| Screen reader user | Ang buong laman ng larawan | Katahimikan, o file name na binabasa titik-titik |
| Search crawler | Konteksto ng larawan at paksa ng page | Walang signal; walang kina-rank-an ang larawan |
| AI answer engine | Ang tanging machine-readable na bersyon ng nasa larawan | Kung ano man ang sabi ng HTML mo, na baka wala |
| Sarili mong PIM o feed export | Mga image caption na ipinapadala sa marketplace at katalogo | Blangkong field na basta na lang pupunan ng channel partner mo |
Diretso ang Web Accessibility Initiative ng W3C tungkol sa ugat ng problema: kapag naka-bake ang text sa loob ng larawan, "magandang design practice na gumamit ng tunay na text na na-style gamit ang CSS sa halip na image-based na presentasyon ng text," at kung talagang hindi maiiwasan ang larawan ng text, kailangang eksaktong pareho ang laman ng text alternative sa nakalimbag sa larawan. Ang sukat na naka-print sa loob ng JPEG ay hindi product data. Litrato iyon ng product data, at walang makakabasa nito kundi mata ng tao.
May legal na gilid na rin ito ngayon sa Europa. Ang European Accessibility Act — Directive (EU) 2019/882 — ay naglilista ng e-commerce services sa Article 2(2)(f) bilang saklaw na serbisyo, at ipinatutupad na ito ng mga Member State mula 28 Hunyo 2025. Exempted ang mga microenterprise na nagbibigay ng serbisyo sa ilalim ng Article 4(5), at sa Article 3(23) nakasaad ang depinisyon ng microenterprise: mas mababa sa 10 tao at taunang turnover o kabuuang balance sheet na hindi hihigit sa EUR 2 milyon. Kung mas malaki ka roon at nagbebenta ka sa mga consumer sa EU, hindi na lang conversion problem ang JPEG na size chart.
Anti-pattern 1: ang file name
alt="IMG_4821.jpg". alt="sofa-3-final-v2-USE-THIS". alt="chair_dim_01".
Ito ang nangyayari kapag ini-export ang mga larawan mula sa isang folder at binu-bulk upload nang walang sumusulat ng caption. Sa page na may nawawalang alt attribute, karamihan sa screen reader ay babalik sa pagbasa ng file name — kaya ang naririnig ng customer ay "I M G underscore four eight two one dot j p g" at aalis na siya.
Hindi mahirap ang ayos. Isang pangungusap lang na naglalarawan sa partikular na produkto sa partikular na shot.
| Sa halip na | Isulat |
|---|---|
alt="IMG_4821.jpg" |
alt="Oak dining table, 180 cm ang haba, tanaw mula sa harap" |
alt="chair_dim_01" |
alt="Dimension diagram ng dining chair: taas ng upuan 46 cm, kabuuang taas 88 cm, lapad ng upuan 45 cm" |
Anti-pattern 2: ang keyword dump
alt="sofa couch settee 3 seater sofa cheap sofa modern sofa living room sofa buy sofa online".
Diretsahang binabanggit ito ng sariling image guidance ng Google: ang alt text ay "ang pinakamahalagang attribute pagdating sa pagbibigay ng karagdagang metadata para sa isang larawan," at ang pagsiksik dito ay "nagreresulta sa masamang karanasan ng user at maaaring ituring na spam ang site mo." Ang halimbawang inilathala ng Google bilang maganda ay apat na salita lang: alt="Dalmatian puppy playing fetch".
May pangalawang gastos na walang bumabanggit. Binabasa ng screen reader ang buong string, sa bilis ng pagbabasa ng user, at walang paraan para lundagin ito. Siyam na paulit-ulit na keyword ay siyam na segundong ingay bago pa nila malaman ang kahit ano tungkol sa produkto mo.
Isulat ang iisang totoong paglalarawan. Nasa loob na roon nang natural, isang beses, ang keyword na talagang gusto mong pag-rank-an.
Anti-pattern 3: ang size chart na larawan lang ang porma
Ito ang pinakamahal, at ito ang default sa furniture, apparel at building materials: buong measurement table na ini-export bilang 1200 px PNG at inihulog sa gallery.
Itinuturing itong complex image ng W3C, at ang sabi nila ay kailangan ng dalawang bahaging text alternative — isang maikling paglalarawan para makilala ang larawan at maituro ang mahabang paglalarawan, at isang mahabang paglalarawan na "textual na representasyon ng mahahalagang impormasyong dala ng larawan," na abot ng lahat sa halip na nakatago.
Sa praktika, "abot ng lahat" na iyon ang buong sagot. Huwag mong subukang isiksik ang labindalawang sukat sa isang alt attribute. Ilathala ang table bilang tunay na HTML table sa page at hayaang ituro iyon ng alt attribute:
alt="Size chart para sa Larsen sofa range; nasa table sa ibaba ang parehong mga sukat"
Tapos ilagay ang table sa ibaba. Wala itong gastos sa iyo — ang naka-markup na table ay ina-index, nasisipi ng AI answer engine, naisasalin, at kasya sa phone, na hindi kayang gawin ng 1200 px PNG na 9-point ang letra. Kaya nga may reference pages tulad ng karaniwang sukat ng sofa na naka-text. Kung gusto mo pa ring nasa larawan mismo ang mga sukat para sa mamimiling ayaw mag-scroll, panatilihin ang dalawa. Hindi naglalaban ang larawan at ang table; ang larawang walang table ang problema.
Anti-pattern 4: inilalarawan ang litrato imbes na ang numero
alt="grey fabric sofa sa maliwanag na sala" — sa isang dimension diagram.
Ito ang pinakatahimik na pagkakamali, dahil teknikal namang tama ang pangungusap. Naglalarawan nga ito ng isang litrato. Hindi lang nito inilalarawan ang litratong ito, na ang buong dahilan ng pag-iral ay dala nito ang limang sukat na wala sa product description.
Dalawang panuntunan na sumasaklaw sa halos lahat ng kaso:
- Kung ang trabaho ng larawan ay magmukhang maganda, ilarawan ang itsura nito.
- Kung ang trabaho ng larawan ay magdala ng impormasyon, ang alt text ang magdadala ng impormasyon — ang mga numero, ang mga yunit, at kung ano ang sinusukat ng bawat numero.
Ang punto kung saan nagkakamali ang mga tao ay kapag pareho ang meron sa iisang produkto. Ang hero shot at ang dimension diagram ng parehong sofa ay nangangailangan ng magkaibang-magkaibang alt text, at ang pagkopya ng alt ng hero papunta sa diagram ay pagtapon sa tanging larawan sa page na sumasagot sa "kasya ba ito."
Anti-pattern 5: isang talata ng alt text sa dekoratibong larawan
Ang background texture, ang divider graphic, ang brand flourish sa itaas ng A+ module. May sumusulat ng alt="magandang natural oak wood grain texture background" para sa lahat ng iyon, at ngayon ay tatlong pangungusap ng tanawin ang naririnig ng screen reader user sa pagitan ng bawat tunay na larawan ng produkto.
Ang dekoratibong larawan ay kumukuha ng walang lamang alt attribute — alt="" — na nagsasabi sa assistive technology na laktawan nang buo ang larawan. Iba iyon sa pag-alis ng attribute, na ginagawang walang label na hindi kilalang bagay ang larawan na ina-anunsyo pa rin. Magkamukha ang blangko at ang nawawala sa CMS mo pero magkasalungat ang kilos.
Isang pagpapasyang dapat sabihin nang malinaw: ang scale-reference shot ay hindi dekoratibo. Ang litrato ng produkto mo katabi ng isang standard na A4 na papel ay may ginagawang informational na trabaho, at dapat sabihin iyon ng alt text nito.
Anti-pattern 6: isang alt text, labindalawang gallery image
Ginagawa itong sobrang dali ng mga bulk-edit tool. Bawat larawan sa listing ay may alt="Larsen 3-seat sofa", kaya labindalawang beses maririnig ng screen reader user ang parehong limang salita at hindi niya malalaman na ang image 4 ay ang dimension diagram, ang image 7 ay ang close-up ng tela, at ang image 9 ay ang packed carton.
Bilangin sila ayon sa function, hindi ayon sa posisyon. Ito ang template na ibinibigay namin sa mga naglilista ng mga produktong may sukat:
| Papel ng larawan | Pattern ng alt text |
|---|---|
| Hero | {product name}, {finish/colour}, {view} |
| Dimension diagram | {product} dimension diagram: {measurement 1}, {measurement 2}, {measurement 3} |
| Scale reference | {product} shown beside {reference object} for scale |
| Detalye / materyal | Close-up of {material/joint/finish} on {product} |
| Nakakabit / nasa lugar | {product} installed in {context}, showing {clearance or fit detail} |
| Packed carton | Packed carton for {product}: {L} x {W} x {H} {unit}, {weight} |
| Size chart | Size chart for {range}; same measurements listed in the table below |
| Dekoratibo | alt="" |
Ang 60-segundong audit
Patakbuhin mo muna ito sa lima mong pinakamabentang listing bago kahit saan pa.
- Walang alt attribute na may file extension (
.jpg,.png,.webp) - Walang dalawang larawan sa iisang listing na magkapareho ang alt text
- Ang alt text ng bawat dimension diagram ay may kahit isang numero at yunit
- Bawat larawan ng size chart ay may kasamang parehong datos bilang HTML table
- Ang mga dekoratibong larawan ay may
alt="", hindi nawawalang attribute at hindi paglalarawan - Walang alt attribute na umuulit ng keyword nang higit sa isang beses
- Nakasulat ang alt text sa wika ng storefront, hindi lang sa Ingles
- Tugma ang mga sukat sa alt text sa mga sukat sa spec table — tingnan mo, madalas hindi tugma
Ang huling iyon ang nakakahuli ng mas maraming mali kaysa sa lahat ng iba pang pinagsama. Kapag naiguhit na ang isang numero sa larawan, nawawalan na ito ng koneksyon sa record na pinagmulan nito, at nananatili itong mali sa bawat spec revision. Lumalabas din ang parehong palya sa mga feed: tingnan ang structured data ng dimensyon ng produkto para sa mga field na naiiwang blangko sa magkaparehong dahilan.
Ano ang kinalaman nito sa pagiging sinisipi
Dalawang dekada nang ini-index ng mga search engine ang alt attribute. Ang nagbago ay kung sino pa ang bumabasa nito. Ang AI answer engine na bumubuo ng sagot tungkol sa "lalim ng sofa para sa maliit na apartment" ay hindi kayang buksan ang JPEG mo. Ang kaya lang niyang pagbatayan ay ang text sa HTML mo — ang product description, ang spec table, at ang mga alt attribute. Lahat ng iginuhit mo sa larawan at wala nang ibang lugar ay hindi niya nakikita.
Iyan ang praktikal na argumento para sa disiplinang nasa itaas, hiwalay sa batas sa accessibility at hiwalay sa mga screen reader: ang mga sukat na inilalathala mo bilang text ang mga sukat na puwede kang masipi.
FAQ
Gaano dapat kahaba ang alt text ng larawan ng produkto?
Sapat na haba para maipahayag ang laman ng larawan, sapat na ikli para marinig sa isang hinga. Para sa hero shot, karaniwang 5 hanggang 12 salita. Para sa dimension diagram, mas mahaba, kasi ang mga numero mismo ang content. Kapag lumampas ka na sa mga dalawang linya, complex image na ang larawang iyon at kailangan ng dalawang bahaging trato — maikling alt kasama ang buong datos na inilathala bilang text sa page.
Nakakatulong ba ang alt text sa SEO?
Oo, pero bilang konteksto, hindi bilang ranking lever na puwede mong hilahin. Inilalarawan ng Google ang alt text bilang pinakamahalagang pinagmumulan ng metadata tungkol sa isang larawan, at tahasang nakalista bilang spam behavior ang pagsiksik ng keyword dito. Isulat mo ito para sa taong hindi nakakakita ng larawan; side effect na lang ng magandang pagkakagawa niyan ang benepisyo sa SEO.
Anong alt text ang dapat kong isulat para sa larawan ng size chart?
Isang maikling pangungusap na nagpapakilala at tumuturo sa tunay na table — halimbawa, "Size chart para sa Larsen sofa range; nasa table sa ibaba ang parehong mga sukat" — tapos ilathala mo talaga ang table sa HTML. Ang pagsubok na isiksik ang buong grid ng sukat sa isang alt attribute ay gumagawa ng bagay na hindi kayang sundan ng kahit sinong screen reader user at hindi kayang i-parse ng kahit anong crawler sa mga row.
Kailangan ba ng alt text ang mga dekoratibong larawan ng produkto?
Kailangan nila ng walang lamang alt attribute, alt="", na hindi pareho sa pag-aalis ng attribute. Ang blangko ay nagsasabi sa assistive technology na laktawan ang larawan. Ang nawawala ay ginagawa itong hindi kilalang bagay na ina-anunsyo pa rin, kadalasan sa pamamagitan ng file name.
Saklaw ba ng European Accessibility Act ang online store ko?
Kung nagbibigay ka ng e-commerce services sa mga consumer sa EU at hindi ka microenterprise, oo — nakalista ang e-commerce services sa Article 2(2)(f) ng Directive (EU) 2019/882, na ipinatutupad mula 28 Hunyo 2025. Ang microenterprise exemption sa Article 4(5) ay sumasaklaw sa mga service provider na wala pang 10 tao at may taunang turnover o kabuuang balance sheet na EUR 2 milyon pababa. Tingnan mo ang sariling national transposition ng bansang kinauukulan para sa detalye, dahil sa antas ng Member State itinatakda ang pagpapatupad at mga parusa.
Bakit naputol ang mga dimension label ko bago pa mabasa ninuman?
Hiwalay na problema iyan pero pareho ang ugat — impormasyong nasa pixel lang nakatira. Kina-crop ng mga marketplace gallery ang larawan sa sarili nilang ratio, at nawawala ang mga label na nakaparada malapit sa gilid; sakop ng aspect ratio ng larawan ng produkto ang mga safe-area rule kada channel.
Mga Sanggunian
- Baymard Institute — Gamitin ang "ALT" Text para Ipahayag ang Core Content ng mga "Informational" na Larawan (55% ng Site, Hindi Ginagawa)
- W3C Web Accessibility Initiative — Images Tutorial: Mga Larawan ng Text
- W3C Web Accessibility Initiative — Images Tutorial: Mga Complex na Larawan
- W3C Web Accessibility Initiative — Images Tutorial: Mga Dekoratibong Larawan
- Google Search Central — Mga best practice sa Google Images, kasama ang gabay sa alt text
- EUR-Lex — Directive (EU) 2019/882 (European Accessibility Act): Article 2(2)(f), Article 3(23), Article 4(5), Article 31
- European Commission — European Accessibility Act: mga saklaw na produkto at serbisyo
Pag-aayos nito nang minsanan, hindi isa-isa kada larawan
Bawat anti-pattern sa itaas ay iisang palya lang na iba-iba ang sombrero: may sukat na iginuhit sa isang litrato at hindi kailanman naisulat sa lugar na kayang basahin ng makina. Hindi mo iyan maaayos sa mas magandang ugali sa alt text lang, dahil ang mga numerong inilalarawan mo ay manu-manong tinipa sa ibabaw ng litrato at nag-aanod na palayo sa spec.
Ang bersyong tumatagal ay ituring ang dimension layer bilang datos, hindi bilang artwork. Sumukat laban sa tunay na gilid ng produkto para ang numero ay talagang nasukat, hindi tantiya; panatilihing buhay at nae-edit ang annotation layer imbes na i-flatten sa JPEG; tapos mag-export ng dalawang bagay mula sa iisang pinagmulan — ang may-label na larawan sa spec size ng bawat channel, at ang listahan ng sukat bilang text na ipapaste mo sa spec table at sa alt attribute. Iyan ang pagkakaiba ng measured annotation software at ng AI image generator na gumagawa ng numerong mukhang totoo katabi ng produkto mo: kaya sabihin ng isa kung ano ang sinukat nito, ang isa ay gumawa-gawa lang. Kung binubuo mo na rin lang muli ang mga listing asset mo, ang spec sheet ang tamang lugar para gawing buhay ang mga numero, dahil iyon ang dokumentong binabasa ng bumibili at ng sarili mong katalogo.