Rozdíly

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

--- pristupnost:obrazky [2020/09/15 14:53] – linda
+++ pristupnost:obrazky [2020/09/24 13:10] (aktuální) – epub
@@ Řádek 1: / Řádek 1: @@
 ====== - #20 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 a přispět k lepšímu 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.
 ===== Volba velikosti a umístění obrázků =====
-Při uvažování o obrázcích přemýšlejte nejen o estetické stránce věci, ale také o tom, jaký bude mít obrázek vliv na použitelnost stránky při využívání na různých typech zařízení (počítač, tablet, mobilní telefon...).
+Při uvažování o obrázcích přemýšlejte nejen o estetické stránce věci, ale také o tom, jaký bude mít obrázek vliv na použitelnost stránky na různých typech zařízení (počítač, tablet, mobilní telefon apod.).
 ==== Informace zakryté obrázky ====
-Nevhodná velikost, umístění, či nastavení pozice obrázků může v některých případech přístup k informacím na webu komplikovat, místo aby jej usnadnil.
+Nevhodná velikost, umístění či nastavení pozice obrázků může v některých případech přístup k informacím na webu komplikovat.
-Příkladem je situace, kdy při určitém zvětšení nebo orientaci stránky obrázek překryje část textu nebo stránky. Uživatel se tak nedostane k požadovaným informacím, případně nemá přístup k některým akcím, ovládacím prvkům apod. Protože webové stránky se dnes čtou nejen na obrazovce počítače, ale také na mobilních zařízeních, která mají nejrůznější rozlišení či orientaci, je při kontrole webu nebo stránky nutné věnovat pozornost tomu, zda jsou obrázky správně vloženy a nastaveny, a **nezakrývají text nebo jeho části**, zejména s důrazem na navigaci nebo ovládací prvky webu, formuláře apod.
+Příkladem je situace, kdy při určitém zvětšení nebo orientaci stránky obrázek překryje část textu nebo stránky. Uživatel se tak nedostane k požadovaným informacím, případně nemá přístup k některým akcím či ovládacím prvkům. Protože webové stránky se dnes čtou nejen na obrazovce počítače, ale také na mobilních zařízeních, která mají nejrůznější rozlišení či orientaci, je při kontrole webu nebo stránky nutné věnovat pozornost tomu, zda jsou obrázky správně vloženy a nastaveny a zda **nezakrývají text nebo jeho části**, zejména navigaci nebo ovládací prvky webu či formuláře.
 ==== Nevhodná velikost nebo nevhodné umístění obrázku ====
-Pokud jsou obrázky příliš velké a zakrývají celou viditelnou část stránky (nebo její podstatnou část) a zároveň informace jsou umístěny až pod obrázkem, může to pro uživatele být matoucí nebo obtěžující:
+Pokud jsou obrázky příliš velké a zakrývají celou viditelnou část stránky (nebo její podstatnou část) a informace jsou zároveň umístěny až pod obrázkem, může to pro uživatele být matoucí nebo obtěžující:
   * Uživatel po načtení stránky většinou očekává alespoň nějaké textové informace. Nemusí ho napadnout rolovat směrem dolů, protože **obrázek může považovat např. za okno s reklamou**, případně se může domnívat, že došlo k nějaké chybě a načetla se mu jen část požadované stránky.
   * Pokud uživatel potřebuje procházet více stránek na webu, kde je na každé stránce obrázek a teprve rolováním dolů se dostane k potřebné informaci, může toto **rolování vnímat jako obtěžující** a nepříjemné.
@@ Řádek 20: / Řádek 20: @@
 ===== Text ve formě obrázku =====
-Jedna překážek přístupnosti je prezentace textových informací formou obrázku. Pokud je to možné, **"obrázkovému textu" se raději vyhněte**, protože pro návštěvníky webu, kteří používají čtečku, jsou obrázky jako takové neviditelné.
+Jednou z překážek přístupnosti je prezentace textových informací formou obrázku. Pokud je to možné, **"obrázkovému textu" se raději vyhněte**, protože pro návštěvníky webu, kteří používají odečítač obrazovky, jsou obrázky jako takové neviditelné.
-Také pro ty, kdo si webovou stránku z různých důvodů potřebují zvětšit, mohou být tyto obrázkové texty velkou komplikací (viz též [[pristupnost:zrakove_postizeni#moznost_zvetseni_obsahu_stranky|Možnost zvětšení obrazu stránky]]). Na rozdíl od běžného textu, je totiž text ve formě obrázku při určitém stupni zvětšení rozostřený a „pixelizovaný".
+Také pro ty, kdo si webovou stránku z různých důvodů potřebují zvětšit, mohou být tyto obrázkové texty velkou komplikací (viz též [[pristupnost:zrakove_postizeni#moznost_zvetseni_obsahu_stranky|Možnost zvětšení obsahu stránky]]). Na rozdíl od běžného textu je totiž text ve formě obrázku při určitém stupni zvětšení rozostřený (tzv. pixelizovaný).
 Na obr. 1 vidíte ukázku rozostření obrázkového textu, ke kterému dojde při zvětšení obrázku/stránky. \\ {{:pristupnost:text-obrazek.jpg|Obr. 1: Rozostření textu ve formě obrázku při zvětšení stránky}} \\
@@ Řádek 30: / Řádek 30: @@
 ===== 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 **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. \\ \\
-  - Je vhodné používat **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í, viz obr. 2). \\ {{:pristupnost:ikony-kombinace.png|Obr. 2: Ukázka nevhodné kombinace dvou nesourodých ikon}} //Obr. 2: Ukázka nevhodné kombinace dvou nesourodých ikon (zdroj: archiv autorky)//
+  - Je vhodné používat **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 barevná fotografie pro jinou), uživateli to nejen nepomáhá v rychlejší orientaci v informacích, ale může to naopak být rušivé a zavádějící (viz obr. 2). \\ {{:pristupnost:ikony-kombinace.png|Obr. 2: Nevhodná kombinace dvou nesourodých ikon}}\\  //Obr. 2: Nevhodná kombinace dvou nesourodých ikon (zdroj: [[https://www.iconfinder.com/|Iconfinder]] a 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. 3: Ukázka vhodně a nevhodně vybraného ilustračního obrázku }} //Obr. 3: Ukázka vhodně a nevhodně vybraného ilustračního obrázku (zdroj: [[https://pixabay.com/|Pixabay]], získáno 2020-05-14)//
+  - 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. 3 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 jsou kolem ní další objekty. Uživatel se na obrázku musí nejdříve zorientovat a na první pohled mu nemusí být jasné, o co na něm vlastně jde. \\  {{:pristupnost:vyber_vhodne_ilustrace.png|Obr. 3: Vhodně a nevhodně vybraný ilustrační obrázek }} \\ //Obr. 3: Vhodně a nevhodně vybraný ilustrační obrázek (zdroj: [[https://pixabay.com/|Pixabay]], získáno 2020-05-14)//
 <WRAP center  info>
@@ Řádek 41: / Řádek 41: @@
   * 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, neslyšící, pro které je mateřským jazykem český znakový jazyk aj.)
+  * lidé, pro které čeština není mateřským jazykem (např. cizinci, příslušníci národnostních menšin nebo neslyšící, pro něž je mateřským jazykem český znakový jazyk).
 </WRAP>
@@ Řádek 48: / Řádek 48: @@
 ===== Alternativní popis obrázků a vložených videí =====
-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 měli k obrázkovým informacím přístup, slouží tzv. alternativní popisky obrázků.
+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í, a to bez ohledu na to, zda jde o fotogalerie, infografiku, obrázkové mapy, tlačítka nebo např. menu ve formě obrázků. Pro tyto uživatele jsou dostupné pouze informace v textové podobě. K tomu, aby měli k obrázkovým informacím přístup, slouží alternativní popisky obrázků.
 <WRAP center info>
@@ Řádek 54: / Řádek 54: @@
 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);
+  * nevidomí už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.
 </WRAP>
@@ Řádek 62: / Řádek 62: @@
-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.
+V případě, že nevidomý uživatel webu používá odečítač obrazovky, odečítač mu sdělí, že jde o grafiku, a poté mu přečte alternativní text obrázku. Není-li alternativní text k dispozici, odečítače obvykle přečtou název obrázku.
 <WRAP center box 80% >
-//Jako příklad si ukažme obrázek vykřičníku (viz obr. 4), 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. 4: Vykřičník}} \\
+Jako příklad si ukažme obrázek vykřičníku (viz obr. 4), sloužící k označení důležitých informací. Obrázek má název "vykr2.png". \\ \\  {{:pristupnost:vykr_2.png?100|Obr. 4: Vykřičník}} \\
 //Obr. 4: Vykřičník (zdroj: archiv autorky)// \\ \\
 Pokud u obrázku není uveden alternativní text, odečítač obrazovky tento obrázek přečte jako **"Grafika vykr2png"**.
-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"**.
+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"**.
 </WRAP>
 Proto při práci s obrázky nezapomínejte na tato doporučení:
-  - Pokud obrázek obsahuje nějakou informaci (např. jedná se tlačítko, logo, emotikon, piktogram apod.) a není jen doplňkovou ilustrací, je třeba **přidat také alternativní text vysvětlující funkci obrázku**. Alternativní text (ve zdrojovém kódu označovaný jako „alt“) je obvykle jedním z polí formuláře pro vložení a úprav vlastností obrázku. \\ \\ Na obr. 5 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. 5: Vkládání popisku obrázku v dialogovém okně pro úpravu obrázků}} //Obr. 5: Vkládání popisku obrázku v dialogovém okně pro úpravu obrázků (zdroj: [[https://knihovna.jabok.cz/cs|Knihovna Jabok]], získáno 2020-05-14)// \\ \\
+  - Pokud obrázek obsahuje nějakou informaci (např. jedná se tlačítko, logo, emotikon, piktogram apod.) a není jen doplňkovou ilustrací, je třeba **přidat také alternativní text vysvětlující funkci obrázku**. Alternativní text (ve zdrojovém kódu označovaný jako alt) je obvykle jedním z polí formuláře pro vložení a úpravu vlastností obrázku. \\ \\ Na obr. 5 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. 5: Vkládání popisku obrázku v dialogovém okně pro úpravu obrázků}} \\ //Obr. 5: Vkládání popisku obrázku v dialogovém okně pro úpravu obrázků (zdroj: [[https://knihovna.jabok.cz/cs|Knihovna Jabok]], získáno 2020-05-14)// \\ \\
-  - 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, zda knihovny věnují pozornost přístupnosti webových stránek (viz obr. 6).((Jde jednu z otázek v rámci průzkumu bezbariérovosti služeb knihoven z roku 2014.)) \\ {{:pristupnost:graf-pristupnost_webu.png|Obr. 6: Graf, který vyžaduje popis}}. \\ //Obr. 6: Graf, který vyžaduje popis (zdroj: archiv autorky)//  \\ \\ 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 % respondentů 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 např.: "Graf – výsledky dotazu na přístupnost webů knihoven"). \\ \\
+  - Pokud jsou obrázky důležitou součástí obsahu sdělované informace (např. grafy, schémata nebo jakékoliv obrázky vysvětlují část informace, která není obsažena v textu), **připojte slovní popis obrázku, případně i odkaz na zdrojová data** (např. na tabulku, z níž byl graf vygenerován). \\ \\ Jako příklad uvádíme graf znázorňující výsledky dotazu, zda knihovny věnují pozornost přístupnosti webových stránek (viz obr. 6).((Jde o jednu z otázek v rámci průzkumu bezbariérovosti služeb knihoven z roku 2014.)) \\ {{:pristupnost:graf-pristupnost_webu.png|Obr. 6: Graf, který vyžaduje popis}}. \\ //Obr. 6: Graf, který vyžaduje popis (zdroj: archiv autorky)//  \\ \\ 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 % respondentů 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 např.: "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 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.
+**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 nebo upozornit, že alternativní text chybí.
 </WRAP>
 ==== Alternativní popisky vložených videí ====
