====== -#13 Funkční grafika webu ======

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.

<WRAP center info >
Vizuální stránka webu je rozhodně velmi důležitá. **Dobře zpracovaný grafický návrh významně přispívá nejen k atraktivitě, ale také k použitelnosti a přístupnosti webu.** Naopak špatná grafika nebo lpění na detailech, které se hodí pro tištěné dokumenty (ale na web jsou nevhodné), může použitelnost a přístupnost výrazně zkomplikovat.
</WRAP>


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ů.

===== Správné zobrazení stránky bez ohledu na zvětšení =====

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.


===== Očekávání uživatelů =====

Ř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í.
==== Grafické strukturování obsahu ====
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í.

<WRAP center round tip>
Pro přístupnost webu je důležité, aby funkční prvky webu byly přístupné z klávesnice a srozumitelně označeny. Naopak není třeba klást nadměrný důraz na "inkluzivní" slovní označení těchto prvků. Není  například nutné vyhýbat se kvůli nevidomým uživatelům termínům "prohlédnout", "zhlédnout" "číst" apod., protože nevidomí lidé tyto termíny v komunikaci sami běžně používají((Zajímavé informace k tomuto tématu najdete např. v   [[https://www.linkedin.com/posts/jakub-stanjura-926089147_p%C5%99em%C3%BD%C5%A1leli-jste-n%C4%9Bkdy-nad-t%C3%ADm-%C5%BEe-dobr%C3%A9-microcopy-activity-7183025950782038016--lyu|komentářích k příspěvku Jakuba Stanjury na LinkedIn]].)).
</WRAP>



===== Kontrast barev =====


Č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.

<WRAP center info >
Za minimální kontrastní poměr barev pro písmo (běžné do velikosti 18 bodů nebo tučné do 14 bodů) je považován poměr 4,5:1, za ideální poměr 7:1. Ke zjištění poměru existuje řada nástrojů, např. [[pristupnost:overeni_kontrastu|validátor kontrastu WebAIM Contrast Checker]] nebo [[pristupnost:celkove_overeni_pristupnosti|validátor přístupnosti WAVE]].
</WRAP>


<WRAP center tip>
Podrobnosti o kontrastním poměru a dalších nástrojích k jeho zjištění se dozvíte v článku [[https://www.vzhurudolu.cz/prirucka/kontrast|Barevný kontrast na webu a nástroje, které s ním pomohou]].
</WRAP>

==== Příklady nesprávně zvoleného barevného kontrastu ====

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.

{{:pristupnost:kontrast_1.png|Obr. 1: Kombinace bílé a šedé barvy (#FFFFFF a #A6A6A6) s nedostatečným kontrastním poměrem}} \\ 
//Obr. 1: Kombinace bílé a šedé barvy (#FFFFFF a #A6A6A6) s nedostatečným kontrastním poměrem (zdroj: [[https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&amp;bcolor=A6A6A6|WebAIM]], získáno 2020-05-17)//

{{:pristupnost:kontrast_2.png|Obr. 2: Kombinace světle modré a bílé barvy (#FFFFFF a #70BAFF) s nedostatečným kontrastním poměrem}} \\ 
//Obr. 2: Kombinace světle modré a bílé barvy (#FFFFFF a #70BAFF) s nedostatečným kontrastním poměrem (zdroj:[[https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&amp;bcolor=70BAFF|WebAIM]], získáno 2020-05-17)//

{{:pristupnost:kontrast_3.png|Obr. 3: Kombinace zlaté a bílé barvy (#DAA401 a #FFFFFF) s nedostatečným kontrastním poměrem}} \\ 
//Obr. 3: Kombinace zlaté a bílé barvy (#DAA401 a #FFFFFF) s nedostatečným kontrastním poměrem (zdroj:[[https://webaim.org/resources/contrastchecker/?fcolor=DAA401&amp;bcolor=FFFFFF|WebAIM]], získáno 2020-05-17)// 

{{:pristupnost:kontrast_4.png|Obr. 4: Kombinace bílé a žluté barvy (#FFFFFF a #FFF947) s nedostatečným kontrastním poměrem}} \\
//Obr. 4: Kombinace bílé a žluté barvy (#FFFFFF a #FFF947) s nedostatečným kontrastním poměrem (zdroj:
[[https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&amp;bcolor=FFF947|WebAIM]], získáno 2020-05-17)//

{{:pristupnost:kontrast_5.png|Obr. 5: Kombinace černé a modré barvy (#000000 a #06073C) s nedostatečným kontrastním poměrem}} \\
//Obr. 5: Kombinace černé a modré barvy (#000000 a #06073C) s nedostatečným kontrastním poměrem (zdroj:
[[https://webaim.org/resources/contrastchecker/?fcolor=000000&amp;bcolor=06073C|WebAIM]], získáno 2020-05-17)//

<WRAP center info>
==== Proč je dostatečný kontrast důležitý ====
Dostatečný kontrast textu vůči pozadí je důležitý zejména pro:
  * uživatele s poruchami zraku, včetně těch s poruchami barvocitu nebo těch, kteří potřebují brýle na čtení (mj. početné skupiny seniorů);
  * uživatele mobilních zařízení (zejména při čtení na ostrém slunci nebo na malém či nekvalitním displeji).
</WRAP>


===== Obrázky a vzorky na pozadí =====
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í((Tapety na pozadí webové stránky naštěstí v současné době nejsou používány tak často jako dříve.)) 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**.

==== Příklady použití obrázku na pozadí ====
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. \\ 

{{:pristupnost:obrazek_na_pozaci.png|Obr. 6: Příklad nevhodně zvoleného podkladu textu}} \\ 
//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í. \\ 

{{:pristupnost:obrazek_na_pozadi_2.png?845|Obr. 7: Příklad mírně problematického textu umístěného na obrázkový podklad}} \\ 
//Obr. 7: Příklad mírně problematického textu umístěného na obrázkový podklad (zdroj: archiv autorky((Jako podklad pro text byl použit obrázek ze serveru [[https://pixabay.com/|Pixabay]], jehož autorem je Luboš Houska.)))//

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

{{:pristupnost:text_na_obrazku1.png?845|Obr. 8: Příklad využití barevného pruhu jako podkladu pro text v obrázku}} \\ 
//Obr. 8: Příklad využití barevného pruhu jako podkladu pro text v obrázku (zdroj: archiv autorky((Jako podklad pro text byl použit obrázek ze serveru [[https://pixabay.com/|Pixabay]], jehož autorem je Luboš Houska.)))//

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. \\ 

{{:pristupnost:text_na_obrazku2.png?845|Obr. 9: Příklad vložení textu do obrázku s využitím části obrázku upravené 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((Jako podklad pro text byl použit obrázek ze serveru [[https://pixabay.com/|Pixabay]], jehož autorem je Luboš Houska.)))//


==== Titulky videa ====

Stejný problém jako u textu na obrázkovém pozadí vzniká u [[pristupnost:multimedialni_obsah#titulky|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).


<WRAP center info>

==== Proč je důležité vyhnout se vzorkům na pozadí textu ====
  * Text, jehož podkladem je vzorek nebo obrázek, může splývat s pozadím, proto se hůře čte slabozrakým lidem, lidem s poruchami barvocitu nebo osobám, které na čtení potřebují brýle.
  * Vzorek nebo obrázek je rušivým prvkem pro lidi s některými kognitivními poruchami nebo poruchami čtení.
  * V některých případech vzorek nebo obrázek zhoršuje kvalitu čtení uživatelům mobilních zařízení (např. pokud čtou při intenzivním slunečním svitu).
</WRAP>

<-redakcni_system|12. Redakční systém^obsah|Obsah^struktura_webu|14. Struktura webu->