Přejít k navigační liště

Zdroják » Webdesign » WCAG 2.0 – Vnímatelnost a rozlišitelnost

WCAG 2.0 – Vnímatelnost a rozlišitelnost

Články Webdesign

Dnes se podíváme na poslední pravidlo prvního principu metodiky WCAG 2.0. Pravidlo 1.4 se věnuje rozlišitelnosti a jeho smyslem je usnadnit uživatelům slyšet a a vidět obsah webové stránky a odlišit popředí od pozadí.

Uživatelé se zdravotním postižením mohou mít při práci s webovou stránkou problém s rozlišením informací. Zatímco některá pravidla metodiky WCAG 2.0 jsou zaměřena na tvorbu obsahu webu způsobem, který umožňuje jeho prezentování i alternativními způsoby, pravidlo 1.4 se soustředí na to, aby obsah primární verze webové stránky byl co nejsnáze rozlišitelný pro návštěvníky se zdravotním postižením. Stěžejním úkolem tohoto pravidla je tedy uživatelům umožnit odlišit informace na popředí od informací na pozadí. U vizuálních prezentací to znamená zajištění dostatečného kontrastu mezi popředím a pozadím, u prezentací ve formě audia pak zajištění toho, aby zvuk na popředí byl dostatečně hlasitý oproti zvukům v pozadí.

A právě těmto aspektům se věnuje čtvrté pravidlo metodiky WCAG 2.0.

Pravidlo 1.4

Rozlišitelné: Usnadněte uživatelům slyšet a vidět obsah a odlište popředí od pozadí.

Pravidlo obsahuje celkem devět kritérií úspěšnosti: 2 s nejvyšší prioritou, 3 se střední, a 4 s nejnižší. My se podíváme na kritéria s nejvyšší a střední prioritou, která nás z hlediska praktického přínosu zajímají nejvíc.

1.4.1 Používání barev (priorita A)

Barva není používána jako jediný vizuální prostředek sloužící k poskytnutí určité informace, k indikování určité akce, k vyjádření požadavku na odezvu či k odlišení určitého vizuálního prvku. 

Toto kritérium úspěšnosti se týká speciálně vnímání barev. Ostatními formami vnímání se zabývá Pravidlo 1.3, kterému jsme se věnovali v předchozím díle našeho seriálu Vnímatelnost a přizpůsobitelnost.

S používáním barev k odlišení informací se na webových stránkách i v běžném životě setkáváme velmi často. Už na základní škole nám paní učitelka opravovala chyby červenou barvou, abychom si jich hned všimli, každá barva na semaforu má svůj význam, atp. Ne každý však má to štěstí a může barvy vnímat tak, jak je tvůrce webových stránek definoval. Nevidomý uživatel je nemůže v důsledku svého zdravotního postižení vnímat vůbec, barvoslepý člověk od sebe nerozezná například červenou či zelenou barvu nebo i různé kombinace barev, uživatel v seniorském věku může mít problém s vnímáním barev jako takovým. Proto je třeba, aby barva nebyla používána jako jediný prostředek ke sdělení informace a informace byla sdělena i jiným způsobem. Pokud bychom si řešení ukázali na příkladu již zmiňovaného semaforu, pak zde kromě barvy hraje roli i pozice, na které se barva nachází. Takže i barvoslepý uživatel se může naučit, kdy na semaforu svítí červená, kdy oranžová a kdy zelená.

Typickým příkladem, kdy je k odlišení informací použita pouze barva, je například elektronické objednávání do Registru silničních vozidel.

Uživatel bez poruchy vnímání barev vidí objednávkový formulář takto:

Uživatelé, trpící některou formou barvosleposti, pak vidí ten samý formulář takto:

Deuteranopie (omezená schopnost či neschopnost vnímat zelenou barvu)

Protanopie (omezená schopnost či neschopnost vnímat červenou barvu)

Tritanopie (omezená schopnost či neschopnost vnímat modrou barvu)

Svého času byla pro uživatele, kteří měli problém s odlišováním barev, nepřístupná registrace do autobusů Student Agency. Jednoduchou úpravou – přidání znaku * – byl tento problém snadno vyřešen a dnes už si může místo v autobuse zarezervovat i nevidomý uživatel.

Používání barvy jako jediného nosiče významu informace není komplikace jen pro uživatele, kteří trpí některou z poruch barvocitu, ale i pro uživatele nevidomé či ty, kteří k práci s webem používají monochromatické zařízení.

