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

Zdroják » Webdesign » Pochopil by Einstein váš web?

Pochopil by Einstein váš web?

Články Webdesign

Myslet si, že všichni uživatelé vnímají vaši stránku stejně, by byl velký omyl – natož myslet si, že ji vnímají stejně jako vy. Na to, jak ji vnímají, má vliv mnoho faktorů, a tím nejvýraznějším jsou různá zdravotní omezení. Udělat web přístupný pro nevidomé už většina designérů umí – ale co jiná omezení?

Předmluva překladatele

Když se řekne „přístupnost“ (viz též výborný seriál o přístupnosti a WCAG 2.0 od Radka Pavlíčka), představí si většina lidí web, který dokáže ovládat nevidomý člověk. Někteří poučenější si uvědomí, že v populaci je až 8,5 (některé prameny uvádí až 10) procent barvoslepých lidí, tedy lidí neschopných odlišit určité barevné odstíny (ukázku toho, jak tito lidé vnímají určité barevné kombinace, obsahuje např. Color Scheme Designer), a že barevná paleta by měla respektovat i tyto poruchy zraku. Málokdo si ale uvědomí, že poměrně velké množství lidí (v řádech procent) trpí některou lehkou mentální dysfunkcí – poruchou učení, dyslexií či ADHD (hyperaktivitou a poruchou pozornosti). Tyto poruchy, označované souhrnně jako kognitivní poruchy, mohou velmi významně ovlivnit způsob, jakým člověk pracuje s webovou stránkou, jak vnímá její obsah a jak je s ní schopen interagovat. O tom, jestli pro něj bude stránka vnímatelná a přístupná, často rozhodují detaily, které si zbytek populace ani neuvědomuje – podobně jako si málokdo se zdravýma nohama uvědomuje existenci schodů.

Na místě je upozornit, že tyto poruchy nemusí být nijak spojeny s intelektem. Různými formami kognitivních poruch trpěli i významní lidé a vynikající vědci či vynálezci – namátkou Albert Einstein, Alexander Graham Bell, Thomas Alva Edison, Walt Disney, Leonardo da Vinci či Winston Churchill. Paušální odsouzení lidí s podobnými poruchami či pohrdavé označování dotyčných za mentálně retardované jedince s deficitem intelektu je tak nepřesné, jak je urážlivé. Proto se rozmyslete, než na adresu nechápavého uživatele utrousíte něco jako „jen blbec si nezapamatuje, že má zmáčknout tahle tlačítka“. 

Úvod

Přístupnost webu pro lidi s kognitivním postižením či poruchami učení je jednou z nejpřehlíže­nějších podoblastí webové přístupnosti, ačkoli se týká relativně velkého počtu lidí. Jedním z hlavních důvodů je rozsáhlost a mnohost projevů těchto poruch (nesrovnatelně víc než např. u sluchových nebo zrakových) a nedostatek dostupných informací a učebních materiálů, které by se této problematice věnovaly na populární úrovni.

V článku si popíšeme některé problémy, kterými trpí  lidé s poruchami kognitivních funkcí a které mohou ztěžovat používání webu. Popíšeme základní způsoby, jak může webdesignér takové problémy vhodným návrhem umenšit, a řekneme si, čemu by se měl při návrhu vyhnout. Mnohé z probíraného jsou poměrně dobře známá pravidla, ovšem kvůli ucelenosti výkladu je na místě je zmínit.

Co jsou kognitivní poruchy a poruchy učení?

Kognitivní poruchy a poruchy učení totiž narušují schopnost provádět určité duševní pochody. Stejně jako u jiných postižení se i u těchto poruch budeme zabývat především těmi projevy, které mohou ovlivnit práci s webem. Lidé těmito poruchami trpící mohou mít problémy například s:

  • čtením textu
  • zapamatováním
  • řešením problémů
  • soustředěním (nedostatek pozornosti)
  • počítáním (třeba s matematickými vzorečky)
  • učením bez poslechu (např. mohou mít obtíže s psaným materiálem)

