Webshopok akadálymentesítése - 2025-ös EU-s szabályozás

2025-ben jelentős változás várható a weboldalak akadálymentesítése terén, mivel új szabályozás lép életbe (a teljes rendelet itt olvasható, pdf), amely minden weboldaltulajdonost érint. Az új szabályozás célja, hogy az internet mindenki számára hozzáférhetővé váljon, beleértve azokat is, akik valamilyen fogyatékossággal élnek. Ebben a cikkben áttekintjük, hogy mit jelent ez a változás, és hogyan készülhetsz fel rá.

✅ TL;DR – Checklista technikai szinten

• Billentyűzetes navigáció működik?
• Alt szövegek minden képnél?
• 4.5:1 kontrasztarány mindenhol?
• Űrlapok címkézve, hibakezelés géppel is értelmezhető?
• ARIA attribútumok jól használva?
• Mobilbarát a teljes tartalom?
• Automatizált + manuális tesztelés megtörtént?

🎯 Alap technikai paraméterek (WCAG 2.1 szerint)

1. Billentyűzet-navigáció (Keyboard Navigation)

• Minden funkciónak elérhetőnek kell lennie egér nélkül is.
• A Tab sorrend logikus, vizuálisan is követhető legyen.
• Látható fókusz (:focus) minden elemnél (pl. linkek, gombok).

2. Szöveg és kontrasztarány

• Minimum 4.5:1 kontrasztarány a szöveg és háttér között.
• Nagyobb szövegeknél (pl. 18pt+) elég a 3:1 arány is.
• Elérhető legyen szövegnagyítás (200%-ig) dizájntörés nélkül.

3. Képek és multimédia

• Minden képhez legyen alt attribútum (<img alt="...">).
• Ikonoknál, dekorációs elemeknél használható role="presentation" vagy üres alt.
• Videókhoz legyen elérhető:
  • felirat (subtitle)
  • leíró narráció (audio description), ha fontos vizuális infó van

4. Űrlapok, hibakezelés

• Űrlapmezők legyenek felcímkézve (<label for="...">)
• Hibajelzések legyenek érthetők és géppel is olvashatók (ARIA Live Regions, pl. aria-live="polite")
• Használjunk mezőspecifikus hibajelzést, ne csak általánosat ("valami hiba történt")

5. ARIA (Accessible Rich Internet Applications) attribútumok

• Dinamikus elemeknél (pl. modál, slider, hamburger menü) használj aria-expanded, aria-hidden, aria-label, stb.
• Segítőkész címkék: pl. aria-describedby, aria-labelledby

6. Reszponzív, mobilbarát elrendezés

• Mobilon is elérhető legyen minden funkció akadály nélkül
• Ne legyen "pinch-zoom" kényszer: viewport meta tag helyes beállítása
• Ne legyenek vízszintes görgetést igénylő tartalmak

🔧 Weboldal és webshop szinten figyelj ezekre is

Webshop esetén:

• Termékleírások: strukturált szöveg, képek alt-tal
• Kosár és checkout: minden mező legyen elérhető képernyőolvasóval, hibakezelés pontos
• Interaktív elemek (pl. ár-szűrők, slider): legyenek kezelhetők billentyűvel, legyen ARIA attribútum

CMS/Weboldal esetén:

• Használj szemantikusan helyes HTML-t (<nav>, <main>, <section>, <h1>–<h6>, stb.)
• Oldaltérkép és breadcrumb navigáció
• Ugrólinkek az oldal elején (pl. "Ugrás a tartalomhoz")

📋 Tesztelési szempontok

Automatikus tesztelők:

• Lighthouse (Chrome DevTools)
• WAVE (Web Accessibility Evaluation Tool)
• axe DevTools

Manuális ellenőrzés:

• Billentyűvel végigjárás
• Képernyőolvasóval való tesztelés (pl. NVDA, VoiceOver, JAWS)
• Színvaksági szimulátor használata

🇭🇺 Magyar jogi környezet

• Állami/önkormányzati szektorban kötelező a WCAG 2.1 AA szint.
• Magánszektorban ajánlott, de az EU-s EAA irányelv alapján 2025-től sok esetben kötelező lesz (pl. webshop, bank, közlekedés, digitális termékek).

‍

🔍 Miért kulcsfontosságú a webes akadálymentesítés 2025-ben?

Az új európai uniós és magyar szabályozások értelmében 2025. június 28-tól minden új és meglévő weboldalnak – különösen webshopoknak – kötelezően akadálymentesnek kell lennie. A digitális szolgáltatások akadálymentesítése nemcsak jogszabályi kötelezettség, hanem üzleti lehetőség is.

📌 Kiket érint az új szabályozás?