Pokud byste si chtěli vyzkoušet, jak vidí váš web uživatel s některou z poruch barvocitu, můžete k tomu použít Color Contrast Analyzer nebo Visual Impairment Simulator pro MS Windows.

1.4.2 Ovládání zvuku (priorita A)

Jestliže se na webové stránce automaticky spustí přehrávání audia na delší dobu než tři sekundy, je k dispozici mechanismus, který umožní audio pozastavit či zastavit zcela nebo je k dispozici mechanismus, který umožní ovládat hlasitost nezávisle na globálním ovládání hlasitosti systému.

Pro uživatele screenreaderů může být velmi nepříjemná situace, kdy se jim během práce za pomoci hlasového výstupu začne samovolně přehrávat jiné audio. Situace je o to komplikovanější, že pro ovládání hlasitosti screenreaderu a jiné audio stopy je používána stejná funkce. Při ztišení audio stopy pomocí Ovládání hlasitosti tak dojde automaticky i ke ztišení hlasového výstupu, který nevidomý uživatel bezpodmínečně potřebuje ke své práci (pomiňme situaci, kdy je současně vybaven i braillským řádkem a může si tedy se situací nějak poradit). Proto je nutné v případě, kdy se při vstupu na webovou stránku spustí přehrávání audia, uživatelům nabídnout možnost toto audio vypnout.

Přehrávání audia ihned po vstupu na stránku může velmi ovlivnit uživatelovu schopnost najít mechanismus, kterým lze přehrávání audia vypnout (situace často může být o to horší, že prvek pro vypnutí audia je nepřístupný). Proto je autory metodiky WCAG 2.0 velmi doporučováno, aby tvůrci webových stránek používali techniku automatického přehrávání audia co nejméně (ideálně vůbec) a spíše postupovali obráceně, tzn. přehrávání audia spustit teprve ve chvíli, kdy si jej uživatel vyžádá.

1.4.3 Minimální kontrast (priorita AA)

Text či text ve formě obrázku má vůči svému pozadí kontrast minimálně 4,5:1. 

Smyslem tohoto kritéria úspěšnosti je zajistit dostatečný kontrast mezi textem a jeho pozadím tak, aby si jej mohli bez obtíží přečíst uživatelé s lehkým postižením zraku, kteří ještě nepoužívají pro práci s webem softwarovou lupu.

Pro kontrolu kontrastu se aktuálně používá algoritmus rozdílu světelnosti, který nahradil dříve používaný algoritmus rozdílu barvy a rozdílu jasu. Pro měření dostatečného kontrastu lze použít celou řadu nástrojů, doporučit mohu již zmiňovaný Colour Contrast Analyzer. U automatických validátorů je vhodné si dát pozor na to, abychom výsledky, které nám automat vrátí, správně interpretovali.

Výjimky z tohoto kritéria úspěšnosti tvoří texty psané velkým fontem (zde stačí kontrast minimálně 3:1), texty, které slouží jako dekorativní či se náhodou staly součástí webové prezentace (například text na dopravní značce na dekorativní fotografii) a logotypy.

1.4.4 Změna velikosti textu (Úroveň AA)

S výjimkou titulků a textů ve formě obrázků může být text zvětšen až o 200% bez pomoci asistivních technologií, aniž dojde ke ztrátě obsahu či porušení funkčnosti.

Smyslem tohoto kritéria úspěšnosti je zajistit zvětšování informací na stránce ve formě textu tak, aby si je mohli přečíst i uživatelé s lehkou slabozrakostí bez toho, aniž by potřebovali softwarovou lupu. Pro uživatele také může také být užitečné zvětšovat veškerý obsah webové stránky, ale my se zaměříme jen na text, protože ten je zpravidla nejdůležitější.

Zvětšování textu na webové stránce by mělo být v první řadě v režii prohlížeče na straně uživatele. Na autorovi pak je, aby vytvářel webové stránky tak, aby je bylo možné zvětšovat pomocí prostředků prohlížeče.

Tvůrci stránek mohou splnit toto kritérium ověřením možnosti bezproblémového zvětšování textu na stránkách pomocí funkcí prohlížečů, poskytnutím přímé podpory pro změnu velikosti textu (například skriptem na straně serveru, který může být použit pro přiřazení jiného CSS) nebo změnou layoutu.

