Gyakori akadálymentesítési hibák, amelyeket kerülni kell

Miért bukkannak fel újra és újra ugyanazok az akadálymentesítési problémák

A legtöbb akadálymentesítési akadály nem egzotikus. Évről évre az automatizált és manuális auditok ugyanazt a rövid hibalistát hozzák felszínre: hiányzó alternatív szöveg, alacsony kontraszt, címkézetlen űrlapmezők, billentyűzetcsapdák és törött szerkezet. Azért ismétlődnek, mert csendben kerülnek be — egy fejlesztő új komponenst ad ki, egy marketinges feltölt egy képet, egy tervező kiválaszt egy márkaszínt —, és a normál munkafolyamatban semmi sem jelzi a problémát. A vizuális eredmény rendben lévőnek tűnik annak, aki egeret és éles szempárt használ, így az akadály élesbe kerül.

Ez a katalógus végigveszi a legygyakoribb WCAG 2.2 hibákat, amelyeket valós auditokban látunk. Mindegyiknél megtalálja, miért fontos, kit érint, a vonatkozó sikerkritériumot és egy konkrét előtte/utána javítást. Együtt ezek a problémák teszik ki a fogyatékossággal élő felhasználókat blokkoló akadályok túlnyomó többségét — és az Európai Akadálymentesítési Irányelv, az ADA és a Section 508 alapján benyújtott jogi panaszok túlnyomó többségét.

Egy dolgot tisztázni kell a lista előtt: az automatizált eszközök nem találják meg ezeket a problémákat mind. A független kutatások következetesen azt mutatják, hogy még a legjobb szkennerek is megbízhatóan csak a WCAG-problémák 30–40%-át észlelik. Kiválóan felismerik a hiányzó alternatív attribútumokat, a programozott kontraszthibákat és a hiányzó űrlapcímkéket, de nem tudják megítélni, hogy az alternatív szöveg pontos-e, a fókuszsorrend logikus-e, vagy hogy egy egyéni widget valóban működik-e képernyőolvasóval. Ezért minden hiteles program a szkennelést manuális ellenőrzéssel párosítja. Akadálymentesítési szkennelő szoftverünk kezeli az automatizálható réteget; a manuális auditok és a fogyatékossággal élő emberek által végzett auditok fedik le a többit.

Egy gyors módja annak, hogy megtalálja saját kiindulópontját, mielőtt továbbolvasna: nézze meg az oldalt letiltott képekkel, olvasson el minden szót egyetlen struktúrálatlan bekezdésként, és próbáljon meg minden feladatot csak billentyűzettel elvégezni. Ahol az élmény összeomlik, ott akadályt talált.

Érzékelhető: tartalom, amelyet az emberek nem látnak vagy nem olvasnak

Hiányzó vagy pontatlan alternatív szöveg a képeknél

Kit érint: vakok vagy gyengénlátók, akik képernyőolvasót használnak; bárki lassú kapcsolaton, ahol a képek nem töltődnek be.

WCAG-kritérium: 1.1.1 Nem szöveges tartalom (A szint).

Az alt attribútum nélküli képek láthatatlanok a segítő technológia számára — a felhasználó talán nem is tudja, hogy a kép létezik. A hiányzó attribútumnál rosszabb a pontatlan: az olyan fájlnevek, mint az IMG_4821.jpg, az általános szavak, mint a „kép”, vagy a kulcsszavakkal teletömött karakterláncok aktívan félrevezetik a hallgatót.

A szabály egyszerű, de helyzetfüggő. Az informatív képeknek a jelentésük tömör leírására van szükségük, nem a megjelenésükére. A semmit hozzá nem adó dekoratív képeknek üres alt="" attribútumot kell viselniük, hogy a képernyőolvasók kihagyják őket. A funkcionális képeknek — egy gombként működő ikonnak — a műveletet kell leírniuk, nem a képet. Az olyan összetett vizuális elemeknek, mint a diagramok, rövid alternatív szövegre és a közelben elhelyezett hosszabb szöveges megfelelőre van szükségük.

<!-- Before: useless, misleading -->
<img src="chart-final-v2.png">

<!-- After: meaningful for an informative image -->
<img src="chart-final-v2.png"
     alt="Revenue grew 24% between Q1 and Q4 2025">

