Při přípravě nového webu bývá jedním z nejčastěji diskutovaných témat vizuální stránka věci, většinou s důrazem na to, aby se web líbil a byl zajímavý. Někdy se přitom však poněkud upozaďuje funkčnost a přístupnost webu.

V této kapitole se budeme věnovat některým základním tématům, které s funkčností grafiky souvisejí a mají vliv na použitelnost a přístupnost webových stránek. Jde např. o očekávání uživatelů, práci s textem a textovými bloky, práci s barvami, zejména se zřetelem na kontrast popředí vůči pozadí. Důležitým aspektem funkčnosti grafiky jsou i obrázky nebo formátování písma a odstavců.

Webové stránky se dnes čtou nejen na obrazovce počítače, ale také na mobilních zařízeních, která mají nejrůznější rozlišení či orientaci. Někteří uživatelé rovněž využívají možnost zvětšení stránky (zoomování), ať už přímo v nastavení prohlížeče nebo s využitím speciálních zvětšovacích programů. Proto je při tvorbě webu nutné věnovat pozornost tomu, zda jsou obrázky nebo funkční bloky správně vloženy nebo nastaveny. Problémem může být např. to, že se z obrázku, z bloku textu, navigace nebo jiného prvku na webové stránce na menší obrazovce (nebo naopak při zvětšení zobrazení v prohlížeči) zobrazí pouze část informací; blok však nejde posunout, takže se uživatel k požadované informaci nebo funkci nedostane.

Nevhodné nastavení může vést také k tomu, že obrázky nebo bloky zakrývají další bloky, text nebo jeho části. Pokud dojde k zakrytí navigace či formuláře, uživatel se nedostane k požadovaným informacím, některým akcím, ovládacím prvkům apod.

Řada grafických prvků, které se na webových stránkách používají, vychází z toho, co uživatelé očekávají, např.:

• logo bývá umístěno vlevo nahoře;
• vyhledávací lišta v horní části stránky, často na pravé straně;
• přihlášení do účtu vpravo nahoře;
• hlavní menu na horizontální liště;
• sbalené menu na mobilních zařízeních zastupuje ikona se třemi horizontálními pruhy.

Při návrhu webu je vhodné očekávání uživatelů pokud možno naplnit a nezkoušet příliš experimentovat, jinak mohou být uživatelé zmateni, na stránkách se těžko orientují a neradi je používají.

Grafiku využijte k tomu, aby se uživatel rychle a jednoduše zorientoval v obsahu stránky. Např. :

• Z menu by mělo být jasné, že jde o menu.
• Z vyhledávacího formuláře by mělo být jasné, že jde o vyhledávací formulář.
• Vzhled nadpisů upravte tak, aby uživateli pomohl pochopit strukturu textu, tj. nadpisy vyšší úrovně by měly být větší/výraznější než nadpisy nižší úrovně.
• Odkazy zvýrazněte podtržením; naopak nepoužívejte podtržení pro zvýraznění textu, který odkazem není.

Častým problémem komplikujícím přístupnost stránky je nedostatečný kontrast textu (nebo jiného významového prvku stránky) vůči pozadí v důsledku nevhodné kombinace barev.

Při výběru barev (a to nejen pro použití na webu) je důležitý jejich kontrastní poměr. Některé barevné kombinace sice mohou být graficky atraktivní, ale jejich kontrastní poměr je nedostatečný, takže při jejich použití se text stává nečitelným. U některých barevných kombinací je snadné poznat, že kontrast je dostatečný (např. bílá na černé, tmavě modrá na bílé) nebo naopak že je nevyhovující (např. žlutá na bílé nebo tmavě modrá na černé). U jiných už to však tak zřejmé není. Proto při výběru barev doporučujeme řídit se právě kontrastním poměrem.

Na obr. 1 až 3 si můžete prohlédnout barevné kombinace, které sice vypadají graficky zajímavě, ale nesplňují požadavek na minimální poměr barevného kontrastu. Obr. 4 a 5 obsahují barevné kombinace, u nichž je nedostatečný kontrast zřetelně viditelný. U každého obrázku je uveden odkaz na validátor kontrastu WebAIM Contrast Checker, kde se můžete podívat, jaký je kontrastní poměr dané kombinace barev.

