Akadálymentesség (WCAG, EAA)

Jogi kockázat

Az EAA 2025. június 28-tól él. Az érintett szolgáltatásoknál a hiányos akadálymentesítés panaszt és hatósági eljárást vonhat maga után. Egy webshopnál ez nem elméleti kérdés.

Elveszett vásárlók

A rossz kontraszt és a címke nélküli űrlapmező valódi konverziót visz el. Aki nem tudja kitölteni a pénztár űrlapját, az nem vásárol. A billentyűzettel nem elérhető gomb ugyanígy viselkedik, csak csendben.

SEO- és AI-hatás

Az akadálymentesség nem közvetlen rangsorolási tényező. A mögötte lévő kódminőség viszont az: tiszta címsorstruktúra, értelmes linkszövegek, kitöltött alt-attribútumok. Ugyanezekből dolgozik egy nyelvi modell is, amikor összefoglalja az oldaladat.

A riportokban ezt látjuk: ahol az akadálymentességi pont alacsony, ott a tartalmi szerkezet is zavaros. A kettő ugyanannak a hanyagságnak a két tünete.

• Webshopok: rájuk vonatkozik a legszigorúbban az EAA. A pénztár, a kosár és a termékoldal a kritikus pont.
• Szolgáltatói és céges oldalak: a jogi hatály esetenként változik, a kódminőségi elvárás nem.
• Bank, biztosítás, utazás, e-jegy, e-könyv: az EAA nevesített területei.
• Mikrovállalkozások: bizonyos szolgáltatásoknál mentesülhetnek, de a mentesség nem automatikus.
• Közszféra: rájuk a korábbi akadálymentesítési irányelv már régebb óta vonatkozik.

Nem releváns a staging és a jelszóval védett belső felületeknél, ha valóban nem publikusak. Amint élesedik egy felület, a mérce ugyanaz lesz.

1. Nyisd meg az oldalt Chrome-ban, majd a devtools Lighthouse fülén futtasd le az Accessibility kategóriát. A pontszám 0-100 között mozog.
2. Nézd meg a hibalistát tételesen. A kontraszt, az alt, a címke és a fókusz típusú hibák a leggyakoribbak.
3. Tedd le az egeret. Járd végig az oldalt csak Tab billentyűvel. Minden interaktív elemre el kell jutnod, és látszania kell, hol állsz.
4. Nagyíts 200 százalékra. A szövegnek olvashatónak kell maradnia, vízszintes görgetés nélkül.
5. Ellenőrizd a fő folyamatot: keresés, kosárba tétel, pénztár, kapcsolatfelvételi űrlap.

Jó jelek

• Az automata pont 90 felett van, és a maradék hibák dokumentáltak.
• A fókuszgyűrű minden gombon és linken látszik.
• Minden űrlapmezőhöz tartozik label.
• A képek alt-attribútuma kitöltött vagy szándékosan üres.

Rossz jelek

• 70 alatti pont, több tucat azonos típusú hibával.
• CSS-ben kikapcsolt outline, fókuszjelzés nélkül.
• Csak ikonból álló gombok, felirat és aria-label nélkül.
• „Kattints ide” típusú linkszövegek.

Mit néz ebből a riport

Az audit a Lighthouse akadálymentességi pontját veszi alapul, és a talált hibákat listázza. A szabály hatása közepes, a hatóköre kód. Ez az automatikusan mérhető részt fedi le, nagyjából a WCAG-kritériumok egyharmadát. A teljes megfeleléshez kézi tesztre és képernyőolvasós ellenőrzésre is szükség van.

WordPress

1. Válassz akadálymentességre felkészített sablont. A téma dokumentációjában keresd az „accessibility ready” jelölést.
2. A Média könyvtárban töltsd ki a képek alt mezőjét. Tömeges javításhoz használj alt-kezelő bővítményt.
3. A testreszabóban állítsd be a szöveg és a háttér kontrasztját legalább 4.5:1 arányra.
4. Kapcsold ki az overlay típusú „egykattintásos akadálymentesítő” bővítményeket. Ezek nem oldják meg a hibákat, csak elfedik.
5. Ellenőrizd a menü billentyűzetes működését, főleg a legördülő almenüknél.

