Uživatelské nástroje

Nástroje pro tento web


pristupnost:funkcni_grafika_webu

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Obě strany předchozí revizePředchozí verze
Následující verze
Předchozí verze
pristupnost:funkcni_grafika_webu [2020/09/16 13:07] lindapristupnost:funkcni_grafika_webu [2020/09/24 13:23] (aktuální) epub
Řádek 1: Řádek 1:
 ====== -#13 Funkční grafika webu ====== ====== -#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 však přitom poněkud upozaďuje funkčnost a přístupnost 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 > <WRAP center info >
Řádek 8: Řádek 8:
  
  
-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 zvyklosti používané na webu, 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 také obrázkynebo formátování písma a odstavců, kterým jsou věnovány samostatné kapitoly.+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 obrázky nebo formátování písma a odstavců.
  
 ===== Správné zobrazení stránky bez ohledu na zvětšení ===== ===== 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é také 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 tvorbě webu nutné věnovat pozornost tomu, zda jsou obrázky nebo funkční bloky správně vloženy nebo nastaveny. +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čizobrazí pouze část informacíblok však nejde posunout, takže se uživatel k požadované informaci nebo funkci nedostane.+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čizobrazí 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 takto 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.+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.
  
  
-===== Uživatelské zvyklosti =====+===== Očekávání uživatelů =====
  
-Řada grafických prvků, které se na webových stránkách používají, vychází z žně používaných zvyklostí. Např.:  +Ř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á obvykle umístěno vlevo nahoře;+  * logo bývá umístěno vlevo nahoře;
   * vyhledávací lišta v horní části stránky, často na pravé straně;   * vyhledávací lišta v horní části stránky, často na pravé straně;
   * přihlášení do účtu vpravo nahoře;   * přihlášení do účtu vpravo nahoře;
-  * hlavní menu obvykle na horizontální liště;+  * hlavní menu na horizontální liště;
   * sbalené menu na mobilních zařízeních zastupuje ikona se třemi horizontálními pruhy.   * sbalené menu na mobilních zařízeních zastupuje ikona se třemi horizontálními pruhy.
-Při návrhu webu je vhodné se těchto zvyklostí pokud možno přidržet a nezkoušet příliš experimentovat, jinak mohou být uživatelé zmatení, na stránkách se těžko orientují a neradi je používají.+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 ==== ==== Grafické strukturování obsahu ====
 Grafiku využijte k tomu, aby se uživatel rychle a jednoduše zorientoval v obsahu stránky. Např. : 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 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ář. +  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ě. +  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ímnaopak nepoužívejte podtržení pro zvýraznění textu, který odkazem není.+  Odkazy zvýrazněte podtrženímnaopak nepoužívejte podtržení pro zvýraznění textu, který odkazem není.
  
  
Řádek 38: Řádek 38:
  
  
-Častým problémem komplikujících 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.+Č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ý tzv. kontrastní poměr barev. 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í. 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.+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 > <WRAP center info >
-Minimální poměr barev pro běžné písmo (tj. do velikosti 18 bodů nebo tučné do 14 bodů) je považován kontrastní poměr 4,5:1. Za ideální je považován kontrastní poměr 7:1. Ke zjištění kontrastního poměru existuje řada nástrojů, např. [[pristupnost:overeni_kontrastu]], využít lze také [[pristupnost:celkove_overeni_pristupnosti]] a jiné.+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>
  
  
 <WRAP center tip> <WRAP center tip>
-Více o kontrastním poměru a dalších nástrojích k jeho zjištění se dozvíte v článku Barevný kontrast na webu a nástroje, které s ním pomohou((MICHÁLEK, Martin. Barevný kontrast na webu a nástroje, které s ním pomohou. //Vzhůru dolů// [online]. 11 2018 [cit. 2020-03-18]. Dostupné z: https://www.vzhurudolu.cz/prirucka/kontrast)).+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> </WRAP>
  
 ==== Příklady nesprávně zvoleného barevného kontrastu ==== ==== Příklady nesprávně zvoleného barevného kontrastu ====
  
-Na obr. 1 až 3 jsou uvedeny barevné kombinace, které sice vypadají graficky zajímavě, ale nesplňují požadavek na minimální poměr barevného kontrastu. 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.+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}} \\  {{: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&bcolor=A6A6A6|WebAIM]], získáno 2020-05-17)//+//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}} \\  {{: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&bcolor=70BAFF|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:[[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}}\\  +{{: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 [[https://webaim.org/resources/contrastchecker/?fcolor=DAA401&bcolor=FFFFFF|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:[[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> <WRAP center info>
 ==== Proč je dostatečný kontrast důležitý ==== ==== Proč je dostatečný kontrast důležitý ====
 Dostatečný kontrast textu vůči pozadí je důležitý zejména pro: Dostatečný kontrast textu vůči pozadí je důležitý zejména pro:
