Webfejlesztés2026. november 6.5 perc olvasás

Akadálymentes webshop: mit javíts a terméklistától a fizetésig?

Egy webshopnál nem az a kérdés, hogy szép-e a kezdőlap, hanem hogy a vásárló egér nélkül, képernyőolvasóval vagy telefonon, nagyítva is végig tud-e menni a rendelésen. Lépésről lépésre megnézzük, hol akad el leggyakrabban, melyik WCAG-pontot sérti, és hogyan próbálhatod ki negyedóra alatt.

LORZ szakmai szerkesztőségWeb- és szoftverfejlesztési csapat

Kerámia bevásárlókosárhoz vezető enyhe rámpa türkiz vezetősávval; az akadálymentes vásárlást szemléltető illusztráció.

Röviden

Amit ebből a cikkből érdemes hazavinni

A 2022. évi XVII. törvény a webshopoknál külön kiemeli a személyazonosítási, biztonsági és fizetési funkciókat, valamint a termékek akadálymentességéről szóló információt.
A legtöbb akadály a szűrőknél, a termékváltozatoknál, a kosár frissülésénél, a hibaüzeneteknél és a pénztárnál van.
A WCAG 2.2 új pontjai közül a webshopot a kattintási felület mérete, a rögzített elemek takarása és az ismételt adatbevitel érinti leginkább.
A bérelt motor és a fizetési szolgáltató nem veszi le a felelősséget: a megfelelést a szolgáltatónak akkor is biztosítania kell, ha egy részt harmadik fél ad.
Az első kézi próba negyedóra: húzd ki az egeret, és próbálj meg rendelni.

A WebAIM 2026-os felmérése szerint a vásárlási kategóriába tartozó honlapok kezdőlapján átlagosan 71 gépileg kimutatható akadálymentességi hiba volt, 26,6 százalékkal több, mint az összes vizsgált oldal átlaga. A webshopok összetettek, ezért itt a legkönnyebb hibázni, és itt a legnagyobb a tét: ha a látogató nem tud fizetni, elveszett a rendelés. 2025. június 28. óta pedig ez a nem mikrovállalkozásoknak jogszabályi kötelezettség is.

Mit kér a törvény egy webshoptól?

A 2022. évi XVII. törvény általános követelménye, hogy a honlap és a mobilalkalmazás legyen érzékelhető, kezelhető, érthető és stabil (1. melléklet 3.3. pont). Az e-kereskedelemre ezen felül három dolgot emel ki (4.7. pont): az értékesített termékek akadálymentességéről szóló információt, ha azt a felelős gazdasági szereplő megadja, az azonosítási, biztonsági és fizetési funkciók akadálymentességét, valamint az érzékelhető, kezelhető, érthető és stabil azonosítási módszereket, elektronikus aláírásokat és fizetési szolgáltatásokat.

A gyakorlati mérce a WCAG, ezt a WCAG magyarul cikkünk magyarázza el. A következő táblázat ezt fordítja le a vásárlás lépéseire.

A vásárlás lépései: hol akad el a látogató?

Tipikus akadályok a webshopban, lépésenként
Lépés	Tipikus akadály	WCAG-pont	Hogyan próbáld ki?
Süti-sáv, felugró ablak	Billentyűzettel nem érhető el vagy nem zárható be, és eltakarja a fókuszált elemet.	2.1.1, 2.1.2, 2.4.11	Tab billentyűvel: bele tudsz lépni, ki tudsz jönni, és látod, hol jársz?
Menü és keresés	A lenyíló menü csak egérre nyílik ki, a kereső ikonos gombjának nincs neve.	2.1.1, 4.1.2	Billentyűzettel nyisd ki, képernyőolvasóval hallgasd meg a gombot.
Szűrők, rendezés	Az ártartomány csak húzással állítható, a találati szám változását senki nem jelzi.	2.5.7, 4.1.3, 2.1.1	Beállítható az ár gépeléssel is? Bejelenti a felolvasó az eredményt?
Terméklista	A kép a link, de nincs alt szövege, a „Kosárba” gombokat nem lehet megkülönböztetni.	1.1.1, 2.4.4	Felolvasóval: kiderül, melyik termék gombján állsz?
Termékoldal	A méret vagy szín csak színezett kockákkal választható, az elfogyott méretet csak a szín jelzi.	1.4.1, 4.1.2, 1.1.1	Billentyűzettel válassz méretet. Színek nélkül is látszik, mi fogyott el?
Kosár	A frissülést a felolvasó nem jelzi, a mennyiségváltó és a törlés gomb apró.	4.1.3, 2.5.8	Telefonon nyomd meg a gombokat. Legalább 24 × 24 képpont vagy elég térköz van?
Pénztár, űrlap	A mező felirata csak a mezőn belüli minta, a mobilos automatikus kitöltés nem működik.	3.3.2, 1.3.5, 1.3.1	Kattints a mezőre: a felirat megmarad? Felajánlja a böngésző a címet?
Hibakezelés	Csak piros keret jelzi a hibát, az üzenet nem mondja meg, mi a gond.	3.3.1, 3.3.3, 1.4.1	Küldd el hibásan: kiderül, melyik mező rossz, és mit kell javítani?
Cím újra beírása	A számlázási és a szállítási címet külön be kell gépelni.	3.3.7	Van „megegyezik a szállítási címmel” lehetőség?
Rendelés elküldése	Nincs összegző oldal, a gomb azonnal fizetési kötelezettséget indít.	3.3.4	Elküldés előtt ellenőrizhető és javítható minden adat?
Belépés	Tiltott a jelszó beillesztése, a CAPTCHA csak képes feladvány.	3.3.8	Működik a jelszókezelő? Van alternatíva a feladványra?
Fizetési oldal	A külső fizetési felület nem kezelhető billentyűzettel, vagy nem mondja meg, mi a hiba.	2.1.1, 3.3.1, 4.1.2	Próbavásárlás billentyűzettel, a kártyaadatok megadásáig.
Időzítés, akció	A kosárfoglalás vagy a visszaszámláló figyelmeztetés nélkül lejár, a villogó elem nem állítható meg.	2.2.1, 2.2.2	Várj a lejáratig. Kapsz figyelmeztetést, és meghosszabbíthatod?

