5 vizuális megoldás, mely nagymértékben javítja egy weboldal használhatóságát

Ha jól használhatóvá, akadálymentessé akarod tenni a weboldalad, akkor van néhány vizuális megoldás, melyeknek kiemelten fontos szerepe lehet ebben. Ezeket tehát mindenképpen alkalmazni kell a felületed designjában.

A Nielsen Norman Group összeszedte azt az 5 irányelvet, melyek alkalmazása jelentős hatást gyakorol egy weboldal használhatóságára, illetve akadálymentes használatára.

Színkontraszt alkalmazása

Az emberek számára sokszor nehézséget okoz, hogy elolvassanak egy szöveget egy alacsony kontrasztú háttéren. A magas kontrasztarány a szöveg és a háttér között mindig segíti a kevésbé jól látó felhasználókat abban, hogy elolvassák a weboldalad szövegeit. De egyébként mindenki számára kényelmesebbé teszi az olvasási élményt a nagyobb színkontraszt.

A WCAG ajánlása szerint a megfelelő színkontraszt aránynak a szöveg és a háttér között legalább 4,5:1-nek kell lennie. Ha minimum 18 pontos normál betűről van szó, vagy 14 pontos vastagon szedett betűről, akkor a 3:1 arány is megfelelő már.

A színkontraszt ellenőrzésére rengeteg eszköz a rendelkezésre áll, ilyen például az accessible-colors.com, mely szín-javaslatokat is tesz, ha gond lenne a kiválasztott színek kontrasztjával. Az ellenőrzéshez meg kell adnod a szövegméretet és a színkódokat.

Más vizuális jelek alkalmazása a színek mellett

Sokan élnek olyan látásproblémával, mely lehetetlenné teszi számukra, hogy pusztán a színekre támaszkodva különböztessenek meg egyes elemeket a weboldalakon. Emiatt fontos, hogy a színek mellett egyéb jelzések, például vonalak, minták is részt vegyenek a fontos információk kommunikálásában.

Ha nem tudod, hogy milyen elemeknél lehet szükség plusz vizuális jelre az oldalad használatához, akkor nézd meg szürkeárnyalatosan. Ha lesznek olyan részek, melyek így már nem értelmezhető, nem tudni, hogyan kell őket használni, akkor ott más vizuális jelekre is szükség lesz.

Fókuszállapot meghatározása

Az interaktív elemek könnyen azonosíthatóvá tétele nem csak jobb használhatóságot eredményez, hanem azok számára is előnyös, akik billentyűzettel navigálnak a weben. A fókuszjelző, mely alapértelmezetten egy kék körvonal az aktív elem körül, abban segít az embereknek, hogy könnyebben megállapíthassák, melyik weboldal-elemnél jár a billentyűzet, melyik van fókuszban.

A fókuszállapot jelzését nem is nehéz hozzáigazítani bármely vizuális designhoz, illetve a márkaszínekkel összhangba hozni. A linkek, űrlapmezők, widgetek, gombok és menüelemek mind lehetnek fókuszáltak, melyeknél a fókuszállapotot hasznos jelezni.

A megszokott körvonal használata több okból is jó választás ennek jelzésére. Egyrészt azért, mert az emberek ezt már ismerik, másrészt mert önmagában egy eltérő szín még nem feltétlenül elegendő a fókuszállapot megkülönböztetéséhez (ahogy arról fentebb már írtunk).

Alt text a képekhez

Akad néhány olyan felhasználó, aki képernyőfelolvasót használ a weboldalaknál. Az alt text arra szolgál, hogy leírja egy kép vagy más grafikus elemek tartalmát, így azoknak is lesz valami fogalma róluk, akik nem látják a képeket. Néhány szabályt azonban érdemes betartani az alt texteknél.

Ilyen az, hogy próbáljuk röviden és tömören megfogalmazni a kép tartalmát, viszont ne ismételjük meg benne a képfeliratot, mivel a képernyőfelolvasó utóbbit mindenképpen elolvassa. Szintén fontos, hogy a pusztán dekorációs célú képeknél ne használjunk alt textet, mivel nincs információtartalmuk, azok számára pedig amúgy sem számít a vizuális megjelenésre gyakorolt hatásuk, akik nem látják a képet.

Teszteld valódi emberekkel!

A vizuális design megtervezésének része kell legyen annak akadálymentessé tétele. Ehhez viszont ismerni kell azokat az eszközöket, melyek a weboldalak használatában segítenek az embereknek. Ilyenek a képernyőfelolvasók, a nagyítók vagy a Braille-eszközök, illetve, hogy ezek használatát miként segítheted elő.

Érdemes neked is kipróbálni, milyen billentyűzet segítségével navigálni a weboldaladon, vagy milyen képernyőfelolvasó segítségével megismerni annak tartalmát. Így derül ki, hogy mi az, amire nem figyeltél, de fontos, illetve mi az, ami rontja a felhasználói élményt. Ezeket még azt megelőzően kiszúrhatod, hogy valódi emberekkel kezdenéd tesztelni az oldalt.

Ezután persze a valós tesztek következnek, amihez akár öt személy is elegendő lehet. Ők már képesek használható visszajelzést adni, melyből kiindulhatsz a javításnál. A legjobb, ha olyan személyek is bekerülnek a tesztalanyok közé, akik valamilyen látásproblémával küzdenek, ami nehezebbé teszi számukra a weboldalak befogadását.

Címkék: akadálymentesség, webdesign

Hozzászólás jelenleg nem lehetséges.