Verificarea accesibilității magazinului online: un test de 30 de minute
· Lectură de 4 min
Puteți verifica singur accesibilitatea magazinului online în aproximativ 30 de minute: un scan automat al paginilor cheie, apoi cinci teste manuale simple, cu tastatura, la zoom 200%, pentru contrast, pentru formulare și pe telefon. Nu veți găsi tot, dar veți afla dacă un cumpărător cu dizabilități poate finaliza o comandă și unde trebuie reparat întâi.
Testul de mai jos nu înlocuiește un audit complet și nu constituie consultanță juridică. Este un punct de plecare practic.
Înainte de a începe (2 minute)
Alegeți paginile prin care trece o comandă:
- prima pagină;
- o categorie cu filtre;
- un produs cu variante (mărime, culoare);
- coșul;
- pagina de comandă, până la alegerea plății;
- autentificarea sau crearea contului.
Notați problemele într-un tabel simplu: pagina, ce nu a mers, cât de grav este (blochează comanda sau doar încurcă).
Pasul 1: scanul automat (5 minute)
Rulați o verificare automată după WCAG 2.2 AA pe paginile alese. Puteți testa o pagină cu verificarea gratuită. Scanul găsește rapid problemele detectabile tehnic:
- imagini de produs fără text alternativ;
- text cu contrast insuficient;
- câmpuri de formular fără etichetă;
- butoane-pictogramă (coș, căutare, favorite) fără nume;
- lipsa limbii paginii.
Testele automate acoperă însă doar o parte din bariere; studiile apreciază diferit cât de mare este această parte. De aceea urmează testele manuale.
Pasul 2: doar cu tastatura (10 minute)
Lăsați mouse-ul deoparte. Folosiți Tab, Shift+Tab, Enter, Space și săgețile.
- Căutați un produs, alegeți o variantă, adăugați-l în coș și mergeți până la alegerea plății.
- Vedeți mereu unde este focusul? Un contur vizibil trebuie să arate elementul activ.
- Rămâneți blocat undeva? De exemplu într-un meniu, într-o fereastră pop-up sau într-un câmp de adresă cu sugestii.
- Se închide banner-ul de cookie-uri din tastatură?
- Focusul ajunge sub un header fix și dispare din vedere?
Dacă nu puteți plasa comanda doar cu tastatura, aveți o barieră majoră: o parte dintre cumpărători nu pot comanda deloc.
Pasul 3: zoom 200% (3 minute)
Măriți pagina la 200% în browser și repetați parcursul pe scurt. Textul trebuie să rămână lizibil, fără să fie tăiat sau suprapus, iar butoanele importante să fie accesibile fără derulare pe orizontală.
Pasul 4: contrastul (3 minute)
Uitați-vă la prețuri, la textul gri despre livrare, la placeholder-ele din formulare și la butoanele pe fundal colorat. Textul normal are nevoie de un raport de contrast de cel puțin 4,5:1. Valorile exacte le puteți măsura cu verificatorul de contrast.
Pasul 5: formularele (4 minute)
În coș și la comandă:
- fiecare câmp are o etichetă vizibilă, nu doar un placeholder care dispare;
- câmpurile obligatorii sunt marcate clar;
- trimiteți formularul gol intenționat: mesajul de eroare spune ce trebuie corectat și apare lângă câmp?
Pasul 6: pe telefon (3 minute)
Deschideți magazinul pe telefon. Butoanele „adaugă în coș”, „plus/minus” cantitate și filtrele trebuie să fie suficient de mari ca să le apăsați fără greșeală; WCAG 2.2 introduce un criteriu pentru dimensiunea minimă a țintelor. Nimic important nu trebuie să fie acoperit de banner-e fixe sau de butoane de chat.
De unde vin problemele
Erorile găsite au de obicei patru surse. Contează să știți care, pentru că de ea depinde cine repară.
| Sursa | Exemple | Cine repară |
|---|---|---|
| Tema | contrast, focus invizibil, meniu doar cu mouse-ul, butoane-pictogramă fără nume | dezvoltatorul temei sau agenția |
| Pluginuri și aplicații | slider, pop-up, banner de cookie-uri, chat, recenzii | furnizorul pluginului sau înlocuirea lui |
| Conținut | imagini de produs fără text alternativ, PDF-uri, titluri sărite | echipa care introduce produsele |
| Cod propriu | configuratoare, filtre personalizate, pasul de livrare | dezvoltatorul magazinului |
Pe WooCommerce, Shopify sau PrestaShop, cea mai mare parte a structurii vine din temă. De aceea reparați la nivel de șablon, nu pagină cu pagină: un șablon de produs corectat elimină eroarea pe toate produsele deodată. Pentru WordPress și WooCommerce există și pluginul nostru, care arată problemele lângă fiecare pagină.
Ce faceți cu rezultatele
- Întâi tot ce oprește comanda: câmpuri fără etichetă, butoane fără nume, capcane de tastatură.
- Apoi navigarea și căutarea.
- Apoi informațiile despre produse: texte alternative, prețuri lizibile, tabele de mărimi.
- Restul: blog, pagini de prezentare.
Lista detaliată a criteriilor este în checklist-ul WCAG 2.2, iar cele mai frecvente erori, cu reparații, în articolul greșeli frecvente de accesibilitate.
Repetați după fiecare actualizare
O temă nouă, un plugin actualizat sau o pagină de campanie pot aduce erori noi. Repetați scanul automat regulat, de exemplu săptămânal, și testul manual după schimbările mari. Dacă magazinul dumneavoastră intră sub Legea nr. 232/2022, pașii juridici sunt descriși în ghidul Legea 232/2022, iar verificarea completă în trei pași în pagina verificare EAA.
Verificarea noastră este o verificare automată, nu un audit complet, și nu constituie consultanță juridică. Pentru o evaluare completă, citiți despre auditul de accesibilitate.
Surse
- WCAG 2.2: W3C
- Testul instrumentelor automate: blogul de accesibilitate GOV.UK
- Studiul despre testarea automată: Deque
- Directiva (UE) 2019/882: EUR-Lex