Jó megoldások – akadálymentes webes komponensek, Infoalap logóval

A billentyűzetfókusz kiemelésének és a linkek aláhúzásának leírása

Bevezetés

Vannak olyan felhasználók, akik a weboldalakon található elemeket nem, vagy csak nehezen tudják megkülönböztetni egymástól, mert számukra azok látványra egymásba olvadnak. Ez főleg azoknál a felhasználóknál fordul elő, akik nem látnak színeket, vagy bizonyos színeket összetévesztenek. Ezért az elemeket a színükön kívül más módon is szükséges kiemelni. Előfordulhat azonban, hogy a kiemelések zavarhatják azokat, akiknek erre nincs szükségük, ezért a legjobb megoldás, ha ennek a ki- és bekapcsolására beállítási lehetőséget biztosít a weboldal.

A weboldalakon a Tab billentyűvel lehet a billentyűzetfókuszt az oldal következő elemére vinni. Az aktív elemet a böngésző alapértelmezés szerint vékony fekete kerettel látja el. Ez a keret azonban a vékonysága vagy az oldal hátteréhez képest alacsony kontrasztaránya miatt bizonyos felhasználók számára nehezen észrevehető. Számukra gyakran az is problémát jelenthet, hogy a hivatkozások színét nehezen tudják megkülönböztetni a normál szöveg színétől.

Jelen fejezet célja olyan megoldás bemutatása, amely a billentyűzetfókusz és a linkek jobb láthatóságát biztosítja.

A példa áttekintése

A billentyűzetfókusz és a linkek kiemelésének példája a modális ablak, az eszköztipp és a hivatkozás példák felhasználásával lett elkészítve. A modális ablakot a weboldalon található Akadálymentes beállítások gombbal lehet megnyitni. Ebben az ablakban háromféle beállítás közül lehet választani. Az első a Hivatkozások legördülő menü, amiben azt lehet eldönteni, hogy a hivatkozások alá legyenek-e húzva vagy sem. Az aláhúzás 5 pixel vastagságú, így könnyen észrevehető a szövegekben.

A második és harmadik beállítás az aktív elem keretére vonatkozik, amely a fókuszálás során jelenik meg. A keret színét egy legördülő menüben, a vastagságát pedig egy vízszintes csúszkán lehet beállítani.

Fontos megjegyezni, hogy ha ebben az ablakban a kerethez az alapértelmezett fekete szín és 0 pixeles vastagság van beállítva, akkor a böngésző a fent említett saját alapértelmezett keretét használja.

A beállítások megadása után a Mentés gombbal bezárhatjuk az ablakot. Ekkor érvénybe lépnek a módosított beállítások, a fókusz pedig visszakerül az Akadálymentes beállítások gombra. Ez a gomb ekkor már az imént beállított kerettel rendelkezik.

Azok az elemek lettek kerettel ellátva, amelyek class attribútumának értékében szerepel az IAfocus osztálynév is.

Továbbá, ha túl vastagra van beállítva a keret, akkor egyes elemeket kitakarhat. Ezenkívül a képernyő szélén elhelyezkedő elemek adott oldalain a keret csak részben látható.

A linkek aláhúzása a leginkább akkor hasznos, amikor egy folyószövegben egy vagy több link található.

Billentyűzet-támogatás


www.infoalap.hu