Weboldal akadálymentesség: WCAG 2.1 és 2.2

Weboldal akadálymentesség: mi ez és miért fontos?

Ha valaha is megpróbáltál egy rossz mobilos weboldalon navigálni, vagy egy apró betűs, halvány szövegű oldalon megtalálni a keresett információt, akkor már érezted a saját bőrödön, milyen, ha egy weboldal nem igazán használható. A weboldal akadálymentesség pontosan erről szól, csak egy kicsit tágabb perspektívából.

Az akadálymentesség lényege, hogy a weboldalad mindenki számára használható legyen: azok számára is, akik látássérültek, hallássérültek, mozgáskorlátozottak, vagy valamilyen kognitív nehézséggel küzdenek. De a valóságban az akadálymentes weboldal nemcsak nekik jobb, hanem mindenkinek.

Ebben a cikkben végigmegyünk azon, mit jelent pontosan a weboldal akadálymentesség, milyen szabványok léteznek, kinek kötelező Magyarországon, és miért éri meg KKV-ként is foglalkozni vele még akkor is, ha jogszabályilag nem kötelező.

Mi az a weboldal akadálymentesség?

A weboldal akadálymentesség (angolul: web accessibility) azt jelenti, hogy a weboldalad tartalmát és funkcióit mindenki képes elérni és használni, függetlenül attól, hogy milyen eszközt használ, milyen fizikai vagy kognitív adottságokkal rendelkezik.

Ez a gyakorlatban nagyon sokféle dolgot jelenthet:

• Egy vak felhasználó képernyőolvasóval hallgatja a weboldal szövegét.
• Egy mozgáskorlátozott látogató csak billentyűzettel navigál, egér nélkül.
• Egy idős felhasználó nagyobb betűméretre nagyítja az oldalt.
• Egy hallássérült személy feliratot olvas a videó helyett.
• Valaki gyenge mobilnet-kapcsolaton, kis képernyőn böngészik.

Az akadálymentesség tehát nem csupán egy szűk felhasználói csoport igénye, hanem egy olyan minőségi alapelv, amely az összes látogatód élményét javítja.

A WCAG szabványok: mi az a WCAG 2.1 és 2.2?

A weboldal akadálymentesség terén a legfontosabb nemzetközi szabványrendszer a WCAG – Web Content Accessibility Guidelines. Ezt a W3C (World Wide Web Consortium) fejleszti és tartja karban.

A WCAG négy alapelve

A WCAG minden verziójának alapja négy alapelv, amelyeket angolul POUR-nak rövidítenek:

• Perceivable (Érzékelhető): A tartalom érzékelhető legyen – például képekhez alt szöveg, videókhoz felirat.
• Operable (Kezelhető): Az oldal kezelhető legyen billentyűzettel is, ne csak egérrel.
• Understandable (Érthető): A tartalom és a működés legyen érthető – egyértelmű navigáció, hibakezelés.
• Robust (Robusztus): Az oldal különböző böngészőkkel és segédtechnológiákkal is megfelelően működjön.

Megfelelőségi szintek: A, AA, AAA

A WCAG három szinten méri a megfelelőséget:

• A szint: Az alapvető minimum. Ha ez sem teljesül, az oldal egyes felhasználók számára egyszerűen használhatatlan.
• AA szint: Ez a reális és általánosan elvárt szint. Magyarországon a közszféra számára ez a kötelező minimum. KKV-knak is ezt érdemes célozni.
• AAA szint: A legmagasabb szint, amelyet a legtöbb weboldal nem tud teljes egészében teljesíteni – általában speciális, célzott projekteknél releváns.

Mi változott a WCAG 2.2-ben?

A WCAG 2.2 (2023-ban vált hivatalossá) néhány fontos új kritériumot hozott, amelyek főleg a billentyűzetes navigációt, a fókuszjelölés láthatóságát és a mobilhasználatot érintik. A legfontosabb újítások:

• Jobb és láthatóbb fókuszjelölés billentyűzetes navigációnál.
• Húzással elvégezhető műveletek alternatívái (drag-and-drop helyett kattintásos megoldás).
• Célterület mérete: a kattintható elemeknek elég nagynak kell lenniük mobilon is.
• Ismétlődő hitelesítési folyamatok egyszerűsítése.

