Weboldal akadálymentesítés ellenőrzőlistája KKV-knak
Nem tudod, hol kezdd az akadálymentesítést? Ez a lista végigvezet minden fontos szempontón — a szövegkontraszt méréstől a kötelező jogi nyilatkozatig. WCAG 2.1 AA szabvány szerint, magyar KKV-kra szabva.
Mire való ez az ellenőrzőlista?
A 2022. évi XVII. törvény (az Európai Akadálymentesítési Irányelv — EAA — magyar átültetése) alapján 2025. június 28-tól minden online terméket vagy szolgáltatást értékesítő vállalkozásnak akadálymentesen kell üzemeltetnie a weboldalát. Ez nem csupán a nagy cégek feladata: a törvény a kis- és középvállalkozásokat is érinti, amennyiben webshopot, online foglalót, vagy bármilyen digitális ügyfélfelületet üzemeltetnek.
Ez az ellenőrzőlista abban segít, hogy saját magad is felmérhesd, hol tart a weboldalad. Nem helyettesíti a szakértői auditot — a WCAG 2.1 AA szabványnak való teljes megfelelés manuális tesztelést és képernyőolvasós ellenőrzést is igényel —, de kiváló kiindulópont ahhoz, hogy tudd, mire kell figyelni, és mivel érdemes foglalkoznod először.
A listák három súlyossági szinttel dolgoznak. A kritikus elemek a törvény szempontjából legfontosabb, bírságot vonzó hiányosságokat jelölik. A közepes elemek nem feltétlenül törvényi követelmények, de jelentősen rontják a felhasználói élményt fogyatékkal élő látogatók számára. Az ajánlott elemek az „arany szint" felé mutatnak — jó gyakorlatok, amelyekkel a weboldalad valóban befogadóvá válik.
Az ellenőrzőlista
Menj végig minden kártyán sorban. Ha egy elemet nem tudsz kipipálni, jegyezd fel — ezek lesznek a fejlesztési prioritásaid.
Vizuális & kontraszt
- Szöveg–háttér kontraszt legalább 4,5:1 arányú (normál szöveg)
- Nagy szöveg (18pt vagy 14pt félkövér) kontrasztja legalább 3:1
- UI komponensek (gombok, beviteli mezők kerete) kontrasztja legalább 3:1
- Az oldal 200%-ra nagyítva sem törik szét (nem jelenik meg vízszintes görgetősáv)
- Az információ nem kizárólag színnel van közvetítve (pl. hibás mezőnél piktogram is van)
Képek & média
- Minden tartalmi képhez van értelmes
altszöveg - Dekoratív képeknél üres
alt=""attribútum van (képernyőolvasó átugorja) - Videókhoz felirat (cc) vagy szöveges átirat érhető el
- Infografikáknál, diagramoknál szöveges magyarázat is szerepel az oldalon
- Automatikusan lejátszó animációk megállíthatók, szüneteltethetők
Billentyűzet & navigáció
- Az oldal minden interaktív eleme elérhető kizárólag Tab billentyűvel
- A fókuszállapot (focus ring) vizuálisan egyértelműen látható minden elemen
- Nincs fókuszcsapda: modálokból, dropdown-okból is ki lehet lépni Escape-pel
- „Ugrás a tartalomra" (skip navigation) link van az oldal tetején
- A navigációs menük és dropdown-ok billentyűzettel is teljes mértékben kezelhetők
Formok & interakciók
- Minden beviteli mezőhöz látható, programozottan társított
<label>tartozik - A hibaüzenetek szövegesen leírják a hibát (nem csak piros szín jelzi)
- A kötelező mezők jelöltek (csillag + szöveges magyarázat a form elején)
- Az
autocompleteattribútum helyesen be van állítva a személyes adatmezőkön - Ha van CAPTCHA, alternatív ellenőrzési módszer is elérhető (pl. audio)
HTML struktúra & szemantika
- A heading-hierarchia helyes: oldalanként egy H1, alatta H2, H3 stb. sorrendben
- Landmark régiók jelen vannak:
<header>,<main>,<nav>,<footer> - Minden oldalnak egyedi, leíró
<title>eleme van - Listák szemantikus elemekkel szerepelnek (
<ul>/<ol>, nem csak CSS-sel formázott div-ek) - A
<html>tagen be van állítva alang="hu"attribútum
Jogi dokumentumok
- A weboldalon elérhető az Akadálymentesítési Nyilatkozat (Accessibility Statement)
- A nyilatkozat tartalmaz visszajelzési mechanizmust (email, form, telefonszám)
- A nyilatkozat tartalmazza, hogy panasz esetén melyik hatósághoz lehet fordulni
- A nyilatkozat egyértelműen megjelöli a megfelelési szintet (pl. WCAG 2.1 AA részleges)
- Az ismert hiányosságok és az elhárítás tervezett időpontja szerepel a nyilatkozatban
Hogyan használd ezt a listát a gyakorlatban?
1. lépés: Nyisd meg az oldaladat és indítsd el az auditot
A leggyorsabb első lépés a böngésző beépített eszközeinek használata. Chrome-ban a DevTools → Lighthouse fülén futtatható egy automatikus akadálymentesítési audit. Ez nem teljes, de a legkritikusabb hibák nagy részét megtalálja — és ingyenes. Alternatív: a WAVE (wave.webaim.org) böngészőbővítmény vizuálisan jelöli ki a hibákat az oldalon.
2. lépés: Ellenőrizd a kontrasztokat
A kontraszt a leggyakoribb hibaforrás KKV weboldalak esetén. Minden szöveg–háttér kombinációt ellenőrizz a WebAIM Contrast Checker eszközzel. Ne felejts el kiemelni minden szövegszínt: a szürke alcímeket, a placeholder szövegeket és a linkeket is.
3. lépés: Teszteld billentyűzettel
Tedd félre az egeret, és navigálj végig az oldalon kizárólag Tab, Shift+Tab, Enter és Escape billentyűkkel. Minden gomb, link, form mező és menüpont elérhető? Minden fókuszállapot jól látható? Ha valahol elakadsz vagy a fókusz eltűnik — az komoly probléma.
4. lépés: Ellenőrizd a HTML struktúrát
A Chrome DevTools Elements paneljén gyorsan átnézheted a heading struktúrát. Egy jó segédeszköz a HeadingsMap böngészőbővítmény, amely fa-nézetben mutatja a H1–H6 hierarchiát. Keress duplikált H1-et, kihagyott szinteket (H2 után H4), vagy dizájn célú headingeket (pl. H3 azért, mert kisebb betűméretet akarunk).
5. lépés: Készítsd el az Akadálymentesítési Nyilatkozatot
Ez a legtöbb KKV-nál hiányzik, pedig törvényi kötelezettség. A nyilatkozatnak tartalmaznia kell: a vizsgált szabvány megnevezését (WCAG 2.1 AA), a megfelelési szintet, az ismert hiányosságokat, az elkészítés dátumát és egy elérhetőséget. Az EU-s minta alapján magyarul is el lehet készíteni, mi ebben is segítünk.
6. lépés: Dokumentálj és priorizálj
Minden megtalált hibát dokumentálj: melyik oldalon, melyik elemen, mi a probléma, melyik WCAG kritérium sérül, és milyen szintű. A kritikus hibákat érdemes 30 napon belül javítani — ezek hordozzák a legnagyobb jogi kockázatot. A közepes és ajánlott szempontokat ütemezd be a következő fejlesztési ciklusba.
A leggyakoribb hibák KKV weboldalon
Több száz weboldal audit tapasztalata alapján ezek a problémák fordulnak elő a leggyakrabban magyarországi kis- és középvállalkozások weboldalain.
- A kapcsolatfelvételi form mezőin hiányzik a
<label>— csak placeholder szöveg van, ami el is tűnik gépelés közben - A logóképnek nincs
altszövege, vagy azalt="logo"szöveg semmit nem mond a cégnévről - A márkapaletta szerinti szürke szöveg (pl. #888) fehér háttéren nem éri el a 4,5:1 kontrasztarányt
- A hamburger menügomb nem tartalmaz szöveges leírást — a képernyőolvasó nem tudja mi ez a gomb
- A cookie consent felugró ablak csak egérrel zárható be, billentyűzettel nem
- Egyáltalán nincs Akadálymentesítési Nyilatkozat az oldalon
- A galériában lévő képeknek nincs
altszövegük, vagy az automatikusan generált fájlnév azaltértéke (pl.IMG_2034.jpg)
Megvan a lista — mi legyen a következő lépés?
Ha megvan a hibajegyzéked, de nem tudod, hogyan javítsd, vagy egyáltalán nem volt időd végigmenni az ellenőrzőlistán — kérj ingyenes konzultációt. 30 percben átnézzük az oldaladat, és megmondom, hol állsz.