Világszerte több mint egymilliárd ember él valamilyen fogyatékossággal. Ez a világ népességének mintegy 15%-a. Köztük vannak vakok vagy gyengénlátók, siketek vagy nagyothallók, mozgáskorlátozottak, kognitív eltérésekkel élők, illetve átmeneti állapotban lévők, mint egy eltört kar vagy migrén.
Amikor az ilyen valóságok figyelembevétele nélkül építünk weboldalakat, nem csupán kényelmetlenséget okozunk. Kizárjuk az embereket információkból, szolgáltatásokból és lehetőségekből, amelyeket mások természetesnek vesznek. Az akadálymentesítés nem egy funkció. Felelősség.
Mit jelent a webes akadálymentesítés
A webes akadálymentesítés azt jelenti, hogy a weboldalakat úgy tervezzük és fejlesztjük, hogy a fogyatékossággal élő emberek is érzékelhessék, megérthessék, navigálhassanak és interakcióba léphessenek velük. Azt is jelenti, hogy hozzájárulhatnak a webhez.
Ez túlmutat a képernyőolvasókon. Az akadálymentesítés kiterjed:
- Vizuális: vakság, gyengénlátás, színtévesztés
- Hallási: siketség, nagyothallás
- Motoros: korlátozott finommotorika, remegés, bénulás
- Kognitív: diszlexia, ADHD, memóriaproblémák, tanulási nehézségek
- Átmeneti és szituációs: eltört csukló, erős napfény a képernyőn, zajos környezet, lassú internet
A lényeg: az akadálymentes tervezés mindenkinek előnyös. A feliratok segítenek zajos helyen. A magas kontraszt segít erős fényben. A billentyűzetes navigáció segíti a haladó felhasználókat. Az egyértelmű szöveg segíti a nem anyanyelvi beszélőket. Az akadálymentesítés nem speciális mód — jó tervezés.
A WCAG szabvány
A Web Content Accessibility Guidelines (WCAG) a webes akadálymentesítés nemzetközi szabványa, amelyet a W3C ad ki. A jelenlegi verzió a WCAG 2.2, négy alapelv köré szervezve, amelyek a POUR betűszóval ismertek:
Érzékelhető (Perceivable)
Az információt olyan módon kell megjeleníteni, amelyet minden felhasználó érzékelhet.
- Szöveges alternatívák: minden képnek kell egy
altattribútum, amely leírja a tartalmát. A dekoratív képekalt=""-t használnak. - Feliratok és átirat: a videótartalomnak feliratokra, a hangtartalomnak átiratokra van szüksége.
- Alkalmazkodó struktúra: a tartalomnak stílusok nélkül is értelmesnek kell lennie. Használjon szemantikus HTML-t (
<h1>,<nav>,<main>,<article>). - Megkülönböztethető tartalom: elegendő színkontraszt, átméretezhető szöveg, ne csak szín hordozza az információt.
Kezelhető (Operable)
A felhasználóknak képesnek kell lenniük a felület kezelésére.
- Billentyűzettel elérhető: minden interaktív elem elérhető és használható kell legyen kizárólag billentyűzettel. Nincs egércsapda.
- Elegendő idő: ha a tartalomnak időkorlátja van, a felhasználóknak meg kell tudniuk hosszabbítani vagy kikapcsolni azokat.
- Nincs rohamot kiváltó tartalom: kerülje a másodpercenként háromnál többször villogó tartalmat.
- Navigálható: egyértelmű oldalcímek, logikus címsorstruktúra, navigáció-átugrási hivatkozások, látható fókuszjelzők.
Érthető (Understandable)
A tartalomnak és a felületnek érthetőnek kell lennie.
- Olvasható szöveg: adja meg az oldal nyelvét (
langattribútum). Használjon egyértelmű, egyszerű nyelvet, ahol lehetséges. - Kiszámítható viselkedés: a navigációnak következetesnek kell lennie. Az oldalak nem változtathatják meg váratlanul a kontextust.
- Beviteli segítség: egyértelműen címkézze az űrlapmezőket. Biztosítson hasznos hibaüzeneteket, amelyek elmagyarázzák, mi ment rosszul és hogyan javítható.
Robosztus (Robust)
A tartalomnak elég robusztusnak kell lennie ahhoz, hogy a jelenlegi és jövőbeli technológiákkal is működjön.
- Érvényes HTML: helyes szemantikus jelölés, amelyet a segítő technológiák megbízhatóan értelmezhetnek.
- Név, szerep, érték: az egyéni komponenseknek fel kell tárniuk céljukat az akadálymentesítési API-k felé (ARIA-val, ha szükséges).
Megfelelőségi szintek
A WCAG három szintet határoz meg:
| Szint | Jelentés | Példa |
|---|---|---|
| A | Minimális akadálymentesítés | A képeknek van alt szövegük, az oldalaknak van címük |
| AA | Szabványos célszint a legtöbb weboldalhoz | Legalább 4,5:1 kontrasztarány normál szövegre |
| AAA | Legmagasabb szint, nem mindig elérhető | 7:1 kontrasztarány, jelnyelv minden videóhoz |
A világ legtöbb jogszabálya AA szintű megfelelést követel meg. Ez az a szint, amelyet céloznia kell.
Gyakori akadályok és megoldásuk
Hiányzó alt szöveg a képeknél
A probléma: a képernyőolvasó felhasználók "kép"-et hallanak, vagy semmit.
A megoldás: adjon leíró alt szöveget minden informatív képhez. Dekoratív képeknél használja az alt=""-t, hogy a képernyőolvasók átugorják őket.
<!-- Good -->
<img
src="chart.png"
alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>
<!-- Decorative -->
<img src="divider.svg" alt="" />
Elégtelen színkontraszt
A probléma: a gyengénlátó vagy színtévesztő emberek nem tudják elolvasni a szöveget.
A megoldás: biztosítson legalább 4,5:1 kontrasztarányt normál szövegre és 3:1-et nagy szövegre (18px+ vagy 14px félkövér). Használjon kontrasztellenőrző eszközt a színkombinációk ellenőrzéséhez.
Ellenőrizze színkontrasztját most azonnal a Kontrasztellenőrző eszközünkkel. Azonnal megjeleníti a WCAG AA és AAA megfelelés/nem megfelelés eredményeket.
Hiányzó űrlapcímkék
A probléma: a képernyőolvasó felhasználók nem tudják, mire szolgál egy űrlapmező.
A megoldás: minden beviteli mezőnek szüksége van egy látható <label> elemre, amely a for attribútumon keresztül van összekapcsolva.
<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />
<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />
Nincs billentyűzetes navigáció
A probléma: az egeret használni nem tudó felhasználók elakadnak.
A megoldás: használjon natív HTML elemeket (<button>, <a>, <select>), amelyek alapértelmezetten billentyűzettel elérhetők. Ha egyéni komponenseket épít, gondoskodjon arról, hogy fókuszálhatók legyenek és reagáljanak a billentyűzet-eseményekre. Soha ne távolítsa el a fókuszkörvonalatokat alternatíva biztosítása nélkül.
Hiányzó oldalstruktúra
A probléma: a képernyőolvasó felhasználók nem tudnak hatékonyan navigálni.
A megoldás: használjon szemantikus HTML-t. Oldalanként egy <h1>, logikus címsorhierarchia (szintek kihagyása nélkül), landmark-ok (<nav>, <main>, <footer>).
Automatikusan lejátszódó média
A probléma: a váratlan hang megzavarja a képernyőolvasó felhasználókat. Az automatikusan lejátszódó videó rohamokat vagy szorongást okozhat.
A megoldás: soha ne játsszon le automatikusan hangot. Ha egy videó automatikusan lejátszódik, győződjön meg arról, hogy alapértelmezetten néma, és biztosítson szünet-vezérlőket.
A szín nem elég
Soha ne hagyatkozzon kizárólag a színre információk közvetítésére. Gondoljon a következőkre:
- Egy piros szegélyű hibajelzős űrlapmező hibaikonra vagy szöveges üzenetre is szorul
- Egy színes vonalakkal rendelkező diagramnak mintákra, címkékre vagy jelmagyarázatra is szüksége van
- Egy szövegbe ágyazott hivatkozásnak aláhúzásra vagy más vizuális jelzésre van szüksége, nem csupán színváltozásra
A férfiak mintegy 8%-a és a nők 0,5%-a rendelkezik valamilyen színlátási hiányossággal. Az erre tekintettel való tervezés nem peremeset — alapvető befogadás.
Az akadálymentesítés tesztelése
Automatizált tesztelés
Az automatizált eszközök az akadálymentesítési problémák nagyjából 30-40%-át fedik fel. Jó első lépés, de nem teljes megoldás.
- axe DevTools (böngészőbővítmény) — átvizsgálja az oldalt és jelenti a WCAG-szabálysértéseket
- Lighthouse (a Chrome DevTools-ba építve) — akadálymentesítési auditot tartalmaz
- WAVE (webes eszköz) — vizuális fedvény, amely megmutatja a problémákat
Manuális tesztelés
Sok akadálymentesítési probléma emberi megítélést igényel:
- Billentyűzetteszt: húzza ki az egeret, és navigáljon a teljes oldalon Tab, Enter, Escape és nyílbillentyűkkel. Mindent elér? Logikus a fókuszsorrend?
- Képernyőolvasó-teszt: próbálja ki a VoiceOver-t (Mac), az NVDA-t (Windows, ingyenes) vagy a TalkBack-et (Android). A tartalom értelmes, ha hangosan felolvassák?
- Nagyítási teszt: nagyítsa a böngészőt 200%-ra. Az elrendezés még működik? Levágódik vagy átfedésbe kerül tartalom?
- Csökkentett mozgás: engedélyezze a "mozgás csökkentése" beállítást az operációs rendszerében. Az animációk tiszteletben tartják ezt a beállítást?
Felhasználói tesztelés
A legértékesebb visszajelzés azoktól az emberektől származik, akik a mindennapi életükben ténylegesen használnak segítő technológiákat. Ha a költségvetése megengedi, vonja be a fogyatékossággal élő felhasználókat a tesztelési folyamatba.
Az akadálymentesítés spektrum, nem jelölőnégyzet
Az akadálymentesítés nem egyszeri projekt, amelynek van célvonala. Folyamatos gyakorlat. A weboldalak változnak, tartalom kerül hozzáadásra, és minden frissítéssel új akadályok jelenhetnek meg.
A cél nem a tökéletesség. A cél a folyamatos fejlesztés és az őszinte törődés azokkal az emberekkel, akik használják, amit épít. Kezdje a leghatásosabb változtatásokkal — színkontraszt, alt szöveg, billentyűzetes navigáció, űrlapcímkék — és építsen tovább.
Minden akadály, amelyet eltávolít, egy ajtó, amelyet kinyit.
Gyors ellenőrzőlista
- Minden képnek van értelmes
altszövege (vagyalt="", ha dekoratív) - A színkontraszt megfelel a WCAG AA-nak (4,5:1 szövegre, 3:1 nagy szövegre)
- Minden űrlapmezőnek van látható címkéje
- Az oldal teljes mértékben navigálható billentyűzettel
- A címsorok logikus hierarchiát követnek
- A fókuszjelzők láthatók
- Az oldal nyelve be van állítva (
langattribútum a<html>-en) - Semmilyen információ nem csak színnel kerül közvetítésre
- A videóknak vannak feliratai
- Az animációk tiszteletben tartják a
prefers-reduced-motionbeállítást