Pro snazší představu o možných projevech těchto poruch si ukážeme několik (fiktivních) osob:

  • Adam má problémy s chápáním textu, zejména pokud jsou některá slova napsána chybně („prohozemé zanky a překlepy“) nebo pokud je v textu použit sarkasmus, nadsázka nebo metaforická vyjádření (lze nalézt podobnost s dyslexií).
  • Bára má problém s krátkodobou pamětí, se zapamatováním toho co právě vidí a slyší. Pro ni je velmi těžké si zapamatovat, co už v dlouhém formuláři vyplnila nebo co už četla, pokud je článek rozdělen na víc stránek.
  • Cyrilovi činí obtíže řešení problémů. S neobvyklými a neznámými okolnostmi musí těžce bojovat – např. pokud narazí na odkazy na jiných místech než je čeká nebo na nejasné (nesrozumitelné) chybové hlášení ve vstupním formuláři (tyto obtíže mohou být výsledkem poruchy intelektových, emočních nebo výkonných funkcí).
  • Pro Danu je obtížné soustředit se na úkol, především když je na téže stránce pohyblivá reklama nebo více vyskakovacích oken (projevy ADHD).
  • Tomáš má problém s čísly; pro něj je obtížné např. odhadnout celkovou cenu zboží, které si objednává, nebo řešit matematické úlohy, používané jako CAPTCHA (možný projev dyskalkulie).
  • Kateřina si obtížně spojuje reprezentaci objektu s objektem samotným, například obrázek jablka se skutečným jablkem. Je pro ni snazší rozumět informacím, které jí někdo říká, než chápat text či obrázky.

Uživatelé mnohdy trpí kombinací několika poruch, a leckdy se k nim přidružují i tělesná postižení. Je důležité mít na paměti, že kognitivní poruchy mají širokou škálu možných projevů, ale zároveň nesmíme podlehnout pokušení si je striktně kategorizovat, protože každý člověk má unikátní soubor projevů a opravdu neexistuje univerzální řešení, které by pokrývalo všechny. Kupříkladu člověk, který má příznaky některé poruchy řazené mezi autismy, nemusí mít s webem žádný z popsaných problémů, protože v jeho konkrétním případě může být postižena především mezilidská komunikace a interakce, a dotyčný bude v oblasti chápání psaného textu bez pozorovatelných obtíží. Na druhé straně pro člověka s ADHD (hyperaktivita a poruchy pozornosti) můžou být některé úkoly, obecně vnímané jako bezproblémové, silně frustrující.

Oblasti zasluhující pozornost

Při vytváření webů zjistíte, že vytvoření stránek, které by byly přístupné pro všechny uživatele s kognitivními poruchami, je velmi obtížné, protože je třeba počítat s nejrůznějšími problémy.

Měli bychom si uvědomit, že řešení pro jednoho uživatele může být překážkou pro jiného, například obrázky mohou být rozptylující a rušivé pro někoho, kdo dává přednost textu, i když jste přesvědčeni, že kombinací různých typů obsahu usnadníte přístup většině uživatelů. Pokud přizpůsobíte obsah speciálně pro určitou skupinu, neměli byste zapomenout přizpůsobit jej tak, aby byl dostupný i v jiné podobě pro jiné skupiny.

Pokud se budete řídit několika jednoduchými pravidly, budete schopni prezentovat obsah co nejširšímu publiku. Mnoho z těchto pravidel patří do webdesignérských „dobrých zvyklostí“ – a přitom jejich dodržování dokáže výrazně zlepšit přístupnost! Zasaďme si je do kontextu kognitivních poruch, abychom lépe porozuměli jejich důležitosti.

Výrazného zlepšení přístupnosti leckdy dosáhneme pouhým dodržováním webdesignérských „best practices“.

1. Konzistence

První věc, nad níž byste měli při návrhu přemýšlet, je konzistence. Uživatelé by měli být schopni se naučit, co mohou očekávat od každé stránky, kterou na vašem webu objeví – nejrůznější prvky by měly být konzistentní stylem, umístěním a funkcí se stránkami, které už uživatel navštívil.

Na co bychom se při vytváření konzistentního designu měli soustředit?

1.1. Navigace

