WCAG 2.2 AA checklist para sa mga online store

WCAG 2.2 AA checklist para sa Shopify at WooCommerce store ayon sa uri ng page: alt text, contrast, label, keyboard, focus, target size at bagong 2.2 criteria.

Pangkat Editoryal ng FixReports12 minutong pagbasa

Nagsisimula ang isang WCAG 2.2 AA checklist para sa online store sa mga pagkakamaling makikita sa karamihan ng mga store template: walang alt text, text na mababa ang contrast, mga link at button na walang accessible name, mga form field na walang label, mga keyboard trap at focus na hindi nakikita. Pagkatapos, nagdadagdag ang WCAG 2.2 ng mga AA check na tumatama nang husto sa mga store: mga naka-focus na item na natatakpan ng mga sticky bar (2.4.11), mga tap target na mas maliit sa 24 by 24 CSS pixel (2.5.8) at mga login na nagpapaalala o nagpapaulit ng pag-type sa mga tao (3.3.8). I-test ang bawat uri ng page (home, collection, product, cart) gamit ang keyboard at isang automated checker, saka ayusin ang mga theme template para makuha ng bawat page ang ayos.

Mga pangunahing punto

  • Naging W3C Recommendation ang WCAG 2.2 noong Oktubre 5, 2023. May petsang Disyembre 12, 2024 ang kasalukuyang edisyon, at inaprubahan ito bilang ISO/IEC 40500:2025 (magbubukas sa bagong tab).
  • Sa WebAIM Million 2026 (magbubukas sa bagong tab) (data noong Pebrero 2026), 95.9% ng mga home page ng nangungunang isang milyong website ang may nade-detect na WCAG 2 failure.
  • Ang anim na pinakakaraniwang failure ay text na mababa ang contrast (83.9% ng mga page), walang alt text (53.1%), walang form label (51%), mga walang lamang link (46.3%), mga walang lamang button (30.6%) at walang nakatakdang wika ng page (13.5%).
  • Ang 42,516 na Shopify home page sa sample na iyon ay may average na 75.1 nade-detect na error, kumpara sa 56.1 para sa lahat ng page.
  • Nagdadagdag ang WCAG 2.2 ng apat na AA criteria (2.4.11, 2.5.7, 2.5.8, 3.3.8) at dalawang Level A criteria (3.2.6, 3.3.7), at inaalis nito ang 4.1.1 Parsing.

Ano ang nagbago sa WCAG 2.2 para sa mga online store?

Nagdagdag ang WCAG 2.2 ng siyam na success criteria, anim sa mga ito ay nasa Level A o AA, at inalis nito ang 4.1.1 Parsing dahil luma na ito (W3C WAI (magbubukas sa bagong tab)).

Bagong criterionLevelAno ang ibig sabihin nito sa isang store
2.4.11 Focus Not Obscured (Minimum)AAHindi dapat lubusang matakpan ang naka-focus na link o button ng sticky header, sticky add-to-cart bar, cookie banner o chat widget
2.5.7 Dragging MovementsAAAnumang kailangang i-drag, gaya ng price range slider, ay kailangang may alternatibong gumagana sa isang tap
2.5.8 Target Size (Minimum)AAHindi bababa sa 24 by 24 CSS pixel ang mga click at tap target, o may sapat na pagitan para hindi madikit sa mga katabi nito ang 24 px na bilog sa paligid ng bawat isa
3.2.6 Consistent HelpALumalabas sa parehong relatibong pagkakasunod-sunod sa bawat page ang mga help link, contact details o chat
3.3.7 Redundant EntryAHuwag hingin nang dalawang beses ang parehong impormasyon sa iisang proseso; i-auto-fill ito o hayaang piliin na lang ito ng tao
3.3.8 Accessible Authentication (Minimum)AAHindi dapat nakadepende ang sign-in sa pagsasaulo o pagkopya nang mano-mano, maliban kung may alternatibo o tulong gaya ng paste at mga password manager

Level AAA naman ang tatlong iba pa (2.4.12, 2.4.13 at 3.3.9). Dahil pinapanatili ng 2.2 ang bawat criterion ng 2.1 maliban sa 4.1.1, saklaw na rin ng pagsunod sa 2.2 AA ang 2.1 AA.

Aling mga WCAG criteria ang pinakamadalas pumalya sa mga store template?