Ha most kezdesz el foglalkozni az akadálymentességgel, érdemes rögtön a WCAG 2.2 AA szintet célozni, ez a jelenlegi legjobb gyakorlat.

Kinek kötelező a weboldal akadálymentesség Magyarországon?

Ez az a kérdés, amit a legtöbb vállalkozó először feltesz. A rövid válasz: Magyarországon jelenleg főként a közszféra számára kötelező.

Mi a helyzet a magánszektorral és a KKV-kkal?

A magánszektorra – beleértve a kis- és középvállalkozásokat – jelenleg általánosan nem vonatkozik kötelező akadálymentességi előírás Magyarországon. Azonban érdemes tudni néhány fontos dolgot:

• Az Európai Akadálymentességi Törvény (European Accessibility Act, EAA) 2025 júniusától fokozatosan élesedik az EU-ban, és bizonyos termékekre és szolgáltatásokra – köztük egyes e-kereskedelmi felületekre – kiterjed a magánszektorra is.
• Ha közpénzből finanszírozott projektben veszel részt, vagy közszférával dolgozol együtt, az akadálymentességi elvárások megjelenhetnek a szerződéses feltételekben.
• Az egyenlő bánásmód elvéből fakadóan a diszkrimináció elkerülése üzleti és etikai szempontból is fontos.

Tehát: jelenleg nem kötelező, de a szabályozási irány egyértelműen a szélesebb körű kötelezettség felé mutat.

Miért éri meg kisvállalkozóként foglalkozni az akadálymentességgel?

Ha nem kötelező, miért csináld? Mert üzletileg megéri. Nézzük meg, miért.

Nagyobb elérhetőség, több potenciális ügyfél

Magyarországon a fogyatékkal élők aránya a teljes népességen belül jelentős – az EU-s adatok alapján a felnőtt lakosság kb. 15-20%-a él valamilyen fogyatékossággal vagy tartós egészségügyi problémával. Ha a weboldalad kizárja őket, potenciális ügyfeleket veszítesz.

Ráadásul az akadálymentesség nem csak a fogyatékkal élőknek segít. Idős felhasználóknak, gyenge internetkapcsolaton böngészőknek, kis képernyőn navigálóknak is jobb élményt ad. Ez a felhasználók igen széles körét érinti.

Jobb SEO és keresőláthatóság

Az akadálymentes weboldal és a jó SEO szorosan összefügg. Ami a Google-nek fontos, az az akadálymentességnek is fontos és fordítva:

• Az alt szövegek segítik a képek indexelését.
• A logikus címsorhierarchia (H1, H2, H3) javítja a tartalom értelmezhetőségét.
• A gyors betöltési idő és a mobilbarát megjelenés a Core Web Vitals szempontjából is kritikus.
• Az érthető, strukturált tartalom a Google AI-alapú keresési funkcióinak is kedvez.

Jobb felhasználói élmény és magasabb konverzió

Az akadálymentesség lényegében a jó UX egyik alapköve. Egy akadálymentes weboldal:

• Könnyebben navigálható mindenki számára.
• Egyértelműbb üzeneteket közvetít.
• Kevesebb frusztrációt okoz – és a frusztrált látogató nem tölt ki kapcsolatfelvételi űrlapot.
• Mobilon is gördülékenyen működik.

Ha a weboldalad konverziós problémákkal küzd, érdemes megnézni, hogy az akadálymentességi hiányosságok nem játszanak-e szerepet benne. Egy weboldal audit során ezek a problémák általában gyorsan felszínre kerülnek.

Bizalomépítés és márkaimage

Egy akadálymentes weboldal azt üzeni a látogatóidnak, hogy figyelmet fordítasz mindenkire, nem csak a „tipikus” felhasználóra. Ez bizalmat épít, és pozitívan hat a márkád megítélésére.

A leggyakoribb akadálymentességi hibák weboldalakon

A jó hír az, hogy a legtöbb weboldal akadálymentességi problémája viszonylag könnyen javítható, ha tudod, hol keresd. Íme a leggyakoribb hibák:

1. Hiányzó vagy rossz alt szövegek

A képernyőolvasók az alt szöveg alapján „mondják el” a képet a vak felhasználóknak. Ha az alt szöveg hiányzik, vagy csak annyi van benne, hogy „kép1.jpg”, az semmit nem segít. Az alt szövegnek leírni kell, mit ábrázol a kép – röviden, értelmesen.

