Uživatelské nástroje

Nástroje pro tento web


pristupnost:redakcni_system_obrazky

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
Poslední revizeObě strany příští revize
pristupnost:redakcni_system_obrazky [2020/05/14 18:29] – [Jaké obrázky vybírat] evapristupnost:redakcni_system_obrazky [2020/09/17 21:13] linda
Řádek 4: Řádek 4:
 ===== Jaké obrázky vybírat ===== ===== Jaké obrázky vybírat =====
  
-  - Používejte obrázky, které jsou **vhodné pro danou cílovou skupinu**. Jiné obrázky jsou vhodné pro děti, jiné pro odborný článek, jiné pro pozvánku na akci nebo instruktážní letáček.  +  - Používejte obrázky, které jsou **vhodné pro danou cílovou skupinu**. Jiné obrázky jsou vhodné pro děti, jiné pro odborný článek, jiné pro pozvánku na akci nebo instruktážní letáček. \\ \\ 
-  - Tam, kde je to možné, je vhodné použít **jednotný styl obrázků**. Například pokud chceme ve výňatku z knihovního řádu použít piktogramy, měly by tyto piktogramy být ve stejném stylu. Pokud by byly obrázky různé (např. pokud je v jednom textu případě použita černobílá ikona pro jednu instrukci a pro jinou barevná fotografie, nejen, že to uživateli nepomáhá v rychlejší orientaci v informacích, ale může to být naopak rušivé a zavádějící). \\ //Obrázek 1 - ukázka nevhodné kombinace nesourodých ikon// \\ {{:pristupnost:ikony-kombinace.png|Obrázek - ukázka nevhodné kombinace různých  infografik}}   +  - Tam, kde je to možné, je vhodné použít **jednotný styl obrázků**. Napřpokud chceme ve výňatku z knihovního řádu použít piktogramy, měly by tyto piktogramy být ve stejném stylu. \\ \\ Pokud by byly obrázky různé (např. pokud je v jednom textu případě použita černobílá ikona pro jednu instrukci a pro jinou barevná fotografie, uživateli to nejen nepomáhá v rychlejší orientaci v informacích, ale může to být naopak rušivé a zavádějící). \\  \\ {{:pristupnost:ikony-kombinace.png|Obr. 1: Nevhodná kombinace různých  infografik}} \\  //Obr. 1: Nevhodná kombinace dvou nesourodých ikon (zdroj: archiv autorky)// \\ \\  
-  - Má-li obrázek ilustrovat text nebo myšlenku, měl by být jasný a srozumitelný a mělo by na něm být pokud možno jen to, co je smyslem sdělení. Například pokud má být obrázek ilustrací čtenáře, měla by na něm být pouze čtoucí osoba a ne už další objekty. \\ //Příklad správně vybrané ilustrace vidíte na obrázku 2 vlevo. Z obrázku je na první pohled jasně patrné, že jde o čtoucí ženu. Na pravé straně obrázku vidíme sice také čtoucí ženu, ale postava je příliš malá a kolem ní jsou další objekty, takže uživatel se nejdříve musí na obrázku zorientovat a na první pohled mu nemusí být jasné, o co vlastně na obrázku jde. // \\ {{:pristupnost:vyber_vhodne_ilustrace.png| Obrázek Ukázka vhodně a nevhodně vybraného ilustračního obrázku }}+  - Má-li obrázek ilustrovat text nebo myšlenku, měl by být jasný a srozumitelný a mělo by na něm být pokud možno jen to, co je smyslem sdělení. Napřpokud má být obrázek ilustrací čtenáře, měla by na něm být pouze čtoucí osoba a ne už další objekty. \\ \\ Příklad správně vybrané ilustrace vidíte na obrázku 2 vlevo. Z obrázku je na první pohled jasně patrné, že jde o čtoucí ženu. Na pravé straně obrázku vidíme sice také čtoucí ženu, ale postava je příliš malá a kolem ní jsou další objekty, takže uživatel se nejdříve musí na obrázku zorientovat a na první pohled mu nemusí být jasné, o co vlastně na obrázku jde. \\ {{:pristupnost:vyber_vhodne_ilustrace.png|Obr. 2Ukázka vhodně a nevhodně vybraného ilustračního obrázku}} \\ //Obr. 2: Ukázka vhodně a nevhodně vybraného ilustračního obrázku (zdroj: [[https://pixabay.com/|Pixabay]], získáno 2020-05-14)//
  
 <WRAP center round info> <WRAP center round info>
Řádek 12: Řádek 12:
 ==== Proč je správný výběr obrázků důležitý ==== ==== Proč je správný výběr obrázků důležitý ====
  