-  * lidi s poruchami zraku, včetně lidí s poruchami barvocitu nebo těch, kteří potřebují brýle na čtení (tedy početné skupiny seniorů);+  * 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).   * uživatele mobilních zařízení (zejména při čtení na ostrém slunci nebo na malém či nekvalitním displeji).
 </WRAP> </WRAP>
Řádek 73: Řádek 82:
  
 ===== Obrázky a vzorky na pozadí ===== ===== Obrázky a vzorky na pozadí =====
-Podobně jako nesprávný kontrastní poměr barevmůž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 fotografiepoužité jako podklad pro text. tento problém se netýká jen samotných stránek, ale třeba i plakátů, pozvánek nebo letáků, které na webu zveřejňujeme (a samozřejmě i jejich tištěných verzí).+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í designu 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 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 **problému čitelnost 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**.+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 přesto pro takové řešení rozhodili, je vhodné alespoň přidržet se následujících doporučení:+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**.   * 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**.   * 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 pruhemnebo ji upravte ztmavením nebo naopak zjasněním (je však třeba dát si pozor na to, aby "vzorek" obrázku byl natolik "znevýrazněn", že opravdu nepůsobí rušivě). **Text umístěte do jednobarevné nebo upravené části**.+  * 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" 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).   * 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ř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**.   * 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í ==== ==== Příklady použití obrázku na pozadí ====
-Na obr. je pozvánka na předvánoční akci knihovny, kde 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. \\ +Na obr. 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.)))//
  
-{{:pristupnost:obrazek_na_pozaci.png|Obr. 4: Příklad nevhodně zvoleného podkladu textu}} \\  +Obr. 8 ukazuje použití jednobarevného pruhu pro zlepšení čitelnosti textu\\ 
-//Obr. 4: Příklad nevhodně zvoleného podkladu textu (zdroj: archiv autorky)// +
  
-Na obr. 5 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:text_na_obrazku1.png?845|Obr. 8: Příklad využití barevného pruhu jako podkladu pro text v obrázku}} \\  
-{{:pristupnost:obrazek_na_pozadi_2.png|Obr. 5: Příklad mírně problematického textu umístěného na obrázkový podklad}} \\  +//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. 5: 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 Pixabay, jehož autorem je Luboš Houska.)))//+
  
-Obr. 6 ukazuje použití jednobarevného pruhu pro zlepšení čitelnosti textu. \\  +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_obrazku1.png|Obr. 6: Příklad využití barevného pruhu jako podkladu pro text v obrázku}} \\  +
-//Obr. 6: 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 Pixabayjehož autorem je Luboš Houska.)))//+
  
-Obr. 7 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}} \\  
-{{:pristupnost:text_na_obrazku2.png|Obr. 7: 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.)))//
-//Obr. 7: 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 Pixabay, jehož autorem je Luboš Houska.)))//+
  
  
 ==== Titulky videa ==== ==== Titulky videa ====
  
-Stejný problém jako u textu na obrázkovém pozadí vzniká u [[pristupnost:multimedia#titulky|titulků videa]]. Proto při editaci titulků vašich videí, zejména pokud jde o různé návody nebo výuková videa, dbejte na dostatečný kontrast textu a pozadí a zvolte vhodnou barvu titulů 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).+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).
  
  
Řádek 113: Řádek 125:
  
 ==== Proč je důležité vyhnout se vzorkům na pozadí textu ==== ==== 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é potřebují brýle na čtení.+  * 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í.   * 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ř. při čtení při intenzivním slunečním svitu).+  * 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> </WRAP>
  
-<-redakcni_system_a_sablony|12. Redakční systém a šablony^obsah|Obsah^struktura_webu|14. Struktura webu->+<-redakcni_system|12. Redakční systém^obsah|Obsah^struktura_webu|14. Struktura webu->
pristupnost/funkcni_grafika_webu.1600254441.txt.gz · Poslední úprava: 2020/09/16 13:07 autor: linda