• Webshop tulajdonosokat (WordPress, Shopify, UNAS stb.)
• Szolgáltatói és ügyfélportálokat üzemeltető KKV-kat
• Állami és önkormányzati oldalak üzemeltetőit
• Marketing ügynökségeket és fejlesztőcsapatokat

Milyen követelményeket tartalmaz az új szabályozás?

A 2025-ben bevezetésre kerülő szabályozás részleteit illetően a következő főbb követelményekre lehet számítani:

1. Szöveges alternatívák: Minden vizuális elemhez, mint például képekhez és videókhoz, szöveges alternatívát kell biztosítani, hogy azok is megértsék a tartalmat, akik nem látnak vagy nem tudnak vizuális tartalmat fogyasztani.
2. Billentyűzet-navigáció: A weboldalnak teljes mértékben navigálhatónak kell lennie billentyűzettel, az egér használata nélkül. Ez különösen fontos azok számára, akik mozgáskorlátozottak, és nem tudnak hagyományos egeret használni.
3. Kontrasztarány: A szöveg és a háttér közötti kontrasztnak megfelelő mértékűnek kell lennie, hogy az olvashatóság mindenki számára biztosított legyen, beleértve a gyengén látókat is.
4. Érzékeny tervezés (Responsive Design): A weboldalaknak minden eszközön (asztali gép, tablet, okostelefon) akadálymentesen kell működniük, függetlenül a képernyő méretétől.
5. Szöveg méretezhetősége: A felhasználóknak lehetőséget kell biztosítani a szöveg méretének növelésére vagy csökkentésére anélkül, hogy ez rontaná a weboldal használhatóságát.

Hogyan készülj fel az új szabályozásra?

1. Weboldalad felülvizsgálata: Első lépésként érdemes alaposan felülvizsgálni a jelenlegi weboldalad, hogy megfelel-e a fenti követelményeknek. Használhatsz online eszközöket és szoftvereket, amelyek segítenek az akadálymentesítési hibák azonosításában.
2. Fejlesztők bevonása: Ha szükséges, vonj be webfejlesztőket és UX (felhasználói élmény) szakértőket, akik segíthetnek a weboldalad akadálymentessé tételében. Fontos, hogy ezek a szakemberek ismerjék a legújabb WCAG (Web Content Accessibility Guidelines) irányelveket.
3. Felhasználói tesztelés: Végezz felhasználói teszteket különböző csoportokkal, beleértve a fogyatékossággal élőket is, hogy valós visszajelzéseket kapj a weboldalad használhatóságáról és hozzáférhetőségéről.
4. Folyamatos frissítés: Az akadálymentesítés nem egyszeri feladat, hanem folyamatos folyamat. Az új tartalmak létrehozása során mindig tartsd szem előtt az akadálymentességi szempontokat, és rendszeresen frissítsd a weboldalad, hogy az megfeleljen a legújabb követelményeknek.

Mobilbarát akadálymentesítés: az új kihívás 2025-ben

Az online térben egyre nagyobb szerepet kapnak a mobileszközök, és ez a trend a weboldalak akadálymentesítésére is komoly hatással van. 2025-től a szabályozás nemcsak az asztali böngészőkre vonatkozó követelményeket szigorítja, hanem a mobilfelhasználók számára is új akadálymentességi irányelveket vezet be. A reszponzív design mellett kiemelten fontos lesz a mobilos navigáció egyszerűsítése, a megfelelő méretű érintési felületek biztosítása és a hangvezérlés támogatása azok számára, akik nem tudják hagyományos módon használni a mobiljukat.

A mobilakadálymentesítés másik kulcsfontosságú eleme az adaptív szövegkezelés, amely lehetővé teszi a tartalmak könnyű olvashatóságát különböző képernyőméreteken. A szabályozás előírja, hogy a weboldalaknak olyan betűméretet és kontrasztarányt kell biztosítaniuk, amelyet gyengén látók és színvakok is könnyen értelmezhetnek. Ezen túlmenően a videók és animációk esetében fontos lesz az automatikus lejátszás kikapcsolhatósága és a feliratok elérhetősége, hogy minden felhasználó akadálymentesen élvezhesse a multimédiás tartalmakat.

‍

- -✁- - - - - -  - - - - - 

Shopify webshop fejlesztés, építés és SEO

Minden webshop építés előtt érdemes végiggondolni, milyen funkciókra van szükségünk a következő 3-4 évben, hogy sikeresek legyünk. Sajnos nagyon sok drága egyedi fejlesztéssel és mégtöbb olyan webshop motoron futó webshoppal találkoztam, ahol nagyon erős hiányosságok voltak. 

Pár terület, amit NAGYON ÉRDEMES figyelemmel kísérni a platform kiválasztása - webshop specifikációja - során:

