Akadálymentes weboldal Debrecenben 2026: WCAG, EAA és amit a helyi vállalkozásoknak tudni kell

Miért nem kerülhető meg 2026-ban az akadálymentesség?

Az Európai Akadálymentességi Irányelv (European Accessibility Act, EAA) 2025. június 28. óta kötelező érvényű az EU-s digitális szolgáltatások jelentős részére. A hazai jogba a 2023. évi LXIX. törvény ülteti át a szabályozást, és 2026-ban a NAIH, illetve a fogyasztóvédelmi hatóság már aktívan vizsgálja a magyar weboldalakat — Debrecenben és Hajdú-Bihar vármegye többi városában működő vállalkozásokat is beleértve. Az ellenőrzések különösen az alábbi szektorokat érintik:

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 meg nem felelő weboldalak fogyasztóvédelmi bírságot kockáztatnak (akár az éves árbevétel 5%-át), és van egy üzletileg is fontos szám: a magyar lakosság körülbelül 15%-a él valamilyen tartós fogyatékossággal — ez Debrecenben és térségében is jelentős, ma jórészt kihasználatlan vásárlóerőt jelent egy nem akadálymentes weboldal számára.

WCAG 2.2 AA — az elvárt szint

A Web Content Accessibility Guidelines (WCAG) 2.2-es verziója az iparági alapkövetelmény 2026-ban. Az AA megfelelőség négy alapelvre épül:

É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ő bemeneti módokkal
Érthető (Understandable) — a tartalom és a működés egyértelmű legyen
Robusztus (Robust) — kompatibilis legyen a különféle segítő technológiákkal

1. Színkontraszt — a leggyakrabban elrontott 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 helyi kis- és középvállalkozások weboldalain visszatérő hiba: világosszürke szöveg fehér háttéren, vagy márkaszínű gomb halvány pasztell alapon — ez sok tócóskerti vagy belvárosi kisbolt oldalán is előfordul. Ellenőrzéshez ajánlott eszközök: WebAIM Contrast Checker, Stark Figma plugin, axe DevTools, Lighthouse accessibility audit.

2. Alt szöveg minden képhez

A képeknek értelmes alt attribútummal kell rendelkezniük, kivéve a tisztán dekoratív elemeket (ott alt="" a helyes). Szabályok:

Tartalmi képek: rövid, leíró alt — „Munkatársunk konzultáción egy debreceni ügyféllel"
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ónak kizárólag billentyűzettel is elérhetőnek kell lennie (Tab, Shift+Tab, Enter, Space, nyilak). A leggyakoribb hibák:

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

Megoldás: szemantikus HTML használata (button, a) kattintható div-ek helyett, és jól látható focus-indicator (:focus-visible) — minimum 2px körvonal a márka elsődleges színével.

4. Szemantikus HTML

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

<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 ott egészítik ki a HTML-t, ahol a puszta szemantika nem elég. Az alapelv: „No ARIA is better than bad ARIA" — a rosszul használt ARIA rosszabb, mintha egyáltalán nem lenne ott.

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

Miért éri meg üzletileg is Debrecenben?

Az akadálymentes weboldal nem csupán jogi kötelezettség — komoly üzleti előny is, különösen egy erős ipari-beszállítói háttérrel (Déli Gazdasági Övezet, BMW-gyár és beszállítói) rendelkező városban, ahol a B2B ügyfelek is egyre tudatosabban választanak partnert:

+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, ami sok debreceni beszállító cégnél releváns szempont

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

A Weblapkészítés Debrecen 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 már meglévő weboldalakon akadálymentességi auditot is végzünk — átvizsgáljuk a teljes oldalt, és pontos, prioritásolt javítási tervet adunk. Ha vállalkozásának EAA-megfelelő weboldalra van szüksége, vagy szeretné kihasználni a +15% akadálymentes piaci előnyt, vegye fel velünk a kapcsolatot.