Tudástár
A 10 leggyakoribb akadálymentességi hiba webshopokban
Ezeket a hibákat találjuk meg a leggyakrabban magyar webáruházakban. Minden tételhez adunk közérthető magyarázatot és fejlesztői javítási útmutatót is.
1. hiba · WCAG 1.1.1 (A)
Alt szöveg nélküli termékképek
Egyszerűen
A képernyőolvasó a termékképről csak annyit mond: „grafika” vagy egy értelmezhetetlen fájlnév. A vak vásárló nem tudja, mit árul a kép.
Mit jelent ez üzletileg?
A terméklapok a webshop szíve: ha a képek „láthatatlanok”, a látássérült vásárló nem tud dönteni, és elhagyja az oldalt.
Fejlesztőknek: így javítható
Minden tartalmat hordozó kép kapjon értelmes alt attribútumot: a termék nevét és a képen látható lényeges tulajdonságot. Díszítő grafikákhoz üres alt="" kell, hogy a képernyőolvasó kihagyja őket.
Hibás megoldás
<img src="cipo-1234.jpg">Javított megoldás
<img src="cipo-1234.jpg" alt="Fekete bőr futócipő, oldalnézetből">2. hiba · WCAG 1.4.3 (AA)
Gyenge színkontraszt az árakon és gombokon
Egyszerűen
Halvány szürke szöveg fehér alapon, világos gomb világos felirattal: gyengén látó vagy idős vásárló számára olvashatatlan.
Mit jelent ez üzletileg?
Ha az ár vagy a „Kosárba” gomb nem olvasható, a vásárlás megreked — ez közvetlen bevételkiesés.
Fejlesztőknek: így javítható
A normál szöveghez legalább 4,5:1, a nagy szöveghez 3:1 kontrasztarány kell. Mérje meg a gombokat, árakat és űrlapmezőket kontrasztellenőrzővel, és a témában állítsa be a színeket, ne oldalanként.
3. hiba · WCAG 2.1.1 (A)
Billentyűzettel nem kezelhető szűrők és legördülők
Egyszerűen
A termékszűrők, méret- és színválasztók csak egérrel működnek. Aki billentyűzettel navigál, nem tud szűrni, így gyakorlatilag nem tud vásárolni.
Mit jelent ez üzletileg?
Mozgáskorlátozott és képernyőolvasót használó vásárlók kizárva a kategóriaoldalakról — a teljes kínálat elérhetetlenné válik számukra.
Fejlesztőknek: így javítható
Használjon natív HTML-elemeket (button, select, input), vagy ha egyedi komponens kell, kövesse a WAI-ARIA Authoring Practices billentyűzet-mintáit: Tab/Shift+Tab fókusz, Enter/Space aktiválás, nyílbillentyűk a listákban, látható fókuszjelzés.
4. hiba · WCAG 1.3.1, 3.3.2, 4.1.2 (A)
Címke nélküli űrlapmezők a pénztárban
Egyszerűen
A pénztári mezőkön csak helyőrző szöveg van, ami gépeléskor eltűnik. A képernyőolvasó csak annyit mond: „szerkesztőmező”.
Mit jelent ez üzletileg?
A pénztár a legérzékenyebb pont: egy félreértett mező elrontott rendelést vagy elhagyott kosarat jelent.
Fejlesztőknek: így javítható
Minden mezőhöz tartozzon látható, programozottan hozzárendelt label. A placeholder nem helyettesíti a címkét. Adjon autocomplete attribútumokat (name, email, postal-code) — ez a kitöltést mindenki számára felgyorsítja.
Hibás megoldás
<input type="email" placeholder="E-mail">Javított megoldás
<label for="email">E-mail cím</label>
<input id="email" type="email" autocomplete="email">5. hiba · WCAG 2.1.2, 2.4.3 (A)
Felugró ablakok, amelyekből nem lehet kilépni
Egyszerűen
Hírlevél-feliratkozós felugró ablak takarja a tartalmat, de billentyűzettel nem zárható be, vagy a fókusz „becsípődik” benne.
Mit jelent ez üzletileg?
Aki nem tudja bezárni az ablakot, az nem tud vásárolni sem — a marketinges felugró így közvetlenül veszít el rendeléseket.
Fejlesztőknek: így javítható
A modális ablak Esc billentyűvel zárható legyen, a fókusz nyitáskor kerüljön bele, záráskor térjen vissza a megnyitó elemre, és a háttértartalom legyen inert. Ellenőrizze a „billentyűcsapdát”: a Tab sorrend ne ragadjon bent.
6. hiba · WCAG 4.1.3 (AA)
A kosár változását a képernyőolvasó nem jelzi
Egyszerűen
A „Kosárba teszem” gombra kattintva vizuálisan frissül a kosár ikon, de a képernyőolvasó semmit nem mond — a vásárló nem tudja, sikerült-e.
Mit jelent ez üzletileg?
Bizonytalanság a vásárlás közepén: a vásárló vagy többször kattint (dupla tételek), vagy feladja.
Fejlesztőknek: így javítható
A dinamikus állapotüzenetekhez használjon aria-live régiót (például aria-live="polite"), amely bejelenti: „A termék a kosárba került.” A kosár oldalra navigálás nélkül is legyen visszajelzés.
Hibás megoldás
<button onclick="addToCart()">Kosárba</button>Javított megoldás
<div aria-live="polite" id="cart-status"></div>
<button onclick="addToCart()">Kosárba</button>
<!-- addToCart() után: cart-status.textContent = 'A termék a kosárba került.' -->7. hiba · WCAG 3.3.1, 4.1.3 (A/AA)
Hibaüzenetek, amelyeket a képernyőolvasó nem olvas fel
Egyszerűen
A pénztárban piros szöveg jelzi a hibát, de a képernyőolvasó nem jelenti be, és a fókusz sem oda ugrik — a vásárló nem érti, miért nem megy tovább.
Mit jelent ez üzletileg?
Elakadt rendelések és felesleges ügyfélszolgálati hívások: a vásárló nem tudja kijavítani a hibát, mert nem is tud róla.
Fejlesztőknek: így javítható
A hibaüzenetet kapcsolja a mezőhöz aria-describedby-val, jelölje a mezőt aria-invalid="true"-val, és küldés után tegye a fókuszt az első hibás mezőre vagy egy hibaösszegzőre. A hiba legyen szöveges, ne csak színnel jelzett.
8. hiba · WCAG 1.3.1 (A)
Kapcsolat nélküli fejlécszerkezet
Egyszerűen
A címsorok dizájn miatt ugranak (H1 után H4), vagy félkövér szöveg helyettesíti őket. A képernyőolvasós vásárló nem tud „átlapozni” az oldalon.
Mit jelent ez üzletileg?
A képernyőolvasót használók címsoronként navigálnak: rossz szerkezetnél a termékoldal használhatatlan, a keresőoptimalizálás is gyengül.
Fejlesztőknek: így javítható
Oldalanként egy H1, utána logikus, szintet nem ugró H2–H3 sorrend. A címsor jelentse a tartalmat, ne a betűméretet — a megjelenést CSS-sel oldja meg.
9. hiba · WCAG 2.4.4 (A)
„Kattints ide” és egyéb értelmetlen linkszövegek
Egyszerűen
A képernyőolvasó a linkeket külön listában is fel tudja sorolni: tíz „Részletek” vagy „Kattints ide” linkből nem derül ki, hová vezetnek.
Mit jelent ez üzletileg?
A vásárló nem találja meg a szállítási feltételeket vagy a termékrészleteket — bizonytalanság, elhagyott kosár.
Fejlesztőknek: így javítható
A linkszöveg önmagában is érthető legyen: „Szállítási feltételek” „ide kattintva” helyett. Ha a dizájn rövid szöveget kíván, egészítse ki aria-label-lel vagy képernyőolvasóknak szóló rejtett szöveggel.
Hibás megoldás
<a href="/szallitas">Részletek</a>Javított megoldás
<a href="/szallitas">Szállítási feltételek</a>10. hiba · WCAG 2.2.2 (A)
Automatikusan mozgó bannerek és videók
Egyszerűen
Váltakozó főoldali bannerek, automatikusan induló videók: figyelemzavarosak, és nem lehet őket megállítani.
Mit jelent ez üzletileg?
A figyelemzavar mindenkit zavar, de a kognitív nehézséggel élőknél kizáró tényező — a főoldal legértékesebb felülete így kontraproduktív.
Fejlesztőknek: így javítható
Minden 5 másodpercnél tovább mozgó vagy automatikusan frissülő tartalomhoz adjon megállítás/szüneteltetés lehetőséget. Videóhoz felirat, hanganyaghoz átirat tartozzon — ez a keresőknek is értékes szöveg.
Ezek a hibák a teljes kép egy részei: a módszertanunk négy rétegben vizsgálja a webshopot, az eredmény pedig egy ilyen auditjelentésben landol.
Tudja meg, hol tart a webshopja.
Automatikus audit, emberi ellenőrzés, prioritizált javítási lista — és kész akadálymentességi nyilatkozat a végén.
Ingyenes gyorsaudit kérése