Iilan lang ang paulit-ulit na lumalabas taon-taon: contrast, alt text, form label at mga pangalan para sa mga link at button, pati mga problema sa keyboard at focus na bahagya lang nahuhuli ng mga automated tool.

CriterionAno ang pumapalya sa mga storePaano ayusin
1.1.1 Non-text Content (A)Mga larawan ng produkto na walang alt text o pangalan ng file ang alt text; mga naka-link na larawan na walang textIlarawan ang produktong ipinapakita (kulay, istilo, anggulo). Gamitin lang ang alt="" para sa dekorasyon. Dapat maglabas ng image.alt ang mga Shopify theme
1.4.3 Contrast (Minimum) (AA)Light gray na body text, placeholder text, mga sale badge, text sa ibabaw ng mga hero image4.5:1 para sa normal na text, 3:1 para sa malaking text (mga 24 px, o 18.5 px kapag bold) (W3C (magbubukas sa bagong tab))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Mga cart, search at social link na icon lang; mga arrow ng slider; mga "X" na close button na walang pangalanBigyan ang bawat control ng nakikitang text o ng aria-label, gaya ng "Cart, 2 item"
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Mga newsletter at search field na placeholder text lang ang mayroon; mga quantity input na walang labelGumamit ng <label for> na tugma sa id ng input; pagsamahin ang mga radio swatch sa isang fieldset na may legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Mga menu na gumagana lang sa hover, mga swatch na gawa sa mga div, mga popup na hindi maisara gamit ang keyboardGumamit ng totoong button at a element; isinasara ng Escape ang mga overlay at ibinabalik ang focus
2.4.7 Focus Visible (AA)outline: none sa CSS ng themeMagdagdag ng :focus-visible style na kapansin-pansin laban sa background

Natuklasan din ng WebAIM na isa sa bawat apat na naka-link na larawan ang walang alt text, at 45% ng mga larawang walang alt text ay mga link (WebAIM (magbubukas sa bagong tab)). Sa isang collection grid, kadalasang ito ang link ng larawan ng produkto.

Ano ang dapat suriin sa home page?

Suriin ang header, ang hero at anumang lumalabas na popup, dahil ito ang unang nakikita ng bawat bisita.

  • Skip link. Isang "Skip to content" link bilang unang item na puwedeng i-focus (2.4.1 Bypass Blocks, A).
  • Mga icon sa header. May accessible name ang mga icon ng search, account at cart, at kasama sa pangalan ng cart ang bilang ng item.
  • Menu. Bumubukas gamit ang Enter o Space, naaabot ang mga sub-item gamit ang Tab, nagsasara gamit ang Escape, at hindi umaasa sa hover (2.1.1). Ayon sa Theme Store requirements (magbubukas sa bagong tab) ng Shopify, dapat accessible gamit ang keyboard ang lahat ng bahagi ng isang page, kasama ang mga dropdown menu.
  • Hero slider. Kung awtomatikong gumagalaw ang mga slide nang higit sa limang segundo, maglagay ng pause control (2.2.2 Pause, Stop, Hide, A).
  • Announcement bar at text sa mga larawan. Sukatin ang contrast; madalas pumalya sa 4.5:1 ang mga kulay ng brand.
  • Mga popup at cookie banner. Ilipat ang focus sa loob ng popup, lagyan ng label ang email field, hayaang maisara ito gamit ang Escape, at tiyaking hindi kailanman lubusang natatakpan ng sticky banner ang naka-focus na element (2.4.11). Inililista ng W3C ang CSS scroll-padding bilang isang paraan para hindi matakpan ng mga sticky bar ang mga naka-focus na item (W3C (magbubukas sa bagong tab)).
  • Wika ng page. May tamang lang attribute ang html element (3.1.1 Language of Page, A).

Ano ang dapat suriin sa mga collection page?

Kadalasang pumapalya ang mga collection page sa mga product card, filter at swatch.

  • Mga product card. May alt text ang link ng larawan, o nakatago ang larawan sa assistive technology at ang link ng title ang may dala ng pangalan.
  • Mga filter. May label ang bawat checkbox at may heading o legend ang bawat grupo. Nabubuksan, nagagamit at naisasara ang filter drawer gamit ang keyboard. Ianunsiyo ang na-update na bilang ng resulta bilang status message (4.1.3 Status Messages, AA).
  • Mga price slider. Magdagdag ng mga number input para sa minimum at maximum para gumana ang filter nang walang pag-drag (2.5.7) at nang walang mouse (2.1.1).
  • Mga color swatch. May text na pangalan ang bawat swatch, at hindi kulay lang ang nagpapakita ng "sold out" (1.4.1 Use of Color, A). Umaabot ang mga swatch sa 24 by 24 CSS pixel o sumusunod sa spacing rule (2.5.8).
  • Pag-sort at pagination. May label ang sort dropdown; umaabot sa target size ang mga page link at "load more" button.