-Vhodné obrázky mohou pomoci v pochopení informace lidem, kteří mají nějaký problém s vnímáním informací. Jsou to například +Vhodné obrázky mohou pomoci v pochopení informace lidem, kteří mají nějaký problém s vnímáním informací. Jsou to např.
-  * lidé s mentálním postižením +  * lidé s mentálním postižením; 
-  * lidé s poruchami učení nebo soustředění +  * lidé s poruchami učení nebo soustředění; 
-  * lidé, pro které čeština není mateřským jazykem (cizinci, příslušníci národnostních menšinneslyšící, pro které je mateřským jazykem český znakový jazyk aj.+  * lidé, pro které čeština není mateřským jazykem (cizinci, příslušníci národnostních menšin nebo neslyšící, pro které je mateřským jazykem český znakový jazyk).
  
 </WRAP> </WRAP>
Řádek 27: Řádek 27:
  
 Jsou to zejména: Jsou to zejména:
-  * Nevidomí ivatele webu, kteří pro "zobrazení" stránky používají odečítač obrazovky nebo jiné alternativní výstupní zařízení (např. tzv.bBraillský řádek).  +  * nevidomí ivatelé webu, kteří pro "zobrazení" stránky používají odečítač obrazovky nebo jiné alternativní výstupní zařízení (např. braillský řádek).  
-  * "Stroje", především webové vyhledávače, případně i některé programy či aplikace.+  * stroje, především webové vyhledávače, případně i některé programy či aplikace.
 </WRAP> </WRAP>
  
Řádek 43: Řádek 43:
 Proto při práci s obrázky nezapomínejte na tato doporučení: Proto při práci s obrázky nezapomínejte na tato doporučení:
  
-  - Pokud obrázek obsahuje nějakou informaci a není jen doplňkovou ilustrací (např. jedná se tlačítko, logo, emotikon, piktogram apod.), je potřeba **přidat také alternativní text vysvětlující funkci obrázku**.  Alternativní text (někdy také označovaný jako „alt“) je obvykle jedním z polí formuláře pro vložení a úprav vlastností obrázku. \\ \\ //Na obrázku 4 je zobrazeno dialogové okno pro vkládání a editaci obrázku popisek obrázku vkládáme do pole "alternativní text"// \\ {{:pristupnost:alternativni_text_obrazku.png|Obrázek - vkládání popisku obrázku v dialogovém okně pro úpravu obrázků}}  +  - Pokud obrázek obsahuje nějakou informaci a není jen doplňkovou ilustrací (např. jedná se tlačítko, logo, emotikon, piktogram apod.), je třeba **přidat také alternativní text vysvětlující funkci obrázku**.  Alternativní text (někdy také označovaný jako „alt“) je obvykle jedním z polí formuláře pro vložení a úprav vlastností obrázku. \\ \\ Na obr. 4 je zobrazeno dialogové okno pro vkládání a editaci obrázku – popisek obrázku vkládáme do pole "alternativní text" \\ {{:pristupnost:alternativni_text_obrazku.png|Obr. 4: Vkládání popisku obrázku v dialogovém okně pro úpravu obrázků}}  \\ \\ //Obr. 4: Vkládání popisku obrázku v dialogovém okně pro úpravu obrázků// 
-  - Pokud jsou obrázky důležitou součástí obsahu sdělované informace, (např. grafy, schémata nebo jakékoliv obrázky vysvětlují nějakou část informace, která jinak není obsažená v textu), **připojte slovní popis obrázku, případně i odkaz na zdrojová data** (tabulku, z níž byl graf vygenerován, atp.). \\ \\ //Jako příklad uvádíme Graf znázorňující výsledky dotazu, zad knihovny věnují pozornost přístupnosti webových stránek ((Jde jednu z otázek v rámci průzkumu bezbariérovosti služeb knihoven z roku 2014)) \\ {{:pristupnost:graf-pristupnost_webu.png|}}.  \\ Pokud bychom do alternativního textu uvedli pouze "Graf - výsledky dotazu na přístupnost webů knihoven", nevidomý uživatel by přišel o podstatné informace. Proto je důležité výsledky popsat slovně, např.: \\  "cca 16 % respondetů má přístupné stránky, 9 % ví o problémech a řeší je, cca 24 % přístupnost neřešilo, cca 51 % neví, co přístupnost znamená". \\  Pokud je popisek příliš dlouhý, je možné jej vložit přímo do textu (v tom je alternativní popisek "Graf - výsledky dotazu na přístupnost webů knihoven" dostačující variantou).// +  - Pokud jsou obrázky důležitou součástí obsahu sdělované informace, (např. grafy, schémata nebo jakékoliv obrázky vysvětlují nějakou část informace, která jinak není obsažená v textu), **připojte slovní popis obrázku, případně i odkaz na zdrojová data** (tabulku, z níž byl graf vygenerován, atp.). \\ \\ //Jako příklad uvádíme Graf znázorňující výsledky dotazu, zad knihovny věnují pozornost přístupnosti webových stránek ((Jde jednu z otázek v rámci průzkumu bezbariérovosti služeb knihoven z roku 2014.)) \\ {{:pristupnost:graf-pristupnost_webu.png|}}.  \\ Pokud bychom do alternativního textu uvedli pouze "Graf - výsledky dotazu na přístupnost webů knihoven", nevidomý uživatel by přišel o podstatné informace. Proto je důležité výsledky popsat slovně, např.: \\  "cca 16 % respondetů má přístupné stránky, 9 % ví o problémech a řeší je, cca 24 % přístupnost neřešilo, cca 51 % neví, co přístupnost znamená". \\  Pokud je popisek příliš dlouhý, je možné jej vložit přímo do textu (v tom případě už nemusíte uvádět v alternativním popisku detaily  - stačí uvést  "Graf - výsledky dotazu na přístupnost webů knihoven").// \\ \\ 
-  - Pro obrázky, které jsou pouze ilustrační a nemají žádný vliv na význam sdělení, se používají prázdné uvozovky ("")+  - Pro obrázky, které jsou pouze ilustrační a nemají žádný vliv na význam sdělení, se používají prázdné uvozovky %%""%%. 
 + 
 +<WRAP center round tip> 
 +**Pokud je váš redakční systém správně nastavený, může vám práci s alternativními popisky obrázku usnadnit**. Může za vás např. vkládat prázdné uvozovky k obrázkům, u kterých vy sami neuvedete alternativní text. 
 +</WRAP>
  
 ===== Obrázky na pozadí ===== ===== Obrázky na pozadí =====