Navigace je po obsahu pravděpodobně nejdůležitější věcí, kterou je třeba uspořádat. Její pozice a funkce by se neměla v rámci webu měnit. Měla by být snadno rozpoznatelná jako navigace a měla by obsahovat intuitivně pochopitelné volby.

1.2. Písma a jejich velikost

Nepoužívejte velké množství různých písem, chovejte se k nim jako k barevné paletě. Vyberte si několik písem, pravděpodobně jedno pro nadpisy a jedno pro text. Velké množství různých písem najednou rozptyluje a ruší, což je stav, kterému bychom se měli za každou cenu vyhnout.

1.3. Interaktivní prvky – odkazy a tlačítka

Je důležité, aby jakýkoli uživatel vaší stránky dokázal poznat odkaz. Odkazy by měly být ve stejném stylu a musí se chovat tak, jak od nich uživatel očekává. Velmi důležité je u odkazů jejich umístění, významnost, záměr a cíl.

Stejná pravidla platí i pro tlačítka, a zde je na místě přimluvit se, aby byly tlačítka a další formulářové prvky ponechány tak, jak je vykreslí prohlížeč, protože to je podoba, v jaké je uživatelé očekávají. Dodržení tohoto pravidla zajistí konzistenci nejen v rámci jednoho webu, ale i mezi různými weby. Ovládací prvky, které jsou uživatelům povědomé, jsou pro ně méně matoucí.

2. Struktura

Je důležité, aby byl obsah dobře uspořádán a strukturován. HTML nám dává určitou omezenou sadu elementů, kterými můžeme organizovat obsah. I když se nám někdy zdá, že jsme výběrem prvků omezeni, můžeme toto omezení vnímat i jako výhodu, která nám pomáhá udržet strukturu konzistentní. Pojďme si probrat různé prvky webové struktury.

2.1. Nadpisy

Nadpisy a podnadpisy by měly být jasné, smysluplné a správně vnořené – jsou našimi průvodci po obsahu stránky. V ideálním případě by mělo být možné udělat si představu o obsahu stránky jen přečtením nadpisů a podnadpisů.

2.2. Seznamy

Seznamy už svou podstatou vyžadují větší soustředění na pročtení a pochopení. Jednotlivé položky v seznamu by proto měly být krátké a výstižné a mělo by být patrné, že patří do seznamu (např. odlišením od zbytku stránky pomocí barvy pozadí). Pokud chcete vysvětlit komplikovanou myšlenku, začněte stručným seznamem a pak rozepište jednotlivé položky, každou s vlastním (pod)nadpisem.

2.3. Mezery, odsazení, tabelátory, …

Prázdné místo je ve struktuře důležité; bez něho se všechny elementy slijí do jednoho nepochopitelného chumlu. Snažte se vyladit vhodné odsazení titulků, odstavců, citací apod. Věnujte speciální pozornost mezerám mezi sloupci – širší mezera (gutter) nebo jasné oddělení svislým okrajem může výrazně pomoci.

2.4. Jasné rozlišení typů obsahu

Použijte barvu, váhu fontu a další vlastnosti k odlišení typů obsahu – např. citát italikou, popisky tučně apod. Zjednodušíte tím uživatelům zjišťování, na co že se vlastně dívají.

3. Pozornost

Většina uživatelů webových stránek je „poháněna úkolem“ – mají nějakou úlohu, kterou chtějí provést, a chtějí to udělat co nejrychleji a bez rozptylování. Je velmi snadné nechtěně odvést jejich pozornost od obsahu, proto je dobré vyhnout se některým věcem:

3.1. Kontrastní bloky barev

Je přirozené, že je lidské oko přitahováno barevnějšími částmi stránky, proto se vyhněte příliš zářivým nebo vizuálně komplikovaným postranním sloupcům nebo jiným zbytným rušivým prvkům. Povzbudíte tím uživatele, aby se soustředil na nejdůležitější část obsahu nebo funkce.

3.2. Neočekávané zvuky

Vystříhejte se zvuků, které jsou přehrány, aniž by uživatel nějak specificky interagoval s obsahem na stránce – podobné věci uživatele vyvedou z rovnováhy a matou jej. (Což ostatně platí pro všechny nečekané podněty, např. náhlé blikání či jiné změny, které si uživatel nedokáže dát do souvislosti s ničím, co udělal – pozn. překl.)

