Rozdíly

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

--- pristupnost:funkcni_grafika_webu [2020/09/17 20:19] – linda
+++ pristupnost:funkcni_grafika_webu [2020/09/23 14:46] – linda
@@ Řádek 12: / Řádek 12: @@
 ===== 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é 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 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.
@@ Řádek 40: / Řádek 40: @@
 Č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ý 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í (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 >
@@ Řádek 53: / Řádek 54: @@
 ==== 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 jsou uvedeny barevné kombinace, které sice vypadají graficky zajímavě, ale nesplňují požadavek na minimální poměr barevného kontrastu. Na obr. 4 a 5 jsou uvedeny barevné kombinace, kde 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}} \\
@@ Řádek 61: / Řádek 62: @@
 //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)//
-{{: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&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&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. 4: Kombinace černé a modré barvy (#000000 a #06073C) s nedostatečným kontrastním poměrem (zdroj:
+[[https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=06073C|WebAIM]], získáno 2020-05-17)//
 <WRAP center info>
@@ Řádek 94: / Řádek 103: @@
 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:obrazek_na_pozadi_2.png|Obr. 5: Příklad mírně problematického textu umístěného na obrázkový podklad}} \\
-//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. 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 [[https://pixabay.com/|Pixabay]], jehož autorem je Luboš Houska.)))//
 Obr. 6 ukazuje použití jednobarevného pruhu pro zlepšení čitelnosti textu. \\
 {{: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 Pixabay, jehož autorem je Luboš Houska.)))//
+//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 [[https://pixabay.com/|Pixabay]], jehož 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|Obr. 7: Příklad vložení textu do obrázku s využitím části obrázku upravené snížením jasu}} \\
-//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.)))//
+//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 [[https://pixabay.com/|Pixabay]], jehož autorem je Luboš Houska.)))//
@@ Řádek 118: / Řádek 127: @@
 </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->

Přístupné webové stránky

Uživatelské nástroje

Nástroje pro tento web

Rozdíly

Nástroje pro stránku