WCAG

WCAG 2.1 vagy 2.2? Így akadálymentesíts jól

houseWebD Jun 30, 2025

Utoljára frissítve: 2025. július

Ha webfejlesztőként dolgozol, akkor valószínűleg már hallottál a WCAG-ról – de tudod-e pontosan, mi változott a 2.1-es verzióról a 2.2-re? És ami még fontosabb: miért kellene ezzel törődnöd? Ebben a cikkben egyszerű nyelven magyarázzuk el a két verzió közötti különbségeket, és azt is megmutatjuk, hogyan érintik ezek a változások a mindennapi fejlesztési munkádat.

Mi is az a WCAG? Gyors ismétlés

A WCAG (Web Content Accessibility Guidelines) a világ legfontosabb weboldal-akadálymentességi szabványa. Egyszerűen fogalmazva: ezek azok a szabályok, amelyek szerint a weboldalaknak működniük kell, hogy mindenki használni tudja őket – függetlenül attól, hogy van-e valamilyen fogyatékosságuk vagy sem.

Gondolj bele: ha valaki nem látja a képernyőt, képernyőolvasót használ. Ha valaki nem tudja használni az egeret, csak a billentyűzetet használja. Ha valaki színvak, máshogy látja a színeket. A WCAG szabályai segítik a fejlesztőket abban, hogy minden felhasználó számára használható weboldalakat készítsenek.

WCAG 2.1: Mi volt benne?

A WCAG 2.1 2018-ban jelent meg, és 17 új sikerkritériumot adott hozzá a 2.0-s verzióhoz. A legnagyobb újdonságok:

Mobilbarát szabályok

  • Érintési célpontok mérete: Az interaktív elemeknek (gombok, linkek) legalább 44×44 pixel méretűnek kell lenniük
  • Eszköz orientáció: A tartalom ne legyen lezárva egyetlen orientációra (álló vagy fekvő)
  • Beviteli módok: A funkciók ne függjenek kizárólag egyetlen beviteli módtól

Látássérült felhasználók számára

  • Sortörés: 320 pixel széles nézetablakban is olvasható legyen a tartalom
  • Nem-szöveges kontrasztok: A felhasználói felület elemeinek is megfelelő kontrasztúnak kell lenniük

Kognitív és mozgássérült felhasználók számára

  • Karakteres billentyűparancsok: Egykarakteres billentyűparancsok kikapcsolhatók vagy módosíthatók legyenek
  • Időkorlátok: A felhasználó figyelmeztetést kapjon a időkorlátok előtt

WCAG 2.2: Mi változott?

A WCAG 2.2 2023 októberében jelent meg, és 9 új sikerkritériumot vezetett be. De a legfontosabb változás az volt, hogy egy korábbi kritériumot eltávolítottak.

Új sikerkritériumok

Fókusz láthatósága (Enhanced) - AA szint Ez talán a legfontosabb változás. A fókusz indikátorának most már sokkal láthatóbbnak kell lennie. Korábban elég volt egy vékony keret, most már:

  • Legalább 2 pixel vastag kontúr VAGY
  • Legalább 1 pixel vastag kontúr, de nagyobb kontraszttal

Fókusz nem takarható el - AA szint A fókusz nem lehet teljesen eltakarva más elemek által. Ha mégis, akkor a felhasználónak képesnek kell lennie eltávolítani a takaró elemet.

Fogd és vidd funkcionalitás - AA szint Minden drag és drop műveletet egyéb módon is elérhetővé kell tenni (például kattintással vagy billentyűzettel).

Célpont mérete (Enhanced) - AAA szint Az érintési célpontoknak legalább 44×44 pixel méretűnek kell lenniük, kivéve ha:

  • Egy másik célpont legalább 44 pixel távolságra van
  • Egy sor szövegben található link
  • A böngésző alapértelmezett megjelenítése

Következetes segítség - A és AA szint Ha egy weboldalon segítséget kínálsz (például chat, telefon, email), akkor ennek minden oldalon ugyanazon a helyen kell lennie.

Mit távolítottak el?

4.1.1 Parsing - Ez a kritérium, amely a HTML validitásról szólt, kikerült a 2.2-ből. Ennek oka, hogy a modern böngészők már sokkal jobban kezelik a hibás HTML kódot, és ez a kritérium inkább zavart okozott, mint segített.

Miért fontosak ezek a változások?

1. Jobb mobilélmény

A mobil használat ma már domináns, és a WCAG 2.2 ezt tükrözi. A fejlesztett fókusz szabályok különösen fontosak a mobil böngészésben, ahol a felhasználók gyakran billentyűzet nélkül navigálnak.

2. Gyakorlatiasabb szabályok

A 2.2-es verzió sokkal gyakorlatiasabb lett. A parsing szabály eltávolítása és az új szabályok mind olyan problémákra fókuszálnak, amelyekkel a felhasználók valóban találkoznak.

3. Jobb eszközhasználat

A drag és drop alternatívák biztosítása nem csak a mozgássérült felhasználóknak segít, hanem mindenkinek, aki például mobil eszközön böngészik.

Hogyan készülj fel fejlesztőként?

1. Fókusz indikátorok felülvizsgálata

Nézd át a weboldalad összes interaktív elemét. A fókusz indikátorok láthatóak és vastagok-e?

/* Példa jobb fókusz indikátorra */
button:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

2. Drag és drop alternatívák

Ha van drag és drop funkcionalitásod, gondoskodj róla, hogy billentyűzettel vagy kattintással is működjön.

3. Konzisztens segítség

Ha van ügyfélszolgálatod vagy segítség funkciód, tedd ugyanarra a helyre minden oldalon.

4. Tesztelés

Használj olyan eszközöket, mint az axe-core vagy a Lighthouse, hogy ellenőrizd a megfelelést.

Mikor kell átállni?

Habár a WCAG 2.2 már hivatalosan is elérhető, a legtöbb szervezet és jogszabály még mindig a 2.1-es verzióra hivatkozik. De ez hamarosan változni fog:

  • 2025-re a legtöbb európai ország várhatóan átvált a 2.2-re
  • Nagy cégek már most elkezdték a 2.2-es megfelelést
  • Jobb SEO: A Google algoritmusai már figyelembe veszik az akadálymentességet

Összegzés

A WCAG 2.1-ről 2.2-re való átállás nem forradalmi változás, hanem evolúció. A legfontosabb változások:

  1. Jobb fókusz indikátorok – láthatóbbak és vastagabbak
  2. Drag és drop alternatívák – minden funkciónak többféle elérési módja van
  3. Konzisztens segítség – a segítség mindig ugyanott található
  4. Gyakorlatiasabb szabályok – kevesebb technikai részlet, több valódi felhasználói élmény

Ha már most elkezdened a felkészülést, akkor amikor a 2.2-es verzió széles körben elterjedtté válik, te már készen állsz. És ami még fontosabb: a felhasználóid már most jobb élményt kapnak.

Segítségre van szükséged a WCAG 2.2 implementálásában? Lépj kapcsolatba velünk vagy látogasd meg főoldalunkat a webd.hu címen további információkért és szakértői tanácsokért. A WebD kizárólag olyan weblapokat fejleszt, melyek az elérhető 100 pontból 100 pontot elérnek az akadálymentességi teszten.

Kapcsolódó blogcikkeink