3.3. Animace a další pohyblivý obsah

Pohyb může být na stránce velmi rušivý, obzvlášť pokud se odehrává automaticky, aniž by byl uživatel nějak varován, že se tak stane. Jediné místo, kde je přípustný nějaký pohyb, je v elementu, s nímž uživatel právě v tu chvíli pracuje – například při zvýraznění volby menu nebo při přehrávání videa, které uživatel zapnul.

3.4. Vyskakovací okna a nové záložky

Vyskakovací okna a automatické otvírání nových záložek odvádí pozornost od stránky a mate. Nehledě na to, že vyskakovací okna obvykle obsahují reklamu, takže lidé mají tendenci je bez čtení zavřít.

4. Čitelnost

Veškerý text na stránce by měl dodržovat pravidla čitelnosti, ať jde o menu, nadpisy nebo vlastní text. Obsah je nejdůležitější část každé stránky – následující pravidla vám pomohou udržet jej maximálně čitelný a srozumitelný.

4.1. Odpovídající velikost písma a výška řádků

Písmo s velikostí 10 nebo 11 px je považováno za nejmenší přijatelné, ale doporučil bych 12 px nebo 13 px podle typu písma (je řeč o výsledné velikosti písma, jak jej prohlížeč zobrazí – můžete samosebou nastavit velikost ve stylech pomocí relativních jednotek). I když prohlížeče umí změnit velikost písma nebo zvětšit stránku, nemáme žádné záruky, že uživatel ví, jak to udělat.

Výška řádku by měl být zhruba 1,5násobek výšky písma.

4.2. Omezená délka řádku

Dlouhé řádky se z mnoha důvodů špatně čtou. Na rozdíl od obecného přesvědčení není pravda, že všichni čtenáři mají problém číst dlouhé řádky. Ovšem lidé, kteří mají problémy s čtením, mají často problém i s délkou řádku. Omezte se na 70–80 znaků na řádek.

4.3. Barevný kontrast

Stejně jako u jiných uživatelů, i u lidí s kognitivními poruchami pomáhá dobře zvolený kontrast mezi obsahem a pozadím zvýšit soustředění. Napomoci může i barevné odlišení odkazů od textu.

4.4. Krátké odstavce

Pište krátké odstavce, každý zaměřte na jediný bod či myšlenku.

5. Transformo­vatelnost

Transformovatel­nost obsahu označuje možnost změny jeho prezentace do takové podoby, jaká uživateli vyhovuje. Ukažme si některé používané mechanismy.

5.1. Změna velikosti písma

Nejzákladnější typ transformace je změna velikosti písma. Váš design by měl být schopen unést zvětšení písma alespoň na dvojnásobek, ale ještě lépe na trojnásobek původní velikosti.

Tento problém už není dnes tak akutní, když prohlížeče umožňují zvětšit celou stránku, ale existuje stále nemalá skupina uživatelů, kteří dají přednost zvětšení písma bez změny rozměrů stránky, obrázků nebo sloupců.

5.2. Podpora uživatelských stylů

Usnadněte uživatelům použití jejich vlastních stylů. Napište dobré a čisté CSS, selektory dělejte pokud možno co nejmíň specifické a snažte se vyhnout použití  !important.

5.3. Ujistěte se, že vše funguje bez obrázků, stylů a skriptů

Otestujte, jestli stránka funguje bez obrázků, stylů a skriptů. Takové zobrazení je nouzovým řešením pro každého uživatele a v každé situaci, je proto vhodné, aby i za takových podmínek dával web smysl a bylo možné s ním pracovat. Můžete to brát i jako dobrý test struktury obsahu.

5.4. Nabídněte API nebo RSS kanál

Nabídněte obsah pomocí API nebo jako RSS/ATOM  kanál, který si mohou uživatelé přizpůsobit svým potřebám a preferencím. Pravděpodobně nedokážete přizpůsobit obsah stránky všem možným skupinám uživatelů, ale s API či RSS existuje naděje, že se najde vývojář, který takový výstup dokáže upravit pro potřeby specifické skupiny lidí, čímž v konečném důsledku získáte širší a různorodější publikum.

