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/24 09:02] lindapristupnost:funkcni_grafika_webu [2024/04/21 08:33] (aktuální) eva
Řá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ě.   * 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í.   * 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 57: Řádek 62:
  
 {{: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 (zdroj:[[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}} \\ {{: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: //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)//+[[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}} \\ {{: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: //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&bcolor=06073C|WebAIM]], získáno 2020-05-17)//+[[https://webaim.org/resources/contrastchecker/?fcolor=000000&amp;bcolor=06073C|WebAIM]], získáno 2020-05-17)//
  
 <WRAP center info> <WRAP center info>
Řádek 103: Řádek 108:
 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í. \\  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|Obr. 7: Příklad mírně problematického textu umístěného na obrázkový podklad}} \\ +{{: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. 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. \\  Obr. 8 ukazuje použití jednobarevného pruhu pro zlepšení čitelnosti textu. \\ 
  
-{{:pristupnost:text_na_obrazku1.png|Obr. 8: Příklad využití barevného pruhu jako podkladu pro text v obrázku}} \\ +{{: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. 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. \\  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|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?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.)))// //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.)))//
  
pristupnost/funkcni_grafika_webu.1600930937.txt.gz · Poslední úprava: 2020/09/24 09:02 autor: linda