Mi az a weboldal redesign? Mikor és miért van rá szükséged? (Frissítve, 2023.09.29.)
Ma már az emberek az első benyomásukat a cégedről az interneten, a..
Tartalomjegyzék
Bővített tartalomjegyzék
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. (Frissítés, 2023.08.02. – Egy új fejezettel bővítettünk: Hogyan találd meg az akadálymentességi problémákat a weboldaladon?)
A Nielsen Norman Group összeszedte azt az 5 irányelvet, melyek betartá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.
Hogyan találd meg az akadálymentességi problémákat a weboldaladon? (FRISSÍTÉS, 2023.08.02.)
Egy weboldal akadálymentessége sokféle eszközzel vizsgálható, ellenőrizhető, de a legegyszerűbben talán böngésző-bővítményekkel, melyekből jó párat lehet találni a bővítmények listájában, ha rákeresel.
Az egyik jól használható, megoldás a Stark, melynek segítségével másodpercek alatt megállapítható – sok egyéb tényező mellett -, hogy egy weboldal milyen mértékben felel meg a WCAG-irányelveknek (Web Content Accessibility Guidelines). Ingyenes verzióval is auditálható bármely weboldal, ugyanakkor fizetni kell a letölthető jelentésért. Amire persze nem feltétlenül van szükség.
Ugyanakkor mindenképpen be kell jelentkezni, tehát létre kell hozni egy fiókot, majd legalul találod a „WCAG Audit” menüpontot, ahol jelzik, hogy ez még beta változat, mely ugyanakkor már teljesen jól használható. Az audit lefuttatása után három oszlopban jelennek meg az eredmények (Violations, Potential, Passed). Az első oszlopban sorolja fel azokat az elemeket, melyek megsértik a WCAG-irányelveket, a másodikban jelennek meg azok, melyeknél további vizsgálatra van szükség, míg a harmadikban azok az elemek, melyek megfeleltek.
Minden elem esetében egy magyarázat is megjelenik, valamint egy link az érintett kód-sorra, illetve egy másik a WCAG-irányelvhez, ha még jobban elmélyednél a problémában. Az audit egy összpontszámot is, ami leginkább csak arra jó, hogy összevesd a weboldal pontszámát az iparági sztenderdekkel.
Stark WCAG-audit
A Noone egyébként már 2020-ban előállt a Starkkal, mely első körben a Sketch-be épült be, aztán készítettek egy bővítményt az Adobe és a Figma számára, végül aztán jött a böngészős verzió, melyet mindenki tud használni, nem csak a designerek.
Mivel alapvetően mégis designereknek szól, a WCAG-auditon kívül sok más funkciója is van a bővítménynek, így ellenőrizhetők a kontrasztok, a betűméretek, alt textek, stb. Ha valahol problémát talál, ott tanácsot is ad a Stark, tehát nagyobb betűméretet javasol, vagy egy más színpárosítást a jobb kontraszt érdekében.
Emellett található benne egy látásszimulátor, amivel megvizsgálható, hogy egy bizonyos látásproblémával miként látja a weboldalt az illető.
Hozzászólás jelenleg nem lehetséges.
A Webshark.hu a hozzászólásoknál előzetes moderálást alkalmaz. Moderálási szabályaink itt olvashatók.