Twitter je skvělou ukázkou, čeho lze dosáhnout s API. Nejen že máte možnost číst obsah a psát vlastní zprávy na webu, ale pomocí API se připojíte z nejrůznějších klientů, které jsou přizpůsobeny na míru nejrůznějším požadavkům. Accessible Twitter je alternativní Twitter, uzpůsobený pro uživatele s omezeními.

Dalším příkladem může být Easy YouTube, který vytvořil Christian Heilmann. Jde o rozhraní k YouTube, speciálně navržené pro uživatele s poruchami učení. Jak autor píše v dokumentaci, nebylo by to možné bez dostupného API.

6. Obsah

Zaměřme se nyní na vlastní obsah, což je bezesporu nejdůležitější část stránky. Když máte obsah dobře strukturovaný a označený patřičnými tagy, můžete jej snadno konvertovat do různých formátů; ovšem je-li samotný obsah špatný, nepomůže sebelepší struktura ani konverze, výsledek bude vždy špatný.

6.1. Pravopis

Většina uživatelů dokáže přečíst text, který obsahuje chyby a překlepy, a pochopit jeho obsah. Pro lidi s poruchami čtení se chyby a špatně napsaná slova či věty promění v shluky znaků bez jakéhokoli významu. (V této souvislosti opět připomenu argument „jde o obsah, ne o pravopis“ – jsou lidé, pro který je gramaticky nesprávně napsaný text opravdu nesrozumitelný. Pozn.překl.)

U komerčních stránek je jednoznačně na místě použít služby jazykového korektora nebo copywritera.

Pro weby provozované nadšenci s omezeným finančním rozpočtem lze použít např. řešení pomocí automatických oprav, které jsou dostupné ve většině editorů, a dobré je i důkladné přečtení někým, kdo se na vývoji webu nepodílí.

6.2. Vysvětlení pojmů

Uveďte definice zkratek, akronymů nebo technických výrazů. U komplikovanějších nebo technických textů dejte k dispozici slovníček výrazů. Snažte se vyhnout žargonu, ale nikoli za cenu snížení jednoznačnosti tex­tu.

6.3. Jedno téma

Zaměřte se na stránce na jedno téma; soustřeďte se na ně a neodbíhejte k jiným.

6.4. Sumarizace

Shrňte obsah stránky v úvodním odstavci. Uživateli to pomůže rychle se zorientovat a zjistit, zda je na stránce opravdu to, co hledá. Snížíte tak riziko případného znechucení a frustrace.

6.5. Kombinace typů obsahu

Různí lidé mohou vnímat některé formy obsahu snadněji než jiné. Pro někoho je srozumitelnější víc obrázků a méně textu, pro jiného naopak, a další zase snáze pochopí tentýž obsah, pokud ho někdo přečte v doprovodném vi­deu.

Kdekoli to podmínky dovolí, zkuste nabídnout obsah v různých formách. Nezapomeňte samosebou na titulky u videa a na přepis audioobsahu.

Vytváření takového obsahu samosebou klade obrovské nároky na editorskou práci. Není jistě možné nabízet kombinovaný obsah všude, ale pokud máte zboží, které chcete prodat, a dáte k němu textový popisek, fotografie ukazující jeho nejrůznější vlastnosti a videoklip s ukázkou používání, napomůže to nejen atraktivitě prezentace (a prodeji), ale také to pomůže lidem vybrat si takovou formu sdělení, která je pro ně nejpřijatelnější.

Je ale důležité pamatovat na to, aby víc různých druhů obsahu nepůsobilo rušivě. Jak jsme si řekli výše – co je pro jednoho řešením, může být pro jiného překážkou. Klíčový je zde citlivý návrh. Pokud mícháte text a obrázky, bude možná lepší oddělit je do samostatných oblastí, než prokládat obrázky do textu. Zkuste je třeba ukázat spíš jako slideshow než všechny najednou, a přidejte k nim odpovídající text. Uživatel si pak bude moci vybrat, jestli si raději přečte text, nebo jestli si projde obrázkovou prezentaci, kde získá stejné informace.

