Checklist WCAG 2.2 AA pentru magazine online: accesibilitate web

Checklist WCAG 2.2 AA pentru magazine Shopify și WooCommerce, pe tipuri de pagini: text alternativ, contrast, etichete, tastatură, focus, ținte și criteriile noi.

Echipa editorială FixReports11 min de lectură

Un checklist WCAG 2.2 AA pentru un magazin online începe cu erorile întâlnite în majoritatea șabloanelor de magazin: text alternativ lipsă, text cu contrast scăzut, linkuri și butoane fără nume accesibil, câmpuri de formular fără etichetă, capcane de tastatură și focus invizibil. WCAG 2.2 adaugă apoi verificări de nivel AA care afectează serios magazinele: elemente focalizate ascunse sub bare fixe (2.4.11), ținte de atingere mai mici de 24 × 24 pixeli CSS (2.5.8) și autentificări care îi obligă pe utilizatori să rețină sau să retranscrie informații (3.3.8). Testați fiecare tip de pagină (pagina principală, colecție, produs, coș) cu tastatura și cu un instrument automat de verificare, apoi corectați șabloanele temei, astfel încât fiecare pagină să preia corectura.

Puncte cheie

  • WCAG 2.2 a devenit Recomandare W3C pe 5 octombrie 2023. Ediția actuală poartă data de 12 decembrie 2024 și a fost aprobată ca ISO/IEC 40500:2025 (se deschide într-o filă nouă).
  • În WebAIM Million 2026 (se deschide într-o filă nouă) (date din februarie 2026), 95,9% dintre paginile principale ale primului milion de site-uri aveau erori WCAG 2 detectabile.
  • Cele mai frecvente șase erori au fost textul cu contrast scăzut (83,9% dintre pagini), textul alternativ lipsă (53,1%), etichetele de formular lipsă (51%), linkurile goale (46,3%), butoanele goale (30,6%) și lipsa limbii paginii (13,5%).
  • Cele 42.516 pagini principale Shopify din acest eșantion aveau în medie 75,1 erori detectate, față de 56,1 pentru toate paginile.
  • WCAG 2.2 adaugă patru criterii AA (2.4.11, 2.5.7, 2.5.8, 3.3.8) și două criterii de nivel A (3.2.6, 3.3.7) și elimină 4.1.1 Parsing.

Ce s-a schimbat în WCAG 2.2 pentru magazinele online?

WCAG 2.2 a adăugat nouă criterii de succes, dintre care șase de nivel A sau AA, și a renunțat la 4.1.1 Parsing, considerat depășit (W3C WAI (se deschide într-o filă nouă)).

Criteriu nouNivelCe înseamnă pentru un magazin
2.4.11 Focus Not Obscured (Minimum)AAUn link sau un buton focalizat nu trebuie să fie ascuns complet de un antet fix, de o bară fixă „Adaugă în coș”, de un banner de cookie-uri sau de un widget de chat
2.5.7 Dragging MovementsAAOrice acțiune care necesită glisare, cum ar fi un cursor pentru intervalul de preț, are nevoie de o alternativă care funcționează cu o singură atingere
2.5.8 Target Size (Minimum)AAȚintele de clic și de atingere au cel puțin 24 × 24 pixeli CSS sau sunt distanțate astfel încât un cerc de 24 px în jurul fiecăreia să nu le atingă pe cele vecine
3.2.6 Consistent HelpALinkurile de ajutor, datele de contact sau chatul apar în aceeași ordine relativă pe fiecare pagină
3.3.7 Redundant EntryANu cereți aceleași informații de două ori în același proces; completați-le automat sau permiteți utilizatorilor să le selecteze
3.3.8 Accessible Authentication (Minimum)AAAutentificarea nu trebuie să depindă de memorare sau de transcriere, cu excepția cazului în care există o alternativă sau un mecanism de ajutor, precum lipirea textului și managerii de parole

Celelalte trei (2.4.12, 2.4.13 și 3.3.9) sunt de nivel AAA. Deoarece 2.2 păstrează toate criteriile din 2.1, cu excepția 4.1.1, conformitatea cu 2.2 AA acoperă și 2.1 AA.

Ce criterii WCAG sunt încălcate cel mai des în șabloanele de magazin?

În fiecare an apar aceleași câteva: contrastul, textul alternativ, etichetele de formular și numele linkurilor și butoanelor, plus problemele de tastatură și de focus, pe care instrumentele automate le detectează doar parțial.

