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

Kinek szól ez az útmutató

UNAS-os webshopok tulajdonosainak és fejlesztőinek. Az UNAS bérelt webáruház-rendszer, sok beépített funkcióval (szűrők, termékváltozatok, akciók, hírlevél), és a megjelenést a választott sablon határozza meg. Az akadálymentesség szempontjából ez két dolgot jelent: a tartalmat (képek, leírások, linkek) Ön tartja kézben, a felület viselkedését (menük, gombok, fókusz, színek) viszont nagyrészt a sablon.

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.

Hol keresse a hibát: tartalom, sablon vagy külső modul

• Tartalom: termék- és kategóriaképek alt-szövege, termékleírások szerkezete (címsorok, felsorolások), linkszövegek („Részletek” helyett „A Vászon táska részletei”), feltöltött dokumentumok.
• Sablon: szűrők és rendezés, termékváltozat-választók, lenyíló menük, ikon gombok, fókuszjelzés, színek. Az UNAS sablonjai testreszabhatók; a mélyebb módosításhoz a sablon HTML- és CSS-ismerete, vagy UNAS-ban jártas fejlesztő kell.
• Külső modulok: sütikezelő, chat, értékelések, csomagpont-választó, online fizetés. Ezek a saját szolgáltatójuk felelősségi körébe tartoznak.

A leggyakoribb hibák UNAS webshopokon

1. Szűrők és rendezés, amelyek csak egérrel működnek

A kategóriaoldal oldalsávos szűrői (ár csúszka, méret, szín) sokszor egyedi elemekből készülnek. Ha egy színszűrő csak egy színes négyzet szöveg nélkül, vagy az ár csúszka nem mozgatható nyilakkal, a billentyűzetes és a képernyőolvasós vásárló nem tud szűrni.

Javítás: minden szűrőopciónak legyen szöveges neve (a színminta mellett is: „Piros”), a csúszka mellé kerüljön két beírható mező (ár tól–ig). Próbálja ki Tab-bal és a nyilakkal.

2. Termékváltozat-választó, amely nem mondja meg, mit választott

A méret- vagy színválasztó gombok gyakran csak vizuálisan jelzik a kiválasztott állapotot (keret vagy szín). A képernyőolvasó nem tudja, melyik van kiválasztva, és hogy a „Kosárba” gomb miért inaktív.

Javítás: a választó legyen valódi választógomb- vagy legördülő lista, vagy jelezze az állapotot (aria-pressed / aria-checked). Az elfogyott változat szövegesen is jelezze: „M (elfogyott)”.

3. Hiányzó alt-szöveg a termék- és kategóriaképeken

A termékfotó alt-szövege nélkül a vak vásárló nem tudja, mit néz. A kategóriaképeknél és a főoldali bannereknél ugyanez igaz, ott gyakran az akció szövege is csak a képen szerepel.

Javítás: adjon meg alt-szöveget ott, ahol az admin erre mezőt ad, és ellenőrizze vizsgálattal, hogy a sablon valóban kiírja-e. A képen szereplő szöveg (akció, kuponkód) kerüljön bele az alt-szövegbe is.

4. „Kosárba” visszajelzés, amit senki nem hall

Kosárba tételkor sok sablon csak egy rövid, felugró vagy villanó üzenetet mutat („A termék a kosárba került”). Ha ez nincs állapotüzenetként megjelölve, a képernyőolvasó nem olvassa fel, és a vásárló nem tudja, sikerült-e.

Javítás: az üzenet kerüljön role="status" vagy aria-live="polite" területre, és maradjon látható legalább pár másodpercig.

5. Gyenge kontraszt és csak színnel jelzett információ

Halványszürke árak, színes „Új” és „Akció” címkék, a raktárkészlet csak zöld vagy piros pöttyel jelezve. A színtévesztő vásárló a pöttyből nem tudja meg, van-e készleten a termék.

Javítás: a szöveg kontrasztja legyen legalább 4,5:1, és a színes jelzés mellé mindig kerüljön szöveg is („Készleten”, „Elfogyott”).

6. Pénztár: címkék, hibaüzenetek, időkorlát

A pénztár a legfontosabb oldal. Tipikus hibák: csak helykitöltő szöveg címke helyett, piros keret magyarázat nélkül, a hibás mezőre nem ugrik a fókusz, és a számlázási adatok elvesznek egy hiba után.

Javítás: látható címke minden mezőn, konkrét hibaüzenet a mező mellett, a beírt adatok maradjanak meg. A kötelező mezőket szöveggel is jelölje, ne csak csillaggal.

7. Ikon gombok és közösségi linkek név nélkül

A fejléc ikonjai (kereső, fiók, kosár) és a lábléc közösségi ikonjai gyakran szöveg nélküli linkek. A felolvasó csak annyit mond: „link”.

Javítás: a sablonban kapjanak rejtett feliratot (aria-label vagy vizuálisan elrejtett szöveg).

8. A fókusz nem látszik, vagy kitakarja a ragadós fejléc

Sok sablon eltünteti a fókuszkeretet, mert „csúnya”. Billentyűzettel ilyenkor nem látszik, hol jár a vásárló. A WCAG 2.2 azt is kéri, hogy a görgetéskor fent maradó fejléc ne takarja ki a fókuszban lévő elemet.

Javítás: a sablon CSS-ében legyen jól látható fókuszkeret (:focus-visible), és a ragadós fejléc alatt maradjon görgetési ráhagyás (scroll-margin).

Gyors ellenőrzőlista

• A szűrők és a rendezés billentyűzettel is működnek, a színminták mellett szöveg is van.
• A termékváltozat-választó felolvassa, mi van kiválasztva, és mi fogyott el.
• A termék-, kategória- és bannerképeknek van alt-szövege.
• A „Kosárba” visszajelzés állapotüzenetként is megjelenik.
• A készlet és az akció nem csak színnel van jelezve.
• A pénztár minden mezőjének van látható címkéje, a hibaüzenetek konkrétak.
• Minden ikon gombnak van neve.
• A fókusz mindig látszik, és nem takarja ki a fejléc.

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.