Přístupné webové stránky

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== -#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 velmi rů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 už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ě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 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šit, nebo 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.


===== Nevidomí uživatelé =====
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.
Oproti vidícímu uživateli, který se při zobrazení stránky zrakem rychle zorientuje a může 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ách, které 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 popisující obrázek.
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 >
Přehled základních problémů a opatření pro nevidomé uživatele najdete také v [[pristupnost:prehled_opatreni#nevidomi_uzivatele|souhrnné tabulce]].
</WRAP>


===== Slabozrací uživatelé =====

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>
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]].

Můžete si také stáhnout 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]].))
</WRAP>

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í);
  * 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.


==== Vizuální orientace na stránce ====
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 ====

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í tzv. pixelizovaný, tedy rozostřený (viz obr. 2).

{{:pristupnost:text-text.jpg|Obr. 1: Zvětšený text na webové stránce}} \\ 
//Obr. 1: Zvětšený text na webové stránce (zdroj: archiv autorky)//

{{::pristupnost:text-obrazek.jpg|Obr. 2: Zvětšený text 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ý 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í ====
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 u ř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í]].
Dostatečný kontrast ocení i uživatelé mobilních zařízení.

<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]].

Pokud chcete jednoduše simulovat zrakové vady, které vyžadují dostatečný kontrast, a zkontrolovat, zda tento kontrast mají prvky na vašem webu, můžete nastavit nízký jas a kontrast monitoru (displeje) nebo zkusit přečíst text přes papírový kapesníček přiložený na monitor.

</WRAP>
<WRAP center info >
Přehled základních problémů a opatření pro slabozraké uživatele najdete také v [[pristupnost:prehled_opatreni#slabozraci_uzivatele|souhrnné tabulce]].
</WRAP>

===== Uživatelé s poruchami barvocitu =====
Poruch barvocitu existuje celá řada. 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.

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 a 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.

{{: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 (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}} \\ 
//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>
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č 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 center info >
Přehled základních problémů a opatření pro uživatele s poruchami barvocitu najdete také v [[pristupnost:prehled_opatreni#uzivatele_s_poruchami_barvocitu|souhrnné tabulce]].
</WRAP>

<-uzivatele_a_pristupnost|2. Uživatelé a přístupnost^obsah|Obsah^sluchove_postizeni|4. Sluchové postižení->
Přístupné webové stránky

Uživatelské nástroje

Nástroje pro tento web

Nástroje pro stránku