2. Gyenge kontrasztarány

Ha a szöveg és a háttér között nincs elég kontraszt, a gyengénlátók és az idős felhasználók nehezen olvassák. A WCAG AA szint szerint a normál szövegnél legalább 4,5:1 kontrasztarány szükséges. Ezt ingyenes eszközökkel (pl. Contrast Checker) percek alatt ellenőrizni lehet.

3. Rossz vagy hiányos címsorhierarchia

Ha az oldalon a H2 után rögtön H4 következik, vagy a H1 helyett H2-t használsz a főcímhez, az nemcsak a SEO-t rontja, hanem a képernyőolvasóval navigáló felhasználókat is összezavarja. A logikus, következetes struktúra alapkövetelmény.

4. Billentyűzetcsapdák és nem billentyűzetes navigáció

Ha az oldalon van egy felugró ablak, amiből nem lehet kilépni Escape-pel, vagy egy menü, amit nem lehet Tab billentyűvel bejárni, az a billentyűzetes felhasználók számára komoly akadályt jelent. Minden interaktív elem legyen elérhető billentyűzetről is.

5. Hibás vagy nem akadálymentes űrlapok

Az űrlapmezőknek egyértelmű label-ekre van szükségük. Ha a mező felirata csak vizuálisan látható (placeholder szövegként), de nincs hozzárendelve programozottan a mezőhöz, a képernyőolvasó nem tudja elmondani a felhasználónak, mit kell beírni. A hibaüzeneteknek is egyértelműeknek és elérhetőknek kell lenniük.

6. Videók felirat nélkül

A hallássérült felhasználók számára a felirat nélküli videó hozzáférhetetlen. Ha videótartalmat használsz, gondoskodj pontosan szinkronizált feliratokról.

7. Nem akadálymentes PDF-ek

A letölthető dokumentumok – árajánlatok, tájékoztatók, szerződések – szintén lehetnek akadálymentesek vagy sem. Egy strukturálatlan, beszkennelt PDF képernyőolvasóval olvashatatlan. Ha PDF-eket használsz, gondoskodj arról, hogy azok valódi szöveget tartalmazzanak és megfelelő struktúrával rendelkezzenek.

Hogyan ellenőrizd a weboldalad akadálymentességét?

Az akadálymentességi tesztelés nem egylépéses folyamat. A megbízható értékeléshez három réteget kell lefedni: automata audit, kézi tesztelés és képernyőolvasós próba.

1. Automata audit eszközök

Az automata eszközök gyorsan azonosítják a nyilvánvaló hibákat: hiányzó alt szövegek, kontrasztproblémák, strukturális hibák. Nem találnak meg mindent (a szakértők szerint az összes hiba kb. 30-40%-át fedik le), de kiváló kiindulópontot adnak.

• WAVE (wave.webaim.org): Ingyenes, böngészőbővítményként is elérhető, vizuálisan jelzi a hibákat az oldalon.
• Google Lighthouse: A Chrome DevTools beépített eszköze, akadálymentességi pontszámot is ad.
• Silktide Accessibility Checker: Ingyenes online eszköz, egyszerű áttekintéshez jó.

2. Kézi billentyűzetes tesztelés

Nyisd meg a weboldalad, tedd félre az egeret, és próbálj meg csak a Tab, Enter, Escape és nyílbillentyűkkel navigálni. Kérdezd meg magadtól:

• Minden interaktív elemre el tudsz jutni Tab-bal?
• Látod, éppen hol jársz az oldalon (fókuszjelölés)?
• Tudod bezárni a felugró ablakokat?
• Az űrlapot ki tudod tölteni és elküldeni egér nélkül?

Ez a teszt 15-20 perc alatt elvégezhető, és meglepően sok problémát felszínre hoz.

3. Képernyőolvasós tesztelés

A legmélyebb réteg a képernyőolvasós tesztelés. Ehhez ingyenes eszközök is rendelkezésre állnak:

• NVDA (Windows, ingyenes): A legnépszerűbb ingyenes képernyőolvasó Windowsra.
• VoiceOver (Mac és iOS, beépített): Apple eszközökön elérhető, beállításokban aktiválható.
• TalkBack (Android, beépített): Android telefonokon elérhető képernyőolvasó.

