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 [2024/04/21 08:33] (aktuální) – eva
@@ Řádek 1: / Řádek 1: @@
 ====== -#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 >
@@ Řá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é 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.
+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 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.
@@ Řádek 33: / Řádek 33: @@
   * 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>
@@ Řádek 40: / Řádek 45: @@
 Č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 >
-Minimální poměr barev pro písmo (běžné 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|validátor kontrastu WebAIM Contrast Checker]], využít lze také [[pristupnost:celkove_overeni_pristupnosti|validátor přístupnosti WAVE]] 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>
@@ Řádek 53: / Řádek 59: @@
 ==== 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}} \\
-//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}} \\
-//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>
 ==== Proč je dostatečný kontrast důležitý ====
 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í (mj. 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).
 </WRAP>
@@ Řádek 75: / Řádek 89: @@
 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 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ématické č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**.
+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 obrázek na pozadí rozhodli, je vhodné se alespoň přidržet 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**.
@@ Řádek 87: / Řádek 101: @@
 ==== Příklady použití obrázku na pozadí ====
-Na obr. 4 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. 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.)))//
-{{: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 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?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 ====
-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 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 130: @@
 ==== 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í.
-  * 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>
-<-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