Závěr

Můžete si říct, že většina rad v tomto článku není nic, na co byste nepřišli zdravým selským rozumem, a budete mít naprostou pravdu! Dobrá zpráva je, že k tomu, aby byla vaše stránka přístupná pro většinu lidí s kognitivními poruchami, stačí udělat ji čistou, s přímočarým obsahem prezentovaným ve snadno použitelném rozhraní s minimem rušivých prvků. Ale přesně to chceme většinou nabídnout všem uživatelům tak jako tak, takže stačí jen troška péče navíc – a vyhneme se i problémům s přístupností.

Výhody takového přístupu jsou mnohem větší, než jaké si obvykle pod pojmem přístupný web představujeme. Například něco tak banálního, jako je gramaticky správný text, může významně zvýšit srozumitelnost, speciálně pro uživatele, kteří nejsou zběhlí v jazyce, jímž je obsah psán. (Neplatí to jen pro anglické texty, které čtou lidé po celém světě. I v ČR žije velké množství lidí, pro něž není čeština rodným jazykem, a těm gramaticky správný text může výrazně usnadnit chápání obsahu – pozn.překl.)

Naneštěstí máme i špatné zprávy – jedno rozhraní nebo styl obsahu nebude nikdy schopné pokrýt potřeby všech uživatelů za všech okolností. Tento fakt může ale hrát roli při rozhodování, zda zveřejnit obsah pomocí API nebo RSS kanálu. Stejný obsah pak může být upraven pro zobrazení v jiném formátu, na jiných webových stránkách, nebo na zařízeních jako jsou mobilní telefony.

Tento článek je překladem a adaptací textu Web accessibility for cognitive disabilities and learning difficulties, jehož autorem je Ian Pouncey, a je zde zveřejněn s laskavým svolením Opera Software.

Komentáře

Subscribe
Upozornit na
guest
8 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Oldřich Vetešník

Pěkné. Ještě bych dodal, že zájemci si mohou vyzkoušet poruchu pozornosti http://webaim.org/simulations/distractability, duporučuji! :)

To diskriminuje lidi s QWERTZ klávesnicí :-D

next_ghost

Kdyby jenom QWERTZ, ani na Dvořákovi se to nedá ovládat a Flash samozřejmě přepnutí na anglickou klávesnici vesele ignoruje…

xxx

neignoruje

ufak

1) Špatné vnímání stránky nebo orientace přes ovládací prvky nemusí být porucha. Dnešní doba je povrchní a rychlá. Člověk oskenuje rychle stránku, dokud nenarazí na to, co hledá. Pokud hledá vysloveně např. navigační tlačítko Založit nový, někam se mu schová, nemůže ho najít.
2) Dnešní mládež nečte a má potíže se vstřebáním podstaty textu, zvláště, pokud je dlouhý.
3) Já mám také potíže se soustředěním a poskakující blbec v potápěčských brýlýl mě fakt ruší. A nejlepší jsou padající růžová srdíčka.
4) Já třeba raději čtu než poslouchám multimédia. Je to i rychlejší.

Deafboy

Celý bod 1 kompletne ignorujú veľké firmy. Majú zložitú štriktúru stránok, hlavná ponuka je vždy niekde inde, kategórie sú vždy iné, stredobodom pozornosti je veľký flashový banner uprostred stránky. Prvky ktoré majú budiť profesionálny dojem, no v skutočnosti iba mätú návštevníkov. Schválne skúste nájsť informáciu ako a kde stiahnuť vmware server console ;)
Okrem vmware sú nádejní adepti na najhoršiu stránku: microsoft, nedávno oracle (niektoré podstránky v dizajne SUN, niektoré Oracle), HP… v podstate takmer všetci veľkí hráči. Firmy sa rozrastajú, doterajšia štruktúra stránky nestačí, tak sa prídáva, pláta a doplňuje, inovácie prichádzajú rýchlejšie ako sa dá zaktualizovať každá podstránka a tak vzniká zmätok.

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.