Ano ang dapat suriin sa mga product page?

Sa product page nagaganap ang desisyong bumili, kaya i-test ang bawat control mula sa mga larawan hanggang sa add-to-cart button.

  • Gallery. May alt text ang bawat larawan, mga button ang mga thumbnail na may pangalan gaya ng "Ipakita ang larawan 2", at gumagana ang mga arrow nang walang pag-drag (2.5.7).
  • Mga variant picker. Nasa isang grupong may label ang mga opsyon sa size at kulay (1.3.1), nalalaman ng mga screen reader kung aling opsyon ang napili (4.1.2), at minamarkahan sa text ang mga size na hindi available.
  • Quantity. May label ang input, at may pangalan ang mga minus at plus button at sumusunod sila sa 2.5.8. Hinihingi na ngayon ng Theme Store ng Shopify ang mga touch target na hindi bababa sa 24 by 24 CSS pixel, at inirerekomenda ng accessibility best practices (magbubukas sa bagong tab) nito ang 44 by 44 para sa mga pangunahing control.
  • Add to cart. Ina-announce ang mga mensahe ng tagumpay at error (4.1.3). Sa reklamo ng FTC laban sa isang overlay vendor, binanggit ang isang site kung saan hindi in-announce ng screen reader na naidagdag na sa cart ang isang item, at ang isang 5-star rating graphic ay binasa nang malakas bilang "previous" na button (FTC complaint (magbubukas sa bagong tab)).
  • Mga rating, tab at accordion. May text ang mga rating gaya ng "4.5 sa 5 bituin". Ipinapaalam ng mga accordion kung nakabukas ang mga ito.
  • Sticky add-to-cart bar. Hindi nito dapat lubusang matakpan ang naka-focus na element habang nagta-Tab pababa sa page ang gumagamit ng keyboard (2.4.11).
  • Video. May caption ang mga product video na may nagsasalita (1.2.2 Captions (Prerecorded), A).

Ano ang dapat suriin sa cart at sa sign-in?

Ang cart ang huling page na lubusang kontrolado ng karamihan ng mga theme, kaya i-test ito hanggang sa checkout button, saka tiyaking hindi nakadepende sa memorya o sa pag-type ulit ang account sign-in.

  • Cart drawer. Lumilipat ang focus sa loob ng drawer, nananatili roon habang nakabukas ito, at bumabalik sa cart button kapag isinara ito gamit ang Escape, gaya ng inilalarawan ng best practices ng Shopify.
  • Mga line item. May label na pangalan ng produkto ang bawat quantity input, at sinasabi ng bawat remove button kung ano ang inaalis nito, gaya ng "Alisin ang Linen shirt, size M".
  • Mga field ng discount at note. May label, at inilalarawan sa text ang mga error (3.3.1 Error Identification, A).
  • Checkout button. Naaabot gamit ang Tab, kitang-kita kapag naka-focus at hindi natatakpan ng mga sticky element.
  • Sign-in (3.3.8). Bilang default, gumagamit ang customer accounts ng Shopify ng passwordless sign-in na may one-time code (magbubukas sa bagong tab). Ayon sa W3C, dapat puwedeng i-paste o i-auto-fill ang mga code, at pumapalya sa criterion ang pagharang sa paste o sa mga password manager; pinapayagan sa AA ang mga object-recognition CAPTCHA, pero kailangan ng ibang paraan para sa mga puzzle o math CAPTCHA (W3C (magbubukas sa bagong tab)).

Mahalaga rito ang pagkakaiba ng mga platform. Sa Shopify, hindi na suportado (magbubukas sa bagong tab) ang checkout.liquid para sa mga hakbang ng information, shipping at payment, kaya sa Shopify galing ang karamihan ng checkout markup at hindi sa theme mo; i-test ang mga checkout app at customization na idinadagdag mo. Sa WooCommerce, isang page sa WordPress site mo ang checkout. Ayon sa WooCommerce, substantially conformant sa WCAG 2.2 AA ang core front end nito (huling na-update ang pahayag noong Abril 1, 2025), pero puwede pa rin itong masira ng theme at mga plugin mo (WooCommerce (magbubukas sa bagong tab)).

