Weboldal akadálymentesítése: kezdő útmutató a WCAG 2.2 szerint

Weboldalt úgy akadálymentesíthetsz, hogy egérrel, billentyűzettel, képernyőolvasóval, nagyítással vagy kapcsolóeszközzel is lehessen használni: valódi HTML-elemeket használj gombokhoz, linkekhez, címsorokhoz és űrlapcímkékhez, a képeknek adj értelmes alt szöveget, tartsd magas a szöveg kontrasztját, és tedd láthatóvá a fókuszt. A cél a WCAG 2.2 AA szint. Az automatikus ellenőrzők a probléma egy részét fogják meg; egy tízperces billentyűzetes és képernyőolvasós teszt a többit nagyrészt kiszűri.

Mit jelent a gyakorlatban az „akadálymentes”

Az akadálymentesség emberekről szól: egy vakról, aki képernyőolvasóval használja a gépet; egy remegő kezű emberről, aki billentyűzettel navigál; egy gyengén látóról, aki 200%-ra nagyít; valakiről, aki erős napfényben olvas; valakiről, akinek átmenetileg törött a csuklója. Az akadálymentes kialakítás általában mindenkinek jobbá teszi az oldalt: tisztább szerkezet, olvasható szöveg, űrlapok, amelyek elmagyarázzák a hibáikat.

A referenciaszabvány a W3C Web Content Accessibility Guidelines (WCAG). 2026 szeptemberétől az aktuális verzió a WCAG 2.2 (2023 októberében jelent meg, 2024 decemberében frissítették); a WCAG 3 korai tervezet. A WCAG négy alapelvre épül — a tartalomnak érzékelhetőnek, kezelhetőnek, érthetőnek és robusztusnak kell lennie —, és három megfelelési szintje van:

Szint	Mit jelent	Kinek célja
A	A minimum; enélkül egyes emberek egyáltalán nem tudják használni az oldalt	Mindenkinek
AA	Az általános cél; lefedi a kontrasztot, a fókuszt, az átméretezést és a hibakezelést	A legtöbb szervezetnek és sok törvénynek
AAA	A legszigorúbb; nem minden tartalom érheti el	Speciális szolgáltatásoknak és közönségnek

Több helyen a törvények hivatkoznak a WCAG-ra — például az Európai Akadálymentességi Törvény, amely 2025 júniusa óta több fogyasztói digitális szolgáltatásra vonatkozik az EU-ban. Hogy melyik szabály vonatkozik rád, az attól függ, hol működsz és mit árulsz; ha bizonytalan vagy, kérj tanácsot szakembertől. Ez az útmutató a gyakorlati munkával foglalkozik.

Lehetőségek: hogyan jutsz el oda

Megközelítés	Mire jó	Kompromisszum
Eleve beépítve építeni	Új oldalak és appok	Összességében a legkevesebb munka; előre el kell határozni
Átvizsgálás és javítás	Meglévő oldalak	Valódi problémákat talál; oldalanként fókuszált munka
Szakmai átvizsgálás	Szabályozott területek, nagy oldalak, közintézmények	Alapos és dokumentált; pénzbe kerül
Overlay-widget	Nem ajánlott	Nem tudja javítani az alapul szolgáló kódot

Kisebb oldalaknál az első kettő általában elég: mondd meg az AI-nak, hogy kezdettől akadálymentesen építsen, majd indulás előtt végezz átvizsgálást.

A legfontosabb javítások

Használd a megfelelő HTML-elemeket

Az akadálymentesség nagy része a helyes HTML-lel jár. Egy <button> fókuszálható, működik Enterrel és Szóközzel, és gombként olvassa be a képernyőolvasó. Egy kattintás-kezelővel ellátott <div> egyiket sem. Az AI-generált kód néha mindenre stílusozott div-eket használ; kérd a szemantikus elemeket:

<button> műveletekhez, <a href> navigációhoz
Oldalanként egy <h1>, utána <h2>, <h3> sorrendben — a képernyőolvasó-felhasználók címsorról címsorra ugranak
Tájékozódási pontok: <header>, <nav>, <main>, <footer>
Minden űrlapmezőhöz kapcsolt <label>
Az oldal nyelve a <html lang="hu"> elemben

ARIA-attribútumot csak akkor használj, ha semmilyen natív elem nem illik — például egyedi fülkészletnél vagy combobox-nál. A rossz ARIA rosszabb, mint a semmi.

Billentyűzetes elérés és látható fókusz

