Akadálymentes weboldal készítés Budapest 2026: WCAG, EAA és a magyar piaci előny

Miért kötelező 2026-ban a budapesti weboldalak akadálymentessége?

Az Európai Akadálymentességi Irányelv (European Accessibility Act, EAA) 2025. június 28-tól kötelezővé teszi az akadálymentességet az EU-s digitális szolgáltatások jelentős részénél. Magyarországon a szabályozást a 2023. évi LXIX. törvény ülteti át a hazai jogba. 2026-ban már a NAIH és a Fogyasztóvédelmi Hatóság aktívan ellenőrzi a magyar weboldalakat — különösen az alábbi szektorokban:

E-kereskedelem (webshopok)
Banki, biztosítási, pénzügyi szolgáltatások
Utazás, közlekedés, szállás (jegyfoglalás, asztalfoglalás)
Telekommunikáció, internet-szolgáltatás
Audiovizuális médiaszolgáltatás

A nem-megfelelő weboldalak fogyasztóvédelmi bírságot kaphatnak (akár 5%-os éves árbevétel), és ami fontosabb: a magyar lakosság körülbelül 15%-a él valamilyen tartós fogyatékossággal — ők a budapesti piacon is jelentős vásárlóerőt képviselnek, amelyet egy nem-akadálymentes weboldal teljesen kizár.

WCAG 2.2 AA — az ipari standard

A Web Content Accessibility Guidelines (WCAG) 2.2 a 2026-os elvárt szint. Az AA megfelelőség 13 elven nyugszik, négy fő kategóriában:

Érzékelhető (Perceivable) — minden tartalom észlelhető legyen valamilyen érzékszervvel
Kezelhető (Operable) — a felhasználói felület működjön különböző bemenetekkel
Érthető (Understandable) — a tartalom és a működés egyértelmű legyen
Robusztus (Robust) — különböző segítő technológiákkal kompatibilis legyen

1. Színkontraszt — a #1 akadálymentességi pont

A WCAG 2.2 AA előírja:

Normál szöveg: minimum 4.5:1 kontraszt arány
Nagyobb szöveg (18pt+ vagy 14pt+ bold): minimum 3:1
UI elemek (gombok, ikonok): minimum 3:1

A budapesti weboldalak gyakori hibája: világosszürke szöveg fehér háttéren, vagy primer-szín gomb világos pasztel háttéren. Eszközök az ellenőrzéshez: WebAIM Contrast Checker, Stark Figma plugin, axe DevTools, Lighthouse accessibility audit.

2. Alt szöveg minden képhez

A képeknek értelmes alt attribútum kell, hogy legyen, kivéve a tisztán dekoratív képeknél (ahol alt="" a megfelelő). Szabályok:

Tartalmi képek: rövid, leíró alt — „Csapatkép a budapesti irodánkban"
Funkcionális képek (gombok, linkek): a funkciót írja le — „Ajánlatkérés gomb"
Komplex képek (grafikonok, infografikák): rövid alt + hosszú leírás külön szövegben
Dekoratív képek: üres alt — alt=""

3. Billentyűzetes navigáció

Minden funkciót használhatónak kell lennie csak billentyűzettel (Tab, Shift+Tab, Enter, Space, nyilak). A leggyakoribb hibák:

Hover-effektek, amelyek csak egér esetén működnek
Kattintható div-ek, amelyek nem fókuszálhatók
Modal ablakok, amelyekből nem lehet Esc-pel kilépni
Hamburger menük, amelyek nem nyithatók Enterrel

Megoldás: használjon szemantikus HTML-t (button, a), ne kattintható div-eket. A focus-indicator (:focus-visible) jól látható legyen — minimum 2px körvonal a primer színnel.

4. Szemantikus HTML

A szemantikus HTML elemei segítik a képernyőolvasókat (NVDA, JAWS, VoiceOver, TalkBack):

<header>, <nav>, <main>, <article>, <section>, <footer>
Címhierarchia: egy <h1> oldalanként, logikus h2/h3 lépcső
<button> kattintható elemekhez (nem div onclick)
<a href> linkhez (nem JavaScript onclick a div-en)
<label for> minden form-mezőhöz
<table>, <th>, <td> táblázatos adatokhoz

5. ARIA attribútumok — okosan

Az ARIA (Accessible Rich Internet Applications) attribútumok kiegészítik a HTML-t, ahol a szemantika nem elég. Fontos elv: „No ARIA is better than bad ARIA" — rosszul használt ARIA rosszabb, mint semmi.