CriteriuCe nu funcționează în magazineCum remediați
1.1.1 Non-text Content (A)Imagini de produs fără text alternativ sau cu numele fișierului ca text alternativ; imagini cu link fără textDescrieți produsul afișat (culoare, stil, unghi). Folosiți alt="" doar pentru elementele decorative. Temele Shopify ar trebui să afișeze image.alt
1.4.3 Contrast (Minimum) (AA)Text principal gri-deschis, text substituent (placeholder), etichete de reducere, text peste imaginile hero4,5:1 pentru textul normal, 3:1 pentru textul mare (aproximativ 24 px sau 18,5 px îngroșat) (W3C (se deschide într-o filă nouă))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Linkuri pentru coș, căutare și rețele sociale formate doar dintr-o pictogramă; săgeți de slider; butoane de închidere „X” fără numeDați fiecărui control un text vizibil sau un aria-label, de exemplu „Coș, 2 produse”
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Câmpuri de newsletter și de căutare doar cu text substituent; câmpuri de cantitate fără etichetăFolosiți un <label for> care corespunde atributului id al câmpului; grupați mostrele de culoare de tip radio într-un fieldset cu legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Meniuri care funcționează doar la hover, mostre construite din elemente div, ferestre pop-up care nu pot fi închise de la tastaturăFolosiți elemente reale button și a; tasta Escape închide suprapunerile și readuce focusul
2.4.7 Focus Visible (AA)outline: none în CSS-ul temeiAdăugați un stil :focus-visible care iese clar în evidență față de fundal

WebAIM a constatat, de asemenea, că una din patru imagini cu link nu avea text alternativ și că 45% dintre imaginile fără text alternativ erau linkuri (WebAIM (se deschide într-o filă nouă)). Într-o grilă de colecție, este vorba de obicei de linkul de pe imaginea produsului.

Ce ar trebui să verificați pe pagina principală?

Verificați antetul, secțiunea hero și tot ce apare sub formă de pop-up, deoarece fiecare vizitator le întâlnește primele.

  • Link de salt. Un link „Salt la conținut” ca prim element care poate primi focus (2.4.1 Bypass Blocks, A).
  • Pictogramele din antet. Pictogramele pentru căutare, cont și coș au nume accesibile, iar numele coșului include numărul de produse.
  • Meniul. Se deschide cu Enter sau Space, subelementele pot fi accesate cu Tab, se închide cu Escape și nu depinde de hover (2.1.1). Cerințele Theme Store (se deschide într-o filă nouă) ale Shopify precizează că toate părțile unei pagini, inclusiv meniurile derulante, trebuie să fie accesibile de la tastatură.
  • Sliderul hero. Dacă slide-urile se mișcă automat mai mult de cinci secunde, oferiți un buton de pauză (2.2.2 Pause, Stop, Hide, A).
  • Bara de anunțuri și textul de pe imagini. Măsurați contrastul; culorile de brand nu ating adesea raportul de 4,5:1.
  • Ferestrele pop-up și bannerele de cookie-uri. Mutați focusul în fereastra pop-up, puneți o etichetă câmpului de e-mail, permiteți închiderea cu Escape și asigurați-vă că un banner fix nu acoperă niciodată complet elementul focalizat (2.4.11). W3C menționează proprietatea CSS scroll-padding ca una dintre metodele prin care elementele focalizate rămân vizibile față de barele fixe (W3C (se deschide într-o filă nouă)).
  • Limba paginii. Elementul html are un atribut lang corect (3.1.1 Language of Page, A).

Ce ar trebui să verificați pe paginile de colecție?

Paginile de colecție au de obicei probleme la cardurile de produs, la filtre și la mostrele de culoare.

  • Cardurile de produs. Linkul de pe imagine are text alternativ sau imaginea este ascunsă pentru tehnologiile asistive, iar linkul titlului poartă numele produsului.
  • Filtrele. Fiecare casetă de bifare are o etichetă, iar fiecare grup are un titlu sau un legend. Panoul de filtre se deschide, funcționează și se închide de la tastatură. Anunțați numărul actualizat de rezultate ca mesaj de stare (4.1.3 Status Messages, AA).
  • Cursoarele de preț. Adăugați câmpuri numerice pentru minim și maxim, astfel încât filtrul să funcționeze fără glisare (2.5.7) și fără mouse (2.1.1).
  • Mostrele de culoare. Fiecare mostră are un nume text, iar starea „stoc epuizat” nu este indicată doar prin culoare (1.4.1 Use of Color, A). Mostrele au cel puțin 24 × 24 pixeli CSS sau respectă regula de distanțare (2.5.8).
  • Sortarea și paginarea. Lista derulantă de sortare are o etichetă; linkurile de pagină și butoanele „Încarcă mai multe” respectă dimensiunea minimă a țintei.