Mindent, amit egérrel meg lehet csinálni, billentyűzettel is el kell tudni végezni (WCAG 2.1.1). Nyomj Tabot az oldalon: minden link, gomb és mező logikus sorrendben legyen elérhető, és mindig lásd, hol van a fókusz (2.4.7 Focus Visible). A WCAG 2.2 azt is előírja, hogy a fókuszált elem ne takaródjon teljesen tapadó fejléc vagy sütibanner mögé (2.4.11, AA szint).

Gyakori hibák: csak egéregyel-ráhelyezéssel nyíló menük, modálok, amelyek nem tartják a fókuszt, vagy nem zárhatók Escape-pel, és CSS-ben az outline: none, semmi pótlás nélkül.

Szöveges alternatívák

Minden értelmes képhez olyan alt szöveg kell, amely a kontextusban leírja, mit mutat („A séf a kóstolómenüt tálalja”, nem „kep1.jpg”). A díszítő képek üres alt="" attribútumot kapnak, hogy a képernyőolvasó átugorja őket. Az csak ikont tartalmazó gomboknak legyen akadálymentes neve („Bezárás”, „Keresés”). A videóknak felirat kell; a hangfelvételeknek átirat.

Szín és kontraszt

A WCAG 2.2 AA a normál szövegre legalább 4,5:1, a nagy szövegre 3:1 kontrasztarányt ír elő (1.4.3), a felületi elemekre, például a beviteli mezők szegélyeire és az értelmes ikonokra pedig 3:1-et (1.4.11). A szokásos hibák a világosszürke helyőrző szöveg és a halvány gombok. Emellett soha ne csak a szín hordozzon jelentést — egy érvénytelen mező piros szegélyéhez hibaüzenet is kell.

Átméretezés és újraelrendezés

A szövegnek 200%-os nagyításnál is használhatónak kell maradnia (1.4.4), a tartalomnak pedig 320 CSS-pixeles szélességnél vízszintes görgetés nélkül kell működnie (1.4.10). Egy megfelelő reszponzív elrendezés ezek nagy részét megoldja.

Célterületek, űrlapok és hibák

Célterület mérete: a WCAG 2.2 AA legalább 24 × 24 CSS-pixeles mutatós célterületet kér, vagy elég távolságot a kisebbek körül (2.5.8). A nagyobb célterület barátságosabb telefonon.
Űrlapok: látható címkék (nem csak helyőrző), világos útmutatás, és hibaüzenetek, amelyek megmondják, mi a baj és hogyan javítható, közvetlenül a mező mellett.
Bejelentkezés: ne kérj rejtvény megfejtését vagy kód átírását alternatíva nélkül; engedd a jelszókezelőket és a beillesztést (3.3.8 Accessible Authentication).

Promptok, amelyek működnek

Építsd ezt az oldalt WCAG 2.2 Level AA szint szerint: szemantikus HTML tájékozódási pontokkal, oldalanként egy h1, a címsorok sorrendben, valódi gomb- és linkelemek, címkék minden űrlapmezőn, látható fókusz-stílusok, legalább 4,5:1 szövegkontraszt, alt szöveg az értelmes képeken és alt="" a díszítőkön, valamint html lang beállítva.

Végezz akadálymentességi átvizsgálást a /signup és /checkout oldalakon. Ellenőrizd a billentyűzetes használatot, a fókuszsorrendet, a látható fókuszt, a címkéket, a hibaüzeneteket, a kontrasztot és az ikongombok képernyőolvasós nevét. Sorold fel minden problémát a WCAG-kritériummal együtt, majd javítsd őket úgy, hogy a vizuális dizájnt a szükségesnél jobban ne változtasd meg.

A mobil menü nem használható billentyűzettel. Alakítsd gombbá aria-expanded attribútummal, a megnyitáskor vidd a fókuszt a menübe, Escape-pel zárd be, és vidd vissza a fókuszt a gombra.

Lépésről lépésre

Futtass automatikus ellenőrzést. A Lighthouse Akadálymentesség szekciója a Chrome DevTools-ban, vagy az axe böngészőbővítmény, minden fő oldalon. Javíts ki mindent, amit jelez.
Húzd ki az egeret. Tabbolj végig minden oldalon, és végezd el az összes kulcsfeladatot — regisztráció, keresés, fizetés. Jegyezd fel, amit nem érsz el, amin nem látod a fókuszt, vagy ahonnan nem tudsz kilépni.
Nagyíts 200%-ra, és szűkítsd az ablakot telefonszélességre. Semmi ne legyen levágva, és ne kelljen vízszintesen görgetni.
Próbálj ki egy képernyőolvasót tíz percig: VoiceOver Macen és iPhone-on, TalkBack Androidon, vagy NVDA Windowson (ingyenes). Figyeld a címsorokat, linkeket és űrlapmezőket. A „gomb” név nélkül, vagy a „link, kattints ide” azt jelenti, hogy van még teendő.
Ellenőrizd a kontrasztot a szövegeken, gombokon és beviteli mezőkön kontrasztellenőrző eszközzel.
Javíts, majd teszteld újra ugyanazokat a feladatokat.
Tégy közzé akadálymentességi nyilatkozatot, amely megmondja, melyik szabványt célozod, és hogyan lehet jelezni a problémákat — és válaszolj ezekre a jelzésekre.