Autoři doporučení WCAG 2.0 se domnívají, že zvětšení o 200 % je vyhovující pro většinu designů stránek a také vhodně doplňuje starší softwarové lupy, jejichž zvětšení začíná na 200 %. Pokud uživatel potřebuje zvětšení nad 200 %, může být už pro uživatele vhodnější zoom, při kterém dojde ke zvětšení veškerého obsahu na stránce. Pro takovéto uživatele už je také vhodnější použít softwarovou lupu, která jim zajistí lepší zpřístupnění obsahu stránky, namísto funkcí prohlížeče.

Texty ve formě obrázků nelze zvětšovat tak dobře jako „skutečné“ texty, protože u nich dochází k pixelizaci. Proto tvůrci metodiky WCAG 2.0 doporučují všude, kde to je možné, používat text. U textu ve formě obrázků je také obtížné až nemožné upravovat kontrast mezi popředím a pozadím, což může být pro některé uživatele také důležité.

Není bez zajímavosti, že dva dlouhodobě poměrně zásadní požadavky z hlediska přístupnosti – dostatečný kontrast a možnost zvětšovat text – nemají ve WCAG 2.0 přiřazenu nejvyšší prioritu. Důvodem jsou pravděpodobně čím dál tím lepší schopnosti prohlížečů nabídnout svým uživatelům funkce pro uzpůsobení vzhledu stránek a také skutečnost, že uživatelé, kteří vysoký kontrast či velké zvětšení potřebují, mají tuto potřebu vyřešenu použitím vhodného prohlížeče či asistivní technologie – v tomto případě softwarové lupy.

I přesto ale může existovat skupina uživatelů, pro kterou je dostatečný kontrast a možnost zvětšování písma (resp. jeho dostatečná výchozí velikost) k užitku – jedná se například o uživatele jen s menšími zrakovými problémy či seniory. Proto bych – i přesto, že autoři WCAG 2.0 to tak nevnímají – doporučoval dostatečnému kontrastu a čitelnosti písma věnovat odpovídající pozornost.

1.4.5 Text ve formě obrázku (Úroveň AA)

Jestliže technologie, která byla použita, umožňuje vizuální znázornění, doporučuje se raději použít textový formát než text ve formátu obrázku.

Smyslem tohoto kritéria úspěšnosti je motivovat tvůrce webu k tomu, aby text byl opravdu text. Pokud tedy může tvůrce použít text tak, aby docílil stejného vizuálního efektu, měl by informaci prezentovat raději v textovém formátu než jako obrázek.

Výjimku z tohoto kritéria úspěšnosti tvoří situace, kdy si uživatel může text v obrázkovém formátu přizpůsobit svým potřebám, nebo způsob, jakým je určitý text prezentován, má zásadní vliv na sdělovanou informaci (sem patří například texty, které jsou součástí loga nebo názvu firmy či produktu).

Příklady situací, které vyhovují tomuto kritériu úspěšnosti mohou být například webové stránky, na kterých je prezentováno určité písmo (změna písma by v tomto případě byla ku škodě věci) či originál dopisu, jehož zobrazení v podobě, v níž byl napsán, je nezbytné k tomu, aby z něj bylo poznat časové období, kdy byl napsán. U dopisu je vhodné definovat textovou alternativu.

Dnešním dílem končíme s prvním principem metodiky WCAG 2.0 a příště se podíváme na první pravidlo principu číslo 2. Tím je Ovladatelnost a my se budeme věnovat přístupnosti webové stránky z klávesnice.

Komentáře

Subscribe
Upozornit na
guest
4 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Kit

Ty obrázky nesplňují jednu podmínku: Jasová složka musí mít u variant postižených osob stejnou hodnotu. Postižená osoba vnímá jasovou složku stejně, pouze vnímá odlišně složky odstínu a sytosti barvy.
Nejjednodušeji by se to dalo prezentovat např. nahrazením zelené barvy (resp. červené či modré) barvou šedou se stejnou hodnotou jasové složky.

Karel

The Websense category „Personal Network Storage and Backup“ is filtered.
Nebylo by prosím možné dávat obrázky k článkům IInfa na servery IInfa? Dosud to byla celkem zaběhnutá praxe.

Martin Malý

Máte pravdu, omlouvám se, zůstaly tam img src s odkazem na původní umístění. Jdu to napravit.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.