Obr. 1: Kombinace bílé a šedé barvy (#FFFFFF a #A6A6A6) s nedostatečným kontrastním poměrem (zdroj: WebAIM, získáno 2020-05-17)

Obr. 2: Kombinace světle modré a bílé barvy (#FFFFFF a #70BAFF) s nedostatečným kontrastním poměrem (zdroj:WebAIM, získáno 2020-05-17)

Obr. 3: Kombinace zlaté a bílé barvy (#DAA401 a #FFFFFF) s nedostatečným kontrastním poměrem (zdroj:WebAIM, získáno 2020-05-17)

Obr. 4: Kombinace bílé a žluté barvy (#FFFFFF a #FFF947) s nedostatečným kontrastním poměrem (zdroj: WebAIM, získáno 2020-05-17)

Obr. 5: Kombinace černé a modré barvy (#000000 a #06073C) s nedostatečným kontrastním poměrem (zdroj: WebAIM, získáno 2020-05-17)

Podobně jako nesprávný kontrastní poměr barev může nečitelnost textů vůči pozadí způsobit i nevhodný vzorek na pozadí textu. Typickým příkladem jsou různé tapety na pozadí²⁾ nebo obrázky či fotografie použité jako podklad pro text. Ani tento problém se netýká jen samotných stránek, ale např. i plakátů, pozvánek nebo letáků, které na webu zveřejňujeme (a samozřejmě i jejich tištěných verzí).

Použití vzorku na pozadí (tapetě) se doporučujeme vyhnout. Někdy se však ve snaze o atraktivní design webu používají obrázky jako podklad pro text různých bannerů apod. Umístění textu přesně na konkrétní místo obrázku může být ovšem problematické z hlediska zobrazení na různých zařízeních. Obvykle je proto text vložen přímo do obrázku. To je ovšem postup, který nelze příliš doporučit, zejména kvůli problematické čitelnosti při zvětšení stránky. Text ve formě obrázku také nepřečte odečítač obrazovky ani webový vyhledávač. Není příjemný ani pro běžné uživatele, protože text v obrázku nelze v případě potřeby zkopírovat.

Pokud byste se pro obrázek na pozadí přesto rozhodli, je vhodné se alespoň přidržet následujících doporučení:

• Používejte obrázky jako podklad pouze pro kratší texty psané velkým fontem (pro titulek, slogan apod.), nikdy pro běžný text.
• Text umisťujte v obrázku tam, kde je větší jednobarevná plocha.
• Na obrázcích, kde není dostatečně velká jednobarevná plocha, překryjte část obrázku jednobarevným pruhem nebo ji upravte ztmavením či naopak zjasněním (je však třeba dát si pozor na to, aby „vzorek“ obrázku byl dostatečně „znevýrazněn“ a nepůsobil rušivě). Text umístěte do jednobarevné nebo upravené části.
• Při výběru velikosti a barvy písma nezapomínejte na vhodný poměr kontrastu písma vůči podkladu (tj. vůči jednobarevné nebo upravené části obrázku).
• Pokud text vkládáte přímo do obrázku, přesvědčte se. že je text čitelný i při velkém zvětšení stránky/obrázku.
• Pokud text vkládáte přímo do obrázku, připojte k obrázku vhodný alternativní popis.

Na obr. 6 je pozvánka na předvánoční akci knihovny, na níž text téměř nejde přečíst. I když uvedený příklad je opravdu extrémně problematický, obrázky jako podklad jsou problematické téměř vždy, ať už se jedná o fotografie, kresby či malby, vzorek na pozadí webu apod.

Obr. 6: Příklad nevhodně zvoleného podkladu textu (zdroj: archiv autorky)

Na obr. 7 je ukázka sloganu knihovny umístěného na obrázku. Vzhledem k tomu, že jde o větší písmo a krátký text, nejde o kritický problém, ale část textu „Knihovna, kde to žije“ není příliš výrazná, což kupříkladu uživatelům se zrakovým postižením může ztížit vnímání informací.

Obr. 7: Příklad mírně problematického textu umístěného na obrázkový podklad (zdroj: archiv autorky³⁾)

Obr. 8 ukazuje použití jednobarevného pruhu pro zlepšení čitelnosti textu.

Obr. 8: Příklad využití barevného pruhu jako podkladu pro text v obrázku (zdroj: archiv autorky⁴⁾)

Obr. 9 zobrazuje řešení, kdy je čitelnost obrázku řešena „znevýrazněním“ části obrázku, v tomto případě snížením jasu.

Obr. 9: Příklad vložení textu do obrázku s využitím části obrázku upravené snížením jasu (zdroj: archiv autorky⁵⁾)

Stejný problém jako u textu na obrázkovém pozadí vzniká u titulků videa. Proto při editaci titulků videí, zejména návodů nebo výukových videí, dbejte na dostatečný kontrast textu a pozadí a zvolte vhodnou barvu titulků i barvu a průhlednost podkladové lišty. Většina programů pro editaci videa výběr barev titulků a průhlednosti podkladové lišty umožňuje (včetně programů, které jsou dostupné zdarma).