Akadálymentes webshop: ellenőrzőlista a vásárlás lépéseihez

Miért a vásárlási folyamatot kell nézni

Egy webshop akkor akadálymentes, ha valaki billentyűzettel, képernyőolvasóval vagy nagyítással is végig tud menni a teljes vásárláson, a kereséstől a fizetésig. Ha egyetlen lépésnél elakad (egy címke nélküli mező a pénztárban, egy csak egérrel kezelhető méretválasztó), a vásárlás meghiúsul, akármilyen jó a főoldal.

A 2022. évi XVII. törvény az e-kereskedelemre külön is kimondja, hogy az azonosítás, a biztonsági lépések és a fizetés is legyen érzékelhető, kezelhető, érthető és robusztus, és ha a gyártó ad információt egy termék akadálymentességéről, azt a webshopnak is közölnie kell. A gyakorlati mérce a WCAG 2.1 AA szint. Hogy kire vonatkozik a törvény, azt a törvény összefoglalója írja le.

Ez az ellenőrzőlista platformfüggetlen. Shoprenterhez, UNAS-hoz és WooCommerce-hez platformra szabott útmutató is van, a lap alján találja.

1. Fejléc, menü és navigáció

• Az első Tab-lenyomásra jelenjen meg egy „Ugrás a tartalomra” link, hogy ne kelljen minden oldalon végiglépkedni a menün.
• A lenyíló menü billentyűzettel is nyíljon (Enter vagy Szóköz), és Esc-re záródjon.
• A fókusz mindig látsszon. Ha a téma kikapcsolja a böngésző fókuszkeretét, legyen helyette jól látható saját keret.
• A ragadós fejléc ne takarja ki a fókuszban lévő elemet (WCAG 2.2, 2.4.11).
• Az oldal nyelve legyen megadva (lang="hu").

2. Kereső és szűrők

• A keresőmezőnek legyen címkéje, ne csak helykitöltő szövege.
• Az automatikus javaslatok legyenek elérhetők a nyilakkal, és a felolvasó jelezze, hány javaslat van.
• A szűrők (ár, méret, márka) valódi jelölőnégyzetek vagy gombok legyenek, felolvasható névvel.
• Szűrés vagy rendezés után a találatok száma jelenjen meg szövegesen, és a felolvasó ezt is olvassa fel (WCAG 4.1.3).

3. Terméklista

• Egy termékkártyán egy link vigyen a termékhez, ne három külön (kép, név, „Részletek”), mert a felolvasó mind a hármat külön felsorolja.
• Az akciós és az eredeti ár ne csak áthúzással különbözzön. A felolvasó az áthúzást nem mondja ki, ezért legyen rejtett szöveg is („Eredeti ár”, „Akciós ár”).
• A „Kosárba” gombok neve legyen egyértelmű, például „Kosárba: fekete bőrcipő, 42”.
• A „Nincs készleten” állapot ne csak szürkítéssel jelenjen meg, hanem szöveggel is.

4. Termékoldal

• Minden termékfotónak legyen alt-szövege, a galéria lapozó gombjainak pedig neve („Következő kép”).
• A szín- és méretválasztó ne csak színnel működjön: minden színmintának legyen neve, amelyet a felolvasó kimond.
• A mérettáblázat valódi táblázat legyen fejléccel, ne kép.
• A mennyiségváltó plusz és mínusz gombja legyen legalább 24×24 pixeles (WCAG 2.2, 2.5.8), és legyen neve.
• A hosszabb termékleírás használjon címsorokat, hogy át lehessen ugrani a részeit.
• Ha a gyártó ad információt a termék akadálymentességéről (például egy elektronikai eszköznél), azt is tüntesse fel.

5. Kosár

• Ha a mennyiség változik, vagy egy termék törlődik, a felolvasó jelezze a változást és az új végösszeget.
• A törlés gombnak legyen pontos neve („Fekete bőrcipő törlése a kosárból”), ne csak egy kuka ikon.
• Ha a kosár vagy a munkamenet lejár, előtte figyelmeztessen, és lehessen meghosszabbítani (WCAG 2.2.1).
• A kuponmező hibaüzenete szövegesen mondja meg, mi a gond.

6. Regisztráció és belépés