Paano mo dapat i-test ang store gamit ang checklist na ito?

Pagsamahin ang isang automated scan, isang pagbili gamit lang ang keyboard at isang maikling check gamit ang screen reader, sa bawat uri ng page.

  1. Automated scan. Nahuhuli ng mga tool gaya ng axe, WAVE o Lighthouse ang contrast, alt text, label at mga walang lamang link. Humihingi ang Theme Store ng Shopify ng average na Lighthouse accessibility score na hindi bababa sa 90 sa mga home, collection at product page. Pinakamababang antas iyon, hindi conformance: ayon sa W3C, hindi kayang tukuyin ng mga tool nang mag-isa ang accessibility (magbubukas sa bagong tab).
  2. Pagbili gamit lang ang keyboard. Mula sa home page, pumunta sa isang produkto sa pamamagitan ng menu o search, mag-filter, pumili ng variant, i-add to cart, buksan ang cart at abutin ang checkout button nang walang mouse.
  3. Spot check gamit ang screen reader. Gamit ang VoiceOver o NVDA, pakinggan ang pangalan ng produkto, presyo, estado ng variant at ang kumpirmasyon ng add-to-cart.
  4. Mag-test ulit pagkatapos ng mga pagbabago. Puwedeng ma-undo ng mga theme update at bagong app ang mga ayos.

Saklaw ng aming libreng scan ang hakbang 1 sa isang home, collection, product, cart at content page sa totoong Chromium gamit ang axe-core. Sinusuri ng Ulat sa Accessibility ang hanggang 25 page, idinadagdag ang hakbang 2 bilang shopping test gamit lang ang keyboard hanggang sa checkout button, nagbibigay ng code bago at pagkatapos ng ayos, at may kasamang checklist para sa hakbang 3, na nangangailangan ng taong gumagamit ng screen reader. Wala sa dalawa ang gumagarantiya ng ADA o WCAG compliance.

Mga madalas itanong

Walang ADA regulation ang US Department of Justice na nagtatakda ng web standard para sa mga pribadong negosyo, at itinuturo ng web guidance nito noong 2022 (magbubukas sa bagong tab) ang WCAG bilang kapaki-pakinabang na gabay. Karaniwang binabanggit ng mga demand letter ang WCAG 2.1 o 2.2 AA, kaya kumonsulta sa isang abogado tungkol sa mga partikular mong obligasyon.

Kapag sumunod sa WCAG 2.2 AA, sumusunod na rin ba sa WCAG 2.1 AA?

Oo, sa praktikal na pananaw. Pinapanatili ng WCAG 2.2 ang lahat ng success criteria ng WCAG 2.1 maliban sa 4.1.1 Parsing, na inalis ng W3C dahil luma na ito.

Ano ang minimum na target size sa WCAG 2.2?

Sa ilalim ng 2.5.8, dapat hindi bababa sa 24 by 24 CSS pixel ang mga target, maliban kung ang 24 px na bilog na nakasentro sa bawat mas maliit na target ay hindi dumidikit sa ibang target o sa mga bilog ng mga ito. Exempted ang mga link sa loob ng mga pangungusap, ang mga browser control na walang custom na style, ang mga presentasyong mahalaga ang anyo, at ang mga target na may katumbas na control na pumapasa.

Kapag 100 ang Lighthouse accessibility score, conformant na ba ang store ko?

Hindi. Ilan lang sa mga failure ang nade-detect ng mga automated tool, at ayon sa WebAIM, kapag walang nade-detect na error, hindi ibig sabihin nito na accessible o conformant na ang page.

Pumapalya ba sa 3.3.8 ang login na may password?

Hindi, kung iyon lang. Pumapasa ang password field kapag puwedeng mag-paste dito at gumamit ng password manager; ang pagharang sa paste o autofill ang pumapalya.

Gaano kadalas ko dapat i-test ulit ang store ko?

Mag-test ulit pagkatapos ng bawat theme update, bagong app o malaking pagbabago sa template, at regular na i-spot-check ang buying path, dahil puwedeng magdagdag ang mga app ng bagong markup nang walang abiso.

Mga sanggunian

Lahat ng gabay