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

Kinek szól ez az útmutató

WooCommerce-alapú webshopok tulajdonosainak és fejlesztőinek. A WooCommerce a WordPress bővítménye, ezért a webshop akadálymentessége három rétegen múlik: a WordPress-témán, a WooCommerce kosár- és pénztároldalain, és a telepített bővítményeken. Előnye, hogy mindenhez hozzáfér, így minden hiba javítható; hátránya, hogy minden bővítmény hozhat új hibát.

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.

A három réteg, ahol a hibák születnek

• Téma: menük, fejléc, ikonok, színek, fókuszjelzés, a termékoldal szerkezete. A WordPress.org témakönyvtárában az „accessibility-ready” címkés témák átmentek egy alapvető akadálymentességi ellenőrzésen; ez jó kiindulópont, de nem garancia.
• WooCommerce oldalak: kosár, pénztár, fiók. A WooCommerce blokkos Kosár és Pénztár blokkjai korszerűbbek a régi, rövidkódos (shortcode) változatnál; ha a téma vagy egy bővítmény felülírja őket, a hibák is onnan jönnek.
• Bővítmények: oldalépítők (Elementor és társai), változatválasztó színminták, gyorsnézet (quick view) ablakok, mini kosár oldalsáv, sütikezelő, csomagpont-választó térképek (Foxpost, Packeta, GLS, MPL), értékelések.

A leggyakoribb hibák magyar WooCommerce webshopokon

1. Alt-szöveg: a médiatárban adja meg, ne a fájlnévben bízzon

A WordPress a médiatárban minden képhez ad egy „Alternatív szöveg” mezőt, és a WooCommerce ezt használja a termékképeknél. Ha üres, a termékfotó a képernyőolvasónak néma. Az oldalépítővel beszúrt bannereknél az alt-szöveget sokszor külön, a widget beállításaiban kell megadni.

Javítás: töltse ki az alternatív szöveget a médiatárban a termékképeknél és a bannereknél; a díszítő képeknél hagyja üresen. A vizsgálat (image-alt) megmutatja, melyik maradt ki.

2. Változatválasztó színminták és gombok

A lenyíló listát színmintákra vagy gombokra cserélő bővítmények gyakran szöveg nélküli színes négyzeteket adnak, amelyek billentyűzettel nem választhatók, és nem jelzik a kiválasztott állapotot.

Javítás: válasszon olyan bővítményt, amely a színminta mellé szöveges nevet ad, és billentyűzettel is kezelhető; vagy hagyja meg a WooCommerce alap legördülő listáját, amely akadálymentes.

3. Mini kosár, gyorsnézet és felugró ablakok

A jobb oldalon becsúszó mini kosár vagy a gyorsnézet ablak megnyitásakor a fókusz gyakran a háttérben marad, az ablak nem zárható be Esc-kel, és bezárás után a fókusz elveszik.

Javítás: a megnyíló ablakba kerüljön a fókusz, maradjon benne, amíg nyitva van, Esc-re záródjon, és bezáráskor térjen vissza a megnyitó gombra. Ha a bővítmény ezt nem tudja, cserélje.

4. Kosárba tétel AJAX-szal, visszajelzés nélkül

Az oldalújratöltés nélküli „Kosárba” gomb csak vizuálisan jelzi a sikert (a kosár ikon száma változik). A képernyőolvasós vásárló nem tudja, bekerült-e a termék.

Javítás: a visszajelzés kerüljön állapotüzenetbe (role="status" / aria-live), a kosárikon linkjének neve pedig tartalmazza a darabszámot („Kosár, 2 termék”).

5. Pénztár: címkék, hibák, magyar címformátum

A pénztár mezőit sok téma és pénztároptimalizáló bővítmény átrendezi, összevonja vagy csak helykitöltő szöveget hagy címke helyett. A hibák gyakran csak az oldal tetején jelennek meg, a mező mellett nem.

Javítás: minden mezőnek legyen látható címkéje, a hibaüzenet a mezőnél is jelenjen meg, és legyen konkrét. Az irányítószám, a város és az adószám mezőnél adjon formátummintát.

6. Csomagpont-választó térképek

A futárszolgálatok csomagpont-választói gyakran térképre épülnek, amely egérrel jól használható, billentyűzettel és képernyőolvasóval viszont sokszor nem.

Javítás: nézze meg, hogy a választó ad-e kereshető listát a térkép mellett (irányítószám vagy város alapján). Ha nem, jelezze a szolgáltatónak, és addig kínáljon házhoz szállítást is.

7. Oldalépítők: címsorok és gombok

Az oldalépítők könnyen egymásba ágyaznak linket és gombot, a címsorszintet pedig a betűméret miatt választják (H4 a H2 helyett). A képernyőolvasós felhasználók a címsorokkal navigálnak, így a kusza szerkezet megnehezíti a tájékozódást.

Javítás: a címsorszintek kövessék a tartalom szerkezetét (egy H1, alatta H2-k), a méretet pedig a stílusbeállítás adja.

8. Frissítések, amelyek visszahozzák a hibákat

A WooCommerce, a téma és a bővítmények gyakran frissülnek, és egy frissítés felülírhatja a javításait, vagy új felugró elemet hozhat. Ha a javításokat közvetlenül a téma fájljaiban végezte, a téma frissítése törli őket.

Javítás: a téma módosításait gyermektémában (child theme) végezze, és minden nagyobb frissítés után vizsgálja újra az oldalt.

Gyors ellenőrzőlista

• Minden termékképnek és bannernek van alternatív szövege a médiatárban vagy a widgetben.
• A változatválasztó billentyűzettel is működik, és felolvassa a kiválasztott értéket.
• A mini kosár és a gyorsnézet ablak kezeli a fókuszt, és Esc-kel bezárható.
• A „Kosárba” visszajelzés állapotüzenetként is megjelenik.
• A pénztár mezőinek látható címkéje van, a hibák a mezőnél jelennek meg.
• A csomagpont-választó térkép mellett van kereshető lista.
• A címsorszintek a szerkezetet követik.
• A téma módosításai gyermektémában vannak, frissítés után újravizsgál.

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.