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í revize Předchozí verze
Následující verze
Předchozí verze
pristupnost:redakcni_system_obrazky [2020/05/14 18:23]
eva
pristupnost:redakcni_system_obrazky [2020/09/24 20:04]
eva odstraněno
Řádek 1: Řádek 1:
-df====== Obrázky ======+====== Obrázky ======
 Obrázky mohou webové stránky příjemně oživit, mohou pomoci lepšímu vnímání nebo porozumění informacím. Špatně použití obrázků (ať už jejich výběr nebo nesprávný způsob použití a zveřejnění) se však může naopak pro některé návštěvníky webu stát bariérou. Obrázky mohou webové stránky příjemně oživit, mohou pomoci lepšímu vnímání nebo porozumění informacím. Špatně použití obrázků (ať už jejich výběr nebo nesprávný způsob použití a zveřejnění) se však může naopak pro některé návštěvníky webu stát bariérou.
  
 ===== 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 21: Řádek 21:
 ===== Textová alternativa obrázků (alternativní popis) ===== ===== Textová alternativa obrázků (alternativní popis) =====
  
-Někteří návštěvníci webových stránek nemohou vnímat obrázky Informace ve formě obrázků a grafiky (ať už jde o fotogalerie, infografiku, obrázkové mapy, Tlačítka nebo menu ve formě obrázků aj.) tito ivatelé nevidí. K tomu, aby je vidět mohli, slouží tzv. alternativní popisky obrázků. +Někteří návštěvníci webových stránek nemohou vnímat obrázkyInformace ve formě obrázků a grafiky tito ivatelé nevidí, bez ohledu na to, zde jde o fotogalerie, infografiku, obrázkové mapy, tlačítkamenu ve formě obrázků aj. Pro tyto ivatele jsou dostupné pouze informace v textové podobě. K tomu, aby tito uživatelé měli k obrázkovým informacím přístup, slouží tzv. alternativní popisky obrázků. 
  
 <WRAP center round info> <WRAP center round info>
 ==== Pro koho jsou důležité alternativní popisky ==== ==== Pro koho jsou důležité alternativní popisky ====
  
-Alternativní popis obrázků je důležitý zejména pro  uživatele, kteří mohou pracovat jen s informacemi dostupnými v podobě textu. 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í =====