• Lehessen vendégként is vásárolni, vagy legyen egyszerű a regisztráció.
• A jelszómezőbe lehessen beilleszteni a jelszót, hogy jelszókezelővel is működjön (WCAG 2.2, 3.3.8).
• Ha CAPTCHA-t használ, ne csak képes vagy rejtvényszerű feladat legyen: legyen akadálymentes alternatíva, vagy olyan megoldás, amely nem kér feladatot.
• A jelszó megjelenítése gombnak legyen neve.

7. Pénztár

Ez a legfontosabb rész, itt múlik a rendelés.

• Minden mezőnek legyen látható, a mezőhöz kötött címkéje. A helykitöltő szöveg nem címke.
• A név, a cím, az e-mail és a telefonszám mezője kapja meg a megfelelő autocomplete attribútumot, hogy a böngésző ki tudja tölteni (WCAG 1.3.5).
• A kötelező mezőket ne csak csillag vagy piros szín jelölje, legyen szöveges jelzés is.
• A hibaüzenet mondja meg, mi a baj és hogyan javítható („Az irányítószám 4 számjegy”), és a fókusz ugorjon az első hibás mezőre, vagy legyen az űrlap tetején hibaösszesítő.
• Ne kérje kétszer ugyanazt: a szállítási cím legyen átvehető számlázási címként egy jelölőnégyzettel (WCAG 2.2, 3.3.7).
• A csomagpont-választó térkép mellett legyen listás vagy keresős választás is, mert a térkép billentyűzettel és felolvasóval nehezen használható.
• A rendelés leadása előtt legyen összesítő, ahol a vásárló ellenőrizheti és módosíthatja az adatokat (WCAG 3.3.4).

8. Fizetés

• A külső fizetési oldal (például Barion, SimplePay vagy Stripe) is része a vásárlásnak. Próbálja ki billentyűzettel; ha elakad, jelezze a szolgáltatónak, és írja bele a tájékoztatóba.
• Ha a fizetésre időkorlát van, a vásárló tudjon róla előre.
• Ha lehet, legyen alternatív fizetési mód (átutalás, utánvét) arra az esetre, ha az egyik nem használható.

9. Visszaigazolás, e-mailek, elállás

• A visszaigazoló oldal címsorral mondja meg, hogy a rendelés sikeres, és mi a rendelésszám.
• A visszaigazoló e-mail ne csak képből álljon, és a képeinek legyen alt-szövege.
• Ha PDF-et küld (garanciajegy, használati útmutató), az címkézett PDF legyen, ne szkennelt kép.
• Az uniós fogyasztóvédelmi szabályok szerint 2026. június 19. óta az online kötött szerződéseknél elállási funkciót is biztosítani kell. Ez a gomb is legyen elérhető billentyűzettel, és legyen felolvasható neve.

10. Sütisáv, chat és felugró ablakok

• A sütisáv gombjai legyenek elérhetők billentyűzettel, és a sáv ne ejtse csapdába a fókuszt.
• A hírlevél-felugró ablak záródjon Esc-re, és a bezáró gombnak legyen neve.
• A chatablak és az értékelő widget ne takarja ki a pénztár gombjait mobilon vagy nagyításnál.
• Az automatikusan forgó slider legyen megállítható (WCAG 2.2.2).

Gyors ellenőrzőlista

• A teljes vásárlás végigjárható csak billentyűzettel, és mindig látszik a fókusz.
• Minden termékképnek van értelmes alt-szövege, a díszítő képeknek üres.
• Minden gombnak és ikonnak van felolvasható neve.
• A kereső, a szűrők és a pénztár minden mezőjének van címkéje.
• A hibaüzenetek szövegesen mondják meg, mi a hiba.
• A szöveg kontrasztja legalább 4,5:1, nagy szövegnél 3:1.
• A gombok legalább 24×24 pixelesek.
• Az oldal 200%-os nagyításnál és 320 pixel széles nézetben is használható, vízszintes görgetés nélkül.
• A fizetési oldal és az elállási funkció is elérhető billentyűzettel.
• Van közzétett akadálymentességi tájékoztató: mit tartalmazzon.

Platformra szabott útmutatók

• Shoprenter akadálymentesség
• UNAS akadálymentesség
• WooCommerce akadálymentesség

Az automatikus vizsgálat a fenti hibák nagy részét megtalálja, de nem mindet. A billentyűzetes vásárlást és a felolvasós használatot érdemes kézzel is kipróbálni: így végezheti el 30 perc alatt.

Ez az ellenőrzőlista technikai segítség, nem jogi tanácsadás.