Negyedórás próba: húzd ki az egeret

Billentyűzet. Húzd ki az egeret, és rendelj egy terméket a Tab, Shift+Tab, Enter, szóköz és nyíl billentyűkkel. Mindenhová eljutsz? Mindig látod, hol állsz?
Nagyítás. Állítsd a böngészőt 200 százalékra, majd 400 százalékra. Olvasható marad a szöveg? Elérhető a pénztár gombja?
Telefon. Rendelj telefonon, álló és fekvő helyzetben. Nem takarja a süti-sáv vagy a csevegőablak a gombot?
Színek. Nézd meg a márkaszínes gombokat és a halvány szövegeket a kontrasztellenőrzővel.
Hibák. Küldd el szándékosan rosszul a pénztár űrlapját, és nézd meg, érthető-e az üzenet.
Képernyőolvasó. Windowson az NVDA ingyenes, a beépített Narrátor és a macOS VoiceOver is jó az első próbához. Csukd be a szemed, és hallgasd meg a kosárba tételt.

Ez nem helyettesít egy auditot, de megmutatja a legsúlyosabb akadályokat. A teljesebb listához használd a letölthető WCAG-ellenőrzőlistát, az alapokat pedig a weboldal-ellenőrzőnk gépileg is megnézi.

Bérelt motor és fizetési szolgáltató: kié a felelősség?

A törvény 3. § (4) bekezdése szerint a megfelelést a szolgáltató akkor is biztosítja, ha a szolgáltatást vagy annak egy részét harmadik fél alvállalkozóként nyújtja. Ezért nem elég azt mondani, hogy a pénztár a platformé. Ráadásul a WebAIM felmérése is nagy különbségeket mutat a platformok között, bár az eredmény erősen függ a használt témától és a kiegészítőktől, nem csak magától a motortól. Ezeket a kérdéseket érdemes írásban feltenni a webshopmotor és a fizetési szolgáltató gazdájának:

Milyen WCAG-verziónak és -szintnek felel meg a pénztár és a fizetési felület, és van-e erről dokumentumotok?
Vizsgálta-e ezt független fél, és mikor?
Mely részeket tudom én módosítani, és melyeket nem?
Mi a hibák bejelentésének módja, és milyen ütemben javítotok?
Melyik témák vagy sablonok készültek akadálymentesen?
Ad-e a szolgáltató szöveget az akadálymentességi tájékoztatómhoz?

Ha fizetési megoldást most választasz, a Barion vagy SimplePay cikkünk szempontjai mellé ezt is vedd fel. Ha a válaszokból az derül ki, hogy a motor korlátai miatt nem érhető el a szükséges szint, érdemes megnézni az egyedi vagy nyílt forrású megoldást, erről a webshop indításáról szóló útmutatónk ír.

Mit javíts először?

Ami megakasztja a vásárlást: billentyűzettel elérhetetlen pénztár, beragadó felugró ablak, felirat nélküli kötelező mező.
Ami minden oldalon ott van: fejléc, menü, lábléc, termékkártya. Egy sablon javítása a teljes webshopot érinti.
Ami gyorsan javítható: oldalnyelv, gombnevek, kontraszt, alt szövegek a legfontosabb termékeknél.
Ami folyamatos munka: termékképek leírása, letölthető dokumentumok, szerkesztői szabályok.

Ne felejtsd el a dokumentumot sem: a törvény az általános feltételekben vagy egyenértékű dokumentumban közzéteendő információkat is előír. Ehhez az akadálymentesítési nyilatkozatról szóló cikkünkben adunk mintát. A felmérést és a kód javítását akadálymentesítési szolgáltatásunkban el is végezzük, és új webshopnál eleve ezekkel a szempontokkal fejlesztünk. Ha mobilalkalmazás is tartozik a webshophoz, a követelmény arra is vonatkozik.

Végig tud menni a vásárló a rendelésen?

A vásárlási folyamatot az egyeztetett körben ellenőrizzük és javítjuk. A képernyőolvasós tesztet külön feladatként kérheted; a módszereket és a javításokat az ajánlatban rögzítjük.

Webshop készítés

Források és módszertan

Szerkesztési elv: A jogszabályt a Nemzeti Jogszabálytárban, a követelményeket a W3C WCAG 2.2 dokumentumaiban ellenőriztük 2026. november 6-án. A tipikus hibák listája a WCAG-feltételekből és saját fejlesztési tapasztalatunkból áll össze, nem konkrét webshopok vizsgálatából, ezért nem állítjuk, hogy egy adott motorra mind igaz. A statisztika a WebAIM 2026-os felméréséből származik. A cikk tájékoztató jellegű, nem jogi tanácsadás.

Kapcsolódó szolgáltatásaink

Webshop készítés

Weboldal készítés

Vissza a magazinhoz