Navigácia, hypertextové odkazy a formulárové prvky patria medzi základné elementy každej webovej stránky. O to viac je dôležité, aby práve tieto prvky boli dobre viditeľné a dobre viditeľné bolo aj ich zameranie.
Hypertextové odkazy
Hypertextový odkaz odkazuje na nejaké iné miesto buď v danom dokumente (na tej istej webovej stránke), alebo na inom dokumente (na inú webovú stránku toho istého webového sídla, alebo na inú webovú stránku na inom webovom sídle). Aby používateľ vedel už pri bežnom čítaní obsahu na webovej stránke odlíšiť klasický text od hypertextu, je potrebné ho určitým spôsobom zvýrazniť. Zároveň musí byť text hypertextového odkazu dostatočne zrozumiteľný a má jasne popisovať účel, aby používateľ vedel, kam hypertextový odkaz smeruje.
Zvýraznenie/odlíšenie hypertextového odkazu od okolitého textu
Jedným z najbežnejšie používaných prvkov na odlíšenie hypertextového odkazu od okolitého textu je podčiarknutie. Bežný text na webovej stránke nie je podčiarknutý, podčiarknuté majú byť len hypertextové odkazy. Druhým rozdielom oproti bežnému textu je použitie inej farby, než je farba okolitého textu.
Príklad odlíšenia hypertextového odkazu od okolitého textu:
„Chodievali tieto dve dievčatá spolu na priadky. Tá macochina dievka naveky na priadkach len smiech a zhon robila a nikdy vreteno nenapriadla; táto druhá zase vždy ticho sedela, priadla a domov aj po dve, aj po tri plné vretená donášala. Ale macocha i pri tých priadkach len svoju vychvaľovala a ukazovala si mužovi tie vretená, čo tá jeho dievka napriadla:“ (Zdroj: Zlatý fond SME, Prostonárodné slovenské povesti – Prvý zväzok, Pavol Dobšinský)
Ako si môžete vo vyššie uvedenom texte všimnúť, hypertextové odkazy sú od okolitého textu odlíšené podčiarknutím a farba odkazu aj podčiarknutia je modrá. Pri výbere farby hypertextového odkazu je potrebné dodržať dobrú odlíšiteľnosť od okolitého textu a zároveň dostatočný kontrast voči farbe pozadia odkazu. To, či je kontrast dostatočný, sa dá skontrolovať napr. nástrojom Colour Contrast Analyzer, ktorý je dostupný zdarma.
Dizajn zameraného hypertextového odkazu
Okrem toho, že je hypertextový odkaz dostatočne odlíšený od okolitého textu, jeho výzor sa musí zmeniť, keď na neho prídeme kurzorom myši alebo sa naň zameriame klávesnicou. To je potrebné kvôli tomu, aby používateľ vedel, na ako hypertextovom odkaze sa práve nachádza a ktorý odkaz ide aktivovať. Aj tu existuje viacero spôsobov, my si popíšeme dva:
Prvý spôsob zvýraznenia zameraného odkazu
Zameraný odkaz bude mať hrubšie podčiarknutie a zmení sa jeho farba.
Príklad:
Ale macocha i pri tých priadkach len svoju vychvaľovala a ukazovala si mužovi tie vretená, čo tá jeho dievka napriadla:“ (Zdroj: Zlatý fond SME, Prostonárodné slovenské povesti – Prvý zväzok, Pavol Dobšinský)
Druhý spôsob zvýraznenia zameraného odkazu
Odkaz, ktorý je zameraný kurzorom myši alebo klávesnice je zhora a zdola orámovaný, zmení sa jeho farba (odlišná od farby okolitého textu aj od farby nezameraných hypertextových odkazov) a môže sa zmeniť pozadie odkazu.
Príklad:
Ale macocha i pri tých priadkach len svoju vychvaľovala a ukazovala si mužovi tie vretená, čo tá jeho dievka napriadla:“ (Zdroj: Zlatý fond SME, Prostonárodné slovenské povesti – Prvý zväzok, Pavol Dobšinský)
Viditeľné zameranie v navigácii
Jedným z najzákladnejších pravidiel prístupnosti je zabezpečenie ovládania klávesnicou pre všetku funkcionalitu webovej stránky. Celá navigácia (aj podponuky) musí byť prístupná z klávesnice a zároveň je dôležité, aby bolo jasne viditeľné, na akej položke ponuky sa práve používateľ nachádza.
To dosiahneme vhodným odlíšením zameranej položky ponuky, ktorá sa môže líšiť od ostatných položiek farbou textu, farbou pozadia, orámovaním, prípadne ďalšími odlišovacími prvkami.
Príklad: Viditeľné zameranie formulárových prvkov