Uživatelské nástroje

Nástroje pro tento web


pristupnost:zrakove_postizeni

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
pristupnost:zrakove_postizeni [2020/09/13 11:10] lindapristupnost:zrakove_postizeni [2020/09/24 11:03] (aktuální) epub
Řádek 1: Řádek 1:
-====== -#3 Uživatelé webu se zrakovým postižením ====== +====== -#3 Zrakové postižení ====== 
-K uživatelům webu se zrakovým postižením patří lidé nevidomí, slabozrací nebo lidé se sníženým barvocitem. Poruch zraku je velké množství a jsou velice zné. Společné mají to, že se uživatelé nemohou spoléhat na vizuální formu vnímání informací nebo mají vizuální vnímání informací značně omezené. Na rozdíl od vidícího ivatelekterý po otevření stránky rychle celou stránku "přehlédne" a pomocí jejího rozložení, grafických prvků, barevného rozlišení jednotlivých prvků apod. se rychle zorientuje v informacích, které stránka obsahuje, uživatelé se zrakovým postižením používají stránku zcela jinak.+K uživatelům webu se zrakovým postižením patří lidé nevidomí, slabozrací nebo lidé se sníženým barvocitem. Poruch zraku je velké množství a jsou velmi znorodé. Společné mají to, že se uživatelé nemohou spoléhat na vizuální formu vnímání informací nebo mají vizuální vnímání informací značně omezené. Na rozdíl od vidících ivatelůkteří celou stránku po otevření rychle "přehlédnou" a pomocí jejího rozložení, grafických prvků, barevného rozlišení jednotlivých prvků apod. se v informacích rychle zorientují, uživatelé se zrakovým postižením používají stránku zcela jinak.
  
-**Nevidomí uživatelé** obvykle používají místo obrazovky nějako jinou formu výstupu (např. odečítač obrazovky nebo tzv. [[https://cs.wikipedia.org/wiki/Braillsk%C3%BD_%C5%99%C3%A1dek|braillský řádek]]), takže s grafikou nemohou pracovat vůbec.+**Nevidomí uživatelé** obvykle používají místo obrazovky nějakou jinou formu výstupu (např. odečítač obrazovky nebo [[https://cs.wikipedia.org/wiki/Braillsk%C3%BD_%C5%99%C3%A1dek|braillský řádek]]), takže s grafikou nemohou pracovat vůbec.
  
-Lidé **s dalšími zrakovými vadami** mají při práci s webem trochu jiné potřeby a problémy. Pro tyto uživatele bývá obtížnější zorientovat se na stránce nebo i ve struktuře webu. Může jim působit problémy malé písmo, které nelze zvětšit nebo nevhodné, nedostatečně kontrastní pozadí stránky vůči textu.+**Lidé jinými zrakovými vadami** mají při práci s webem trochu odlišné potřeby a problémy. Pro tyto uživatele bývá obtížnější zorientovat se na stránce nebo i ve struktuře webu. Může jim působit problémy malé písmo, které nelze zvětšitnebo nevhodné, nedostatečně kontrastní pozadí stránky vůči textu.
  
 Pro úplnost dodejme, že některé z těchto problémů mohou mít nejen lidé se zrakovým postižením, ale také senioři, lidé s poruchami čtení apod. Nedostatečný kontrast však může být překážkou např. i pro zcela zdravého mladého člověka, který pro zobrazení webu právě používá displej mobilního zařízení při silném slunečním světle. Pro úplnost dodejme, že některé z těchto problémů mohou mít nejen lidé se zrakovým postižením, ale také senioři, lidé s poruchami čtení apod. Nedostatečný kontrast však může být překážkou např. i pro zcela zdravého mladého člověka, který pro zobrazení webu právě používá displej mobilního zařízení při silném slunečním světle.
Řádek 10: Řádek 10:
  
 ===== Nevidomí uživatelé ===== ===== Nevidomí uživatelé =====
-Nevidomí uživatelé webu jsou obvykle odkázání na odečítače obrazovky ((Pro odečítač obrazovky se někdy také používá anglický termín //screenreader//)) nebo braillský řádek či na další asistivní technologie, nemohou proto vnímat vizuální stránku informací na webových stránkách, tj. grafiku, rozložení stránky a jejích prvků, barevné odlišení prvků na stránce aj. +Nevidomí uživatelé webu jsou obvykle odkázáni na odečítače obrazovky((Pro odečítač obrazovky se i v českém prostředí někdy používá anglický termín //screen reader//.)) nebo braillský řádek či na další asistivní technologie. Nemohou proto vnímat vizuální stránku informací na webových stránkách, tj. grafiku, rozložení stránky a jejích prvků, barevné odlišení prvků na stránce aj. 
-Na rozdíl od vidícího ivatele, který se při zobrazení stránky zrakem rychle zorientuje ve struktuřinformací, které stránka obsahuje, odečítač obrazovky čte stránku lineárně od začátku do konce, slovo od slova. Pokud jsou na webové stránce informace v textu uspořádané v nelogickém pořadí (např. v tabulkách které nedávají smysl při čtení po řádcích), je orientace obtížná a někdy i nemožná. +Oproti vidícímu ivateli, který se při zobrazení stránky zrakem rychle zorientuje a můžinformace podle potřeby přeskakovat, odečítač obrazovky čte stránku lineárně od začátku do konce, slovo od slova. Pokud jsou na webové stránce informace v textu uspořádány v nelogickém pořadí (např. v tabulkáchkteré nedávají smysl při čtení po řádcích), je orientace obtížná a někdy i nemožná. 
-Odečítače obrazovky také nemohou číst [[pristupnost:obrazky|obrázky]]. Proto je důležité, aby zejména obrázky, které nesou nějaký význam, obsahovaly zástupný text, který obrázek popíše+Odečítače obrazovky také nemohou číst [[pristupnost:obrazky|obrázky]]. Proto je důležité, aby zejména obrázky, které nesou nějaký význam, obsahovaly zástupný text popisující obrázek. 
-Protože nevidomí uživatelé nemohou využívat myš, aby "kliklina konkrétní místo nebo prvek na stránce, jsou obvykle odkázání na funkce klávesnice. Proto je důležité, aby webové stránky a všechny jejich funkce byly [[pristupnost:ovladani_webu|dostupné prostřednictvím klávesnice]], (a nevyžadovaly použití myši).+Protože nevidomí uživatelé nemohou využívat myš, aby klikli na konkrétní místo nebo prvek na stránce, jsou obvykle odkázáni na klávesnici. Proto je důležité, aby webové stránky a všechny jejich funkce byly [[pristupnost:ovladani_webu|dostupné prostřednictvím klávesnice]] a nevyžadovaly použití myši.
  
 <WRAP center info > <WRAP center info >
-Přehled základních problémů a potřebných opatření pro slabozraké uživatele najdete také [[pristupnost:specificke_potreby_prehled#nevidomi_uzivatele|souhrnné tabulce]]+Přehled základních problémů a opatření pro nevidomé uživatele najdete také [[pristupnost:prehled_opatreni#nevidomi_uzivatele|souhrnné tabulce]].
 </WRAP> </WRAP>
  
Řádek 22: Řádek 22:
 ===== Slabozrací uživatelé ===== ===== Slabozrací uživatelé =====
  
-Mezi slabozraké uživatele webu řadíme osoby např. se silnou krátkozrakostí, šedým zákalem, zeleným zákalem, glaukomemretinopatií a jinými vadami. Jak je vidět, spektrum zrakových vad je velmi široké a liší se i problémy, které jednotlivé zrakové vady přinášejí. Některá zraková postižení způsobují neostré či zkreslené vidění, zakrývají část zorného pole, způsobují, že uživatel hůře rozlišuje některé barvy apod.+Mezi slabozraké uživatele webu řadíme osoby např. se silnou krátkozrakostí, šedým zákalem, zeleným zákalem, glaukomem nebo retinopatií. Jak je vidět, spektrum zrakových vad je velmi široké a liší se i problémy, které s sebou jednotlivé zrakové vady přinášejí. Některá zraková postižení způsobují neostré či zkreslené vidění, zakrývají část zorného pole, způsobují, že uživatel hůře rozlišuje některé barvy apod.
  
 <WRAP center tip> <WRAP center tip>
-Přestavit si, jak lidé s nejrůznějšími poruchami zraku vidí svět kolem sebe vám pomohou obrázky se [[https://www.idnes.cz/onadnes/zdravi/obrazem-jak-vidi-svet-lide-s-ocnimi-vadami.A111207_101821_zdravi_pet/foto/PET3faa2c_ocisedy.jpg|simulací některých zrakových vad]].+Přestavit si, jak lidé s nejrůznějšími poruchami zraku vidí svět kolem sebevám pomohou obrázky se [[https://www.idnes.cz/onadnes/zdravi/obrazem-jak-vidi-svet-lide-s-ocnimi-vadami.A111207_101821_zdravi_pet/foto/PET3faa2c_ocisedy.jpg|simulací některých zrakových vad]].
  
-Můžete si také stáhnou některou z aplikací pro mobilní zařízení, které simulují zrakové vady a pomocí kamery svého mobilu nebo tabletu se podívat, jak byste s některou ze zrakových vad viděli své okolí, text knihy nebo obrazovku počítače.((Takovou aplikací je např. ViaOpta Simulator, která je dostupná jak [[https://play.google.com/store/apps/details?id=com.novartis.visionsimulator|pro Android]], tak [[https://apps.apple.com/us/app/viaopta-simulator/id778653985|pro IOS]]))+Můžete si také stáhnout některou z aplikací pro mobilní zařízení, které simulují zrakové vadya pomocí kamery svého mobilu nebo tabletu se podívat, jak byste s některou ze zrakových vad viděli své okolí, text knihy nebo obrazovku počítače.((Takovou aplikací je např. ViaOpta Simulator, který je dostupný jak [[https://play.google.com/store/apps/details?id=com.novartis.visionsimulator|pro Android]], tak [[https://apps.apple.com/us/app/viaopta-simulator/id778653985|pro iOS]].))
 </WRAP> </WRAP>
  
-Ačkoli paleta zrakových vad je poměrně pestrá, z hlediska přístupnosti webu mají všichni uživatelé se zrakovými vadami společné tyto problémy: +Ačkoli je paleta zrakových vad poměrně pestrá, z hlediska přístupnosti webu mají všichni uživatelé se zrakovými vadami společné tyto problémy: 
-  * Sníženou schopnost vizuální orientace na stránce (intenzita tohoto problému závisí na typu a stupni postižení), +  * sníženou schopnost vizuální orientace na stránce (intenzita tohoto problému závisí na typu a stupni postižení); 
-  * překážky při zrakovém vnímání obsahu na webové stránce, který nejde zvětšit,+  * překážky při zrakovém vnímání obsahu na webové stránce, který nejde zvětšit;
   * problémy s vnímáním textu (nebo jiných prvků), které nemají dostatečný kontrast vůči pozadí stránky.   * problémy s vnímáním textu (nebo jiných prvků), které nemají dostatečný kontrast vůči pozadí stránky.
  
  
 ==== Vizuální orientace na stránce ==== ==== Vizuální orientace na stránce ====
-Pokud uživatel webu hůře vidí, vidí jen část obrazovkynebo ji vidí deformovaně. Při orientaci na stránce je pro něj důležité, aby jednotlivé prvky byly tam, kde bývají obvykle umístěny a fungovaly očekávaným způsobem (např. logo bývá umístěno v levém horním rohu a obvykle je zároveň odkazem na domovskou stránku, nákupní košík bývá umístěn v pravém horním rohu stránky, pole pro vyhledávání na webu v horní části stránky apod.). Důležité je také, aby navigační (případně i jiné) prvky webu byly konzistentní celém webu, tj. aby měly stejnou strukturu a aby při použití stejného zařízení byly umístěny vždy na stejném místě stránky (týká se to např. hlavního menu, menu druhé úrovně apod.).+Pokud uživatel webu hůře vidí, vidí jen část obrazovky nebo ji vidí deformovaně. Při orientaci na stránce je pro něj důležité, aby jednotlivé prvky byly na obvyklém místě a fungovaly očekávaným způsobem (např. logo bývá umístěno v levém horním rohu a bývá zároveň odkazem na domovskou stránku, nákupní košík bývá umístěn v pravém horním rohu stránky, pole pro vyhledávání na webu v horní části stránky apod.). Důležité je také, aby navigační (případně i jiné) prvky webu byly konzistentní na celém webu, tj. aby měly stejnou strukturu a aby při použití stejného zařízení byly umístěny vždy na stejném místě stránky (týká se to např. hlavního menu, menu druhé úrovně apod.).
  
 ==== Možnost zvětšení obsahu stránky ==== ==== Možnost zvětšení obsahu stránky ====
  
-Slabozrací uživatelé webu obvykle používají zvětšovací programy, tzv. softwarové lupy. Jak už jejich označení napovídá, tyto programy zvětší část obrazovky podobně jako lupa. Někteří slabozrací lidé si přizpůsobují barvu textu nebo pozadínebo si mění fonttak, aby pro ně text byl dostatečně kontrastní a lépe se jim s ním pracovalo. +Slabozrací uživatelé webu obvykle používají softwarové lupy. Jak už jejich označení napovídá, tyto programy zvětší část obrazovky podobně jako lupa. Někteří slabozrací lidé si přizpůsobují barvu textu nebo pozadí nebo si mění font tak, aby pro ně text byl dostatečně kontrastní a lépe se jim s ním pracovalo. 
-Problémem proto pro ně může být text, který nejde zvětšit, nebo textové informace prezentované ve formě obrázku. Na rozdíl od textu, který je při zvětšení bez problémů čitelný (viz obr. 1), text ve formě obrázku je při určitém stupni zvětšení rozostřený a "pixelizovaný" (viz obr. 2).+Problémem proto pro ně může být text, který nejde zvětšit, nebo textové informace prezentované ve formě obrázku. Na rozdíl od textu, který je při zvětšení bez problémů čitelný (viz obr. 1), text ve formě obrázku je při určitém stupni zvětšení tzv. pixelizovaný, tedy rozostřený (viz obr. 2).
  
-{{:pristupnost:text-text.jpg| zvětšený text na stránce}} \\  +{{:pristupnost:text-text.jpg|Obr. 1: Zvětšený text na webové stránce}} \\  
-//Obr. 1: Ukázka zvětšeného textu na webové stránce//+//Obr. 1: Zvětšený text na webové stránce (zdroj: archiv autorky)//
  
-{{::pristupnost:text-obrazek.jpg| zvětšený obrázek obsahující textovou informaci}} \\  +{{::pristupnost:text-obrazek.jpg|Obr. 2: Zvětšený text ve formě obrázku}} \\  
-//Obr. 2: Ukázka zvětšeného textu ve formě obrázku//+//Obr. 2: Zvětšený text ve formě obrázku (zdroj: archiv autorky)//
  
  
-Text ve formě obrázku není příliš uživatelsky přívětivý také pro nevidomé uživatele, kteří používají odečítač obrazovky nebo braillský řádek, zejménapokud je použit jako odkaz. Pokud text ve formě obrázku slouží jako odkaz, je problémem také skutečnost, že se na něj hůře aplikuje zvýraznění aktuálního odkazu při pohybu na stránce pomocí klávesnice (tzv. prvek "focus").+Text ve formě obrázku není příliš uživatelsky přívětivý ani pro nevidomé uživatele, kteří používají odečítač obrazovky nebo braillský řádek, zejména pokud je použit jako odkaz. Pokud text ve formě obrázku slouží jako odkaz, je problémem také skutečnost, že se na něj hůře aplikuje zvýraznění aktuálního odkazu při pohybu na stránce pomocí klávesnice (tzv. focus).
 ==== Dostatečný kontrast textu a pozadí ==== ==== Dostatečný kontrast textu a pozadí ====
-Velkým problémem zejména u některých postiženíje "zamlžené nebo rozostřené vidění". Slabozrací lidé proto potřebují vhodný kontrast textu vůči pozadí. Bohužel, mnoha webových stránek je to problém. Některé barevné kombinace (např. bílý text na tmavě žlutém pozadíněkteré odstíny šedé na bílém pozadí aj.) sice vypadají hezky nebo zajímavě, ale zapomínají na to, že grafika (nejen) webových stránek má být především [[pristupnost:funkcni_grafika|funkční]]. +Velkým problémem (zejména u některých postiženíje zamlžené nebo rozostřené vidění. Slabozrací lidé proto potřebují vhodný kontrast textu vůči pozadí. To je řady webových stránek bohužel problematické. Některé barevné kombinace (např. bílý text na tmavě žlutém pozadí nebo některé odstíny šedé na bílém pozadí) sice vypadají hezky nebo zajímavě, ale zapomíná se na to, že grafika (nejen) webových stránek má být především [[pristupnost:funkcni_grafika_webu|funkční]]. 
-Vhodný kontrast ocení také uživatelé mobilních zařízení.+Dostatečný kontrast ocení uživatelé mobilních zařízení.
  
 <WRAP center tip> <WRAP center tip>
  
-Při samotné tvorbě webu vám ke zvolení dostatečného kontrastu pomohou nástroje pro kontrolu kontrastu, např. [[https://webaim.org/resources/contrastchecker/|WebAIM Contrast Checker]]+Při samotné tvorbě webu vám ke zvolení dostatečného kontrastu pomohou nástroje pro kontrolu kontrastu, např. [[https://webaim.org/resources/contrastchecker/|WebAIM Contrast Checker]].
  
-Pokud chcete "lidsky" simulovat zrakové vady, které vyžadují dostatečný kontrast a zkontrolovat, zda má nějaký prvek na vašem webu dostatečný kontrast, můžete nastavit nízký jas a kontrast monitoru nebo displejenebo zkusit přečíst text přes papírový kapesníček přiložený na monitor.+Pokud chcete jednoduše simulovat zrakové vady, které vyžadují dostatečný kontrasta zkontrolovat, zda tento kontrast mají prvky na vašem webu, můžete nastavit nízký jas a kontrast monitoru (displejenebo zkusit přečíst text přes papírový kapesníček přiložený na monitor.
  
 </WRAP> </WRAP>
 <WRAP center info > <WRAP center info >
-Přehled základních problémů a potřebných opatření pro slabozraké uživatele najdete také [[pristupnost:specificke_potreby_prehled#slabozraci_uzivatele|souhrnné tabulce]]+Přehled základních problémů a opatření pro slabozraké uživatele najdete také [[pristupnost:prehled_opatreni#slabozraci_uzivatele|souhrnné tabulce]].
 </WRAP> </WRAP>
  
 ===== Uživatelé s poruchami barvocitu ===== ===== Uživatelé s poruchami barvocitu =====
-Poruch barvocitu existuje velké množství. Poruchy barvocitu (někdy označované jako barvoslepost) způsobují, že člověk nevnímá některou barvu např. červenou, zelenou nebo modrou. Barvoslepost může být částečnánebo úplná. Při úplné barvosleposti člověk vnímá jen odstíny šedé barvy.+Poruch barvocitu existuje celá řada. Poruchy barvocitu (někdy označované jako barvoslepost) způsobují, že člověk nevnímá některou barvunapř. červenou, zelenou nebo modrou. Barvoslepost může být částečná nebo úplná. Při úplné barvosleposti člověk vnímá jen odstíny šedé barvy.
  
-Uživatelé s poruchami barvocitu **nemohou vnímat informace zprostředkované barvou**. Problémem by pro ně mohly být např. navigační prvky webu odlišené barvouobrázky, které pracují s barevnými schématy (např. plányschémata dopravy apod.). V podobných případech je důležité, aby barva nebyla jediným způsobem, který sděluje informaci, a aby se uživatel měl možnost dostat se k informaci také alternativním způsobem.+Uživatelé s poruchami barvocitu **nemohou vnímat informace zprostředkované barvou**. Problémem by pro ně mohly být např. navigační prvky webu odlišené barvou nebo obrázky, které pracují s barevnými schématy (např. plány schémata dopravy). V podobných případech je důležité, aby barva nebyla jediným způsobem, který sděluje informaci, a aby se uživatel měl možnost dostat se k informaci také jinak.
  
-//Obrázky níže ukazují rozdíl vnímání barev u mapy s vyznačenými parkovacími zónami. Na obr. 3 je mapa s vyznačenými zónami tak, jak ji vnímá běžný uživatel webu. Na obr. 4 vidíme, jak tutéž mapku vnímá uživatel, který má poruchu vnímání červené barvy. //+Obrázky níže ukazují rozdíl vnímání barev u mapy s vyznačenými parkovacími zónami. Na obr. 3 je mapa s vyznačenými zónami tak, jak ji vnímá běžný uživatel webu.
  
 {{:pristupnost:mapa-normalni.jpg?| Obr. 3: Mapa s parkovacími zónami, jak ji vidí běžný uživatel webu}} \\  {{:pristupnost:mapa-normalni.jpg?| Obr. 3: Mapa s parkovacími zónami, jak ji vidí běžný uživatel webu}} \\ 
-//Obr. 3: Mapa s parkovacími zónami, jak ji vidí běžný uživatel webu//+//Obr. 3: Mapa s parkovacími zónami, jak ji vidí běžný uživatel webu (zdroj: [[https://mapy.cz/|Mapy.cz]], získáno 2020-01-28)// 
 + 
 +Na obr. 4 vidíme, jak tutéž mapku vnímá uživatel, který má poruchu vnímání červené barvy.
  
 {{:pristupnost:mapa-porucha-cervena.jpg?| Obr. 4: Mapa s parkovacími zónami, jak ji vidí uživatel webu s poruchou vnímání červené barvy}} \\  {{:pristupnost:mapa-porucha-cervena.jpg?| Obr. 4: Mapa s parkovacími zónami, jak ji vidí uživatel webu s poruchou vnímání červené barvy}} \\ 
-//Obr. 4: Mapa s parkovacími zónami, jak ji vidí uživatel webu s poruchou vnímání červené barvy//+//Obr. 4: Mapa s parkovacími zónami, jak ji vidí uživatel webu s poruchou vnímání červené barvy (zdroj: [[https://mapy.cz/|Mapy.cz]], získáno 2020-01-28, upraveno autorkou pomocí rozšíření prohlížeče Chrome Let's get color blind)//
  
 <WRAP center tip> <WRAP center tip>
-Jak vnímají svět lidé s poruchami barvocitu, vám pomohou pochopit simulátory barvosleposti (např. [[https://www.color-blindness.com/coblis-color-blindness-simulator/|Coblis]])různá rozšíření pro prohlížeče (např. rozšíření pro prohlížeč Chrom [[https://chrome.google.com/webstore/detail/lets-get-color-blind/bkdgdianpkfahpkmphgehigalpighjck?hl=cs|Let's get color blind]]) nebo mobilní aplikace, které využívají kameru mobilního telefonu nebo tabletu (pro Android např. +Jak vnímají svět lidé s poruchami barvocitu, vám pomohou pochopit
-[[https://play.google.com/store/apps/details?id=fr.nghs.android.cbs&hl=cs|Daltonizer]], pro iOS např. [[https://apps.apple.com/cz/app/daltonize-me-camera/id936535542?l=cs|Daltonize Me Camera]]).+  * simulátory barvosleposti (např. [[https://www.color-blindness.com/coblis-color-blindness-simulator/|Coblis]])
 +  * různá rozšíření pro prohlížeče (např. rozšíření pro prohlížeč Chrome [[https://chrome.google.com/webstore/detail/lets-get-color-blind/bkdgdianpkfahpkmphgehigalpighjck?hl=cs|Let's get color blind]])
 +  * mobilní aplikace, které využívají kameru mobilního telefonu nebo tabletu (pro Android např. [[https://play.google.com/store/apps/details?id=fr.nghs.android.cbs|Daltonizer]], pro iOS např. [[https://apps.apple.com/cz/app/daltonize-me-camera/id936535542?l=cs|Daltonize Me Camera]]).
 </WRAP> </WRAP>
  
 <WRAP center info > <WRAP center info >
-Přehled základních problémů a potřebných opatření pro uživatele s poruchami barvocitu najdete také [[pristupnost:specificke_potreby_prehled#uzivatele_s_poruchami_barvocitu|souhrnné tabulce]]+Přehled základních problémů a opatření pro uživatele s poruchami barvocitu najdete také [[pristupnost:prehled_opatreni#uzivatele_s_poruchami_barvocitu|souhrnné tabulce]].
 </WRAP> </WRAP>
  
 +<-uzivatele_a_pristupnost|2. Uživatelé a přístupnost^obsah|Obsah^sluchove_postizeni|4. Sluchové postižení->
pristupnost/zrakove_postizeni.1599988228.txt.gz · Poslední úprava: 2020/09/13 11:10 autor: linda