Próbálj meg a weboldalon navigálni csak a képernyőolvasóra támaszkodva, megtalálod a főbb tartalmakat? Érthető a navigáció? Ki tudod tölteni az űrlapot?

Weboldal akadálymentességi csekklista

Ha nem tudod, hol kezdd, ez a lista segít. Ezek a legfontosabb, legtöbb weboldalnál javítható pontok:

• Minden képnek van értelmes alt szövege (kivéve a dekoratív képeket, amelyeknél üres alt=”” a helyes).
• A szöveg és a háttér kontrasztaránya legalább 4,5:1 (normál szövegnél).
• A címsorhierarchia logikus és következetes (H1 → H2 → H3).
• Az oldal billentyűzettel teljes mértékben navigálható.
• A fókuszjelölés (focus indicator) minden interaktív elemnél látható.
• Az űrlapmezőknek van programozottan hozzárendelt label-jük.
• A hibaüzenetek érthetők és egyértelműen jelzik, mit kell javítani.
• A videókhoz felirat tartozik.
• Az oldal 200%-ra nagyítva is használható, a tartalom nem törik el.
• A linkek szövege leíró jellegű (nem „kattints ide”, hanem pl. „weboldal akadálymentességi útmutató”).

Hozzáférhetőségi nyilatkozat: kell-e KKV-knak?

A közszféra számára a hozzáférhetőségi nyilatkozat kötelező, ebben kell dokumentálni az akadálymentességi szintet, az ismert hiányosságokat és a visszajelzési lehetőséget.

KKV-knak nem kötelező, de érdemes megfontolni. Egy rövid, őszinte nyilatkozat, amelyben leírod, milyen szinten akadálymentes az oldalad, és hogyan lehet jelezni a problémákat, bizalomépítő elem lehet. Azt üzeni, hogy komolyan veszed a felhasználóid igényeit.

A nyilatkozatnak nem kell hosszúnak lennie, egy rövid oldal, amely tartalmazza az elért szintet, az ismert korlátokat és egy elérhetőséget, teljesen elegendő.

Akadálymentesség és SEO: hogyan függ össze a kettő?

Sokan nem gondolnak erre, de az akadálymentesség és a keresőoptimalizálás számos ponton átfedi egymást. Ami a képernyőolvasónak érthető, az a Google robotjának is érthető.

Néhány konkrét példa:

• Az alt szövegek segítik a Google Images indexelést és a képes keresési eredményeket.
• A logikus H1-H2-H3 struktúra segít a Google-nek megérteni a tartalom hierarchiáját.
• A leíró linkszövegek javítják a belső linkelési struktúra értelmezhetőségét.
• A gyors betöltési idő és a mobilbarát kialakítás a Core Web Vitals részét képezi, ami rangsorolási tényező.
• A strukturált, érthető tartalom az AI-alapú keresési funkciókban (pl. Google AI Overviews) is jobban szerepel.

Egyszóval: ha az akadálymentességen dolgozol, egyszerre javítod a felhasználói élményt és a keresőláthatóságot is. Ez egy ritka win-win helyzet a webfejlesztésben.

Hogyan tovább, ha komolyan veszed az akadálymentességet?

Az akadálymentesség nem egyszeri feladat, hanem folyamatos szemlélet. Néhány gyakorlati lépés, amellyel elindulhatsz:

1. Végezz egy gyors automata auditot a WAVE vagy Lighthouse eszközzel – ez megmutatja, hol állsz most.
2. Javítsd a legkritikusabb hibákat – alt szövegek, kontrasztproblémák, billentyűzetes navigáció.
3. Tesztelj billentyűzettel – 20 perc alatt kiderül, mi az, ami nem működik.
4. Tartsd karban – minden új tartalomnál, bővítménynél, funkciófrissítésnél gondolj az akadálymentességre.
5. Gondolkodj rendszerben – ha új weboldalon dolgozol, az akadálymentességet a tervezési fázisban kell figyelembe venni, nem utólag.

Ha nem tudod, hol tartasz most, egy weboldal audit segíthet feltérképezni a problémákat – beleértve az akadálymentességi hiányosságokat, a UX-problémákat és a konverziós akadályokat is.

Gyakran ismételt kérdések