<!-- After: decorative image, correctly hidden -->
<img src="divider-flourish.svg" alt="">

Az automatizált eszközök azonnal észlelik az alternatív szöveg hiányát. Nem tudják megmondani, hogy a szöveg helyes-e — ehhez egy ember szükséges, aki kontextusban olvassa az oldalt.

Nem megfelelő színkontraszt

Kit érint: gyengénlátók, színvakok vagy életkorral összefüggő látásvesztésben szenvedők; mindenki, aki erős napfényben használ képernyőt.

WCAG-kritérium: 1.4.3 Kontraszt (minimum), AA szint; plusz 1.4.11 Nem szöveges kontraszt a felhasználói felület komponenseihez.

A WCAG 2.2 legalább 4.5:1 kontrasztarányt ír elő a normál szöveghez és 3:1-et a nagy szöveghez (nagyjából 18pt, vagy 14pt félkövér). A felületi komponenseknek és a jelentéssel bíró grafikáknak — beviteli keretek, fókuszjelzők, állapotot közvetítő ikonok — 3:1 arányt kell elérniük a környezetükhöz képest. A kontraszthibák a legygyakoribb problémák közé tartoznak minden nagyszabású auditban, és szinte mindig a tervezési szakaszban kerülnek be.

/* Before: light gray on white = 2.8:1, fails AA */
.helper-text { color: #9a9a9a; background: #ffffff; }

/* After: 4.6:1, passes AA */
.helper-text { color: #717171; background: #ffffff; }

Tesztelje a teljes palettát, ne csak a törzsszöveget: a helyőrző szöveg, a letiltott állapotok, amelyeket még el kell olvasni, a hibaüzenetek és a fényképekre helyezett szöveg gyakori vétkesek. Soha ne támaszkodjon kizárólag a színre a jelentés közvetítéséhez (1.4.1) — egy érvénytelen mező piros keretét szöveggel vagy ikonnal kell párosítani.

Automatikusan lejátszódó média és mozgás

Kit érint: vesztibuláris zavarokkal, figyelmi vagy kognitív fogyatékossággal élők, képernyőolvasó-felhasználók, akiknek a hangkimenetét elnyomja, és bárki egy csendes, közös térben.

WCAG-kritériumok: 1.4.2 Hangvezérlés (A szint), 2.2.2 Szüneteltetés, leállítás, elrejtés (A szint), 2.3.1 Három felvillanás (A szint) és 2.3.3 Animáció interakciókból (AAA szint).

A három másodpercnél hosszabb ideig automatikusan lejátszódó hangnak vagy videónak nyilvánvaló módot kell kínálnia a szüneteltetésre vagy a némításra. Az öt másodpercnél tovább tartó mozgó, villogó vagy automatikusan frissülő tartalomnak — körhinták, animált bannerek, futószövegek — akadálymentes szüneteltető vezérlőre van szüksége. A másodpercenként háromnál többször villanó tartalmat teljesen kerülni kell, mivel rohamokat válthat ki. Tartsa tiszteletben a felhasználó prefers-reduced-motion beállítását a nem nélkülözhetetlen animációk visszafogásához.

/* After: honour the user's OS-level motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Működtethető: dolgok, amelyeket az emberek nem tudnak használni

Billentyűzetes hozzáférhetetlenség és billentyűzetcsapdák

Kit érint: mozgássérültek, akik nem tudnak egeret használni, képernyőolvasó-felhasználók (akik billentyűzettel navigálnak) és kapcsolóeszközöket vagy hangvezérlést használók.

WCAG-kritériumok: 2.1.1 Billentyűzet (A szint) és 2.1.2 Nincs billentyűzetcsapda (A szint).

Minden interakciónak — linkek, gombok, űrlapmezők, menük, modálisok, dátumválasztók, fogd és vidd — teljesen működtethetőnek kell lennie kizárólag billentyűzettel. A legkárosabb változat a billentyűzetcsapda: a fókusz belép egy komponensbe (gyakran egy modálisba vagy beágyazott widgetbe), és nem tud kijutni, így a felhasználó megreked az oldalon. Az egyedileg készített widgetek a szokásos bűnösök, mivel az olyan natív elemek, mint a <button> és az <a>, alapértelmezetten billentyűzettel működtethetők, míg a <div> alapú utánzatok nem.

<!-- Before: not focusable, not operable by keyboard -->
<div class="btn" onclick="submit()">Submit</div>

<!-- After: native element, free keyboard support -->
<button type="submit">Submit</button>

Járja végig a kulcsfontosságú útvonalakat kizárólag a Tab, Shift+Tab, nyílbillentyűk, Enter, Szóköz és Escape használatával. Erősítse meg, hogy a fókusz mindig képes előre és vissza kilépni minden komponensből, hogy az Escape bezárja az átfedéseket, és hogy semmi sem igényel mutatóeszközt. Képernyőolvasó-értékelési szolgáltatásunk pontosan ezeket a folyamatokat teszteli úgy, ahogyan a valódi segítő technológiát használók megtapasztalják.

Hiányzó vagy láthatatlan fókuszjelzők és logikátlan fókuszsorrend

Kit érint: látó billentyűzet-felhasználók, gyengénlátók és bárki, aki elvesztette a fonalat arról, hogy hol jár az oldalon.

WCAG-kritériumok: 2.4.7 Látható fókusz (A szint) és 2.4.3 Fókuszsorrend (A szint); 2.4.11 Fókusz nincs eltakarva (AA szint) a WCAG 2.2-ben.

Gyakori „rendezett” hiba a böngésző alapértelmezett fókuszgyűrűjének eltávolítása az outline: none használatával, anélkül hogy valaha is pótolnák. A billentyűzet-felhasználóknak fogalmuk sincs, melyik elem aktív. Ugyanilyen káros az a fókuszsorrend, amely nem követi a vizuális és logikai olvasási sorrendet — jellemzően pozitív tabindex értékek vagy a megjelenített elrendezéstől eltérő DOM-sorrend okozza.

/* Before: focus ring deleted, keyboard users lost */
:focus { outline: none; }

/* After: a clear, high-contrast indicator */
:focus-visible {
  outline: 3px solid #0b5cff;
  outline-offset: 2px;
}

A WCAG 2.2 hozzáadja a 2.4.11-et: amikor egy elem fókuszt kap, nem szabad teljesen elrejtve lennie ragadós fejlécek, cookie-bannerek vagy chat-widgetek mögött. Nyisson meg egy modálist, lépkedjen rajta tabulátorral, és erősítse meg, hogy a fókuszált elem soha nincs elrejtve.

Nem leíró linkek és gombok

Kit érint: képernyőolvasó-felhasználók, akik az összes link listáját előhívják egy oldal átfutásához, és kognitív fogyatékossággal élők.

WCAG-kritériumok: 2.4.4 Link célja (kontextusban), A szint; 2.5.3 Címke a névben, A szint.

A képernyőolvasó-felhasználók gyakran úgy navigálnak, hogy a linkek között ugrálnak kontextus nélkül. A „kattintson ide”, „tovább” és „tudjon meg többet” linkekkel teli oldal értelmetlenné válik, amikor listaként olvassák fel. A linkszövegnek önmagában le kell írnia a célját. Ugyanez vonatkozik a csak ikont tartalmazó gombokra, amelyeknek akadálymentes névre van szükségük.

<!-- Before: ambiguous out of context -->
<a href="/resources/wcag">Read more</a>

<!-- After: self-describing -->
<a href="/resources/wcag">Read our WCAG 2.2 compliance guide</a>

<!-- Icon button with an accessible name -->
<button aria-label="Close dialog">
  <svg aria-hidden="true">…</svg>
</button>

Túlterhelt navigáció és nincs mód annak átugrására

Kit érint: képernyőolvasó-felhasználók, billentyűzet-felhasználók és kognitív fogyatékossággal élők.

WCAG-kritérium: 2.4.1 Blokkok megkerülése (A szint).

A több tucat linket tartalmazó megamenü arra kényszeríti a képernyőolvasó- és billentyűzet-felhasználókat, hogy minden oldalon átverekedjék magukat a teljes listán, mielőtt elérnék a tartalmat. Egy „Ugrás a fő tartalomra” link mint az első fókuszálható elem lehetővé teszi számukra, hogy egyenesen átugorják az ismétlődő blokkokat. Csoportosítsa a kapcsolódó elemeket, tartsa karcsún a menüket, és győződjön meg arról, hogy az átugró link fókuszáláskor láthatóvá válik.

<!-- After: first focusable element on the page -->
<a class="skip-link" href="#main">Skip to main content</a>
…
<main id="main">…</main>

Érthető: tartalom, amely összezavar

Címkézetlen vagy helytelenül társított űrlapmezők

Kit érint: képernyőolvasó-felhasználók, kognitív fogyatékossággal élők és hangvezérlést használók, akik névvel szólítják meg a mezőket.

WCAG-kritériumok: 1.3.1 Információ és összefüggések, 3.3.2 Címkék vagy utasítások és 4.1.2 Név, szerep, érték (mind A szint).

A programozottan társított <label> nélküli beviteli mezőket „szöveg szerkesztése, üres” formában jelentik be — a felhasználónak fogalma sincs, mit írjon. A helyőrző szöveg nem helyettesíti: beíráskor eltűnik, és általában megbukik a kontraszton. A kötelező mezőket, a formázási szabályokat és az ellenőrzési hibákat is szöveggel kell közvetíteni, nem csak színnel vagy pozícióval.

<!-- Before: placeholder masquerading as a label -->
<input type="email" placeholder="Email">

<!-- After: explicit, associated label + described error -->
<label for="email">Email address</label>
<input type="email" id="email"
       aria-describedby="email-err" aria-invalid="true">
<p id="email-err">Enter a valid email, e.g. name@example.com</p>

Kösse a hibaüzeneteket a mezőjükhöz az aria-describedby segítségével, jelölje meg az érvénytelen mezőket az aria-invalid használatával, és győződjön meg arról, hogy egy hiányos űrlap elküldése a fókuszt az első hibára helyezi.

Hiányzó oldalnyelv

Kit érint: képernyőolvasó-felhasználók — a rossz nyelv miatt a szintetizátor mindent rosszul ejt ki.

WCAG-kritériumok: 3.1.1 Az oldal nyelve (A szint) és 3.1.2 Részek nyelve (AA szint).

Egyetlen hiányzó attribútum tönkreteszi egy egész oldal kiejtését. Deklarálja az elsődleges nyelvet a gyökérelemen, és jelölje meg a más nyelvű soron belüli szövegrészeket saját lang attribútummal.

<!-- Before -->
<html>

<!-- After -->
<html lang="en">
  …
  <blockquote lang="fr">Le client a raison.</blockquote>

Helytelen címsorhierarchia és hiányzó tereptárgyak

Kit érint: képernyőolvasó-felhasználók, akik címsorok és régiók szerint navigálnak, és bárki, aki a dokumentum szerkezetére támaszkodik.

WCAG-kritérium: 1.3.1 Információ és összefüggések (A szint).

A címsorok az oldal vázlatát alkotják. A képernyőolvasó-felhasználók címsorról címsorra ugranak, hogy gyorsan megtalálják a tartalmat; amikor a szinteket kihagyják, pusztán betűméret miatt használják, vagy hiányoznak, ez a navigáció összeomlik. Minden oldalnak egyetlen <h1> címsorral és a <h2>, <h3> és így tovább logikus, megszakítatlan sorozatával kell rendelkeznie. Ugyanilyen fontosak a tereptárgy-régiók — <header>, <nav>, <main>, <footer> —, amelyek lehetővé teszik a felhasználók számára a fő területek közötti ugrást. A teljes egészében <div> elemekből felépített oldal nem kínál ilyen térképet.

<!-- After: semantic landmarks + ordered headings -->
<header>…</header>
<nav aria-label="Primary">…</nav>
<main>
  <h1>Common accessibility issues</h1>
  <h2>Perceivable</h2>
    <h3>Missing alt text</h3>
</main>
<footer>…</footer>

Robusztus: kód, amelyet a segítő technológia nem tud értelmezni

Hozzáférhetetlen egyéni widgetek és az ARIA helytelen használata

Kit érint: mindenekelőtt a képernyőolvasó-felhasználókat, és minden segítő technológiát, amely a helyes akadálymentességi fára támaszkodik.

WCAG-kritérium: 4.1.2 Név, szerep, érték (A szint).

A <div> és <span> elemekből épített egyéni legördülő listáknak, füleknek, harmonikáknak, kombinált mezőknek, modálisoknak és eszköztippeknek nincs eredendő szerepük, állapotuk vagy billentyűzet-viselkedésük. A fejlesztők az ARIA-hoz nyúlnak, hogy befoltozzák ezt, de az ARIA csak leír — nem ad hozzá viselkedést, és a helytelen ARIA rosszabb, mint a semmilyen. Az ARIA első szabálya, hogy előnyben kell részesíteni a natív HTML-elemet, amikor csak létezik ilyen. Amikor egyéni widgetet kell építenie, valósítsa meg a teljes billentyűzet-interakciót, amelyet az ARIA szerzői minták előírnak, és tartsa szinkronban a valósággal az aria-expanded, aria-selected és hasonló állapotokat.

<!-- Before: a div pretending to be a control, no role or state -->
<div class="dropdown" onclick="toggle()">Choose plan ▾</div>

<!-- After: correct role, name, and state -->
<button aria-expanded="false" aria-controls="plan-list">
  Choose plan
</button>
<ul id="plan-list" role="listbox" hidden>…</ul>

Ezek pontosan azok a problémák, amelyeket az automatizált szkennerek a leggyakrabban kihagynak. A szkenner lát egy aria-expanded attribútumot, és átengedi; csak egy ember (vagy egy képernyőolvasót használó tesztelő) tudja megerősíteni, hogy az érték valóban átvált a menü megnyitásakor. Tekintse meg képernyőolvasó-tesztelési útmutatónkat arról, hogyan ellenőrizheti a widget viselkedését elejétől a végéig.

Megjegyzés az átfedés-widgetekről

Csábító egy egysoros „akadálymentesítési widgetet” vagy átfedést telepíteni, amely azonnali megfelelést ígér. Ezek az eszközök nem javítják a fenti problémákat — az alternatív szöveg továbbra is hiányzik a forrásból, a kontraszt továbbra is megbukik, az egyéni widget továbbra is törött. Az átfedések nem tudják orvosolni az akadályokat okozó kódot, gyakran zavarják a felhasználók saját segítő technológiáját, és szerepeltek egyre több akadálymentesítési perben. A valódi digitális akadálymentesség az alapul szolgáló HTML, CSS és viselkedés javításából fakad, nem annak elfedéséből.

Akadályozza meg, hogy ezek a problémák visszatérjenek

A hibalista egyszeri javítása szükséges, de nem elegendő; ugyanazok a problémák újra felbukkannak a következő kiadással, hacsak nem változtatja meg azt, ahogyan a dolgok élesbe kerülnek. A tartós javítás az, ha az akadálymentességet beépíti a munkafolyamatba:

Kapja el az automatizálható 30–40%-ot korán azzal, hogy szkenneléseket köt be a folyamatába. A CI/CD akadálymentesítési integráció megbuktatja a buildet, amikor regresszió kerül be, mielőtt eljutna a produkcióba.
A többit fedje le emberekkel. Ütemezzen manuális akadálymentesítési auditokat és fogyatékossággal élők által végzett auditokat, amelyek olyan akadályokat hoznak felszínre, amelyeket egyetlen eszköz sem képes észlelni.
Adja a csapatoknak a megfelelő eszközöket. A QualiBooth akadálymentesítési eszközkészlet és az Agora segít a tervezőknek és fejlesztőknek munka közben tesztelni.
Tegye folyamattá, ne projektté. A folyamatos akadálymentesítési tanácsadás és az akadálymentesítési folyamat fejlesztése beágyazza a szokásokat, hogy a minőség idővel kitartson.

A lépésről lépésre haladó javítási útitervhez kezdje az útmutatónkkal arról, hogyan tegye webhelyét WCAG-megfelelővé.

Hol kezdje még ma

Mivel világszerte több mint 1,3 milliárd ember él valamilyen fogyatékossággal, az akadálymentesség üzleti indoka egyértelmű — és 2025 júniusa óta az Európai Akadálymentesítési Irányelv szerinti jogi indok is az. Az ebben a katalógusban szereplő problémák azok, amelyeket bármely panaszban vagy auditban elsőként vizsgálnak.

A leggyorsabb módja annak, hogy lássa, hol áll, egy ingyenes URL-szkennelés futtatása — beállítás nélkül, kötelezettség nélkül. Amikor készen áll arra, hogy túllépjen azon, amit az automatizálás elérhet, kérjen bemutatót, és megmutatjuk, hogyan zárja be a fennmaradó rést egy kombinált automatizált plusz manuális program.