-Stejně jako k obrázkům je nutné vkládat popisky také k videím vloženým do webové stránky
+Popisky je nutné vkládat i k videím vloženým do webové stránky.
-Videa jsou do webových stránek vkládána jako vložené rámy s náhledem videa (ve formě tzv. iframe). Pomocí těchto náhledů může uživatel webu video ovládat nebo přejít na zdrojový server (např. YouTube) a tam video přehrát. Zdrojový kód vloženého rámu je většinou možné zkopírovat na zdrojovém serveru (např. na YouTube je tato volba nabídnuta odkazem sdílet pod ikonou označenou znaky **%%</>%%**).
+Videa jsou do webových stránek vkládána jako vložené rámy s náhledem videa (ve formě tzv. iframe). Pomocí těchto náhledů může uživatel webu video ovládat nebo přejít na zdrojový server (např. YouTube). Zdrojový kód vloženého rámu je většinou možné zkopírovat na zdrojovém serveru (např. na YouTube je tato volba nabídnuta odkazem sdílet pod ikonou označenou znaky **%%</>%%**).
-Pokud vložené video nemá popisek, **uživatel s odečítačem obrazovky nemá možnost poznat, o jaké video jde, aniž by spustil přehrávání**. To je pro něj velmi nepříjemné, obzvláště pokud se na stránce nachází více videí. Popis nebo nadpis umístěný v textu nestačí, protože uživatel s odečítačem obrazovky se k videu může dostat např. pomocí přesunu na další odkaz (náhled videa totiž obsahuje odkaz/tlačítko, které spouští/zastavuje video, navíc je obvykle také odkazem na zdrojový server).
+**Pokud vložené video nemá popisek, uživatel s odečítačem obrazovky nemá možnost poznat, o jaké video jde, aniž by spustil přehrávání**. To je pro něj velmi nepříjemné, obzvláště pokud se na stránce nachází více videí. Popis nebo nadpis umístěný v textu nestačí, protože uživatel s odečítačem obrazovky se k videu může dostat např. pomocí přesunu na další odkaz (náhled videa totiž obsahuje odkaz/tlačítko, které spouští/zastavuje video; navíc je, jak již bylo zmíněno, obvykle rovněž odkazem na zdrojový server).
-Zdrojový kód rámů videa (tzv. iframe) proto doporučujeme opatřit titulem (prvek „title“), který obsahuje název videa. To umožní uživatelům, kteří používají odečítač obrazovky, zjistit, o jaké video jde, aniž by jej museli nejdříve spustit. V ukázce zdrojového kódu pro vložení náhledu videa níže, je na předposledním řádku vložen prvek "title", obsahující název videa (Jak si objednat doručení knih poštou – video). Tento text uživatelé uslyší z odečítače obrazovky, dozvědí se tak, o jaké video jde, aniž by jej museli spustit.
+Zdrojový kód rámů videa (tzv. iframe) proto doporučujeme opatřit názvem (prvek title). To umožní uživatelům, kteří používají odečítač obrazovky, zjistit, o jaké video jde, aniž by jej museli nejdříve spustit.
+V následující ukázce zdrojového kódu pro vložení náhledu videa je na předposledním řádku vložen prvek title obsahující název videa (Jak si objednat doručení knih poštou – video). Právě tento text uživatelé uslyší z odečítače obrazovky a díky tomu se dozvědí, o jaké video jde, aniž by jej museli spustit.
 <code>
@@ Řádek 101: / Řádek 103: @@
 </iframe>
 </code>
+<WRAP clear />
+<WRAP center info>
+==== Doporučené zdroje ====
+  * [[https://www.zdrojak.cz/clanky/pristupnost-html5-textove-alternativy-obrazku-1-2-teorie/| Přístupnost HTML5: textové alternativy obrázků (1/2) – teorie]] – především část Kdy a jaký alt obrázku přiřadit
+  * [[https://www.zdrojak.cz/clanky/pristupnost-html5-textove-alternativy-obrazku-2-2-praxe/|Přístupnost HTML5: Textové alternativy obrázků (2/2) – praxe]]
+</WRAP>
+<-pismo_a_formatovani_textu|19. Písmo a formátování textu^obsah|Obsah^formulare|21. Formuláře->

Přístupné webové stránky

Uživatelské nástroje

Nástroje pro tento web

Rozdíly

Nástroje pro stránku