Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- pristupnost:redakcni_system_obrazky [2020/09/17 20:53] – linda
+++ pristupnost:redakcni_system_obrazky [2020/09/24 20:04] (aktuální) – odstraněno eva
@@ Řádek 1: / Řádek 1: @@
-====== 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.
-===== 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.
-  - 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ř. 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. 2: Uká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>
-==== 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ř.:
-  * lidé s mentálním postižením;
-  * 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šin nebo neslyšící, pro které je mateřským jazykem český znakový jazyk).
-</WRAP>
-===== 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 tito uživatelé nevidí, bez ohledu na to, zde jde o fotogalerie, infografiku, obrázkové mapy, tlačítka, menu ve formě obrázků aj. Pro tyto už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>
-==== Pro koho jsou důležité alternativní popisky ====
-Jsou to zejména:
-  * nevidomí uživatelé webu, kteří pro "zobrazení" stránky používají odečítač obrazovky nebo jiné alternativní výstupní zařízení (např. tzv.braillský řádek).
-  * stroje, především webové vyhledávače, případně i některé programy či aplikace.
-</WRAP>
-==== Používání alternativního popisu obrázků ====
-V případě, že nevidomý uživatel webu používá odečítač obrazovky, odečítač obrázek rozpozná a sdělí uživateli, že jde o grafiku a poté přečte alternativní text obrázku. Není-li alternativní text k dispozici, odečítač přečte název obrázku.
-//Jako příklad si ukažme obrázek vykřičníku, sloužícímu  k označení důležitých informací, kterým má uživatel stránky věnovat pozornost. Obrázek má název "vykr2.png"// \\ \\  {{:pristupnost:vykr_2.png?100 |Obrázek č. 3 - vykřičník}} Pokud u obrázku není uveden alternativní text, odečítač obrazovky tento obrázek přečte jako **"Grafika v123.jpg"**.
-Pokud je u obrázku uveden alternativní text "Pozor, důležitá informace", odečítač obrazovky  přečte obrázek jako **"Grafika, Pozor důležitá informace"**.
-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 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á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 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 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 %%""%%.
-<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ázkům na pozadí je vhodné se zcela vyhnout, protože zhoršují čitelnost a porozumění textu. To může působit problémy lidem s různými zrakovými poruchami (včetně seniorů), lidem s mentálním postižením nebo lidem s poruchami učení, cizincům apod. Obrázky na pozadí však také mohou zhoršovat čitelnost na mobilních zařízeních (např. čtení při intenzivním slunečním světle).

Přístupné webové stránky

Uživatelské nástroje

Nástroje pro tento web

Rozdíly

Nástroje pro stránku