Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Obě strany předchozí revizePředchozí verzeNásledující verze | Předchozí verzePoslední revizeObě strany příští revize | ||
pristupnost:funkcni_grafika_webu [2020/09/15 08:26] – ↷ Stránka přejmenována z 'pristupnost:funkcni_grafika' na 'pristupnost:funkcni_grafika_webu' linda | pristupnost:funkcni_grafika_webu [2024/04/20 20:33] – [Grafické strukturování obsahu] eva | ||
---|---|---|---|
Řá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 |
<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ázky, nebo 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 i 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, | + | Webové stránky se dnes čtou nejen na obrazovce počítače, |
- | 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. | + | 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 |
- | 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, | + | 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živatelské zvyklosti | + | ===== Očekávání uživatelů |
- | Mnoho grafických prvků, které se na webových stránkách používají, | + | Řada grafických prvků, které se na webových stránkách používají, |
- | * Logo bývá | + | * 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 | + | * hlavní menu na horizontální liště; |
- | * sbalené menu na mobilních zařízeních zastupuje ikona se třemi horizontálními pruhy atd. | + | * sbalené menu na mobilních zařízeních zastupuje ikona se třemi horizontálními pruhy. |
- | Při návrhu webu je vhodné | + | Při návrhu webu je vhodné |
==== 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ř. : | ||
- | | + | |
- | | + | |
- | | + | |
- | | + | |
+ | |||
+ | <WRAP center round tip> | ||
+ | Pro přístupnost webu je důležité, | ||
+ | </ | ||
Řádek 38: | Řádek 43: | ||
- | Častým problémem | + | Častým problémem |
- | Při výběru barev (a to nejen pro použití na webu) je důležitý | + | Při výběru barev (a to nejen pro použití na webu) je důležitý |
+ | dostatečný (např. bílá na černé, tmavě modrá na bílé) nebo naopak že je nevyhovující | ||
<WRAP center info > | <WRAP center info > | ||
- | Minimální | + | Za minimální kontrastní |
</ | </ | ||
<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 | + | Podrobnosti |
</ | </ | ||
==== 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 | + | Na obr. 1 až 3 si můžete prohlédnout |
{{: | {{: | ||
- | //Obr. 1: Kombinace bílé a šedé barvy (#FFFFFF a #A6A6A6) s nedostatečným kontrastním poměrem (zdroj: [[https:// | + | //Obr. 1: Kombinace bílé a šedé barvy (#FFFFFF a #A6A6A6) s nedostatečným kontrastním poměrem (zdroj: [[https:// |
{{: | {{: | ||
- | //Obr. 2: Kombinace světle modré a bílé barvy (#FFFFFF a #70BAFF) s nedostatečným kontrastním poměrem (zdroj: | + | //Obr. 2: Kombinace světle modré a bílé barvy (#FFFFFF a #70BAFF) s nedostatečným kontrastním poměrem (zdroj: |
- | {{: | + | {{: |
- | //Obr. 3: Kombinace zlaté a bílé barvy (#DAA401 a #FFFFFF) s nedostatečným kontrastním poměrem [[https:// | + | //Obr. 3: Kombinace zlaté a bílé barvy (#DAA401 a #FFFFFF) 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:// | ||
+ | |||
+ | {{: | ||
+ | //Obr. 5: Kombinace černé a modré barvy (#000000 a #06073C) s nedostatečným kontrastním poměrem (zdroj: | ||
+ | [[https:// | ||
<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ě | + | * uživatele |
* 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). | ||
</ | </ | ||
Řádek 73: | Řádek 87: | ||
===== Obrázky a vzorky na pozadí ===== | ===== 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. I 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í | + | Použití vzorku na pozadí (tapetě) se doporučujeme vyhnout. Někdy se však ve snaze o atraktivní |
- | Pokud byste se přesto | + | Pokud byste se pro obrázek na pozadí |
* 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, | + | * Na obrázcích, |
* 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/ |
* 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. 4 je pozvánka na předvánoční akci knihovny, | + | Na obr. 6 je pozvánka na předvánoční akci knihovny, |
- | {{: | + | {{: |
- | // | + | // |
- | 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í. \\ | + | 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 " |
- | {{: | + | |
- | //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. 7 zobrazuje řešení, kdy je čitelnost obrázku řešena " | + | 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((Jako podklad pro text byl použit obrázek ze serveru [[https:// | ||
+ | |||
+ | Obr. 9 zobrazuje řešení, kdy je čitelnost obrázku řešena " | ||
+ | |||
+ | {{: | ||
+ | // | ||
==== Titulky videa ==== | ==== Titulky videa ==== | ||
- | Stejný problém jako u textu na obrázkovém pozadí vzniká u [[pristupnost: | + | Stejný problém jako u textu na obrázkovém pozadí vzniká u [[pristupnost: |
Řádek 113: | Řádek 130: | ||
==== 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 | + | * 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é |
* 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ř. | + | * V některých případech vzorek nebo obrázek zhoršuje kvalitu čtení uživatelům mobilních zařízení (např. |
</ | </ | ||
- | + | < | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + |