Valahányszor egy fogyatékossággal élő vásárló nem tud végigmenni a fizetési folyamaton, nem tudja kitölteni a termékszűrőt, vagy nem tudja elolvasni a termékleírásokat, egy eladást veszítettél. Az Egyesült Államokban a felnőttek több mint negyede él valamilyen fogyatékossággal. Ez nem egy kis piaci szegmens. Ez a te piacod.
A weboldal-akadálymentesség nem csak etikai kérdés. Jogi követelmény is. Az amerikai fogyatékossággal élők védelméről szóló törvény (Americans with Disabilities Act, ADA) előírja, hogy a vállalkozások szolgáltatásai elérhetők legyenek a fogyatékossággal élők számára. Ez a webshopokra is vonatkozik. Évente több ezer weboldal kap jogi felszólítást akadálymentességi jogsértések miatt, és a webshopok a leggyakoribb célpontok. Ez a cikk bemutatja, mit jelent az akadálymentesség, miért fontos a webshopodnak, mit ír elő a törvény, és hogyan valósíthatod meg drága, speciális eszközök nélkül.
Mi az a weboldal-akadálymentesség?
A weboldal-akadálymentesség azt jelenti, hogy az oldalad mindenki számára használható, a fogyatékossággal élőknek is. Ide tartoznak a vakok vagy gyengén látók, a siketek vagy nagyothallók, azok, akiknek mozgáskorlátozottságuk miatt nehéz az egér használata, a kognitív vagy tanulási nehézséggel élők, és mindenki, akinek más állapota befolyásolja, hogyan használja a webet.
Az akadálymentes weboldalak működnek a kisegítő technológiákkal, például képernyőolvasókkal (olyan szoftver, amely felolvassa a szöveget), csak billentyűzettel történő navigációval (azoknak, akik nem tudnak egeret használni) és nagyító eszközökkel. Az akadálymentes oldal emellett világos nyelvet, elegendő színkontrasztot, megfelelő címsorszerkezetet és olyan űrlapcímkéket használ, amelyeket a képernyőolvasók megértenek.
Az alapelv: a vásárlóid el tudják végezni, amiért jöttek. Böngészniük, szűrniük, leírásokat olvasniuk, kosárba tenniük és befejezniük a fizetést kell tudniuk, bármilyen kisegítő technológiát vagy módosítást használnak.
Mi az ADA, és miért vonatkozik a webshopodra?
Az 1990-ben elfogadott Americans with Disabilities Act (ADA) amerikai szövetségi törvény, amely tiltja a fogyatékossággal élők megkülönböztetését. Az ADA III. címe előírja, hogy minden, a nyilvánosság előtt nyitott vállalkozás egyenlő hozzáférést biztosítson a fogyatékossággal élőknek. Ez a weboldalakat és online szolgáltatásokat is magában foglalja. A törvény nem tesz kivételt a kisvállalkozásokra vagy az online kereskedőkre.
A webshopod az ADA szerint nyilvános szolgáltatóhelynek számít. Ez azt jelenti, hogy a weboldalad legyen akadálymentes. Nem érvelhetsz azzal, hogy a webshopod túl kicsi, túl új, vagy hogy az akadálymentesítés túl drága. A törvény érvényes. A bíróságok következetesen kimondták, hogy az ADA a weboldalakra is vonatkozik, és az amerikai Igazságügyi Minisztérium kijelentette, hogy a weboldal-akadálymentesség polgárjogi kérdés, nem opcionális.
WCAG 2.1 AA szint: az akadálymentességi szabvány
A jogi ügyekben és a megfelelési követelményekben használt webes akadálymentességi szabvány a WCAG (Web Content Accessibility Guidelines) 2.1 AA szint. A WCAG-ot a World Wide Web Consortium (W3C) gondozza, egy nonprofit szervezet, amely a web szabványait határozza meg.
A WCAG 2.1 AA szint négy fő területen tartalmaz irányelveket:
Érzékelhető: a felhasználók látják vagy hallják a tartalmadat
A tartalmadat úgy kell bemutatni, hogy a vásárlók érzékelni tudják. Ez azt jelenti, hogy szöveges leírást (alt szöveget) adsz minden termékképhez, feliratot a videókhoz, gondoskodsz róla, hogy a szövegek és gombok kontrasztja elegendő legyen (a normál szövegnél legalább 4,5:1 arány), és kerülöd a másodpercenként háromnál többször villogó tartalmat, amely rohamot válthat ki.
Működtethető: a felhasználók el tudnak igazodni és használni tudják a webshopot
A felhasználóknak képesnek kell lenniük arra, hogy csak billentyűzettel navigáljanak a webshopodban (egér nélkül). A linkeknek és gomboknak billentyűzettel elérhetőnek kell lenniük. Az űrlapoknak világos címkékkel kell rendelkezniük, amelyeket a képernyőolvasók megértenek. A webshopod ne zárja végtelen hurokba a billentyűzetet használókat, és ne követeljen időzített műveleteket, amelyeket a felhasználók nem tudnak módosítani. A menüpontoknak és az űrlapmezőknek könnyen megtalálhatónak és használhatónak kell lenniük.
Érthető: a felhasználók megértik, mit mond és mit csinál a webshop
A webshopodnak könnyen érthetőnek kell lennie. Használj világos nyelvet és rövid mondatokat. Magyarázd el a szakszavakat az első használatnál. Rendezd logikusan az oldalaidat megfelelő címsorszerkezettel (oldalanként egy H1, utána sorrendben H2-k, H3-ak). Magyarázd el világosan az űrlap-ellenőrzési hibákat. Legyen egységes az oldalad, hogy a felhasználók előre tudják, hogyan működik a navigáció és az interakció.
Robusztus: a webshop működik a kisegítő technológiákkal
A kódodat helyesen kell megírni, hogy a képernyőolvasók és más kisegítő eszközök megértsék. Ez azt jelenti, hogy megfelelő szemantikus HTML-jelölést használsz (a gombok valódi button elemek, nem gombnak kinéző div-ek), megfelelő címsorhierarchiát, és ARIA-címkéket ott, ahol az összetett interaktív elemeket le kell írni. A webshopodnak működnie kell különböző böngészőkön és eszközökön.
Gyakori akadálymentességi akadályok a webshopokban
Ezek a leggyakoribb akadálymentességi problémák a webshopokban:
Hiányzó vagy gyenge alt szöveg a termékképeknél
Sok webshopnak nincs alt szövege a termékképeihez, vagy homályos, például "kép" vagy "termékfotó". A képernyőolvasót használók nem látják a képeket. Az alt szövegnek le kell írnia, mi fontos a képen. Egy piros pólónál jó alt szöveg: "piros, kerek nyakú pamutpóló elöl zsebbel", nem pedig "póló" vagy "piros póló kép". A termékváltozat-választónál az alt szöveg világosan leírhatja a színmintát vagy a stílusopciót. Minden termékképnek pontos, leíró alt szövegre van szüksége.
Megfelelő címkék nélküli űrlapok
Ha egy űrlapmezőhöz (e-mail-mező, telefonmező, címmező) nincs társított címke, vagy a címke csak vizuális helykitöltő szöveg, a képernyőolvasót használók nem tudják, mit írjanak be. A megfelelően címkézett űrlapokon láthatatlan, de elérhető címkeelemek vannak, amelyek megmondják a képernyőolvasóknak, mire való az egyes mező.
Nincs billentyűzetes navigáció
Egyes oldalakon egér kell a navigáláshoz vagy a vásárlás befejezéséhez. A csak billentyűzetet használók nem tudják használni a legördülő menüket, nem látják, melyik elemen van a fókusz, vagy nem tudnak logikus sorrendben végigtabolni az űrlapmezőkön. Minden funkciónak elérhetőnek kell lennie billentyűzettel. A billentyűzetfókusznak látszania kell az oldalon, hogy a felhasználók tudják, hol vannak.
Gyenge színkontraszt
A fehér alapon világosszürke szöveg lehet, hogy neked olvasható. A gyengén látóknak nem az. A WCAG AA szint legalább 4,5:1 kontrasztarányt követel a normál szövegnél. A gomboknak, linkeknek és minden olvasandó szövegnek meg kell felelnie ennek a szabványnak. Ellenőrizd a kontrasztot ingyenes kontrasztellenőrző eszközzel.
Zavaros címsorszerkezet
A képernyőolvasót használók gyakran címsorról címsorra ugorva navigálnak az oldalakon. Ha az oldalad H1-ről H3-ra, majd H2-re ugrik, vagy a címsorokat csak a megjelenés miatt használja, a képernyőolvasók zavaros élményt adnak. Használd a címsorokat logikus sorrendben az oldalad szerkezetéhez. Oldalanként egy H1, utána H2-k a fő szakaszokhoz, H3-ak az alszakaszokhoz. Soha ne hagyj ki címsorszintet.
Gombok és linkek egyértelmű cél nélkül
Az a gomb, amelyen az áll, hogy "kattints ide", semmit sem mond a képernyőolvasót használóknak arról, mit csinál a kattintás. Használj leíró gombszöveget: "Kosárba", "Vélemények megtekintése", "Tovább a fizetéshez". Ha ikonos gombra van szükséged, adj hozzá szöveget vagy ARIA-címkét, amely leírja a műveletet. Minden interaktív elemnek világos, leíró címkével kell rendelkeznie.
Nem hozzáférhető legördülő menük és szűrők
A termékszűrő menük, kategória-legördülők és rendezési opciók, amelyek csak egérrel működnek, gyakori akadályok. A billentyűzetet használóknak ugyanúgy hozzá kell férniük. Az összetett interaktív elemeknek ARIA-szerepekre és billentyűzettámogatásra van szükségük, hogy működjenek a kisegítő technológiával.
Hogyan tedd akadálymentessé a webshopodat
Az akadálymentesítéshez nem kell drága tanácsadót felbérelni vagy speciális szoftvert venni. Kezdd az alapokkal:
1. Írj alt szöveget minden termékképhez
Ez az egyetlen legnagyobb hatású változtatás. Menj végig a termékeiden, és írj leíró alt szöveget minden képhez. Írd le a terméket, a színét, az anyagát, az állapotát és a megkülönböztető jegyeit. Teszteld az alt szöveget úgy, hogy hangosan felolvasod. Megérti a terméket az, aki nem látja a képet? Ha nem, javítsd.
2. Gondoskodj róla, hogy minden űrlapnak megfelelő címkéje legyen
Minden űrlapmezőhöz társítani kell egy címkeelemet a kódban. Ne hagyatkozz a helykitöltő szövegre. Távolítsd el a helykitöltő szöveget, amint a mező fókuszba kerül, vagy tartsd meg, de adj mellé valódi címkét. A jelölőnégyzet- és választógomb-csoportokat csoportosítsd és címkézd világosan. Az űrlap-ellenőrzési hibák legyenek konkrétak, és pontosan mondják meg a felhasználóknak, mit kell javítaniuk.
3. Győződj meg róla, hogy a billentyűzetes navigáció működik
Teszteld a teljes webshopodat csak billentyűzettel. A Tab billentyűvel navigálj. Elérsz minden gombot, linket és űrlapot? Látod, hol van a fókusz? Logikus a tabulátorsorrend (balról jobbra, fentről lefelé)? Ha a billentyűzetet használók elakadnak, vagy nem érnek el valamit, javítsd. A legtöbb akadálymentességi akadály billentyűzetes akadály.
4. Ellenőrizd és javítsd a színkontrasztot
Használj ingyenes kontrasztellenőrző eszközt a termékoldaladon, a gombokon, a linkeken és az űrlapcímkéken. Gondoskodj róla, hogy a szöveg normál méretnél 4,5:1, nagy méretnél (18 pont vagy nagyobb) 3:1 kontrasztot érjen el. Ne hagyatkozz csak a színre az információ átadásánál (például "a piros termékek akciósak"). Adj hozzá szöveges címkéket vagy ikonokat a jelentés támogatására.
5. Javítsd a címsorszerkezetet
Vizsgáld át az oldalszerkezetedet. Legyen egy H1 (az oldal fő címe), utána H2-k a fő szakaszokhoz, H3-ak az alszakaszokhoz. Soha ne hagyj ki címsorszintet. A címsorokat a tartalom logikus szerkezetére használd, nem a megjelenésre. Ha olyan formázott szövegre van szükséged, amely nem valódi címsor, használj div-et és CSS-t, ne címsorcímkét.
6. Írj világos link- és gombszöveget
A képernyőolvasót használók gyakran előhívják az oldal összes linkjének listáját. A linkeknek összefüggésükből kiragadva is érthetőnek kell lenniük. A "Tudj meg többet a szállítási lehetőségekről" jobb, mint a "tudj meg többet". A "Termékvélemények megtekintése" jobb, mint a "vélemények olvasása". A gombok világosan írják le a műveletüket: "Kosárba", "Tovább a fizetéshez", "Mentés későbbre".
7. Teszteld kisegítő technológiával
Tölts le egy ingyenes képernyőolvasót, vagy használd az operációs rendszered beépített kisegítő eszközeit számítógépen és telefonon. Hallgasd meg, hogyan szól az oldalad. Be tudsz fejezni egy vásárlást csak billentyűzettel és képernyőolvasóval? Ez az akadálymentesség valódi próbája. Sok akadály nyilvánvalóvá válik, amikor a saját webshopodat vakként vagy csak billentyűzetet használóként próbálod használni.
Akadálymentességi tesztelés és átvilágítás
A változtatások után teszteld a webshopodat akadálymentességre. Kezdd ezekkel az eszközökkel:
Automatikus tesztelő eszközök
Az ingyenes eszközök, például az akadálymentességi ellenőrzők és a Lighthouse (a Chrome-ba beépítve) végigvizsgálják az oldalaidat, és jelzik a gyakori problémákat, például a hiányzó alt szöveget, az alacsony kontrasztot és a gyenge címsorszerkezetet. Ezek az eszközök az akadálymentességi problémák talán 30%-át találják meg, ezért kiindulópontok, nem a teljes válasz. Használd őket gyors átvizsgálásra, de ne feltételezd, hogy a hibamentes eredmény azt jelenti, hogy az oldalad teljesen akadálymentes.
Billentyűzetes tesztelés
Navigálj az oldaladdal csak a Tab, Shift+Tab, Enter és a nyílbillentyűk használatával. Egér nélkül. Ez a legfontosabb teszt. Minden feladatot el tudsz végezni? Elakadsz? Látható a fókusz? Van értelme a tabulátorsorrendnek? Ha a billentyűzetes navigáció hibás, a webshopod nem felel meg az akadálymentességi szabványnak, bármit mondanak is az automatikus eszközök.
Képernyőolvasós tesztelés
Hallgasd meg az oldaladat képernyőolvasóval. Világosan leírja a képernyőolvasó a termékképeket? Érted az űrlapcímkéket? Van értelme a navigációnak? Vannak megmagyarázatlan gombok vagy linkek? A professzionális akadálymentességi átvilágítások gyakran vak tesztelőket kérnek fel az oldalad használatára, de a nagyobb hibákat te is megtalálhatod egy alapszintű képernyőolvasós teszttel.
Kézi kódellenőrzés
Ellenőrizd a HTML-kódodat a megfelelő szemantikus jelölésért. A gombok button elemek legyenek, ne formázott div-ek. A linkek anchor címkék legyenek. Az űrlapmezőkhöz label elemek kellenek. A címsorok h1, h2, h3 címkék legyenek sorrendben, nem h1, h3, h2. A jó szemantikus HTML az akadálymentesség alapja.
Így segít a WEMASY az akadálymentességben
A WEMASY weboldalépítőben felépítheted a webshopod oldalait.
A WEMASY csomagjainak részleteit a WEMASY árak oldalán találod.
Az akadálymentesség üzleti érve
A jogi megfelelésen túl az akadálymentesség jó üzlet. Az akadálymentes oldalak mindenki számára használhatóbbak, nem csak a fogyatékossággal élőknek. A világos nyelv, a jó kontraszt, a logikus szerkezet és a billentyűzetes navigáció az idősebb felhasználóknak, a mobilon böngészőknek, a zajos környezetben lévőknek és a lassú internetet használóknak is jó. A fogyatékossággal élők számára akadálymentes oldal minden felhasználónak jobb oldal.
Még közvetlenebbül: az amerikai felnőttek 4-ből 1-e él fogyatékossággal. Ez nagyjából 65 millió ember. Ha a webshopod nem akadálymentes, hatalmas piacot zársz ki. Pénzt is hagysz az asztalon. A vak és gyengén látó vásárlók milliárdokat költenek online. Nálad szeretnének vásárolni. Tedd lehetővé.
Jogi oldalról a kockázat valós. 2025-ben több mint 5000 weboldal-akadálymentességi pert indítottak. Ezek 70%-a webshopok ellen irányult. Az akadálymentességi jogsértések miatti felszólító levél védekezéssel időt és ügyvédi költséget emészt fel. A mögöttes problémák kijavítása nélküli megegyezés csak újabb keresetekre ad okot. A legokosabb megközelítés az, ha most kijavítod az oldaladat, dokumentálod az erőfeszítéseidet, és teljesen elkerülöd a problémát.
Hogyan kezdj hozzá
Ha a webshopod nem akadálymentes, ne ess pánikba. Kezdd a legnagyobb hatású javításokkal: alt szöveg, billentyűzetes navigáció és kontraszt. Ez a három változtatás az akadálymentességi akadályok többségét megoldja. Teszteld billentyűzetes navigációval és képernyőolvasóval. Javítsd, amit találsz. Dokumentáld a munkádat. Tesztelj újra rendszeresen, különösen az oldalad módosításai után. Az akadálymentesség nem egyszeri projekt, hanem a befogadó építkezés folyamatos gyakorlata.
GYIK
Tényleg vonatkozik az ADA a kis webshopomra?
Igen. Az ADA minden, a nyilvánosság előtt nyitott vállalkozásra vonatkozik, méretétől függetlenül. A kisvállalkozásokra nincs kivétel. Ha online árulsz, a weboldalad is beletartozik.
Mi a különbség az akadálymentes és a megfelelő között?
Az akadálymentes azt jelenti, hogy az oldalad ténylegesen használható a fogyatékossággal élők számára. A megfelelő azt jelenti, hogy megfelel egy technikai szabványnak, például a WCAG 2.1 AA szintnek. Egy oldal technikailag megfelelhet a szabványnak, és mégis nehezen használható lehet, vagy nagyon használható lehet, és technikailag nem tökéletes. A cél mindkettő: a gyakorlatban akadálymentes, és megfelel a szabványnak.
Fel kell bérelnem valakit a webshopom akadálymentesítéséhez?
Nem feltétlenül. Ha a webshopodnak alapvető hibái vannak (hiányzó alt szöveg, gyenge kontraszt, hibás billentyűzetes navigáció), ezek közül sokat magad is kijavíthatsz. Írj alt szöveget, ellenőrizd a kontrasztot ingyenes eszközzel, teszteld a billentyűzeteddel és egy képernyőolvasóval. Ha az oldalad korszerű rendszerre épül, megfelelő HTML-szerkezettel, az akadálymentesítés gyakran egyszerű. A bonyolult funkciójú nagyobb oldalaknak jól jöhet a szakmai átvilágítás, de a kis webshopok a legnagyobb akadályokat gyakran házon belül is megoldhatják.
Mi van, ha akadálymentességi felszólító levelet kapok?
Vedd komolyan. Ne hagyd figyelmen kívül. A felszólító levelek általában határidőt adnak a hibák kijavítására. Dolgozz együtt a fejlesztőddel vagy a platform támogatásával a megnevezett konkrét jogsértések kezelésén. Dokumentálj mindent, amit teszel. Érdemes lehet az akadálymentességi jogot ismerő ügyvéddel is konzultálnod. A mögöttes problémák kijavítása nélküli megegyezés nem hosszú távú megoldás, javítsd ki az oldalt.
Lassítja a betöltést, ha akadálymentessé teszem az oldalamat?
Nem. Az akadálymentesség és a teljesítmény külön dolog. Egy oldal lehet gyors és nem akadálymentes, vagy lassú és akadálymentes. A szemantikus HTML (az akadálymentességhez szükséges kódszerkezet) gyakran könnyebb és gyorsabb, mint a rosszul megírt kód. Sok akadálymentességi fejlesztés, például a megfelelő címsorszerkezet és a világos nyelv, nincs hatással a sebességre.
A WCAG 2.1 AA szint mindent lefed, amire a jogi megfeleléshez szükségem van?
A WCAG 2.1 AA szint az a szabvány, amelyre a legtöbb akadálymentességi jogi ügy hivatkozik. Ez az a mérce, amellyel a bíróságok megítélték, hogy egy weboldal akadálymentes-e. A WCAG 2.1 AA szintnek való megfelelés a legjobb módja annak bizonyítására, hogy komolyan vetted az akadálymentességet, és teljesítetted a jogi szabványt.
További olvasnivaló: Adatvédelmi tájékoztató, sütibeleegyezés és GDPR a webshopodhoz és Hogyan védd meg a márkádat és a termékeidet a másolástól.