Shoprenter akadálymentesség: WCAG-ellenőrzőlista webshopoknak

Kinek szól ez az útmutató

Shoprenteres webshop-tulajdonosoknak és az őket kiszolgáló ügynökségeknek. A Shoprenter bérelt (SaaS) rendszer: a szerverrel, a biztonsággal és a frissítésekkel nem Önnek kell foglalkoznia, cserébe viszont nem minden kódhoz fér hozzá. Az akadálymentességi hibák javításánál ezért az első kérdés mindig az, hogy hol van a hiba: a tartalomban, a témában vagy egy beépülő alkalmazásban.

Mit ír elő az EAA egy magyar webshopnak

Az európai akadálymentesítési irányelv (EAA, (EU) 2019/882) 2025. június 28. óta alkalmazandó, Magyarországon a 2022. évi XVII. törvény ülteti át. Az e-kereskedelmi szolgáltatások kifejezetten a hatálya alá tartoznak, vagyis egy webshopnak akadálymentesen használhatónak kell lennie: a terméklistától a kosáron át a fizetésig.

A gyakorlatban a mérce a WCAG 2.1 AA szint (az EN 301 549 európai szabványon keresztül). A WCAG 2.2 ehhez néhány új feltételt tesz hozzá, például a minimális érintési célméretet és azt, hogy a fókuszban lévő elemet ne takarja ki egy ragadós fejléc vagy sütisáv. Érdemes már most ehhez igazodni.

Kivétel: a szolgáltatást nyújtó mikrovállalkozásokra (10 főnél kevesebb foglalkoztatott, és legfeljebb 2 millió euró éves árbevétel vagy mérlegfőösszeg) az irányelv nem vonatkozik. Ha ennél nagyobb, vagy a közeljövőben azzá válik, a webshopjának meg kell felelnie. Ez az útmutató technikai segítség, nem jogi tanácsadás; a saját helyzetét egyeztesse jogásszal.

Mit javíthat Ön, és mi a téma vagy a fejlesztő dolga

• Tartalom (Ön javítja az adminban): termékképek és bannerek alternatív szövege, termékleírások címsorai, linkszövegek, táblázatok a leírásokban, feltöltött PDF-ek (méret- és szállítási táblázatok).
• Téma (sablon): ikon gombok (kosár, kereső, kedvencek) neve, fókuszjelzés, menü billentyűzetes kezelése, színek és kontraszt, a termékoldal szerkezete. Ezeket a témabeállításokban, ha a téma engedi, egyedi CSS-sel, vagy egy Shoprenter-partner fejlesztővel lehet javítani.
• Beépülő alkalmazások és külső elemek: sütisáv, chatablak, hírlevél-feliratkozó felugró ablak, értékelő widget, csomagpont-választó térkép. Ezeket a szolgáltatójuk írja; ha hibásak, jelezze nekik, vagy válasszon akadálymentes alternatívát.

A leggyakoribb hibák Shoprenter webshopokon

1. Termékképek és bannerek alt-szöveg nélkül

A képernyőolvasó a képből csak az alternatív szöveget tudja felolvasni. Ha hiányzik, a vak vásárló a termékfotó helyett semmit, vagy egy fájlnevet hall. A főoldali slider bannerei különösen gyakran üresek, pedig sokszor ezeken van az akció lényege.

Javítás: nézze meg, hogy a témája a termékképekhez a termék nevét vagy egy külön megadott szöveget tesz-e alt-szövegként; a vizsgálat (image-alt szabály) pontosan megmutatja, melyik kép üres. A bannereknél az alt-szöveg mondja el azt, ami a képen olvasható (például „Nyári akció: minden szandál -30%”). A tisztán díszítő képeknek üres alt-szöveg kell, hogy a felolvasó átugorja őket.

2. Gyenge színkontraszt: akciós címkék, szürke árak, halvány gombok

A világosszürke régi ár, a narancs alapon fehér „Akció” címke vagy a halvány „Kosárba” gomb gyakran nem éri el a 4,5:1 arányt normál szövegnél (nagy szövegnél 3:1). Ez gyengénlátóknak és erős napfényben telefonon böngészőknek is gond.

Javítás: a téma színbeállításaiban sötétítse a szövegszínt, vagy világosítsa a hátteret. A vizsgálat minden hibás elemnél megadja a mért arányt, így látja, mennyit kell állítani.

3. Ikon gombok név nélkül

