Greșeli frecvente de accesibilitate în magazinele online și cum le corectați
· Lectură de 5 min
Cele mai frecvente greșeli de accesibilitate în magazinele online sunt contrastul slab al textului, imaginile de produs fără text alternativ, câmpurile de formular fără etichetă, butoanele cu pictograme fără nume, focusul invizibil și ferestrele pop-up care nu pot fi închise cu tastatura. Vestea bună: multe dintre ele se corectează o singură dată, în tema magazinului.
Mai jos sunt zece greșeli pe care le întâlniți des, cu explicația pentru proprietar și indicații pentru corectare. Nu este o listă exhaustivă și nu înlocuiește un audit; este un punct de plecare.
1. Contrast insuficient între text și fundal
Ce vedeți: text gri deschis pe fundal alb, prețuri vechi tăiate abia vizibile, butoane cu text alb pe galben.
De ce contează: clienții cu vedere slabă, cei în vârstă sau cei care se uită la telefon în soare nu pot citi informația. WCAG cere un raport de contrast de cel puțin 4,5:1 pentru text normal (criteriul 1.4.3).
Cum corectați: ajustați culorile în setările temei. O singură schimbare de culoare rezolvă problema pe toate paginile.
2. Imagini de produs fără text alternativ
Ce vedeți: în cod, imaginile nu au atributul alt sau acesta conține numele fișierului.
De ce contează: cititorul de ecran anunță „imagine” sau „IMG_2041.jpg”, iar clientul nevăzător nu știe ce produs vede.
Cum corectați: completați câmpul de text alternativ la imaginile de produs în panoul de administrare (Shopify, WooCommerce și PrestaShop au câmp dedicat). Descrieți ce contează pentru cumpărare: culoare, model, detaliu vizibil. Un scaner vede doar dacă textul lipsește, nu dacă este bun.
3. Câmpuri de formular fără etichetă
Ce vedeți: în formularul de comandă, câmpurile au doar text „placeholder” în interior, care dispare când începeți să scrieți.
De ce contează: cititoarele de ecran nu anunță corect ce trebuie completat, iar clienții care se întorc la un câmp nu mai știu ce conține.
Cum corectați: adăugați etichete vizibile, asociate fiecărui câmp. Este una dintre cele mai importante corecturi, pentru că afectează direct finalizarea comenzii.
4. Butoane cu pictograme fără nume
Ce vedeți: coșul, lupa de căutare, inimioara de favorite, „X”-ul de închidere sunt doar pictograme.
De ce contează: un cititor de ecran anunță doar „buton”, fără să spună ce face.
Cum corectați: adăugați un nume accesibil, de exemplu un text ascuns vizual sau atributul aria-label („Coș de cumpărături”, „Caută”, „Închide”).
5. Focus invizibil
Ce vedeți: când apăsați Tab, nu se vede unde vă aflați pe pagină. Mulți designeri elimină conturul de focus din motive estetice.
De ce contează: clienții care navighează doar cu tastatura se pierd complet.
Cum corectați: restaurați sau desenați un indicator de focus clar, cu contrast suficient.
6. Ferestre pop-up care blochează tastatura
Ce vedeți: fereastra de newsletter sau bannerul de cookie-uri apare peste pagină și nu poate fi închis cu Esc sau cu Tab.
De ce contează: clientul nu poate trece mai departe, iar sesiunea se încheie aici.
Cum corectați: fereastra trebuie să primească focusul la deschidere, să se închidă cu Esc și să returneze focusul pe pagină. WCAG 2.2 cere și ca elementul cu focus să nu fie acoperit de bannere fixe (criteriul 2.4.11).
7. Linkuri cu texte vagi
Ce vedeți: zeci de linkuri „Citește mai mult” sau „Click aici”.
De ce contează: utilizatorii de cititoare de ecran parcurg adesea lista linkurilor din pagină; „Click aici” de douăzeci de ori nu spune nimic.
Cum corectați: scrieți texte care spun unde duce linkul („Detalii despre livrare”).
8. Erori afișate doar prin culoare
Ce vedeți: la trimiterea formularului greșit, câmpul devine roșu, fără niciun mesaj.
De ce contează: persoanele care nu disting culorile și utilizatorii de cititoare de ecran nu află ce au greșit.
Cum corectați: afișați un mesaj text lângă câmp („Introduceți un cod poștal de 6 cifre”).
9. Ținte prea mici pe mobil
Ce vedeți: săgețile de cantitate, bulinele de culoare sau linkurile din subsol sunt minuscule și apropiate.
De ce contează: clienții cu tremor sau cu degete mari apasă greșit. WCAG 2.2 cere ca țintele să aibă cel puțin 24 × 24 pixeli CSS sau spațiu suficient între ele (criteriul 2.5.8).
Cum corectați: măriți zona de apăsare în CSS, chiar dacă pictograma rămâne mică.
10. Limba paginii nedeclarată sau greșită
Ce vedeți: magazinul în română are declarată în cod limba engleză, moștenită din tema originală.
De ce contează: cititorul de ecran pronunță textul românesc cu reguli englezești, aproape de neînțeles.
Cum corectați: setați corect atributul lang al paginii (ro).
Ce găsește un scaner și ce nu
Un scaner automat precum axe-core găsește rapid greșelile 1, 3, 4 și 10, parțial 2, 5 și 9. Greșelile 6, 7 și 8 necesită de cele mai multe ori verificare manuală. Testele automate găsesc doar o parte dintre problemele de accesibilitate, de aceea combinați-le cu o parcurgere a magazinului doar cu tastatura. Lista completă este în checklist-ul WCAG 2.2.
Ce să nu faceți
Nu încercați să acoperiți aceste greșeli cu un widget de accesibilitate. Un widget nu adaugă etichete corecte, nu scrie texte alternative bune și nu repară focusul din temă. Motivele sunt explicate în articolul despre widget-urile de accesibilitate.
Pașii următori
- Aflați dacă Legea nr. 232/2022 vi se aplică.
- Rulați verificarea gratuită pe o pagină de produs și pe pagina de comandă.
- Corectați întâi ce blochează comanda.
Rapoartele noastre explică fiecare problemă în limba română, cu pași pentru Shopify, WooCommerce și PrestaShop. Sunt o verificare automată, nu un audit complet, și nu constituie consultanță juridică.