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/24 08:57] – linda
+++ pristupnost: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ě.
   * 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}} \\
-//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}} \\
-//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}} \\
 //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}} \\
-//Obr. 4: 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>
@@ Řádek 96: / Řádek 101: @@
 ==== Příklady použití obrázku na pozadí ====
-Na obr. 4 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. \\
+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. 4: Příklad nevhodně zvoleného podkladu textu}} \\
+{{:pristupnost:obrazek_na_pozaci.png|Obr. 6: Příklad nevhodně zvoleného podkladu textu}} \\
-//Obr. 4: Příklad nevhodně zvoleného podkladu textu (zdroj: archiv autorky)//
+//Obr. 6: 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í. \\ \\
+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. 5: 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. 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. 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. 6 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. 6: 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. 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. 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. 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. \\
+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. 7: 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. 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.)))//
+//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.)))//

Přístupné webové stránky

Uživatelské nástroje

Nástroje pro tento web

Rozdíly

Nástroje pro stránku