A kosár, a kereső, a kedvencek és a közösségi ikonok sokszor csak egy képből vagy ikonfontból állnak, szöveg nélkül. A képernyőolvasó ilyenkor csak annyit mond: „gomb” vagy „link”.

Javítás: az ikonnak kell egy rejtett felirat (például aria-label="Kosár") vagy egy vizuálisan elrejtett szöveg. Ez témaszintű módosítás: ha a témabeállításokban nincs rá lehetőség, fejlesztő kell hozzá. A vizsgálatban button-name és link-name néven jelenik meg.

4. Címke nélküli űrlapmezők: kereső, hírlevél, pénztár

Ha egy mezőnek csak helykitöltő szövege van („E-mail cím”), az gépelés közben eltűnik, és a képernyőolvasók sem mindig olvassák fel. A pénztárban ez a legsúlyosabb, mert ott a vásárlás múlik rajta.

Javítás: minden mezőnek legyen látható, a mezőhöz kötött címkéje. A hibaüzenet mondja meg, mi a baj („Az irányítószám 4 számjegy”), ne csak pirosra színezze a mezőt.

5. Menü és felugró ablakok billentyűzettel

A csak egérrel lenyíló menü, a bezárhatatlan hírlevél-felugró ablak vagy a fókuszt csapdába ejtő sütisáv billentyűzettel használhatatlanná teheti a webshopot. A WCAG 2.2 szerint a fókuszban lévő elemet a ragadós fejléc vagy a sütisáv sem takarhatja ki.

Javítás: próbálja ki Tab-bal: minden menüpont elérhető-e, látszik-e, hol van a fókusz, bezárható-e a felugró ablak Esc-kel. Ami nem működik, az a téma vagy az alkalmazás hibája.

6. Automatikusan forgó slider megállítás nélkül

Az 5 másodpercnél tovább mozgó, automatikusan váltó tartalomhoz megállítási lehetőség kell. Enélkül a lassabban olvasók és a figyelemzavarral élők nem tudják elolvasni az akciót.

Javítás: kapcsolja ki az automatikus lejátszást a téma sliderbeállításaiban, vagy legyen látható szünet gomb.

7. Hiányzó vagy hibás oldalnyelv

Ha a HTML-ben nincs lang="hu" megadva, a képernyőolvasó angol kiejtéssel olvassa fel a magyar szöveget, ami érthetetlen. Többnyelvű boltnál minden nyelvi változatnak a saját nyelvét kell jeleznie.

Javítás: ez témaszintű beállítás; a vizsgálat (html-has-lang, html-lang-valid) jelzi, ha hiányzik.

8. Túl kicsi kattintási célok

A mennyiségváltó plusz és mínusz gombjai, a kis kuka ikon a kosárban vagy a lapozó számai gyakran kisebbek 24×24 pixelnél, amit a WCAG 2.2 minimumként kér.

Javítás: a téma CSS-ében növelje a gombok méretét vagy a köztük lévő távolságot.

Gyors ellenőrzőlista

• Minden termékképnek és bannernek van értelmes alt-szövege, a díszítő képeknek üres.
• A szövegek kontrasztja legalább 4,5:1 (nagy szövegnél 3:1).
• Minden ikon gombnak van felolvasható neve.
• A kereső, a hírlevél és a pénztár minden mezőjének van látható címkéje.
• A menü, a kosár és a pénztár végigjárható csak billentyűzettel, és mindig látszik a fókusz.
• A felugró ablakok Esc-kel bezárhatók, a sütisáv nem ejti csapdába a fókuszt.
• Az automatikus slider megállítható.
• Az oldal nyelve lang="hu".
• A gombok legalább 24×24 pixelesek.

Hogyan ellenőrizze, és hogyan maradjon rendben

Az automatikus vizsgálat a WCAG-hibák jelentős részét megtalálja (hiányzó alt-szöveg, kontraszt, címkék, gombnevek, nyelv), de nem mindet: a billentyűzetes vásárlást és a képernyőolvasós használatot érdemes kézzel is kipróbálni. Egy jó sorrend:

• Futtasson automatikus vizsgálatot a főoldalra, egy kategóriaoldalra, egy termékoldalra és a kosárra.
• Javítsa először a kritikus és súlyos hibákat, mert ezek akadályozzák meg teljesen a vásárlást.
• Menjen végig egyszer a teljes vásárláson csak billentyűzettel (Tab, Shift+Tab, Enter, Szóköz).
• Minden téma- vagy bővítményfrissítés, új banner vagy új alkalmazás után vizsgálja újra az oldalt, mert egy frissítés újra behozhatja a már javított hibákat.