Mit jelent az akadálymentesség?
A digitális akadálymentesítés lényege, hogy az online világ – a weboldalaktól kezdve az alkalmazásokon át az eszközökig – mindenki számára korlátozások nélkül használható legyen. Ez magában foglalja azokat az embereket is, akik valamilyen érzékszervi, kognitív vagy mozgásszervi kihívással élnek. Így mindenki egyenlő eséllyel férhet hozzá az információkhoz és szolgáltatásokhoz az interneten.
Miért fontos az akadálymentesítés?
Gyakori tévhit, hogy az akadálymentesítés csak a fogyatékkal élőket segíti. Valójában azonban, ha már a fejlesztés elejétől fogva figyelünk rá, az minden weboldal-látogató számára előnyökkel jár.
Az akadálymentes weboldalak előnyei
- Jobb felhasználói élmény és magasabb konverzió: Az akadálymentes kialakítás javítja az oldal használhatóságát minden eszközön, így kevesebb látogató fog elakadni vagy távozni. Ez direkt módon növelheti az online vásárlások számát.
- Nagyobb látogatottság és ügyfélhűség: Az akadálymentes oldalak szélesebb közönséget érnek el, beleértve az idősebb vagy speciális igényű felhasználókat is. Az elégedett látogatók gyakrabban visszatérnek, és ajánlják az oldalt másoknak.
- Kiváló SEO eredmények: A keresőmotorok algoritmusai hasonlóan működnek, mint a képernyőolvasók. Egy akadálymentes, jól strukturált weboldal (pl. helyes címsorhasználat, alt szövegek) automatikusan SEO-barátabbá válik, így javul a helyezésed a találati listákon.
- Új piaci lehetőségek: Az akadálymentes tartalom révén új célcsoportokat érhetsz el, és vállalkozásod pozitívabb képet sugározhat, mint egy felelősségteljes és inkluzív márka. Az akadálymentes oldalak általában gyorsabban töltődnek be, és problémamentesebben működnek különböző böngészőkben is.
- Pozitív márkaimázs: Egy könnyen hozzáférhető, gyorsan betöltődő és egyszerűen kezelhető webáruház vonzóbb az új látogatók számára, és növeli a bizalmat a már meglévő ügyfelek körében.
Kire vonatkozik a szabályozás?
A 2025. június 28-tól hatályos EU-s szabályozás (European Accessibility Act – EAA) kötelezővé teszi a digitális akadálymentességet bizonyos szolgáltatások és termékek számára, beleértve az e-kereskedelmi felületeket is.
📌Az EAA azokra a vállalkozásokra vonatkozik, amelyek:
- több mint 10 főt foglalkoztatnak ÉS
- éves árbevételük vagy mérlegfőösszegük meghaladja a 2 millió eurót.
Tehát mindkét feltételnek egyszerre kell teljesülnie a kötelezettséghez. (A 10 fő feletti foglalkoztatotti létszám kötelező feltétel, és emellett az árbevételre vagy a mérlegfőösszegre vonatkozó korlátok közül legalább az egyiknek teljesülnie kell.)
Akkor is érdemes akadálymentesíteni, ha nem vagy kötelezett, mert:
- vásárlói bázist bővíthetsz,
- jobb UX-et nyújtasz,
- felkészülsz a jövőbeli szabályozásokra.
Bevezető
A Shoprenter legújabb design témái a London és Hamburg már az akadálymentességi követelmények figyelembevételével készült. Ezt azt jelenti, hogy London / Hamburg téma használata esetén webáruházad már alapjaiban egy olyan struktúrával, elrendezéssel és beépített technikai funkciókkal rendelkezik, amelyek biztosítják az EU-s akadálymentességi irányelveknek való megfelelést. (pl. billentyűzet-navigáció, képernyőolvasó-kompatibilitás).
Fontos azonban megérteni, hogy önmagában egy akadálymentes téma nem garantálja, hogy a teljes webáruházad is akadálymentes lesz. Az akadálymentesség nemcsak a technikai alapokon múlik, hanem nagyban függ a te tartalmaidtól is – például a feltöltött képek alternatív szövegeitől, a termék leírásokban használt szövegek tagolásától, a linkek megjelenésétől vagy éppen a színek kiválasztásától.
Ezért amikor új tartalmat hozol létre / meglévő tartalmat szerkesztesz vagy testre szabod a témádat, érdemes tudatos design- és tartalmi döntéseket hoznod, amelyek támogatják a webáruházad akadálymentesítését. Ha ezekre odafigyelsz, nemcsak a jogszabályi elvárásoknak teszel eleget, hanem minden vásárlód számára inkluzív és könnyen használható élményt biztosítasz - függetlenül attól, hogy milyen eszközt vagy segédeszközt használnak.
📌Fontos
Bár a London és Hamburg téma akadálymentes, van amire neked is figyelned kell, hogy az egész webshopod akadálymentes legyen. Mivel egy akadálymentes webáruház létrehozása sok szempontot igényel, önmagában ezen irányelvek követése még nem garantálja a teljes akadálymentességet.
További információért látogasd meg a WCAG weboldalát vagy nézd meg a lentebb felsorolt hivatkozásokat.
Szövegek akadálymentesítése
A szövegeknek olvashatónak kell lenniük látássérült vagy nehezen olvasó vásárlók számára is.
Színkontraszt
A színek szerkesztésekor ügyelj arra, hogy minden szöveg megfelelő kontrasztban álljon a háttérrel. Ez különösen fontos színtévesztők vagy gyengén látók esetén. Az online kontrasztarány-ellenőrző eszközök segítségével ellenőrizheted a különböző elemek kontrasztját.
Példák:
Teszteld le az egyedileg létrehozott szövegek kontrasztját, beleértve a törzsszöveget, a címsorokat, a linkeket és az űrlapmezőket. Használd a következő irányelveket:
- A törzsszöveg és a gomb szövegének színe legalább 4,5:1 kontrasztaránnyal rendelkezik a hátteréhez képest.
- A címsorok és egyéb nagy méretű szövegek (24 px és nagyobb betűméret) színe legalább 3:1 kontrasztaránnyal rendelkezik a hátteréhez képest.
- A képeken lévő összes szöveg (például bannerek) színe elegendő kontrasztaránnyal rendelkezik a hátteréhez képest. Nagyobb szöveg (24 px és nagyobb betűméret) esetén a kontraszt legalább 3:1. Kisebb szöveg esetén a kontraszt legalább 4,5:1.
- A nem szöveges elemek (beleértve az űrlap mezők kereteit, ikonokat) színe legalább 3:1 kontrasztaránnyal rendelkezik a hátteréhez képest.
🗒️ Megjegyzés
Fontos tudnod, hogy a Shoprenter London és Hamburg témája már alapértelmezetten úgy készült, hogy a fenti kontrasztarány-követelményeknek gyárilag megfeleljen. Ez azt jelenti, hogy a téma beépített elemeinél (pl. törzsszöveg, gombok, címsorok) mi már gondoskodtunk a helyes kontrasztról.
Sőt, egy speciális technikai megoldásunk (egy színkontraszt-szűrő) automatikusan beállítja a megfelelő szövegszínt, ha megváltoztatod egy elem hátterét. Például, ha a fejlécet feketére állítod, a szűrő automatikusan fehér betűszínt biztosít, hogy a kontraszt mindig optimális legyen.
Emiatt a fent említett kontrasztellenőrzéseket csak az általad hozzáadott egyedi tartalmaknál kell elvégezned, mint például az egyedi bannerek, melyek saját szövegeket tartalmaznak.
Címsorok használata
Amikor címsorokat adsz az oldaladhoz a szövegszerkesztővel, fontos, hogy sorrendben (1-től 6-ig) tartsd őket. A címsorokat a segítő technológiák arra használják, hogy elmagyarázzák, hogyan épül fel az oldal tartalma. Ha átugrasz szinteket – például egy 2-es címsor után egy 4-es következik –, az összezavarhatja a felhasználókat.
Használd a következő iránymutatást:
A címsorokat folyamatos sorrendben használd, és ne hagyj ki szinteket!
Szövegméret és igazítás
Amikor a tipográfiai beállításokat szerkeszted, győződj meg róla, hogy a szöveg elég nagy ahhoz, hogy a vásárlók kényelmesen el tudják olvasni. A szavak és betűk között is egyenletes térköznek kell lennie, hogy könnyen olvasható legyen a szöveg.
Az alábbi példában a szöveg sorkizárt, ami egyenetlen térközt hoz létre a szavak között.
A következő példában a szöveg balra igazított, ami egyenletes térközt hoz létre a szavak között.
A szöveg méretének és igazításának testreszabásakor használd a következő irányelveket:
- A törzsszöveg minimális betűmérete 16 px-nek megfelelő.
- A szöveg igazítása nem sorkizárt.
🗒️ Tipp
Különböző betűtípusok viszonylag kicsinek vagy nagynak tűnhetnek, még akkor is, ha azonos betűmérettel rendelkeznek. Ha az általad használt betűtípus kisebbnek tűnik, mint más betűtípusok 16 px-nél, akkor használj nagyobb méretet.
Hivatkozások (linkek)
A szöveges linkeket aláhúzással vagy más, a sima szövegtől vizuálisan eltérő stílussal kell ellátni. Mivel néhány vásárló számára problémát jelent a színek látása, nem hagyatkozhatsz kizárólag a színváltozásra, hogy megkülönböztesd a linket a normál szövegtől.
A szöveges linkeknek ugyanazon a lapon kell megnyílniuk. Az új lapon vagy ablakban megnyíló linkek zavart okozhatnak, különösen mobilon, ahol a régi ablak nem látható, és nem inkluzívak a vásárlók számára, főleg azoknak, akik képernyőnagyítást használnak, vagy kevésbé jártasak a technológiában.
Használd a következő irányelveket:
- A szöveges linkek aláhúzottak vagy más, nem csak színen alapuló vizuális megkülönböztető jeggyel rendelkeznek, hogy a vásárlók meg tudják különböztetni a linkeket a normál szövegtől.
- A szöveges linkek kattintáskor ugyanazon a lapon nyílnak meg.
Szövegek szerkesztése
A webáruházban megjelenő szövegek az admin felületen keresztül könnyedén szerkeszthetők. Ez nagy rugalmasságot ad, ugyanakkor akadálymentességi szempontból komoly felelősséggel is jár.
Ha a jól strukturált, egyértelmű szövegeket lecseréled olyan kifejezésekre, amelyek nem közérthetők vagy félrevezetőek lehetnek (például: túl technikai, szleng, vagy nem konzisztens megnevezés), azzal akadályt állíthatsz nemcsak a látássérült, hanem a kognitív nehézséggel élő felhasználók számára is.
Használd a következő irányelveket:
- A szövegek legyenek egyszerűek és világosak;
- A gombok, űrlapmezők, linkek, navigációs elemek szövegezése legyen következetes és önmagában is érthető;
- Az utasításokat és címkéket ne kizárólag vizuális kontextusban adjuk meg (pl. ne csak „Kattints ide”, hanem „További információ a szállításról”).
🗒️ Tipp
Ha egy szöveg értelmezéséhez kontextus vagy korábbi vizuális elem szükséges, az gyakran akadályt jelent. Törekedj önállóan értelmezhető megfogalmazásra.
Alternatív szöveg képekhez
Amikor képeket töltesz fel az webáruházadba, fontos, hogy akadálymentessé tedd őket a vak vagy gyengénlátó vásárlók számára. Ezt úgy teheted meg, hogy alternatív szöveget (alt text) adsz hozzá, ami pontosan leírja az adott képet. A képernyőolvasókat használó vásárlók az alt szövegre támaszkodnak, hogy megtudják a képek tartalmát a webshopodban.
Adj meg alternatív szöveget minden termékképhez:
Adj meg alternatív szöveget minden egyéb képhez is amit különböző leírásokban használsz:
🗒️ Tipp
Amikor alternatív szöveget adsz meg egy képhez, az a jó gyakorlat, ha úgy teszel, mintha olyan valakinek írnád le a képet, akinek csukva van a szeme. Segíts neki, hogy elképzelje a képet a fejében.
Videók akadálymentesítése
Amikor videókat teszel fel a webáruházadba, vedd figyelembe a gyengénlátó, a siket vagy nagyothalló, illetve a vesztibuláris rendellenességekre hajlamos vásárlók igényeit is.
Néhány ilyen vásárló képernyőolvasóra támaszkodik, amelyek felolvassák az áruház tartalmát. A videókból és zenékből származó hangok, különösen, ha váratlanok, megnehezíthetik ezt az élményt.
Jó ötlet feliratokat hozzáadni a videókhoz, hogy ők is hozzáférjenek a tartalomhoz.
Ezeket az irányelveket kövesd videók esetén:
- A videók nem indulnak el automatikusan.
- Ha a videók mégis automatikusan indulnak el, akkor a hangjuk némítva van.
- Azoknál a videóknál, amelyek hangot is tartalmaznak, a videó teljesen látható, és nem takarja el más oldalelem. Ez lehetővé teszi a feliratok láthatóságának megőrzését.
- Azoknál a videóknál, amelyek párbeszédet is tartalmaznak, szöveges átiratok is álljanak rendelkezésre. Ezeket vagy az oldalon, vagy egy külön oldalra mutató linken keresztül mellékeld.
Billentyűzetes navigáció
A látás- vagy mozgássérült vásárlók billentyűzettel navigálhatnak és végezhetnek el feladatokat online. Ezek a vásárlók egy vizuális jelzőre támaszkodnak, hogy lássák, éppen hol van a billentyűzet fókuszpontja egy oldalon.
🗒️ Megjegyzés
Ha nem nyúlsz hozzá a téma fájlokhoz, ezzel a ponttal nincs semmi teendőd, mivel a London és Hamburg téma alapértelmezetten biztosítja ezt a funkcionalitást. Ez elsősorban azoknak a fejlesztőknek fontos, akik egyedileg alakítják át a téma fájlokat. Amennyiben te is így teszel, győződj meg róla, hogy nem távolítod el a billentyűzet fókusz stílusát egyetlen interaktív oldalelemről sem. Minden interaktív elemnek, beleértve a linkeket, gombokat és űrlapmezőket, rendelkeznie kell egy egyértelmű vizuális jelzővel, amikor billentyűzet fókuszt kap.
Összegzés
Ezekre a pontokra odafigyelve jelentősen hozzájárulhatsz ahhoz, hogy webáruházad mindenki számára elérhető és könnyen használható legyen.
A Shoprenter által biztosított technikai alapok, mint a London és Hamburg téma (és hamarosan az akadálymentes e-mail sablonok), jelentős segítséget nyújtanak – de a végső eredmény nagyban múlik rajtad is.
Ha figyelsz a feltöltött tartalmakra, a szövegezésre, a képek alternatív szövegére és a navigációs élményre, akkor nemcsak a szabályoknak felelsz meg, hanem javítod a vásárlói élményt és szélesebb közönséget érhetsz el.
További információ a témában
Ha még többet szeretnél tudni a webes akadálymentesítésről, nézd meg a következőket:
- Akadálymentességi követelmények, EU irányelv
- Akadálymentességi követelményeknek való megfelelés, Nemzeti Jogszabálytár, 2022. évi XVII. törvény
- Web Content Accessibility Guidelines (WCAG) 2.2, nemzetközi szabvány
- Akadálymentes megjelenés: A kontraszt, cikk a Kosárérték E-kereskedelmi Magazintól
- Kontraszt ellenőrző, egy online eszköz, amellyel két szín kontrasztarányát tudod megtalálni.
- Alternative Text, egy cikk a Web AIM-től.
- Az automatikus feliratozás használata, egy cikk a YouTube Súgóból.