Gyakori hibák

Overlay-widgetre támaszkodni a kód javítása helyett.
A fókuszkeretet eltávolítani, mert rendetlennek látszik, pótlás nélkül.
Csak helyőrző szöveget használni címkeként. Amint elkezd gépelni a felhasználó, eltűnik, és gyakran alacsony a kontrasztja.
„Kattints ide” és „Tovább olvasom” linkek. Kontextus nélkül a képernyőolvasó-felhasználó egy sor azonos linket hall.
Kulcsszavakkal tömött alt szöveg. Az alt szöveg az embereknek szól; írd le a képet.
Egyszer tesztelni. Minden új funkció megtörheti a billentyűzetes elérést. Adj egy billentyűzetes kört az indulás előtti teszteléshez.

Akadálymentességi ellenőrzőlista

Az automatikus ellenőrzés (Lighthouse vagy axe) hibátlan a fő oldalakon
Minden feladat elvégezhető csak billentyűzettel
A fókusz mindig látható, és soha nem takarja tapadó elem
Szemantikus címsorok, tájékozódási pontok, gombok és linkek; lang beállítva
Értelmes alt szöveg; díszítő képeken alt=""; videón felirat
A szöveg kontrasztja ≥ 4,5:1 (nagy szöveg ≥ 3:1); felületi elemek ≥ 3:1
Működik 200%-os nagyításnál és 320 px szélességnél
Minden űrlapmezőnek látható címkéje és világos hibaüzenete van
Akadálymentességi nyilatkozat, amely megmondja, hova lehet jelezni a problémákat

Az ehhez tartozó fogalmakért olvasd el a mi a webes akadálymentesség cikket. Az akadálymentes és a jó dizájn sokban átfedik egymást; a vizuális oldalról a hogyan tervezz jól kinéző appot AI-val útmutató szól.

Akadálymentesség a Mythexen

A Mythex azt az akadálymentességi szabványt építi be, amelyet kérsz, ezért írd bele a „WCAG 2.2 AA” kifejezést az első promptodba és a későbbi kéréseidbe is. A Preview telefonméretű keretét használhatod a kis képernyők ellenőrzésére (Preview és Code), de a billentyűzetes, nagyítási és képernyőolvasós teszteket a közzétett URL-en vagy az előnézeten, saját lapon megnyitva lehet a legjobban elvégezni. Kérd meg az ügynököt, hogy vizsgáljon át egy oldalt, javítsa, amit talál, majd te magad teszteld a javításokat — az automatikus átvizsgálás kiindulópont, nem az ügy lezárása.

Kérdések

Melyik az aktuális akadálymentességi szabvány weboldalakra?

2026 szeptemberétől a W3C aktuális szabványa a WCAG 2.2, amelyet 2023 októberében tettek közzé először. A legtöbb szervezet és sok törvény az AA szintet célozza meg. A WCAG 3 még korai tervezet.

Megfelelővé teheti az oldalamat egy akadálymentesítő overlay?

Ne bízz benne kizárólag. Az overlay egy eszköztárat tesz az oldal fölé, de nem tudja javítani a hiányzó címkéket, a törött billentyűzetes elérést vagy a gyenge szerkezetet az alapul szolgáló kódban. Az oldal magának a javítása teszi használhatóvá.

Minden problémát megtalálnak az automatikus ellenőrzők?

Nem. Az olyan eszközök, mint a Lighthouse és az axe, az olyan dolgokat fogják meg, mint a hiányzó alt szöveg, az alacsony kontraszt és a címke nélküli mezők, de sok problémához — zavaró fókuszsorrend, értelmetlen linkszöveg, jelen lévő, de rossz alt szöveg — egy ember kell, aki billentyűzettel és képernyőolvasóval ellenőriz.

Milyen kontrasztarányt ír elő a WCAG?

A WCAG 2.2 AA szintje normál szövegre legalább 4,5:1, nagy méretű szövegre 3:1, a felületi elemekre, például a beviteli mezők szegélyeire és a jelentést hordozó ikonokra pedig 3:1 arányt kér.