Ce ar trebui să verificați pe paginile de produs?

Pe pagina de produs se ia decizia de cumpărare, așa că testați fiecare control dintre fotografii și butonul de adăugare în coș.

  • Galeria. Fiecare imagine are text alternativ, miniaturile sunt butoane cu nume precum „Afișează imaginea 2”, iar săgețile funcționează fără glisare (2.5.7).
  • Selectoarele de variante. Opțiunile de mărime și culoare se află într-un grup cu etichetă (1.3.1), opțiunea selectată este comunicată cititoarelor de ecran (4.1.2), iar mărimile indisponibile sunt marcate în text.
  • Cantitatea. Câmpul are o etichetă, iar butoanele minus și plus au nume și respectă 2.5.8. Theme Store de la Shopify cere acum ținte de atingere de cel puțin 24 × 24 pixeli CSS, iar bunele practici de accesibilitate (se deschide într-o filă nouă) recomandă 44 × 44 pentru controalele principale.
  • Adăugarea în coș. Mesajele de succes și de eroare sunt anunțate (4.1.3). Plângerea FTC (Comisia Federală pentru Comerț a SUA) împotriva unui furnizor de suprapuneri de accesibilitate (overlay) menționa un site pe care cititorul de ecran nu anunța că un produs a fost adăugat în coș, iar o imagine de evaluare cu 5 stele era citită cu voce tare drept un buton „previous” (anterior) (plângerea FTC (se deschide într-o filă nouă)).
  • Evaluările, filele și acordeoanele. Evaluările au text, de exemplu „4,5 din 5 stele”. Acordeoanele comunică dacă sunt extinse sau restrânse.
  • Bara fixă de adăugare în coș. Nu trebuie să acopere complet elementul focalizat în timp ce un utilizator de tastatură parcurge pagina cu Tab (2.4.11).
  • Videoclipurile. Videoclipurile de produs cu vorbire au subtitrări (1.2.2 Captions (Prerecorded), A).

Ce ar trebui să verificați în coș și la autentificare?

Coșul este ultima pagină pe care majoritatea temelor o controlează complet, așa că testați-l până la butonul de checkout, apoi verificați că autentificarea în cont nu depinde de memorie sau de retranscriere.

  • Panoul coșului. Focusul se mută în panou, rămâne acolo cât timp acesta este deschis și revine la butonul coșului când tasta Escape îl închide, așa cum descriu bunele practici Shopify.
  • Produsele din coș. Fiecare câmp de cantitate are ca etichetă numele produsului, iar fiecare buton de eliminare spune ce elimină, de exemplu „Elimină Cămașă din in, mărimea M”.
  • Câmpurile pentru reduceri și observații. Au etichete, iar erorile sunt descrise în text (3.3.1 Error Identification, A).
  • Butonul de checkout. Poate fi accesat cu Tab, are focus vizibil și nu este ascuns în spatele elementelor fixe.
  • Autentificarea (3.3.8). Conturile de client Shopify folosesc implicit autentificarea fără parolă, cu un cod unic (se deschide într-o filă nouă). W3C precizează că aceste coduri trebuie să poată fi lipite sau completate automat și că blocarea lipirii sau a managerilor de parole încalcă criteriul; CAPTCHA-urile bazate pe recunoașterea obiectelor sunt permise la nivelul AA, dar CAPTCHA-urile de tip puzzle sau cu calcule matematice au nevoie de o altă metodă (W3C (se deschide într-o filă nouă)).

Aici contează diferențele dintre platforme. Pe Shopify, checkout.liquid nu mai este acceptat (se deschide într-o filă nouă) pentru pașii de informații, livrare și plată, așa că cea mai mare parte a marcajului din checkout aparține Shopify, nu temei dumneavoastră; testați aplicațiile și personalizările de checkout pe care le adăugați. Pe WooCommerce, checkoutul este o pagină de pe site-ul dumneavoastră WordPress. WooCommerce afirmă că interfața sa de bază este în mare măsură conformă cu WCAG 2.2 AA (declarație actualizată ultima dată la 1 aprilie 2025), dar tema și pluginurile dumneavoastră pot totuși să strice această conformitate (WooCommerce (se deschide într-o filă nouă)).