Shopify

1. Frissítsd a témát. Az újabb Dawn-alapú sablonok alapból jobb szemantikát adnak.
2. A téma szerkesztőjében javítsd a gombok és a linkek színeit a kontraszt miatt.
3. A termékképekhez a képfeltöltésnél add meg az alt-szöveget.
4. Nézd át az egyedi liquid blokkokat. A div alapú kattintható elemekből csinálj button elemet.

Unas

1. A sablonszerkesztőben javítsd a színpárokat, főleg a kosár és a pénztár gombjainál.
2. A termékadatoknál töltsd ki a képek alternatív szövegét.
3. Az egyedi HTML-blokkokban kerüld a csak vizuálisan formázott álcímsorokat.

Shoprenter

1. A dizájn beállításoknál állítsd be a megfelelő kontrasztot a gomb- és a linkszínekre.
2. A termékképek alt mezőjét a termékszerkesztőben töltsd ki.
3. Az egyedi sablonmódosításokat futtasd át Lighthouse-on minden módosítás után.

Egyedi fejlesztés

1. Építs be automata a11y-tesztet a CI-be, például axe-core alapút. Ez a regressziót fogja meg.
2. Használj natív HTML-elemeket ARIA-toldozás helyett. A button, a nav és a main ingyen hozza a viselkedést.
3. Definiálj látható fókuszstílust a :focus-visible szelektorral.
4. Minden modálisnál kezeld a fókuszcsapdát és az Escape billentyűt.
5. Készíts akadálymentesítési nyilatkozatot, és tartsd karban a listát a ismert hiányosságokról.

• Overlay-widget használata valódi javítás helyett: a hibák a kódban maradnak, a jogi kockázat is.
• Kikapcsolt fókuszjelzés: az outline: none miatt a billentyűzetes látogató elveszti a tájékozódást.
• Üres vagy fájlnév alt-szöveg: az IMG_2043.jpg semmit nem mond sem embernek, sem gépnek.
• Címsorok díszítésre használva: a h3 méret miatti választása szétveri a dokumentum szerkezetét.
• Placeholder címke helyett: gépelés közben eltűnik, a képernyőolvasó pedig nem mindig olvassa fel.
• Halványszürke szöveg fehér alapon: a divatos 3:1 alatti kontraszt megbukik a WCAG AA-n.
• Egyszeri audit, utána semmi: a magyar KKV-oldalak többségén egy sablonfrissítés visszahozza a régi hibákat.

Tipikus hibás és javított markup. A bal oldali változat Lighthouse-ban azonnal hibát dob.

<!-- Rossz: nincs címke, nincs alt, a gomb valójában div -->
<img src="/img/IMG_2043.jpg">
<input type="email" placeholder="E-mail">
<div class="btn" onclick="send()">Küldés</div>

<!-- Jó: szemantikus elemek, kitöltött alt, valódi label -->
<img src="/img/kek-futocipo-oldalnezet.jpg"
     alt="Kék futócipő oldalnézetből, fehér talppal">

<label for="email">E-mail cím</label>
<input type="email" id="email" name="email" autocomplete="email" required>

<button type="submit">Küldés</button>

A dekorációs képnél az alt="" a helyes megoldás. Így a képernyőolvasó átugorja, a validátor pedig nem jelez hibát.

Parancssori ellenőrzés egy URL-re, JSON-kimenettel:

npx lighthouse https://pelda.hu \
  --only-categories=accessibility \
  --output=json --output-path=./a11y.json

A kapott fájlban az audits objektum tartalmazza a bukott szabályokat és az érintett elemek szelektorait. Ezt lehet közvetlenül feladatlistává alakítani a fejlesztőnek.