Vissza a blogra

8 gyakori hiba, amit egy digitális akadálymentességi audit feltár – és amit könnyen elkerülhetnél

Egy akadálymentességi audit során gyakran apró technikai vagy tervezési hibák okozzák a legnagyobb használati akadályokat. A cikk 8 tipikus problémát mutat be, amelyek megfelelő szemlélettel és néhány tudatos döntéssel már a tervezés és fejlesztés során elkerülhetők.

2025-05-22
3 perc
Három ikon az Accessibility Icon Collection ből
Három ikon az Accessibility Icon Collection ből

Sokan azt gondolják, hogy ha egy weboldal "működik" és vizuálisan rendben van, akkor az minden felhasználó számára egyformán elérhető. A valóság viszont az, hogy a legtöbb oldal tele van olyan akadályokkal, amik első ránézésre láthatatlanok – hacsak nem képernyőolvasóval, billentyűzettel vagy más segédeszközzel próbáljuk használni.

A digitális akadálymentességi audit célja éppen ezeknek a „láthatatlan hibáknak” a feltárása. Az alábbiakban összegyűjtöttünk 8 gyakori problémát, amik újra és újra előkerülnek az auditok során – és amiken viszonylag könnyen lehet javítani.

1. Nem megfelelő kontrasztarány – „kkhhm mint az közismert”

„Közismert? Attól tartok Safranek, hogy maga gúnyolódik velem. Jöjjön közelebb!” A Macskafogó című örökzöld rajzfilmben hangzik el ez a kiragadott párbeszéd, bár abban nem pont az akadálymentesség legismertebb elvárásáról volt szó.

Galambszürke szöveg hamuszürke háttéren? Ez gyönyörű tud lenni, de nem mindenki számára jól olvasható. A látássérült vagy idősebb felhasználók, illetve kültéren mobilon böngészők számára ez komoly akadály.

A WCAG ajánlása: legalább 4.5:1 kontrasztarány normál szöveg esetén. (webtartalom-akadálymentesítési irányelvek)

1. ábra: Jó és rossz példák háttér és szöveg kontrasztarányára.
1. ábra: Jó és rossz példák háttér és szöveg kontrasztarányára.

2. Hiányzó vagy hibás alternatív szövegek (alt text)

A képernyőolvasók nem "látják" a képeket – csak az ún. alt szöveget. Ha ez hiányzik vagy nem informatív (klasszikus példa a nem informatív alt szövegre: „kép1.jpg”), a vizuális tartalom elvész azok számára, akik képernyőolvasót használnak.

Minden tartalmi képhez legyen értelmes, lényegre törő alt szöveg!

2. ábra: Helyettesítő szöveg nélkül: nincs alt= kiegészítés, így a felolvasó nem tud támpontot adni a programról a látássérülteknek.
2. ábra: Helyettesítő szöveg nélkül: nincs alt= kiegészítés, így a felolvasó nem tud támpontot adni a programról a látássérülteknek.

3. Címsorstruktúra hiánya vagy rossz sorrendje

A címek nemcsak vizuálisan, hanem szerkezetileg is fontosak. Egy jó H1-H2-H3 hierarchia segít a képernyőolvasóknak abban, hogy a felhasználó „átugorjon” a tartalom részeire – pont, mint ahogy mi szemmel pásztázunk.

Gyakori hiba: kihagyott H1, vagy a címek összevissza sorrendben jelennek meg.

3. ábra: Nem jól használt címsorstuktúra – alcímként megjelenő szöveg kódban nem jelölve
3. ábra: Nem jól használt címsorstuktúra – alcímként megjelenő szöveg kódban nem jelölve

4. Kizárólag billentyűzettel nem használható az oldal

Ha nem lehet tab-bal végignavigálni az oldalon, a mozgáskorlátozott felhasználók gyakorlatilag ki vannak zárva. Ez különösen problémás lehet űrlapoknál, menüknél vagy modál ablakoknál.

Tipp: próbáld ki, végig tudsz-e menni az oldalon csak tab-bal és enterrel!

5. Nincs vizuális fókuszjelzés

Ha egy interaktív elem (pl. gomb, link) fókuszba kerül billentyűzettel, azt vizuálisan is jelezni kell. Ha ez nem látható, a felhasználó nem tudja, hogy hol jár – ez nemcsak akadálymentességi, de usability hiba is.

Az alábbi példában a menüsor egyik eleme, a Szolgáltatások fókuszba kerüléskor nem kapott keretet, míg az Eladás menüelem megkapja a vizuális jelzést is.

4. ábra: Jó és rossz példa fókuszjelzésre
4. ábra: Jó és rossz példa fókuszjelzésre

6. Gombok, linkek nem érthetők kontextusból

„Részletek” vagy „Tovább” – de mihez kapcsolódik? Egy képernyőolvasóval használó felhasználó csak a linket hallja, nem az őt körülvevő kontextust.

Megoldás: használj informatívabb linkeket, pl. „Részletek a szolgáltatásainkról”.

5. ábra: Kontextus nélküli gomb szöveg
5. ábra: Kontextus nélküli gomb szöveg

7. Hiányzó címkék az űrlapmezőknél

Sokszor előfordul, hogy a mezőknek nincs megfelelő címkéjük, csak placeholder szöveg – amit a képernyőolvasók gyakran nem tudnak értelmezni. Ez az egyik leggyakoribb akadály az űrlapkitöltésnél.

Tipp: mindig használj jól összekötött <label> elemet minden mezőhöz.

6. ábra: hiányzó label mező a bejelentkezésnél
6. ábra: hiányzó label mező a bejelentkezésnél

8. Hibajelzések csak színnel kommunikálva

Ha például egy hibás űrlapmezőt csak piros színnel jelölsz meg, a színtévesztők vagy képernyőolvasót használók nem fogják érzékelni a problémát.

Kombináld a színt szöveges hibajelzéssel vagy ikonokkal!

7. ábra: Csak színnel jelölt hiányzó adat a keresztnév mezőben
7. ábra: Csak színnel jelölt hiányzó adat a keresztnév mezőben

Összegzés

Ezek a hibák nem bonyolultak technikailag – mégis könnyen kirekeszthetik a felhasználók egy részét. Egy akadálymentes audit nemcsak a jogszabályoknak való megfelelésről szól, hanem jobb felhasználói élményről, szélesebb közönség eléréséről és márkaépítésről is.

Ha kíváncsi vagy, hogy a saját weboldalad mennyire hozzáférhető, keress minket egy digitális akadálymentességi audit miatt – segítünk megtalálni (és kijavítani) a rejtett akadályokat.

Következő bejegyzés

Miért fontosak a céges értékek?

Elolvasom