• Készletezés, készletkezelés
• Akciók, kuponok funkciói, kiküldése, kezelése
• Számlázás, banki díjak, költségek
• Termékek feltöltése, szinkronizációja különböző platformokkal (Facebook, Google stb.)
• Visszatérő vásárlók célzása, visszacsábítása
• Hírlevélküldő-rendszerek - integrációk, funkciók, automatizmusok 
• SEO beállítások, keresőoptimalizálási lehetőségek
• Termékek importja, exportja

Olvass tovább SEO, CRM és hírlevél-rendszerek, webshop témákban a linkekre kattintva vagy cikkeimet a Kosárérték blogon!

Ha versenyképes szeretnél lenni, akkor a fentiekben érdemes jól eligazodni, tájékozódni - érdemes különböző forrásokat is olvasni, tanácsot kérni, mert egy webshop felépítése - hiányosságok esetén költöztetése - gyorsan nagyon költséges lehet.

🟢Miért érdemes Shopify webshop-ot építeni?

• Könnyű CRM és hírlevél integráció a Klaviyo-val
• Beépített webshop riportok, pl. a visszatérő vásárlókról is
• Plusz alkalmazásokkal megfelelő SEO lehetőségek, akár a Blog-ra is
• Egyszerűen összekapcsolható a nagy nemzetközi eszközökkel, pl.: Facebook, Google stb.
• Magyar integrációk is a legnagyobb szoftverekhez, applikációkhoz, Számlázz.hu, Billingo stb.

Nézd meg szakértő partnerem, Puskás Éva Katalin Teljes Shopify webshop építő tanfolyamát!

Ezeket az anyagokat is ajánlom a figyelmedbe:

• 5 INGYENES webshop tipp - próbáld ki most!
• 50 SEO tipp webshop és weboldal tulajdonosoknak
• 25 tipp a versenytársaid alapos megismeréséhez
• Marketing funnel gyakorlati felépítése

⚙️Eredmények, esettanulmányok

🧐Szeretnél többet megtudni korábbi munkáimról? Nézd meg a referenciáimat vagy olvasd el az esettanulmányokat az oldalamon! Íme néhány:

• SEO optimalizáció Wordpress és WooCommerce webshop számára
• Shopify webshop feépítése és keresőoptimalizálása

📚 Ismerd meg a Shopify rendszerét a Webshop építő kurzuson, ha pedig kérdésed van írj Linkedin-en, vagy a weboldalamon keresztül!

- -✁- - - - - -  - - - - -

🧲Tartalommarketing eredmények, esettanulmányok

Korábbi eredményeimről az esettanulmányok, illetve a referenciák oldalon olvashatsz, íme pár konkrét példa:

• WooCommerce oldal Wordpress alapokon (KKV webshop)
• UNAS webshop termék és kategória oldalainak frissítése (KKV webshop)
• Egészségügyi szolgáltató SEO eredményeinek javítása
• IT cég weboldalának SEO fejlesztése mesterséges intelligencia segítségével

🔗Miben tudok segíteni a te cégednek is?

• Ingyenes ChatGPT online tanfolyam - ezt azoknak ajánlom, akik még csak most ismerkednek ezzel a megoldással. 
• SEO elemző Search Console tanfolyam - ha szeretnéd jobban megérteni a SEO-t, és hogy mire való az ingyenes Google Search Console eszköz, és miben segítheti a SEO céljaid elérését! 
• Marketing mentorálás - ha szeretnél egy adott területen belül gyorsabban, hatékonyabban fejlődni a céged marketingjében, értékesítésében.
• AI-alapú SEO fejlesztéssel kapcsolatban pedig kérj egyedi ajánlatot!

📩 Tudd meg, hogyan segíthetnek ezek a megoldások! Nézd meg az esettanulmányokat és a referenciákat az oldalamon, vagy írj a Linkedin-en, vagy foglalj ingyenes, első konzultációs időpontot!

- -✁- - - - - -  - - - - - 

🧠 Fogalmi összefoglaló – snippet optimalizáláshoz

• WCAG: A Web Content Accessibility Guidelines rövidítése, amely az akadálymentes weboldalak nemzetközi szabványa.
• Alt szöveg (alternative text): Egy rövid leírás, amit a képekhez kell megadni, így képernyőolvasóval is értelmezhető a vizuális tartalom.
• Billentyűzet-navigáció: A weboldal teljes körű használata egér nélkül, kizárólag a billentyűzettel.
• Kontrasztarány: A szöveg és a háttér közötti színkülönbség mértéke, amely befolyásolja az olvashatóságot.
• Mobil akadálymentesség: A weboldal használhatósága és elérhetősége kisebb kijelzőkön, különös figyelemmel az érintéses navigációra és a hangvezérlésre.

‍