aria-label — láthatatlan címke (pl. ikonos gombokra)
aria-describedby — kiegészítő leírás más elemen
aria-expanded — accordion, dropdown nyitott/zárt állapota
aria-live — dinamikus tartalom (pl. űrlap-hibák)
role="dialog" — modal ablakhoz

6. Form-ok akadálymentesen

Minden mezőhöz látható <label>
Hiba-üzenet a mező alatt, aria-describedby kapcsolattal
required attribútum, csillag jelzéssel a label-ben
Megfelelő autocomplete attribútumok (name, email, tel)
Hiba esetén fókusz az első hibás mezőre
Sikeres küldés után aria-live="polite" visszajelzés

7. Videó és audio tartalom

Felirat (caption) minden hangos videóra
Átirat (transcript) hosszabb videókhoz, podcastokhoz
Hangleírás (audio description) komplex vizuális tartalmakhoz
Auto-play tilos hangos tartalommal
Saját kontroll — pause, volume, fullscreen elérhető legyen

8. Animáció és mozgás

A WCAG 2.2 új követelménye:

Megállítható, szüneteltethető auto-mozgó tartalom (carousel, slider)
prefers-reduced-motion CSS media query támogatása — aki kéri, kapja a mozgásmentes verziót
Kerülje a villogó (flash) tartalmakat — másodpercenként maximum 3 villanás
Parallax-effektusok ne legyenek vesztibulárisan zavaróak

CSS példa:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

9. Reszponzív design + zoom

200%-os zoom esetén minden tartalom használható és olvasható maradjon
Vízszintes görgetés ne legyen szükséges
Tartalom ne ugorjon szét vagy fedjen le egymást
Minimum 44×44 px tap-target méret

10. Magyar nyelvi specifikum

lang="hu" a HTML elemen — a képernyőolvasó magyar kiejtéssel olvassa
Idegen nyelvű részeknél lang="en" stb.
Magyar ékezetes karakterek megfelelő kódolása (UTF-8)
Magyar nyelvű alt szövegek és aria-label-ek

Akadálymentességi nyilatkozat — kötelező

Az EAA előírja, hogy minden érintett weboldalnak rendelkeznie kell akadálymentességi nyilatkozattal, amely tartalmazza:

A megfelelőség szintje (teljes/részleges/nem-megfelelő)
Az ismert hiányosságok listája
A nem-megfelelőség indoklása (pl. aránytalan teher)
A felhasználói visszajelzés módja
A jogorvoslati lehetőség
A nyilatkozat dátuma és módszertana (önértékelés vagy harmadik fél audit)

Eszközök az akadálymentesség ellenőrzéséhez

Lighthouse Accessibility — Chrome DevTools beépítve
axe DevTools — Deque ingyenes Chrome extension
WAVE — WebAIM kiegészítő
NVDA + Firefox — ingyenes képernyőolvasó tesztelésre
Pa11y — parancssori CI/CD integrációhoz
Stark — Figma/Sketch design akadálymentesség ellenőrzés

Mennyi a budapesti piaci előny?

Az akadálymentes weboldal nem csak jogi kötelezettség — komoly üzleti előny is:

+15% potenciális vásárlóbázis — fogyatékkal élő ügyfelek
SEO-előny — a Google preferálja a szemantikus, akadálymentes HTML-t
Jobb mobilos UX — az akadálymentesítés a mobil-élményt is javítja
Hangalapú keresés — Siri, Alexa, Google Assistant jobban érti az akadálymentes oldalakat
Brand-érték — a társadalmi felelősségvállalás üzenete
EU pályázati pluszpont — közbeszerzési előny

Akadálymentes weboldal készítés a Weblapkészítés Budapesten

A Weblapkészítés Budapest minden új weboldalon alapból WCAG 2.2 AA szintet céloz: szemantikus HTML, megfelelő kontraszt, billentyűzetes navigáció, ARIA-attribútumok, akadálymentességi nyilatkozat. A meglévő weboldalokon akadálymentességi auditot is végzünk — átnézzük a teljes oldalt, és pontos, prioritásolt javítási tervet adunk. Ha cégének EAA-megfelelő weboldalra van szüksége, vagy szeretné kihasználni a +15% akadálymentes piaci előnyt, vegye fel velünk a kapcsolatot.