8 gyakori hiba, amit egy digitális akadálymentességi audit feltár – és amit könnyen elkerülhetnél
Három ikon az Accessibility Icon Collectionbő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.
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.
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
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
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
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
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
Ö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.
A témában további cikkeket olvashatsz:
Akadálymentes audit: funkcionális teszt vagy UX kutatás?