Cum ar trebui să testați un magazin pe baza acestui checklist?

Combinați o scanare automată cu o cumpărare făcută doar de la tastatură și cu o scurtă verificare cu un cititor de ecran, pe fiecare tip de pagină.

  1. Scanarea automată. Instrumente precum axe, WAVE sau Lighthouse detectează problemele de contrast, text alternativ, etichete și linkuri goale. Theme Store de la Shopify cere un scor mediu de accesibilitate Lighthouse de cel puțin 90 pe pagina principală, pe paginile de colecție și pe cele de produs. Acesta este un prag minim, nu o dovadă de conformitate: W3C precizează că instrumentele nu pot stabili singure accesibilitatea (se deschide într-o filă nouă).
  2. Cumpărarea doar de la tastatură. Pornind de la pagina principală, ajungeți la un produs prin meniu sau prin căutare, aplicați un filtru, alegeți o variantă, adăugați produsul în coș, deschideți coșul și ajungeți la butonul de checkout fără mouse.
  3. Verificarea punctuală cu un cititor de ecran. Cu VoiceOver sau NVDA, ascultați numele produsului, prețul, starea variantei și confirmarea adăugării în coș.
  4. Retestarea după modificări. Actualizările temei și aplicațiile noi pot anula remedierile.

Scanarea gratuită acoperă pasul 1 pe o pagină principală, o pagină de colecție, una de produs, coșul și o pagină de conținut, într-un Chromium real, cu axe-core. Raportul de remediere a accesibilității testează până la 25 de pagini, adaugă pasul 2 sub forma unui test de cumpărături doar de la tastatură până la butonul de checkout, oferă cod înainte și după remediere și include un checklist pentru pasul 3, care necesită o persoană cu un cititor de ecran. Niciunul dintre ele nu garantează conformitatea cu ADA sau WCAG.

Întrebări frecvente

Este WCAG 2.2 obligatoriu prin lege pentru magazinele online din SUA?

Departamentul de Justiție al SUA nu are o reglementare în baza ADA (legea americană privind persoanele cu dizabilități) care să stabilească un standard web pentru companiile private, iar ghidul său web din 2022 (se deschide într-o filă nouă) indică WCAG ca orientare utilă. Scrisorile de somație (demand letters) invocă de obicei WCAG 2.1 sau 2.2 AA, așa că discutați cu un avocat despre obligațiile dumneavoastră concrete.

Dacă respectați WCAG 2.2 AA, respectați și WCAG 2.1 AA?

Da, în practică. WCAG 2.2 păstrează toate criteriile de succes din WCAG 2.1, cu excepția 4.1.1 Parsing, pe care W3C l-a eliminat ca fiind depășit.

Care este dimensiunea minimă a țintelor în WCAG 2.2?

Conform 2.5.8, țintele trebuie să aibă cel puțin 24 × 24 pixeli CSS, cu excepția cazului în care un cerc de 24 px centrat pe fiecare țintă mai mică nu atinge alte ținte sau cercurile acestora. Sunt exceptate linkurile din interiorul frazelor, controalele de browser fără stil personalizat, prezentările esențiale și țintele pentru care există un control echivalent care respectă cerința.

Un scor de accesibilitate Lighthouse de 100 înseamnă că magazinul meu este conform?

Nu. Instrumentele automate detectează doar o parte dintre erori, iar WebAIM subliniază că lipsa erorilor detectate nu înseamnă că o pagină este accesibilă sau conformă.

Încalcă o autentificare cu parolă criteriul 3.3.8?

Nu, în sine. Un câmp de parolă respectă criteriul atunci când utilizatorii pot lipi text în el și pot folosi un manager de parole; încălcarea apare atunci când lipirea sau completarea automată sunt blocate.

Cât de des ar trebui să retestez magazinul?

Retestați după fiecare actualizare a temei, aplicație nouă sau modificare importantă a șabloanelor și verificați regulat, prin sondaj, traseul de cumpărare, deoarece aplicațiile pot introduce marcaj nou fără avertisment.

Surse

Toate ghidurile