Přístupnost a použitelnost webu

České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství

Diplomová práce

Přístupnost a použitelnost webu Bc. Jiří Pavelka

Vedoucí práce: Ing. Lukáš Bařinka

14. května 2012

Poděkování Největší poděkování a úctu zaslouží zejména autorova rodina a přítelkyně. Bez jejich nekonečné trpělivosti, lásky a podpory by předně žádná diplomová práce pravděpodobně vůbec nevznikla. V akademických kruzích je to vedoucí práce Ing. Lukáš Bařinka s řadou kolegů, kteří se byť nepřímo zasloužili o vznik této práce. Svými inženýrskými pohledy a nenechavostí dokáží v autorovi probouzet jakkoli staré úvahy a otvírat stále nové otázky. Potěšit je a dostát tak pochvaly či uznání na odborné úrovni je pro autora práce ohromnou výzvou a ctí. Autor tímto děkuje také všem svým klientům a spolupracovníkům z praxe, kteří jej vytrvale vrací nohama na zem svými svéráznými představami a požadavky. To vyvolalo osobní zájem autora na této práci jako opěrném bodu a prevenci proti častým nedorozuměním. V neposlední řadě patří poděkování každému, kdo si tuto práci přečte a vznese podnětné připomínky.

Prohlášení Prohlašuji, že jsem předloženou práci vypracoval samostatně, a že jsem uvedl veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů, zejména skutečnost, že České vysoké učení technické v Praze má právo na uzavření licenční smlouvy o užití této práce jako školního díla podle § 60 odst. 1 autorského zákona.

V Praze dne 15. května 2012

..................... 7

České vysoké učení technické v Praze Fakulta informačních technologií c 2012 Jiří Pavelka. Všechna práva vyhrazena.

Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora.

Odkaz na tuto práci Jiří Pavelka. Přístupnost a použitelnost webu: Diplomová práce. Praha: ČVUT v Praze, Fakulta informačních technologií, 2012.

Abstract This thesis affects the issue of web accessibility and usability. Its comprehensive and continuous form is suitable for any reader interested in creating and developing websites and web applications. Comparison and common difficulties between theory and the real (commercial) world are shown using examples of real sites. A complex tutorial of developing and deploying an existing Web application at the end of this thesis offers an adoption of contained theory for developer teams. Keywords accessibility, usability, web, webdesign, mobile, testing, standards

Abstrakt Tato práce zachycuje problematiku webové přístupnosti a použitelnosti. Její ucelené a souvislé zpracování je vhodné pro každého čtenáře se zájmem o tvorbu a rozvoj webů a webových aplikací. Práce na příkladech konkrétních webů srovnává teorii s (komerční) praxí a poukazuje na typická úskalí praxe. Vývojářským týmům práce nabízí i praktické osvojení problematiky v komplexním průvodci nasazením a vývojem existující webové aplikace. Klíčová slova přístupnost, použitelnost, web, webdesign, mobilní, testování, standardy

9

Obsah Úvod

17

1 Potřebné technologické znalosti

19

2 Přístupnost webu (Web Accessibility) 2.1 Úvod do přístupnosti webového obsahu . 2.2 Úrovně přístupnosti a požadavky shody 2.3 První princip — Vnímatelnost . . . . . . 2.4 Druhý princip — Operabilita . . . . . . 2.5 Třetí princip — Pochopitelnost . . . . . 2.6 Čtvrtý princip — Robustnost . . . . . . 2.7 Normy přístupnosti . . . . . . . . . . . . 2.8 Testování přístupnosti . . . . . . . . . . 3 Použitelnost webu (Web Usability) 3.1 Základy webové použitelnosti . . . . . 3.2 Co neopomenout a čeho se vyvarovat . 3.3 Vizuální prezentace webu a styl psaní 3.4 Design pro 5 zařízení . . . . . . . . . . 3.5 Použitelnost na mobilních zařízeních . 3.6 Testování použitelnosti webu . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

. . . . . .

. . . . . . . .

21 23 26 29 35 40 43 44 49

. . . . . .

53 54 59 65 68 71 74

4 Srovnání teorie se soudobou praxí 83 4.1 Ilustrativní analýza běžného webu . . . . . . . . . . . . . . . . 84 4.2 Ilustrativní analýza přístupného a použitelného webu . . . . . . 86 4.3 Střet webové teorie s praxí . . . . . . . . . . . . . . . . . . . . . 88 5 Průvodce úpravou existující aplikace (e-shopu) 5.1 Sémantika webového obsahu . . . . . . . . . . . . 5.2 Nasazení systému a propojení s Google Analytics 5.3 Práce s Google Analytics . . . . . . . . . . . . . 5.4 Události na Google Analytics . . . . . . . . . . . 5.5 Analýza přístupnosti . . . . . . . . . . . . . . . . 5.6 Řešení přístupnosti . . . . . . . . . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

91 92 93 95 96 97 98 11

5.7 5.8 5.9 5.10 5.11 5.12

Uživatelské testování přístupnosti . . . . . . . . . Řešení problémů přístupnosti . . . . . . . . . . . Expertní testování použitelnosti . . . . . . . . . . Uživatelské testování použitelnosti . . . . . . . . Úpravy aplikace za účelem zvýšení použitelnosti Zhodnocení stavu a určení dalšího postupu . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

99 100 101 102 102 103

Závěr

105

Literatura

107

A Seznam použitých zkratek

113

B Obsah přiloženého CD

117

12

Seznam obrázků 2.1 2.2

Struktura Iniciativy webové přístupnosti . . . . . . . . . . . . . . . Podpůrné dokumenty WCAG 2.0 . . . . . . . . . . . . . . . . . . .

22 23

3.1

Testování více uživateli

77

. . . . . . . . . . . . . . . . . . . . . . . .

13

Seznam tabulek 3.1

Zastoupení různých rozlišení obrazovky . . . . . . . . . . . . . . .

68

15

Úvod Autor této práce se od roku 1998 aktivně zabývá propojením rozsáhlé problematiky webové přístupnosti a použitelnosti s praxí. Tehdy založil svůj první komerční webový projekt, který vydělával přímo úměrně tomu, jak byl použitelný. To bylo hlavním impulzem a motivací začít se použitelnosti věnovat více a teoretické poznatky okamžitě aplikovat v praxi. Bohužel se od té doby v komerčním světe setkává veskrze s nepochopením. Některé požadavky klientů bývají se zásadami kvalitního webu ve vyloženém rozporu. Svou diplomovou prací chce autor vyvolat ve čtenářích stejnou potřebu a zájem o problematiku přístupnosti a použitelnosti, jako vznikla před 14 lety jemu. Vypracování sady nejlepších postupů teorie webové přístupnosti a použitelnosti je pro autora vytouženým cílem, na který se může on sám (stejně jako kdokoli jiný) do budoucna odvolávat při vývoji webových aplikací, ať z pozice vývojáře, vedoucího projektu či zadavatele. Oběma zmíněným problematikám věnuje práce prostor pro popis testování. V další kapitole práce srovnává popsanou teorii (jak by to mělo či nemělo být) se soudobou praxí (jak to bývá). Kapitola obsahuje základní analýzu dvou skutečných webů — jednoho běžného a jednoho optimalizovaného. Pro praktickou demonstraci a osvojení popsaných teorií obsahuje poslední kapitola průvodce úpravou existující aplikace. Vývojářské týmy si tak mohou ověřit své schopnosti a na vlastní kůži poznat, jak zásadní vliv mají uvedené postupy na kvalitu výsledného produktu. Ve výsledku by tato práce měla dopomoci ke zvýšení a dlouhodobému rozvoji kvalit webů (stránek či aplikací) ať z pohledu vývojáře, vedoucího nebo jejich zákazníků. Vývojářským týmům má práce poskytnout konkurenční výhodu a čtenářům zákazníkům podklad pro výběr kvalitního dodavatele.

17

KAPITOLA

Potřebné technologické znalosti Obsažené texty mají být srozumitelné a přínosné jakémukoli čtenáři se zájmem o web bez ohledu na úroveň jeho znalostí. Hlavní myšlenky jsou psány (pokud možno) bez odborných termínů nebo jsou tyto vysvětlené. Aktivní osvojení obsažené problematiky však na znalosti čtenáře (webové designery a vývojáře) klade nemalé nároky. Čtenář se zájmem použít získané informace v praxi by měl být přinejmenším dobře vybavený technologickými znalostmi. Pro vymezení požadované technologické úrovně dobře poslouží vysokoškolské předměty. Na Fakultě informačních technologií ČVUT1 se dají předměty[53] se vztahem k obsažené problematice rozdělit do dvou skupin: 1. Předměty vztažené k webům se zaměřením na technologie • BI-WT1 Webové technologie 1 [49] (nahrazuje předmět BI-WMM Web a multimédia), • BI-WT2 Webové technologie 2 [50] (nahrazuje předmět BI-TWA Tvorba webových aplikací ), • BI-PHP Programování PHP[46], • BI-PJS Programování v JavaScriptu[47]. 2. Předměty se vztahem k použitelnosti bez přímé souvislosti s webem • BI-TUR Tvorba uživatelského rozhraní [48] a • MI-NUR Návrh uživatelského rozhraní [51]. 1

České vysoké učení technické v Praze

19

1

1. Potřebné technologické znalosti Pro vývojářské týmy se zájmem o osvojení obsahu této práce je nezbytná aktivní znalost technologií zahrnutých v uvedených předmětech. Úspěšný průchod Průvodcem úpravou existující aplikace (kapitola 5) vyžaduje znalosti od HTML2 a CSS3 přes OOP4 v PHP5 až po JS6 /AJAX7 . Nedílnou podmínkou pro převedení instrukcí průvodce do praxe je také znalost návrhových vzorů (jmenovitě MVC8 ). Rozšiřující podmínkou je znalost práce s technologiemi sémantického webu. Předměty uvedené v druhé skupině se (jak jejich název napovídá) zabývají uživatelským rozhraním — tedy použitelností ze širší perspektivy (operačních systémů a aplikací obecně). Tato práce vychází ze stejného fundamentu, problematiku doplňuje o teorii webové přístupnosti a použitelnost přímo aplikuje na web. Znalost látky druhé skupiny předmětů čtenářům dobře poslouží k lepší orientaci a pochopení některých konkrétních přístupů a pravidel. Výuka na Fakultě elektrotechnické ČVUT související s obsahem této práce je podobná[52]. Na problematiku použitelnosti je zde pohlíženo ještě s větším odstupem — jako na interakci člověka s počítačem obecně (HCI9 ). Předměty se použitelnosti v kontextu webů a webových aplikací také věnují jen velmi okrajově (o přístupnosti nemluvě). Pokud jde o návrh webových aplikací, pak se předměty věnují navíc způsobům a formálním jazykům modelování návrhu UI10 . Takové znalosti nejsou pro účely této práce nezbytné.

2

Značkovací jazyk (z angl. HyperText Markup Language) pro vytváření webových strá-

nek 3

Kaskádové styly (z angl. Cascading Style Sheets) je jazyk pro popis způsobu webových zobrazení stránek 4 Objektově orientované programování (z angl. Object-oriented programming) jako metodika vývoje softwaru 5 Preprocessor, česky „PHP: Hypertextový preprocesor“, původně Personal Home Page) je skriptovací programovací jazyk určený především pro programování dynamických internetových stránek a webových aplikací 6 JavaScript, skriptovací jazyk zpravidla používaný jako interpretovaný programovací jazyk pro webové stránky 7 Z angl. Asynchronous JavaScript and XML, obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačítání 8 Softwarová architektura Model-View-Controller 9 Interakce člověka s počítačem (z angl. Human-Computer Interaction) jako průnikový interdisciplinární obor, který se zabývá fenoménem tvorby uživatelských rozhraní 10 Uživatelské rozhraní (z angl. User Interface)

20

KAPITOLA

Přístupnost webu (Web Accessibility) Přístupnost webových aplikací je problematika přibližující webový obsah lidem s různým postižením či omezením (zraku, pohybu). Dá se chápat jako jistý technický předpoklad či předstupeň k dobrému webu — webu s vysokou úrovní použitelnosti (kapitola 3). Jinými slovy web s vysokou úrovní použitelnosti bude pravděpodobně i do značné míry přístupný. Opačná závislost neplatí. Iniciativa webové přístupnosti (WAI11 )[55] webového konsorcia W3C12 definuje doporučení přístupnosti (accessibility guidelines) pro tři různé oblasti: webovému obsahu (WCAG13 ), nástrojům pro vytváření webů (ATAG14 ) a webovým prohlížečům (UAAG15 ). Pro účely této práce je tedy relevantní oblast vývoje webového obsahu (WCAG). WAI se dále zabývá jazykem ohodnocování a reportování (EARL16 ) primárně určeném pro vývojáře nástrojů pro ohodnocování přístupnosti, měření kvality a validace, vytváření a vývoj webů a frameworků. Jde o RDF17 slovníček pojmů definovaných v příslušných specifikacích. 11

Iniciativa webové přístupnosti (z angl. Web Accessibility Initiative) Mezinárodní konsorcium (z angl. World Wide Web Consortium), jehož členové společně s veřejností vyvíjejí webové standardy pro World Wide Web 13 Doporučení přístupnosti webového obsahu (z angl. Web Content Accessibility Guidelines) 14 Doporučení přístupnosti nástrojům pro vytváření webů (z angl. Authoring Tool Accessibility Guidelines) 15 Doporučení přístupnosti uživatelských agentů (z angl. User Agent Accessibility Guidelines) 16 Strojově čitelný formát pro reportování výsledků testování (z angl. The Evaluation and Report Language) 17 Systém popisu zdrojů (z angl. Resource Description Framework) 12

21

2

2. Přístupnost webu (Web Accessibility)

Obrázek 2.1: Struktura iniciativy webové přístupnosti s rozdělením na oblasti pro vývojáře a uživatele.

Samostatnou oblastí je aktivita WAI/ARIA18 zabývající se přístupností pro bohaté internetové aplikace (RIA19 ). Definuje způsoby, jak učinit obsah webové aplikace obecně přístupnější handicapovaným lidem. Především pomáhá s vývojem dynamického obsahu a s ovládáním pokročilých UI pomocí AJAX, HTML, JS a příbuzných technologií. Přístupnost je jako technická problematika (na rozdíl od použitelnosti) dobře zdokumentovaná. První podkapitola seznamuje čtenáře se strukturou dokumentů a klíčovými myšlenkami přístupnosti. Ukazuje, kdy a proč je přístupnost důležitá a uvádí několik rámcových doporučení, jak přístupnost webu zvýšit. 18 Doporučení Iniciativy webové přístupnosti pro bohaté internetové aplikace (z angl. Web Accessibility Initiative / Accessible Rich Internet Applications Suite) 19 Bohatá internetová aplikace (z angl. Rich Internet Application) má některé vlastnosti grafické desktopové aplikace. Většinou běží ve webovém prohlížeči, ale často pro svůj běh vyžaduje plug-in.

22

2.1. Úvod do přístupnosti webového obsahu

Obrázek 2.2: Schéma podpůrných dokumentů WCAG 2.0

2.1

Úvod do přístupnosti webového obsahu

Dokumenty Doporučení přístupnosti webového obsahu (WCAG) verze 2.0[67] vysvětlují, jak zpřístupnit webový obsah handicapovaným lidem (lidem s postižením). Webovým obsahem se obecně rozumí informace na webových stránkách nebo webových aplikacích, zahrnující text, obrázky, formuláře, zvuky a podobně. Schéma na obrázku 2.2 zachycuje strukturu podpůrných dokumentů, které WCAG 2.0[66] rozděluje do 3 skupin: 1. Jak docílit WCAG 2.0 • Přizpůsobitelná (podle požadavků čtenáře) stručná referenční příručka obsahující všechny pokyny, kritéria úspěchu a techniky pro autory k tvorbě a kontrole a přístupného webového obsahu 2. Pochopení WCAG 2.0 • Příručka usnadňující pochopení a implementaci doporučení WCAG 2.0, jejich jednotlivých pokynů a hodnotící kritéria úspěchu a klíčových témat 3. Techniky pro WCAG 2.0 • Seznam technik a obecných pochybení, přičemž každé zvlášť obsahuje popis, příklady, zdrojové kódy a testy 23

2. Přístupnost webu (Web Accessibility) Mezi klíčová doporučení přístupnosti patří: • zajištění bezproblémové transformace webového obsahu a • tvorba pochopitelného a dosažitelného obsahu. WCAG se zabývá širokou škálou postižení (zrakové, sluchové, fyzické, řečové, vnímání, jazykové, vzdělávací nebo neurologické). I přes tento záběr není možné postihnout všechny druhy postižení a jejich kombinace. WCAG se taktéž zabývá individuální změnou schopností uživatelů (např. stárnutím). Klíčovými zásadami přístupného webu je tvořit jeho obsah • maximálně flexibilně • s ohledem na potřeby a možnosti uživatele • s ohledem na konkrétní situaci. Vzhledem k rozličným zařízením používaných postiženými uživateli se výhody přístupnosti mohou projevit např. • při pomalém připojení k Internetu, • při dočasném postižení (zlomená ruka), • při použití netypických zařízení, • při použití mobilních zařízení, • při použití zařízení s omezenými možnostmi (zdroji). Přístupnost hraje důležitou roli také v obchodní oblasti a ovlivňuje celou řadu faktorů[56]: 1. Sociální faktory poskytující rovné příležitosti pro uživatele s omezením • postižením, stářím, gramotností, jazykem, technologickým, znalostním. 2. Technické faktory ovlivňující nároky na použité technologie a zařízení • interoperabilitu, kvalitu, potřebný čas na vývoj a údržbu, zátěž serverů, multiplatformnost (rozdílné konfigurace), rozšiřitelnost o nové technologie. 3. Finanční faktory ovliňující ziskovost webu • zvyšující návštěvnost (skrz SEO20 ), úspory přímých nákladů, vstupních a průběžných nákladů. 20

24

Optimalizace pro vyhledávače (z angl. Search Engine Optimization)

2.1. Úvod do přístupnosti webového obsahu 4. Právní a politické faktory požadavky především ze státních (aj.) organizací • ve formě zákonů, nařízení, standardů, doporučení, atd. Doporučení WCAG jsou zaměřeny a určeny především: • webovým designerům a autorům webového obsahu, ale také • vývojářům nástrojů pro tvorbu webů či pro hodnocení přístupnosti a dále • ostatním, kteří chtějí nebo potřebují technické standardy webové přístupnosti (tvůrci zásad, manažeři). Je důležité, aby si tvůrci webového designu uvědomili, že existuje mnoho lidí, kteří se mohou či musí pohybovat ve velmi odlišném prostředí než oni. Jednotlivá doporučení mají přirozeně pozitivní vliv na použitelnost obecně a tedy z přístupnosti webového obsahu mohou těžit i uživatelé bez postižení. • Nemohou vidět, slyšet, pohybovat se nebo nemohou zpracovávat některé druhy informací buď částečně, nebo dokonce vůbec. • Mohou mít problémy se čtením a porozuměním textu. • Nemohou používat klávesnici nebo myš. • Mohou používat pouze textové obrazovky, malé obrazovky, nebo mají pomalé připojení k internetu. • Nemusí plynně hovořit nebo plně rozumět jazyku v němž je dokument napsán. • Mohou se nacházet v situacích, kdy jejich oči, uši či ruce mohou být zaneprázdněny nebo provádět jinou činnost (řízení, práce v hlučném prostředí). • Mohou používat starší verze/jiné prohlížeče, prohlížeče s hlasovým výstupem, nebo různé operační systémy. Stránky, které zajišťují bezproblémovou transformaci zůstávají přístupné bez ohledu na změnu okolností (např. změnu fyzických, vjemových a poznávacích schopností či omezení, změnu pracovních nebo technologických podmínek). 1. Oddělení struktury/obsahu od vzhledu 2. Poskytování textu (včetně textových ekvivalentů) 25

2. Přístupnost webu (Web Accessibility) • Text je možné zobrazit téměř na libovolném zařízení a je přístupný téměř všem uživatelům 3. Vytváření dokumentů, které poskytují informace i když uživatel nevidí a nebo neslyší • Poskytovat informace nesoucí stejný význam nebo funkčnost jako audio nebo video ve formě vhodné pro alternativní způsoby vnímání • Avšak je zbytečné pořizovat audio verzi celé stránky pro nevidomé, ti používají technologie (čtečky) umožňující vnímat textovou informaci obsaženou ve stránce 4. Vytvářet dokumenty, které nespoléhají na jeden konkrétní typ zařízení • Stránky by měly být použitelné i bez myši, na malých obrazovkách (příp. s malým rozlišením), černobílých zařízeních, zařízeních bez obrazovky nebo s čistě hlasovým výstupem

2.2

Úrovně přístupnosti a požadavky shody

Jednotlivci a organizace používající WCAG se mohou zásadně odlišovat; od webových designerů a vývojáře, manažery, obchodníky, učitele a studenty. Pro pokrytí jejich rozličných potřeb a schopností je k dispozici několik vrstev vodítek včetně principů, obecných pravidel, testovatelných kriterií a bohatá kolekce ověřených a doporučených technik a přístupů. Dokumentovány jsou také časté chyby včetně příkladů, odkazy a zdrojovými kódy[67]: • 4 hlavní principy tvořící základ webové přístupnosti jsou rozvedeny v následujících čtyřech podkapitolách a jsou jimi: – vnímatelnost (informace a komponenty rozhraní musí být uživatelům prezentovány způsobem, který dokáží vnímat), – operabilita (komponenty uživatelského rozhraní a navigace musí být operabilní — rozhraní nesmí vyžadovat interakci, kterou uživatel nemůže provést), – pochopitelnost (uživatelé musí být schopni pochopit veškeré informace stejně tak jako veškeré operace UI) a – robustnost (obsah musí být dostatečně robustní, aby jej mohla spolehlivě reprodukovat široká řada prohlížečů včetně podpůrných technologií). • 12 doporučení (vodítek) vedoucích ke splnění základních cílů přístupnosti. Doporučení nejsou testovatelná, ale poskytují souhrnný rámec pro pochopení a implementaci cílů a jsou rozložena mezi výše uvedené 4 principy přístupnosti. 26

2.2. Úrovně přístupnosti a požadavky shody • Pro každé doporučení existují testovatelná (objektivní a technologicky neutrální) kritéria úspěšnosti. Každé kritérium je uvedeno jako tvrzení, jež může být pravdivé nebo nepravdivé. – Kritéria musí pokrývat důležitý problém přístupnosti pro postižené uživatele (výrazně nad rámec problémů běžných uživatelů) a – musí být (počítačově nebo uživatelsky) testovatelná. • Každý test doporučení provází postačující a poradní techniky, jak shody dosáhnout: – techniky postačující k dosažení shody (nezbytné), – volitelné poradní techniky (jdoucí nad rámec požadavků nebo testů) a – popis záměru testovacího kritéria včetně očekávaných přínosů a příkladů. Pokud web (nebo jeho část) splňuje požadavky WCAG, může na jednotlivých stránkách zobrazit deklaraci o splnění příslušné úrovně WCAG. Pro dosažení shody se specifikací přístupnosti, je nezbytné, aby webová stránka (pro kterou má shoda platit) splňovala všech 5 následujících kritérií[65]: 1. Úroveň shody dělená do 3 skupin podle doporučení, která jsou splněna. Každá další úroveň zahrnuje tu předchozí. Má smysl pokusit se dosáhnout splnění maximálního počtu doporučení, i kdyby tím nedošlo ke zvýšení úrovně shody21 . • A (minimální úroveň) — jsou splněna všechna doporučení na úrovni A. • AA (střední úroveň) — jsou splněna všechna doporučení na úrovni A a zároveň A na úrovni AA. • AAA (maximální úroveň) — jsou splněna všechna doporučení. 2. Celistvost obsahu. Úroveň shody je možné posuzovat pouze v rámci celé stránky, nelze ji omezit jen na část obsahu (nebo vyjma určité části). V případě, že část obsahu stránky není pod kontrolou autora stránky (např. vložená reklama, vkládání obsahu uživateli, připojená diskuze), je možné zvážit prohlášení o částečné shodě[54]. • Monitorovat a opravovat/odstraňovat obsah tak aby celá stránka odpovídala kritériím přístupnosti (do 2 pracovních dnů) 21 Nedoporučuje se požadovat splnění úrovně AAA pro celý web jako obecnou normu, protože pro některý obsah není možné splnit všechna kritéria úrovně AAA.

27

2. Přístupnost webu (Web Accessibility) • Vydat prohlášení o částečné shodě (přístupnosti) ve znění: „Tato stránka nesplňuje, ale splňovala by WCAG 2.0 na úrovni X, pokud by následující části z nekontrolovatelných zdrojů byly odstraněny.“ 3. Pokrytí celého procesu Pokud je posuzovaná stránka součástí komplexního procesu (např. jednotlivé kroky od výběru k nákupu zboží v e-shopu). • Je nezbytné, aby v takovém případě kritéria přístupnosti splňovaly veškeré příslušné stránky. • Na posuzované nebo vyšší úrovni (hodnocení všech se pak posuzuje podle nejslabší části) 4. Existence přístupné cesty Pokud existuje pouze jedna technologická cesta (kombinace technologií, na kterých závisí funkčnost) ke zdroji informací na webu, musí tato cesta být přístupná (pro uživatele s omezením). Pokud některá technologie (kombinace technologií) nesplňuje kritéria přístupnosti, musí existovat nejméně jedna další cesta, která bude přístupná. Existují různé technologie usnadňující přístupnost22 . Aby je uživatelé mohli používat, je nezbytné, aby: • poskytovaly prohlížečům23 všechny nezbytné informace pro prezentaci obsahu, a aby • prohlížeče uměly pracovat s těmito technologiemi (což může vyžadovat úpravy na obou stranách). 5. Neexistence překážek. Pokud použité technologie neposkytují dostatek přístupnosti (nebo jsou použity nevyhovujícím způsobem), přesto nesmí blokovat možnost přístupu uživatelů ke zbytku obsahu. Pokud se stránka snaží vyrovnat s přístupností při použití nepřístupných technologií uvnitř prohlížeče, je vzít do úvahy následující možnosti: • technologie je dostupná a povolená v prohlížeči, • technologie je dostupná ale není povolená v prohlížeči, • technologie není podporovaná v prohlížeči. Pokud se majitel webu rozhodne na splnění požadavků přístupnosti na svých stránkách upozornit, musí do deklarace zahrnout datum vložení, název a verze pravidel (včetně odkazu), úroveň splnění (A, AA nebo AAA) a další informace. 22 23

28

Assistive Technology[64], dále jen podpůrné technologie. Obecně uživatelským agentům (z angl. user agents).

2.3. První princip — Vnímatelnost

2.3

První princip — Vnímatelnost

Účelem principu vnímatelnosti[59] je zajistit, že veškerý netextový obsah je k dispozici i v textové formě (míněno elektronický text, nikoli např. text v obrázku). Takový text má totiž výhodu v obecné možnosti reprodukování. Může být interpretován vizuálně, zvukově a ještě dalšími způsoby. Především pak způsobem, které nejlépe vyhovuje požadavkům konkrétního uživatele. Následující části této podkapitoly obsahují konkrétní doporučení zahrnutá principem vnímatelnosti. V závislosti na jejich složitosti jsou upřesněna a případně doplněna poznámkami.

2.3.1

Textové alternativy

Poskytujte textové alternativy jakémukoli netextovému obsahu tak, aby bylo možné jej změnit do podoby vhodné pro daného uživatele, např. • větší písmo, • braillova řádka (výstupní zařízení), • mluvený výstup, • symboly, • jednodušší jazyk. 2.3.1.1

Netextový obsah

Veškerý netextový obsah prezentovaný uživateli má ekvivalentní textovou alternativu vyjma následujících situací: (Úroveň A) • Ovládání, vstup Pokud netextový obsah slouží k ovládání nebo vstup uživatele, potom má jméno, které popisuje jeho účel. (Dodatečné požadavky na ovládací prvky a obsah, který přijímá vstupy uživatele v Doporučení 2.6.1) • Časově závislá média Pokud je netextový obsah časově závislý, pak textové alternativy poskytují alespoň popisnou identifikaci netextového obsahu. (Dodatečné požadavky na média v Doporučení 2.3.2) • Test Pokud netextový obsah představuje test nebo cvičení, které by se textem znehodnotilo, potom textové alternativy poskytují alespoň popisnou identifikaci netextového obsahu. 29

2. Přístupnost webu (Web Accessibility) • Smyslový Pokud netextový obsah je primárně určen k vytvoření specifických vjemů, potom textové alternativy poskytují alespoň popisnou identifikaci netextového obsahu. • CAPTCHA24 Pokud je účelem netextového obsahu potvrzení, že k obsahu přistupuje člověk (nikoli počítač), potom jsou přítomny textové alternativy, které identifikují a popisují účel netextového obsahu. A jsou poskytnuty alternativní formy CAPTCHA používající výstupy pro různé smyslové vjemy, aby pokryly různé handicapy. • Dekorace, formátování, neviditelnost Pokud je netextový obsah čistou dekorací nebo je použit pouze pro vizuální formátování a nebo není uživatelům zobrazený, pak je implementovaný způsobem, že může být ignorován podpůrnými technologiemi.

2.3.2

Časová média

Poskytujte alternativy pro časová média. 2.3.2.1

Pouze audio nebo pouze video (nahrávky)

Pro audio či videonahrávky platí následující body, vyjma situací, kdy audio či video je mediální alternativou pro text a je zřetelně označeno: (Úroveň A) • Audionahrávky Pro časové médium je poskytnuta alternativa, která představuje ekvivalentní informaci pro obsah audionahrávky. • Videonahrávky Je poskytnuta buďto alternativa pro časové médium nebo zvuková stopa, která představuje ekvivalentní informaci pro obsah videonahrávky. 2.3.2.2

Titulky (nahrávek)

Pro veškeré zvukové nahrávky jsou poskytnuty titulky v rámci synchronizovaného média, vyjma situací, kdy je nahrávka mediální alternativou pro text a je takto zřetelně označena. (Úroveň A) 24

Automatizované rozlišování lidí od počítačů (z angl. Completely Automated Public Turing test to tell Computers and Humans Apart), běžně známé jako skupina deformovaných písmen, která je potřeba opsat do formuláře

30

2.3. První princip — Vnímatelnost 2.3.2.3

Zvukový popis nebo mediální alternativa (nahrávek)

Pro časová média je poskytnuta alternativa nebo zvukový popis obsahu videonahrávky pro synchronizované médium vyjma situací, kdy je nahrávka mediální alternativou pro text a je takto zřetelně označena. (Úroveň A) 2.3.2.4

Titulky (živě)

Pro veškerý přímo přenášený zvukový obsah jsou poskytovány titulky pomocí synchronizovaného média. (Úroveň AA) 2.3.2.5

Zvukový popis (nahrávek)

K veškerému obsahu videonahrávek je poskytován audio popis pomocí synchronizovaného média. (Úroveň AA) 2.3.2.6

Znaková řeč (nahrávek)

K veškerému obsahu zvukových nahrávek je poskytnuta interpretace ve znakové řeči pomocí synchronizovaného média. (Úroveň AAA) 2.3.2.7

Rozšířený zvukový popis (nahrávek)

V místech, kde mezery na popředí zvuku neumožňují zvukovému popisu dostatečně sdělit smysl videa, je poskytován rozšířený zvukový popis pro veškeré videonahrávky pomocí synchronizovaného média. (Úroveň AAA) 2.3.2.8

Mediální alternativy (nahrávek)

Pro veškerá nahraná synchronizovaná média a pro veškeré čisté videonahrávky je poskytována alternativa pro časová média. (Úroveň AAA) 2.3.2.9

Pouze audio (živě)

Je poskytována alternativa pro časové médium, která prezentuje ekvivalentní informaci pro přímý přenos zvukového obsahu. (Úroveň AAA)

2.3.3

Přizpůsobitelný obsah

Vytvářejte obsah, který je možné prezentovat různými způsoby (například jednodušší rozložení prvků) beze ztráty informace nebo struktury. 2.3.3.1

Informace a vztahy

Sdělované informace, strukturu a vztahy je možné programově určit nebo jsou dostupné v textu. (Úroveň A) 31

2. Přístupnost webu (Web Accessibility) 2.3.3.2

Smysluplné pořadí

Pokud pořadí, ve kterém je obsah prezentován, ovlivňuje jeho význam, lze programově určit správné pořadí čtení. (Úroveň A) 2.3.3.3

Vjemová charakteristika

Instrukce poskytované k porozumění a práci s obsahem nezávisí výhradně na vjemových charakteristikách jednotlivých komponent jako je tvar, velikost, vizuální umístění, orientace či zvuk. (Úroveň A) Poznámka: požadavky vztažené k barvě jsou v Doporučení 2.3.4.

2.3.4

Odlišitelné části obsahu

Umožněte (zjednodušte) uživatelům vidět a slyšet obsah včetně oddělení popředí od pozadí. 2.3.4.1

Použití barev

Barva není použitá jako jediný vizuální prostředek ke sdělení informace, indikaci akce, dotázání se na reakci nebo odlišování vizuálního prvku. (Úroveň A) Poznámka 1: Toto hodnotové kritérium se zabývá vnímáním barev. Poznámka 2: Ostatní formy vjemů jsou zahrnuty v Doporučení 2.3.3 včetně programového přístupu k barvám a kódování ostatních vizuálních reprezentací. 2.3.4.2

Ovládání zvuku

Pokud nějaký zvuk na webové stránce hraje automaticky déle než 3 sekundy, buďto je k dispozici nástroj k pozastavení nebo zastavení zvuku a nebo nástroj k ovládání hlasitosti nezávislý na systémové úrovni hlasitosti. (Úroveň A) Poznámka: Jelikož jakýkoli obsah, který nesplňuje toto kritérium, může být v rozporu se schopností uživatele používat celou stránku, veškerý obsah na webové stránce (ať je využit k naplnění ostatních kriterií či nikoli) musí toto kritérium splňovat. Vizte Požadavky shody 5: Neexistence překážek. 2.3.4.3

Kontrast (minimální)

Kontrastní poměr vizuální reprezentace textu a obrázkového textu je minimálně 4,5 : 1, vyjma následujícího: (Úroveň AA) • Velký text Kontrastní poměr velkého (obr.) textu je minimálně 3 : 1. • Vedlejší Žádné požadavky na kontrast nemá (obrázkový) text, který je součástí 32

2.3. První princip — Vnímatelnost neaktivní komponenty uživatele, který je čistě dekorativní, který je neviditelný, nebo který je součástí obrázku s významně odlišným vizuálním obsahem. • Logotypy Žádné minimální požadavky na kontrast nemá text, který je součástí loga nebo názvu značky. 2.3.4.4

Změna velikosti textu

Vyjma titulků a obrázkového textu může být text zvětšován bez využití podpůrných technologií až na 200 % beze ztráty obsahu nebo funkcionality. (Úroveň AA) 2.3.4.5

Obrázkový text

Pokud používané technologie umožňují dosáhnout vizuální reprezentace, používá se text ke sdělení informace namísto obrázkového textu vyjma: (Úroveň AA) • Přizpůsobitelného obsahu Obrázkový text lze vizuálně přizpůsobit požadavkům uživatele. • Nezbytného obsahu Konkrétní reprezentace textu je nezbytná ke sdělení dané informace. Poznámka: Logotypy (text, který je součástí loga nebo názvu značky) se považují za nezbytné. 2.3.4.6

Kontrast (rozšířený)

Kontrastní poměr vizuální reprezentace (obrázkových) textů je minimálně 7 : 1, vyjma následujícího: (Úroveň AAA) • Velký text Kontrastní poměr velkého (obr.) textu je minimálně 4,5 : 1. • Vedlejší Žádné požadavky na kontrast nemá (obrázkový) text, který je součástí neaktivní komponenty uživatele, který je čistě dekorativní, který je neviditelný, nebo který je součástí obrázku s významně odlišným vizuálním obsahem. • Logotypy Žádné minimální požadavky na kontrast nemá text, který je součástí loga nebo názvu značky. 33


Tiché nebo žádné audio na pozadí

Pro obsah audionahrávek, který • obsahuje primárně projev na popředí • není CAPTCHA nebo zvukové logo • neslouží primárně k hudebnímu účelu (jako zpěv nebo rap) splňuje aspoň jedno z následujícího: (Úroveň AAA) • Bez pozadí Nahrávka neobsahuje zvuky na pozadí. • Vypnutí Zvuk na pozadí je možné vypnout. • 20 dB Zvuky na pozadí jsou aspoň o 20 decibelů nižší než zvuk na popředí vyjma občasných zvuků, které trvají sekundu či dvě. Poznámka: Podle definice decibelu bude zvuk na pozadí v případě splnění tohoto kritéria čtyřikrát tišší než zvuk na popředí. 2.3.4.8

Vizuální reprezentace

K vizuální reprezentaci bloků textu je k dispozici mechanizmus umožňující dosažení následujícího: (Úroveň AAA) • Uživatel si může zvolit barvy na popředí a pozadí. • Šířka nepřesahuje 80 znaků nebo piktogramů (v případě CJK25 je to 40). • Text není zarovnaný do bloku (k levé a pravé hraně odstavce zároveň). • Řádkování je alespoň 1,5 a mezera mezi odstavci je minimálně 1,5krát větší než řádkování. • Text je možné zvětšit až na 200 % bez použití pomocných technologií způsobem, který pro přečtení nevyžaduje horizontální posouvání obrazovky na maximalizovaném okně. 25

34

čínské, japonské a korejské znaky

2.4. Druhý princip — Operabilita 2.3.4.9

Obrázkový text (bezvýhradně)

Obrázky s textem jsou použity výhradně k čisté dekoraci nebo tam kde tato konkrétní reprezentace textu je nezbytná pro sdělovanou informaci. (Úroveň AAA) Poznámka: Logotypy (text, který je součástí loga nebo názvu značky) se považují za nezbytné.

2.4

Druhý princip — Operabilita

Myšlenkou principu operability[60] je zpřístupnění veškeré funkcionality klávesnicí. Každá taková funkcionalita se tím zpřístupní uživatelům s klávesnicí, slovnímu ovládání (které ovládá klávesnici) nebo i myší (s použitím virtuální klávesnice) a širokou paletou podpůrných technologií, které ve svém výstupu generují úhozy do klávesnice.26 Následující části této podkapitoly obsahují konkrétní doporučení zahrnutá principem operability. V závislosti na jejich složitosti jsou upřesněna a případně doplněna poznámkami.

2.4.1

Zpřístupnění pomocí klávesnice

Zpřístupněte veškerou funkcionalitu pomocí klávesnice. 2.4.1.1

Klávesnice

Veškerá funkcionalita obsahu je ovladatelná pomocí klávesnice bez ohledu na rychlost jednotlivých úderů vyjma situací, kde základní funkce vyžaduje vstup, který závisí na pohybu uživatele a nikoli jen na konečných bodech. (Úroveň A) Poznámka 1: Uvedená výjimka se vztahuje na základní funkci, nikoli na techniku vstupu. Například technika vkládání textu ručním psaním (handwriting) závisí na pohybu vstupu, ale základní funkce (vložení textu) nikoli. Poznámka 2: Tento požadavek nezakazuje a neodrazuje od ovládání myší či od jiných vstupních metod vedle klávesnice. 2.4.1.2

Žádné uvěznění klávesnice

Pokud je možné se klávesnicí dostat (focus) na komponentu stránky, je možné jí pouze za pomoci klávesnice i opustit. A pokud toto vyžaduje více než použití šipek nebo tabulátoru či jiné standardní metody opuštění, je uživatel o způsobu opuštění komponenty vyrozuměn. (Úroveň A) 26

Z hlediska použitelnosti klávesové zkratky navíc šetří spoustu času pokročilým uživatelům nebo uživatelům, kteří na daném webu často pracují. Vždy dříve či později začnou hledat způsob, jak ušetřit každý přesun ruky z klávesnice na myš.

35

2. Přístupnost webu (Web Accessibility) Poznámka: Jelikož jakýkoli obsah, který nesplňuje toto kritérium, může být v rozporu se schopností uživatele používat celou stránku, veškerý obsah na webové stránce (ať je využit k naplnění ostatních kriterií či nikoli) musí toto kritérium splňovat. Vizte Požadavky shody 5: Neexistence překážek. 2.4.1.3

Klávesnice (bezvýhradně)

Veškerá funkcionalita obsahu je ovladatelná pomocí klávesnice bez ohledu na rychlost jednotlivých úderů. (Úroveň AAA)

2.4.2

Dostatek času

Poskytujte uživatelům dost času na přečtení a použití obsahu. 2.4.2.1

Nastavitelné časování

Pro každé časové omezení dané obsahem je splněno aspoň jedno z následujícího: (Úroveň A) • Vypnutí Uživatel může vypnout časové omezení, než se s ním setká • Nastavení Uživatel může nastavit časové omezení, než se s ním setká, přes široké rozmezí, které je alespoň desetkrát delší než výchozí nastavení • Prodloužení Uživatel je varován před vypršením času s možností prodloužit omezení aspoň o 20 sekund jednoduchou akcí (například „stiskněte mezerník“) a omezení je možné prodloužit aspoň desetkrát • Výjimka skutečnosti Časové omezení je nutnou součástí skutečné časově závislé události (například aukce) a časové omezení není možné změnit • Výjimka nezbytnosti Časové omezení je nezbytné a jeho prodloužení by znehodnotilo aktivitu • Výjimka 20 hodin Časový limit je delší než 20 hodin Poznámka: Toto kritérium pomáhá zajistit, že uživatelé mohou splnit úkony bez neočekávaných změn v obsahu nebo kontextu, které jsou výsledkem časového omezení. Toto kritérium by mělo být posuzováno ve spojení s kritériem 2.5.2.1, které omezuje změny obsahu nebo kontextu jakožto výsledek uživatelské akce. 36


Pozastavit, zastavit, skrýt

Pro pohybování, blikání, posouvání (scrolling) nebo automatické aktualizace informací je splněno vše následující: (Úroveň A) • Pohybování, blikání, posouvání Pro pohybování, blikání či posouvání informací, které 1. začíná automaticky 2. trvá déle než 5 sekund 3. prezentuje se paralelně s ostatním obsahem existuje možnost pozastavit, zastavit nebo skrýt uživatelem, pokud pohyb, blikání či posouvání není součástí aktivity, ve které je to nezbytné • Automatické aktualizace Pro automatické aktualizování informace, které 1. začíná automaticky 2. je prezentováno paralelně s ostatním obsahem existuje možnost pozastavit, zastavit nebo skrýt a nebo ovládat frekvenci aktualizací pokud automatické aktualizace nejsou nezbytnou součástí aktivity. Poznámka 1: Požadavky vztažené k blikajícímu obsahu jsou v Doporučení 2.4.3. Poznámka 2: Jelikož jakýkoli obsah, který nesplňuje toto kritérium, může být v rozporu se schopností uživatele používat celou stránku, veškerý obsah na webové stránce (ať je využit k naplnění ostatních kriterií či nikoli) musí toto kritérium splňovat. Vizte Požadavky shody 5: Neexistence překážek. Poznámka 3: Obsah, který je periodicky softwarově aktualizován, nebo který je streamován do klientské aplikace nemusí zachovávat nebo zobrazovat informace generované nebo obdržené mezi iniciací pozastavení a obnovením prezentace, ačkoli to nemusí být technicky možné a v mnoha situacích to může být zavádějící. Poznámka 4: Animace, ke které dochází v rámci připravené fáze nebo podobné situace, může být považována za nezbytnou, pokud nemůže během této fáze dojít k interakci žádného uživatele, a pokud absence indikátoru postupu může zmást uživatele nebo mu způsobit dojem, že obsah zamrzl nebo je znehodnocen. 2.4.2.3

Žádné časování

Časování není nezbytnou součástí události nebo aktivity prezentované obsahem vyjma neinteraktivního synchronizovaného média a skutečně časově závislých událostech. (Úroveň AAA) 37


Přerušení

Přerušení může být odloženo nebo potlačeno uživatelem vyjma přerušení zahrnujících naléhavost. (Úroveň AAA) 2.4.2.5

Obnovení autentizace

Pokud vyprší autentizace (session expires), může uživatel po obnovení autentizace pokračovat v aktivitě beze ztráty dat. (Úroveň AAA)

2.4.3

Způsobení záchvatu (Seizures)

Nevytvářejte obsah způsobem, který může uživateli způsobit záchvat (např. epileptický). 2.4.3.1

Tři bliknutí nebo pod úrovní blikání

Webové stránky neobsahují cokoli, co bliká více než třikrát za (libovolnou) sekundu nebo je blikání pod úrovní obecného blikání a červeného blikání (general flash and red flash tresholds). (Úroveň A) Poznámka: Jelikož jakýkoli obsah, který nesplňuje toto kritérium, může být v rozporu se schopností uživatele používat celou stránku, veškerý obsah na webové stránce (ať je využit k naplnění ostatních kriterií či nikoli) musí toto kritérium splňovat. Vizte Požadavky shody 5: Neexistence překážek. 2.4.3.2

Tři bliknutí

Webové stránky neobsahují cokoli, co bliká více než třikrát za (libovolnou) sekundu. (Úroveň AAA)

2.4.4

Umožňující navigaci

Poskytujte způsoby napomáhající uživatelům v navigování, nalezení obsahu a určení aktuálního umístění. 2.4.4.1

Obejít obsah

Je k dispozici mechanizmus umožňující obejít obsah, který se opakuje na více stránkách. (Úroveň A) 2.4.4.2

Titulky stránek

Webové stránky mají titulky, které popisují téma nebo účel. (Úroveň A) 38


Pořadí aktivování (fucus) komponent

Pokud může být stránka ovládána sekvenčně (klávesnicí) a sekvence může ovlivnit význam nebo operace, jednotlivé komponenty jsou aktivované (focused) v pořadí, které zachovává význam a provozuschopnost. (Úroveň A) 2.4.4.4

Účel odkazů (v kontextu)

Účel každého odkazu lze určit z jeho textu nebo z jeho textu společně s jeho programově určeným kontextem vyjma situací, kde obecným účelem odkazu je dvouznačnost. (Úroveň A) 2.4.4.5

Vícero způsobů

Stránku v rámci skupiny stránek je možné lokalizovat vícero způsoby vyjma případů, kde webová stránka je výsledkem nebo krokem v procesu. (Úroveň AA) 2.4.4.6

Nadpisy a označení (labels)

Nadpisy a označení popisují téma nebo účel. (Úroveň AA) 2.4.4.7

Viditelný focus

Jakékoli klávesnicí ovladatelné rozhraní má operační mód, ve kterém je viditelný indikátor aktivity (focusu). (Úroveň AA) 2.4.4.8

Umístění

Je k dispozici informace o umístění uživatele v rámci skupiny webových stránek. (Úroveň AAA) 2.4.4.9

Účel odkazu (pouze odkazy)

Je k dispozici mechanizmus umožňující určit účel každého odkazu z jeho textu vyjma situací, kde obecným účelem odkazu je dvouznačnost. (Úroveň AAA) 2.4.4.10

Nadpisy sekcí

Pro účely organizace obsahu jsou použity nadpisy sekcí. (Úroveň AAA) Poznámka 1: „Nadpis“ je použit ve svém obecném smyslu a zahrnuje titulky a další způsoby k přidání nadpisu rozdílným typům obsahu. Poznámka 2: Toto kritérium pokrývá sekce v rámci psaní, nikoli komponenty uživatelského rozhraní. Komponenty uživatelského rozhraní jsou zahrnuty v Doporučení 2.6.1.2. 39

2. Přístupnost webu (Web Accessibility)

2.5

Třetí princip — Pochopitelnost

Záměrem principu pochopitelnosti[61] je umožnit čtení textového obsahu uživateli a podpůrnými technologiemi a ujistit se, že jsou k dispozici nezbytné informace k uvědomění si, že je to možné. Handicapovaní lidé vnímají text různými způsoby. Někteří vizuálně (často všelijak upraveně), jiní zvukově a jiní třeba hmatem. Ostatní převážně vizuálně a zvukově. Následující části této podkapitoly obsahují konkrétní doporučení zahrnutá principem pochopitelnosti. V závislosti na jejich složitosti jsou upřesněna a případně doplněna poznámkami.

2.5.1

Čitelnost obsahu

Pište čitelný a pochopitelný textový obsah. 2.5.1.1

Jazyk stránky

Výchozí jazyk (řeč) každé stránky lze programově určit. (Úroveň A) 2.5.1.2

Jazyk částí

Jazyk (řeč) každé pasáže nebo fráze v obsahu lze programově určit vyjma skutečných jmen, technických termínů, slov neurčitého jazyka a hovorová slova či fráze obklopující text. (Úroveň AA) 2.5.1.3

Neobvyklá slova

Je k dispozici mechanizmus pro identifikaci specifických definic slov nebo frází použitých nezvyklými nebo omezenými způsoby včetně idiomů a žargonu. (Úroveň AAA) 2.5.1.4

Zkratky (abbreviations)

Je k dispozici mechanizmus pro identifikaci expandované formy zkratek. (Úroveň AAA) 2.5.1.5

Úroveň čtení

Pokud text po odstranění vlastních jmen a názvů vyžaduje pokročilejší úroveň čtení, než na 2. stupni základní školy, je dostupný dodatečný obsah nebo verze, která pokročilejší úroveň čtení než na 2. stupni základní školy nevyžaduje. (Úroveň AAA) 40

2.5. Třetí princip — Pochopitelnost 2.5.1.6

Výslovnost

Je k dispozici mechanizmus umožňující identifikaci specifické výslovnosti slov, jejichž význam v kontextu je bez znalosti výslovnosti dvouznačný. (Úroveň AAA)

2.5.2

Předvídatelné chování

Dělejte stránky, aby vypadaly a chovaly se předvídatelně. 2.5.2.1

Při zaměření

Když je komponenta zaměřená (focused), nezahájí se tím změna obsahu. (Úroveň A) 2.5.2.2

Při vstupu

Změna nastavení komponenty uživatelského rozhraní nezapříčiní automatickou změnu obsahu, pokud uživatel nebyl o takovém chování před použitím komponenty vyrozuměn. (Úroveň A) 2.5.2.3

Konzistentní navigace

Navigační mechanizmy, které se opakují na více stránkách v rámci skupiny stránek se pokaždé zobrazují ve stejném relativním pořadí, pokud změna není iniciovaná uživatelem. (Úroveň AA) 2.5.2.4

Konzistentní identifikace

Komponenty, které mají stejnou funkcionalitu v rámci skupiny stránek jsou identifikovány konzistentně. (Úroveň AA) 2.5.2.5

Změna na požádání

Změny kontextu jsou iniciované pouze na uživatelův podnět nebo je k dispozici mechanizmus pro deaktivace takových změn. (Úroveň AAA)

2.5.3

Asistence vstupu

Pomozte uživatelům předejít chybám či chyby opravit. 2.5.3.1

Identifikace chyby

Pokud je vstupní chyba automaticky detekována, je identifikována chybná položka a chyba je textově popsána uživateli. (Úroveň A) 41


Popisky (labels) či instrukce

Poskytujte popisky či instrukce, pokud obsah vyžaduje vstup uživatele. (Úroveň A) 2.5.3.3

Chybové návrhy

Pokud je automaticky detekován chybný vstup a jsou známé návrhy oprav, jsou návrhy poskytnuty uživateli, pokud to neohrozí bezpečnostní charakter obsahu. (Úroveň AA) 2.5.3.4

Prevence chyb (legální, finanční, datová)

Webové stránky, které zakládají legální závazky nebo finanční transakce uživatelům, které mění nebo mažou uživatelem ovládaná data z datového úložiště nebo které sbírají odpovědi na testy splňují alespoň jedno z následujících: (Úroveň AA) 1. Vratnost Požadavky jsou vratné. 2. Kontrola Data vložená uživatelem jsou kontrolovaná pro vstupní chyby a uživatel má příležitost je opravit. 3. Potvrzení Je k dispozici mechanizmus na shrnutí, potvrzení a opravu informaci před dokončením požadavku. 2.5.3.5

Nápověda

Je k dispozici kontextová nápověda. (Úroveň AAA) 2.5.3.6

Prevence chyb (všech)

Pro webové stránky vyžadující vložení informací je splněno minimálně jedno z následujících: (Úroveň AAA) 1. Vratnost — Požadavky jsou vratné. 2. Kontrola — Data vložená uživatelem jsou kontrolovaná pro vstupní chyby a uživatel má příležitost je opravit. 3. Potvrzení — Je k dispozici mechanizmus na shrnutí, potvrzení a opravu informaci před dokončením požadavku. 42

2.6. Čtvrtý princip — Robustnost

2.6

Čtvrtý princip — Robustnost

Záměrem principu robustnosti[62] je podpořit kompatibilitu se současnými a budoucími uživatelskými agenty27 — obzvláště podpůrné technologie (AT28 ). Toho je dosahováno jednak 1) ujištěním se, že se autoři nedopouští chyb, které by AT vyloženě blokovaly (např. nevalidní HTML kód) nebo je mátly (např. nekonvenční použití značkování) a 2) vystavování informací v obsahu standardním způsobem, které AT dokáží rozpoznat a dokáží jej ovládat. Následující části této podkapitoly obsahují konkrétní doporučení zahrnutá principem robustnosti. V závislosti na jejich složitosti jsou upřesněna a případně doplněna poznámkami.

2.6.1

Kompatibilita

Maximalizujte kompatibilitu se současnými a budoucími prohlížeči (uživatelskými agenty) včetně pomocných technologií. 2.6.1.1

Parsování

V obsahu implementovaném pomocí značkovacích jazyků, elementy jsou (Úroveň A): • kompletní (obsahují otevírací a uzavírací tagy) • zahnízděné (nested) v souladu se specifikací • neobsahují duplicitní atributy • veškeré identifikátory jsou unikátní vyjma situací, kde to specifikace umožňuje Poznámka: Otevírací a uzavírací tagy postrádající potřebné znaky ve svém zápisu, jako zavírací závorku či uvozovky u hodnoty atributu nejsou kompletní. 2.6.1.2

Název, role, hodnota

Je možné následující (Úroveň A): • Programově určit název a roli veškerých komponent uživatelského rozhraní (včetně například elementů formuláře, odkazů a komponent generovaných skripty) • Stavy, vlastnosti a hodnoty, které mohou být nastaveny uživatelem mohou být nastaveny programově 27

V současné době používané; tedy nejen zcela nejnovější verze. Podpůrné technologie pro lidi s handicapem (z angl. Assistive technology či adaptive technology), typicky např. naslouchátko 28

43

2. Přístupnost webu (Web Accessibility) • Oznámení o změnách těchto položek je k dispozici prohlížečům (uživatelským agentům) včetně pomocných technologií Poznámka: Toto kritérium je primárně určeno pro webové autory, kteří vyvíjí nebo skriptují vlastní komponenty uživatelského rozhraní. Například standardní HTML prvky toto kritérium automaticky splňují, pokud jsou použity v souladu se specifikací.

2.7

Normy přístupnosti

Podle dokumentu Jak postupovat při plnění povinností vyplývajících ze zákona č. 365/2000 Sb.29 , o informačních systémech veřejné správy a o změně některých dalších zákonů, ve znění pozdějších předpisů v oblasti informačních systémů veřejné správy: Pro orgány veřejné správy zákon č. 365/2000 Sb. o informačních systémech veřejné správy (ISVS)30 v § 5 odst. 2 písm. f) stanoví povinnost „postupovat při uveřejňování informací způsobem umožňujícím dálkový přístup tak, aby byly informace související s výkonem veřejné správy uveřejňovány ve formě, která umožňuje, aby se s těmito informacemi v nezbytném rozsahu mohly seznámit i osoby se zdravotním postižením“. Formu uveřejňování informací stanoví vyhláška č. 64/2008 Sb.31 , o formě uveřejňování informací souvisejících s výkonem veřejné správy prostřednictvím webových stránek pro osoby se zdravotním postižením (vyhláška o přístupnosti).

2.7.1

Forma uveřejňování informací

Vyhláška č. 64/2008 Sb., o přístupnosti, vytváří předpoklady pro to, aby handicapovaní uživatelé internetu — především zrakově a sluchově postižení, osoby s poruchami učení a soustředění a uživatelé se zhoršenou motorikou horních končetin — nebyli jakkoliv diskriminováni při získávání informací od orgánů veřejné správy prostřednictvím webových stránek; a tím napomáhá handicapovaným uživatelům dosáhnout toho, aby v běžném životě měli stejné, nebo alespoň co nevíce podobné, podmínky jako ostatní uživatelé. Základem vyhlášky č. 64/2008 Sb. se stala verze Pravidel pro tvorbu přístupného webu respektující metodiku WCAG 2.0 a připomínky handicapovaných uživatelů. Vyhláška obsahuje tabulku 33 pravidel rozdělených do šesti 29

http://www.mvcr.cz/soubor/metodicke-pokyny-jak-postupovat-pri-plneni-povinnostivyplyvajicich-ze-zakona-c-365-2000-sb.aspx 30 http://www.mvcr.cz/soubor/zakon-c-365-2000-sb-o-informacnich-systemech-verejnespravy-s-barevnym-vyznacenim-poslednich-zmen.aspx 31 http://www.mvcr.cz/soubor/vyhlaska-c-64-2008-sb-o-forme-uverejnovani-informacisouvisejicich-s-vykonem-verejne-spravy-prostrednictvim-webovych-stranek-pro-osoby-sezdravotnim-postizenim-vyhlaska-o-pristupnosti.aspx

44

2.7. Normy přístupnosti skupin s popisem a závazností. Závaznost může být povinná (P) nebo podmíněně povinná (PP). 2.7.1.1

Obsah webových stránek musí být dostupný a čitelný

• Pravidlo 1: (P) Každý netextový prvek nesoucí významové sdělení musí mít svou textovou alternativu. • Pravidlo 2: (P) Multimediální prvky nesoucí významové sdělení musí být doplněny textovými titulky, jestliže nejsou jen alternativou k existujícímu textovému obsahu. • Pravidlo 3: (PP) Pokud to charakter webových stránek nevylučuje, informace sdělované prostřednictvím skriptů, objektů, appletů, kaskádových stylů, cookies a jiných doplňků na straně uživatele, musí být dostupné i bez kteréhokoli z těchto doplňků a stránky musí být standardně ovladatelné. V opačném případě sdělí orgán veřejné správy tyto informace jiným způsobem. • Pravidlo 4: (P) Informace sdělované vizuální podobou webových stránek, tvary jednotlivých prvků, jejich velikostí, pořadím nebo umístěním musí být dostupné i v případě, že uživatel nemůže tyto aspekty vnímat. • Pravidlo 5: (P) Informace sdělované barvou musí být dostupné i bez barevného rozlišení • Pravidlo 6: (P) Barvy popředí a pozadí textu (nebo textu v obrázku) musí být vůči sobě dostatečně kontrastní, jestliže text nese významové sdělení. • Pravidlo 7: (P) Velikost písma musí být možné zvětšit alespoň na 200 % a zmenšit alespoň na 50 % původní hodnoty pomocí standardních funkcí prohlížeče. Při takové změně velikosti nesmí docházet ke ztrátě obsahu nebo funkcionality. 2.7.1.2

Práci s webovou stránkou řídí uživatel

• Pravidlo 8: (P) Obsah ani kód webové stránky nesmí předpokládat ani vyžadovat konkrétní výstupní či ovládací zařízení. • Pravidlo 9: (PP) Obsah ani kód webové stránky nesmí předpokládat ani vyžadovat konkrétní způsob použití ani konkrétní programové vybavení. Pokud je předpokládáno či vyžadováno konkrétní programové vybavení, může to být pouze z důvodu technické nerealizovatelnosti přizpůsobení obsahu a kódu webové stránky všem programovým vybavením. • Pravidlo 10: (P) Načtení nové webové stránky či přesměrování musí být možné jen po aktivaci odkazu nebo po odeslání formuláře. 45

2. Přístupnost webu (Web Accessibility) • Pravidlo 11: (P) Načtení nové webové stránky do nového okna prohlížeče musí být možné jen v odůvodněných případech a uživatel na to musí být předem upozorněn. • Pravidlo 12: (P) Na webové stránce nesmí docházet rychleji než třikrát za sekundu k výrazným změnám barevnosti, jasu, velikosti nebo umístění prvku. • Pravidlo 13: (P) Zvuk, který zní na webové stránce déle než tři sekundy, musí být možné na této webové stránce vypnout nebo upravit jeho hlasitost. • Pravidlo 14: (PP) Časový limit pro práci s webovou stránkou musí být dostatečný. Pokud to nevylučuje charakter webové stránky, může uživatel časový limit prodloužit nebo vypnout. 2.7.1.3

Informace musí být srozumitelné a přehledné

• Pravidlo 15: (PP) Webové stránky musí sdělovat informace jednoduchým jazykem a srozumitelnou formou, pokud to charakter webové stránky nevylučuje. • Pravidlo 16: (P) Rozsáhlé obsahové bloky musí být rozděleny do menších výstižně nadepsaných celků. • Pravidlo 17: (PP) Bloky obsahu, které se opakují na více webových stránkách daného orgánu veřejné správy, je možné přeskočit. Pokud webové stránky nemají velký rozsah, nemusí být zajištěno přeskočení opakujících se bloků obsahu. 2.7.1.4

Ovládání webových stránek musí být jasné a srozumitelné

• Pravidlo 18: (P) Navigace musí být srozumitelná a konzistentní a na všech webových stránkách orgánu veřejné správy obdobná. Od ostatního obsahu webové stránky musí být zřetelně oddělena. • Pravidlo 19: (P) Každá webová stránka (kromě úvodní webové stránky) musí obsahovat odkaz na vyšší úroveň v hierarchii webových stránek a odkaz na úvodní webovou stránku. • Pravidlo 20: (PP) Pokud se jedná o rozsáhlejší webové stránky, musí být kromě navigace k dispozici rovněž vyhledávání nebo odkaz na mapu webových stránek. Odkaz na mapu webových stránek nebo vyhledávací formulář musí být k dispozici na každé webové stránce. • Pravidlo 21: (P) Každá webová stránka musí mít výstižný název odpovídající jejímu obsahu. 46

2.7. Normy přístupnosti • Pravidlo 22: (P) Každý formulářový prvek musí mít popisek vystihující požadovaný obsah. • Pravidlo 23: (PP) Pokud uživatel učiní chybu při vyplňování webového formuláře, musí být k dispozici informace o tom, ve které položce je chyba. Pokud to charakter webového formuláře nevylučuje, musí být k dispozici rovněž informace, jak tuto chybu odstranit. • Pravidlo 24: (P) Text odkazu nebo jeho přímo související text musí výstižně popisovat cíl odkazu. Jestliže odkaz vede na jiný typ souboru, než je webová stránka, musí být odkaz doplněn sdělením o typu, případně o velikosti tohoto souboru. • Pravidlo 25: (P) Každý rám musí mít vhodné jméno či popis vyjadřující jeho smysl a funkčnost. 2.7.1.5

Zdrojový kód musí být technicky způsobilý a strukturovaný

• Pravidlo 26: (P) Sémantické značky, které jsou použity pro formátování obsahu, musí být použity ve zdrojovém kódu tak, aby odpovídaly významu obsahu. • Pravidlo 27: (P) Prvky značkovacího jazyka, které jsou párové, musí mít vždy uvedenu počáteční a koncovou značku. Značky musí být správně zanořeny a nesmí docházet k jejich křížení. • Pravidlo 28: (P) Ve zdrojovém kódu musí být určen hlavní jazyk obsahu webové stránky. • Pravidlo 29: (P) Prvky tvořící nadpisy a seznamy musí být korektně vyznačeny ve zdrojovém kódu a musí být výstižné. • Pravidlo 30: (P) Je-li tabulka použita pro zobrazení tabulkových dat, musí obsahovat značky pro záhlaví řádků nebo sloupců. • Pravidlo 31: (P) Obsah všech tabulek musí dávat smysl čtený po řádcích zleva doprava. 2.7.1.6

Prohlášení o přístupnosti webových stránek

• Pravidlo 32: (P) Každá webová stránka musí vždy obsahovat prohlášení o tom, že forma uveřejnění informací je v souladu s touto vyhláškou (prohlášení o přístupnosti) nebo odkaz na toto prohlášení. • Pravidlo 33: (PP) Pokud orgán veřejné správy některá z podmíněně povinných pravidel uvedených pod čísly položek 3, 9, 14, 15, 17, 20 a 23 v souladu s uvedenou podmínkou neuplatní, musí uveřejnit tuto 47

2. Přístupnost webu (Web Accessibility) informaci v prohlášení o přístupnosti, a to jejich číselným výčtem, včetně příslušného odůvodnění.

2.7.2

Metodický pokyn

K podrobnějšímu vysvětlení a upřesnění vydalo ministerstvo Metodický pokyn k vyhlášce č. 64/2008 Sb.32 , o formě uveřejňování informací souvisejících s výkonem veřejné správy prostřednictvím webových stránek pro osoby se zdravotním postižením (vyhláška o přístupnosti). Tento metodický pokyn podrobně popisuje jednotlivá pravidla, která jsou uvedena v příloze vyhlášky. 2.7.2.1

Přístupné webové stránky

Orgánům veřejné správy není bráněno postupovat při zveřejňování informací na webových stránkách i podle dalších všeobecně uznávaných pravidel nebo technických norem, pokud jsou v souladu s pravidly uvedenými v příloze vyhlášky o přístupnosti. Pravidla uvedená v příloze vyhlášky o přístupnosti jsou kompromisem mezi technologickými možnostmi umožňujícími handicapovaným občanům přístup k informacím a reálnými možnostmi orgánů veřejné správy (mezi které patří i nejmenší obce). Orgán veřejné správy se může rozhodnout, zda informace související s výkonem veřejné správy uveřejňované na svých webových stránkách uveřejní: • v jedné verzi, která bude splňovat pravidla uvedená v příloze vyhlášky o přístupnosti, nebo • ve více verzích, – z nichž jedna bude výslovně určena osobám se zdravotním postižením (dále jen „přístupná verze“), – přístupná verze byla uživatelům se zdravotním postižením snadno dostupná z verze, která požadavky dané pravidly obsaženými v příloze vyhlášky o přístupnosti nesplňuje. Z hlediska efektivity správy i údržby webové prezentace je vhodnější mít pouze jednu verzi webové prezentace. • Z tohoto důvodu doporučujeme vytvořit pouze jednu verzi webové prezentace, která vyhovuje pravidlům přístupnosti. 32

http://www.mvcr.cz/soubor/metodicky-pokyn-k-vyhlasce-c-64-2008-sb-o-formeuverejnovani-informaci-souvisejicich-s-vykonem-verejne-spravy-prostrednictvim-webovychstranek-pro-osoby-se-zdravotnim-postizenim-vyhlaska-o-pristupnosti.aspx

48

2.8. Testování přístupnosti • Pokud orgán veřejné správy vytváří nové webové stránky, je třeba, aby již ve fázi návrhu webové prezentace uplatnil pravidla uvedená v příloze vyhlášky o přístupnosti, a to pouze v jediné verzi webových stránek Tuto podmínku je vhodné uvést do zadávací dokumentace pro výběrové řízení na vytvoření nových webových stránek. 2.7.2.2

Pravidla přístupného webu

Obsahem 3. části dokumentu Metodický pokyn k vyhlášce č. 64/2008 Sb.[7] je vždy v úvodu každé části kurzívou uvedeno pravidlo z přílohy vyhlášky o přístupnosti, a dále následuje vlastní komentář. V závěru komentáře ke každému pravidlu je zveřejněno určení, zda je pravidlo povinné či podmíněně povinné. Splnění většiny pravidel uvedených v příloze vyhlášky o přístupnosti je pro orgán veřejné správy povinné. Některá pravidla jsou však označena jako podmíněně povinná. Neznamená to ale, že by se tvůrce/správce webových stránek mohl rozhodnout sám z vlastní vůle, zda takto označené pravidlo splní či ne. Vždy se musí rozhodnout v závislosti na podmínce uvedené v pravidle. Např. pravidlo č. 17 musí webové stránky s větším rozsahem splnit vždy, webové stránky malého rozsahu mají možnost toto pravidlo nesplnit, avšak toto nesplnění musí v prohlášení o přístupnosti odůvodnit tak, aby bylo jednoznačně patrné, že se na něj podmínka uvedená v pravidle vztahuje. Pravidla se vztahují k tvorbě webových stránek a nebylo jejich cílem stanovovat podmínky pro práci se soubory, které též mohou sloužit ke zveřejnění některých informací (například soubory ve formátu PDF).

2.8

Testování přístupnosti

Testování přístupnosti je (na rozdíl od testování použitelnosti) relativně jasné i na pokročilé úrovni. Kontrolu některých pravidel sice není možné automatizovat, ale i ty uživatelské testy spočívají ve vyplnění tabulek s pravidly. K testování (nějaké konkrétní úrovně) přístupnosti je tedy možné použít automatizované nástroje nebo uživatelské testy (posouzení). 1. Automatizované testy jsou obecně • rychlejší a pohodlnější, ale • nedokáží identifikovat/posoudit všechny nedostatky v přístupnosti. 2. Uživatelské testování může pomoci se zajištěním • srozumitelnosti jazyka a • jednoduchosti navigace. 49

2. Přístupnost webu (Web Accessibility) Uživatelské testování přístupnosti by mělo být prováděno uživateli, kteří jsou obeznámeni s různými typy postižení/omezení. Testování přístupnosti by se mělo provádět od nejranějších fází vývoje webu a jeho obsahu. Takový přístup umožní včasnou identifikaci existujících problémů a jejich snadnější nápravu a předcházení. Včasnosti (a frekvenci) testování se věnuje podkapitola 3.6.1.

2.8.1

Nejdůležitější metody testování[58]

• Použití automatizovaných nástrojů (a nástrojů dostupných v prohlížečích) S vědomím jejich omezení a nedostatečnosti takových nástrojů (např. neschopnosti pochopit smysl textů a posouzení jejich relevance k danému obsahu — odkazu, obrázku, . . . ) • Validace syntaxe dokumentů (např. HTML) • Validace (kaskádových) stylů (např. CSS) • Použití čistě textových prohlížečů nebo emulátorů • Použití široké palety grafických prohlížečů za různých podmínek (situací) – včetně načtených zvuků a grafiky – bez načtené grafiky – bez načtených zvuků – bez použití myši – bez interpretace rámů, skriptů, stylů, apletů, . . . • Použití různých verzí prohlížečů (starých i moderních) • Použití čtecích prohlížečů (příp. hlasových rozšíření prohlížečů), hlasových čteček, software pro zvětšování obrazovky, malé obrazovky, atd. • Použití kontroly překlepů a gramatiky – pro předejití problémům s pochopením čteného textu s překlepy při použití hlasového syntetizátoru – pro odstranění problémům s porozuměním textů obsahujících gramatické chyby • Posuzování obsahu dokumentu z pohledu jednoduchosti a čitelnosti – použitím mj. statistických ukazatelů v rámci textových procesorů – recenzemi zkušených editorů 50

2.8. Testování přístupnosti – zvážením možných citlivých kulturních rozdílů různých skupin uživatelů při použití jazyka nebo ikon • Pozvání uživatelů s postižením/omezením k recenzi dokumentů – včetně nováčků i zkušených uživatelů

2.8.2

Testování je komplexní proces

Podrobnosti o jednotlivých aspektech testování přístupnosti je možné nalézt v následujících dokumentech:[57] • Předběžné zhodnocení přístupnosti webu • Posuzování shody s doporučeními pro dosažení přístupnosti • Způsoby hodnocení přístupnosti pro specifické situace • Zahrnutí uživatelů do procesu testování přístupnosti • Kritéria a způsob výběru nástrojů pro hodnocení přístupnosti • Seznam nástrojů pro hodnocení přístupnosti • Způsob kombinování různých odborností při posuzování přístupnosti • Šablona pro zprávu o výsledcích a závěrech testování přístupnosti

2.8.3

Nástroje pro automatické testování

Komplexní automatické testování přístupnosti je v současnosti nemožné. Je však možné používat širokou škálu (polo)automatických nástrojů k alespoň formální kontrole některých základních prvků přístupnosti webu. K dispozici jsou seznamy (aplikace pro výběr) takovýchto nástrojů: • „Kompletní“ seznam nástrojů33 • Výběr vhodného nástroje na základě jednoduchých kritérií34 • Výběr vhodného nástroje na základě složitějších kritérií35 Doporučuje se nástroje kombinovat — alespoň 2 různé s dostatečným pokrytím některých skupin testů. Automatické testování může být velmi přínosné, pokud se realisticky interpretuje — tedy s vědomím (principiální) omezenosti automatických nástrojů (např. neschopnosti porozumět přirozenému jazyku). 33

http://www.w3.org/WAI/ER/tools/complete http://www.w3.org/WAI/ER/tools/simple 35 http://www.w3.org/WAI/ER/tools/advanced 34

51

2. Přístupnost webu (Web Accessibility) Testování promocí (polo)automatických nástrojů je nezbytné následně doplnit o hodnocení skutečnými uživateli se znalostí problematiky přístupnosti a (ideálně) konkrétních omezení handicapovaných uživatelů webu.

2.8.4

Formalizace výstupu z testování

Konečným cílem testování je zlepšení stavu, tedy přístupnosti. Pro dosažení tohoto cíle je potřeba mít dostatek informací. WAI proto navrhuje šablonu pro vhodný výstup z testování, který obsahuje následující části:[63] 1. Úřední zhodnocení (Executive Summary) Finální zhodnocení webu/stránky, zda ne/splňuje normy přístupnosti a na jaké úrovni, podle jaké specifikace 2. Pozadí testování Datum a způsob (polo/automatický, uživatelský) testování/hodnocení 3. Informace o hodnoceném webu/stránce Jméno a účel webu, výchozí URL36 , testované URL, netestované URL (vyloučené z testování), přesné datum (časový interval) testování, přirozený jazyk webu 4. Informace o hodnotitelích Jméno hodnotitelů/týmů/anonymní a jejich příslušnosti k organizaci (pokud je důležitá), jejich kontaktní informace, (oblast) kvalifikace hodnotitelů ve vztahu k odborné způsobilosti týmu, jazykové znalosti (a jejich úroveň) členů týmu 5. Popis průběhu hodnocení úroveň testování, seznam kontrolovaných bodů doporučení (nezbytné), použité nástroje (a jejich verze), popis způsobu a cíle uživatelského testování 6. Výsledky a z nich plynoucí doporučení Interpretace výsledků testů (splnění/nesplnění normy, silné stránky přístupnosti, doporučení priorit při řešení nedostatků), detailní seznam nesplněných bodů doporučení (včetně odkazů na doporučení, výstupů testovacích nástrojů), doporučení nástrojů pro průběžné monitorování přístupnosti 7. Reference Seznam materiálů, norem a doporučení přístupnosti 8. Přílohy Detailní výstupy nástrojů pro kontrolu přístupnosti 36 Jednotný lokátor zdrojů (z angl. Uniform Resource Locator) k jednoznačnému určení umístění zdrojů informací na internetu

52

KAPITOLA

Použitelnost webu (Web Usability) Použitelnost jako taková je problematika starší než internet, neboť ve své podstatě vychází z aplikací grafického rozhraní (GUI37 ), které tu byly dávno před internetem. Použitelnost jako problematika však provází lidstvo ještě daleko déle. Řízení automobilu, ovládání (auto)rádia či televize — všechno s použitelností přibírá na efektivitě (a potažmo bezpečnosti). Nové technologie v čele s internetem dodaly použitelnosti další rozměr. Tato kapitola zachycuje použitelnost z internetového prostředí, avšak zohledňuje i jiná média než běžný kancelářský či domácí počítač (nebo notebook). Problematika webové použitelnosti je velmi rozsáhlá a často spíše psychologická38 . Na rozdíl od (techničtější) teorie webové přístupnosti není standardizovaná ani jinak ucelená. Globálně uznávaným guruem v této oblasti je Jakob Nielsen. Právě k jeho závěrům postavených na rozsáhlých studiích se ostatní autoři dlouhodobě přibližují. Především právě o jeho publikace se opírá tato kapitola věnovaná použitelnosti. První podkapitola se věnuje základním informacím o použitelnosti. Definuje použitelnost jako termín a ukazuje, proč je důležitá. Mezi základní diskutované otázky patří důležitost navigace a její formy a dále obsah úvodní stránky, jakožto nejnavštěvovanější stránky webu. Dokonce někteří vývojáři mají tendence tyto zcela zásadní faktory podceňovat a dělají v nich chyby s katastrofickými dopady39 . (Samozřejmě je k tomu často tlačí zákazník.) 37

Grafické uživatelské rozhraní (z angl. Graphical User Interface) Příkladem je hledání (tramvajového) spoje uživatelem na počítači z pohodlí a klidu domova oproti typicky hektickému použití mobilní aplikace pro vyhledávání spojů za chůze v případě, kdy tramvaj ujela a uživatel potřebuje okamžitou alternativu (aby stihl schůzku). 39 Obtěžující vysouvací nabídky menu, které na dotykových mobilech proste nefungují, nekonečná animace Flash na úvodní stránce (nedejbože se zvukem) a podobně. 38

53

3

3. Použitelnost webu (Web Usability)

3.1

Základy webové použitelnosti

Použitelnost je definována jako kvalitativní atribut ukazující, jak snadno se dají pochopit a používat uživatelská rozhraní. Termín „použitelnost“ také poukazuje na metody vylepšování jednoduchosti používání během procesu tvorby UI.[39] ISO40 definuje použitelnost jako „Oblast, v rámci které mohou uživatelé uspokojivě a efektivně používat produkt k dosažení specifických cílů v daném rozsahu použití.“ Vedle definice uvádí teorie použitelnosti 5 základních kvalitativních součástí[39][69]: • Naučitelnost (Learnability): Jak snadno uživatelé splní základní úkon při prvním setkáním s UI? • Efektivita (Efficiency): Jak rychle jsou uživatelé schopni vykonávat úkony poté, co se UI naučí používat? • Zapamatovatelnost (Memorability): Jak snadno si uživatelé obnoví dříve získané dovednosti po delším čase nepoužívání UI? • Chybovost (Errors): Jak moc uživatelé chybují (jak často a jak závažně) a jak se z toho dokáží zotavit? • Spokojenost (Satisfaction): Jak příjemné je používání UI? ISO/TR41 16982:2002 („Ergonomie interakce člověka se systémem — Metoda použitelnosti podporující design orientovaný na uživatele“)[69] je standard poskytující informace pro metody použitelnosti zaměřené na uživatele, které je možno použít pro navrhování a ohodnocování. Rozvádí výhody, nevýhody a ostatní faktory relevantní k používání jednotlivých metod použitelnosti. Vysvětluje souvislost stavu aplikace v životním cyklu s individuálními charakteristikami projektu pro výběr metody použitelnosti a poskytuje příklady metod použitelnosti v daném kontextu. Předními uživateli standardu ISO/TR 16982:2002 jsou projektoví manažeři. Standard poukazuje na technické lidské faktory a ergonomické záležitosti pouze na nezbytně nutné úrovni, aby umožnil manažerům pochopit vztah a důležitost k návrhovému procesu jako celku. Zasazení obsažené problematiky do kontextu manažersky-obchodního modelu a životního cyklu aplikace je námětem pro rozšiřující práci. ISO 9241 („Ergonomie interakce člověka se systémem“)[68] je víceúčelový standard pokrývající množství aspektů práce člověka s počítačem. První část je obecné představení zbytku standardu. Druhá část poukazuje na návrh úkolu 40

Mezinárodní organizace pro normalizaci (z angl. International Organization for Standardization) 41 Technická zpráva Mezinárodní organizace pro normalizaci (z angl. International Organization for Standardization / Technical Report)

54

3.1. Základy webové použitelnosti pro práci s počítačovými systémy. Části 3 – 9 se zabývají fyzickými charakteristikami počítačového vybavení. Část 110 (vznikla jako zvětšení „adresního prostoru“ části 10) a části 11 – 19 se zabývají softwarovými aspekty. Z toho část 110 je obecný seznam heuristik použitelnosti pro různé typy dialogů a část 11 obecná doporučení na specifikování a měření použitelnosti.

3.1.1

Důležitost použitelnosti

Na webu je použitelnost nezbytnou podmínkou existence. Na rozdíl od skutečného světa je ve virtuálním světe internetu konkurence od uživatele vzdálena „na jediné kliknutí“. Nejjednodušší obranou návštěvníků je tedy web opustit (a nikoli se s ním učit pracovat, jak je častou představou některých majitelů webů). Návštěvníci odchází, pokud: • se web špatně používá, • domovská stránka jasně nesděluje, co nabízí a co je možné na ní dělat, • se na webu ztratí, • se informace špatně čtou nebo, • web nenaplňuje očekávání uživatele. Mimo opuštění se použitelnost promítá i do ekonomických ukazatelů. První pravidlo e-komerce42 říká: „pokud uživatel produkt nenajde, nemůže si ho ani koupit.“ Použitelnost intranetů (firemních informačních systémů) určuje produktivitu zaměstnanců. Čas promarněný tápáním na intranetu stojí zaměstnavatele peníze.[39] Ilustrativním příkladem důležitosti použitelnosti jako takové budiž mobilní telefony jisté značky, které (za více peněz) nabízí uživatelům méně funkcionality než konkurenční telefony. Vykoupeno prvotřídní použitelností (vlastně jediná pozitivní odlišnost od konkurence) však značka na trhu dlouhodobě dominuje navzdory relativně vysokým cenám. Nadprůměrně vysoké ceny (vzhledem k parametrům telefonu) si drží i starší telefony této značky.

3.1.2

Použitelnost navigace

Společné stránky jednoho webu je vždy nutné vzájemně provázat43 . Toho lze docílit několika způsoby. Podle současných zjištění uživatelé pozorují přímo 42

Elektronické obchodování (též elektronická komerce, e-komerce) je forma obchodování, která k realizaci obchodních transakcí (s vlastními organizačními jednotkami, s dodavateli, se zákazníky) podstatným způsobem používá moderní elektronické komunikační prostředky. Základní infrastrukturu v tomto smyslu představuje v současnosti Internet a zejména jeho „webová část“, ale často jsou používány i další elektronické prostředky, například elektronická pošta, telefon nebo platební karty.[1] 43 Aby nevznikaly takzvané sirotčí stránky[27], ze kterých není pro uživatele cesty dál.

55

3. Použitelnost webu (Web Usability) obsahovou část stránky a navigační oblast ignorují. Pokud není obsah relevantní, odcházejí. Většinou nevědí, kde na stránce se nalézají, ale dokud mají kýženou informaci, nikterak je to nezajímá. Uživatelé bývají zaměřeni na svůj konkrétní cíl. Hledají pouze svůj cíl a neztrácí čas s okolními prvky. Často se obrací na vyhledávání, ale zřídkakdy koukají na logo nebo slogany a další okrajové prvky.[17] Existuje několik způsobů, jak efektivně jednotlivé stránky webu mezi sebou vzájemně provázat. Teorie doporučuje používání několika typů navigace:[18] 1. Teorie doporučuje užívání generických odkazů. Omezit se na několik málo odkazů a neuvádět všechny možnosti webu na každé stránce. Vhodným příkladem generického odkazu je vyhledávání, protože tam se uživatelé obrací, pokud se ztratí. A to se může stát teoreticky kdekoli. 2. Velice důležitým navigačním prvkem je drobečková navigace[4], která umožňuje uživatelům snadný přístup do všech nadřazených kategorií a jednoduše (nenáročně) zobrazuje jakkoli hlubokou cestu k informaci. Bez drobečkové navigace vznikají výše zmíněné sirotčí stránky. 3. Osvědčenou metodou provazování stránek je lokální odkazování. Je dobré odkazovat přirozeně (přímo v textu) na zboží, které je k tomu aktuálnímu v nějakém vztahu (podobné produkty o něco dražší či levnější, substituty a komplementy, biografie autora a seznam jeho dalších článků, komentáře či jiná diskuze k tématu). Za chybný lze považovat přístup, kdy je všude nabízeno zboží, které je zrovna příliš naskladněné. 4. Nejoblíbenější alternativou navigace na webu je mapa stránek. Z dlouhodobého pohledu se kvalita mapy stránek (stejně jako struktury obsažených informací) zlepšuje.[33] Mezi další známé navigační metody patří záložky (taby). Jsou zřejmé, nepřehlédnutelné, vizuálně zpestřují web a evokují fyzický prostor (vytváří iluzi, že se aktivní záložka fyzicky přesunula vpřed). Navíc je uživatelé „dobře znají“ ze soudobých prohlížečů.[4] Navzdory těmto zjevným výhodám má záložková metoda navigace své stinné stránky. To se týká především relativně obtížného řešení horizontální flexibility. Umístění záložek do více řad vyžaduje jejich přehazování (zvolená záložka vždy v nejnižší řadě), což může uživatele snadno zmást. Záložky navíc nepodporují víceúrovňovou hierarchii a dobře fungují pouze na jedné (nejvyšší) úrovni. Samostatnou kapitolou mohou být také velká grafická „mega menu“[20]. Tato kombinace (poměrně rozšířené) vysouvací nabídky[12] s prostorným vizuálním členěním však po vysouvací nabídce dědí i neblahé vlastnosti a snadno může být i kontraproduktivní[21]. Těmto navigačním prvkům je potřeba věnovat zvláštní pozornost. 56

3.1. Základy webové použitelnosti U malých a středních komerčních webů stále převažují typické (grafické) nabídky menu — vertikální či horizontální, čímž veškerá navigace hasne. S odvoláním, že jsou na to uživatelé zvyklí, majitelé webů nezajímá, že taková navigace je z hlediska obsahu i hierarchie velmi omezující a i jinak neefektivní44 .

3.1.3

Desatero domovské stránky

Domovská stránka (dále jen HP) patří mezi nejnavštěvovanější stránky webu. Je to virtuální tvář společnosti a výchozí bod pro velkou část uživatelů. Proto je dobré navrhování obsahu HP věnovat zvláštní pozornost. HP by měla odpovídat na fundamentální otázky uživatele: 1. Co to je? 2. Co tu mají? 3. Co tu můžu dělat? 4. Proč to mám dělat tady a ne jinde? Odpovědi na tyto otázky by HP měla podávat jasně stručně a jednoznačně — bez potřeby dalšího pátrání. Typický zákazník si neuvědomuje, že uživatel o jeho firmě neví, co on nebo jeho zaměstnanec a proto tyto faktory často podceňuje. HP slouží firmám k získání rychlého dojmu o společnosti za účelem budování obecně libovolného obchodního vztahu. Proto je na HP kladen důraz bez ohledu na to, zda stránky přímo prodávají službu či zboží a tedy bez ohledu na přímé zisky internetového prodeje.[37] Desatero doporučení, které Jakob Nielsen sestavil pro zvýšení použitelnosti HP a tím podpoření hodnoty byznysu, který stránka propaguje. Jednotlivé myšlenky desatera jsou doplněné o odůvodnění či ilustrativní příklady: 1. Začněte HP shrnutím činnosti vlastní firmy. • Běžný uživatel o vaší firmě neví, co vy jako např. majitel. • Především, pokud slogan vaší firmy je příliš obecný: „S námi k lepším zítřkům“. 2. Napište titulek stránky s dobrou viditelností ve vyhledávačích a v seznamu oblíbených položek. • „Vítejte na. . . “ nebo „-=:Název firmy:=-“ není dobrý příklad. 3. Seskupte veškeré firemní informace do jedné samostatné oblasti. 44 Nevyužitá prázdná plocha ve sloupci pod vertikální nabídkou (např. Wikipedie) a podobně.

57

3. Použitelnost webu (Web Usability) • Typicky „O firmě XY“. • Slouží pro podporu náborů, vztahů s investory nebo PR. 4. Zdůrazněte prioritní účely stránky. • Jasný výchozí bod pro 1 – 4 hlavní úkony, které mohou na webu realizovat. 5. Začleňte na HP vyhledávání. • Podle testování má být vyhledávací pole široké 27 znaků. • Pojmenujte přímo vyhledávací tlačítko (např. „Vyhledat“), místo použití nadpisu (oblasti/formuláře). 6. Zobrazte ukázky skutečného obsahu. • Neomezujte se pouhými popisem, co je za HP. • Ukažte skutečný obsah toho nejlepšího nebo nejnovějšího. 7. Zahajujte názvy odkazů klíčovými slovy. • To umožní rychlejší orientaci v odkazech. • Častým porušením je začínat odkazy názvem firmy. 8. Nabídněte snadný přístup k tomu nejnovějšímu a do archivu. • Dříve odkazované stránky z HP se uživatelům špatně hledají, pokud neposkytnete archív. 9. Nepřehánějte grafické formátování důležitých prvků HP. • Uživatelé grafiku často přehlížejí — „bannerová slepota“[9]. • Cokoli vypadá jako propagace je ignorováno[13]. 10. Používejte smysluplnou (významovou) grafiku. • Fotka skutečného zaměstnance je lepší než modelka z obrázkových databází. Některé body desatera se dají zobecnit na celý web. Za účelem agregace doporučení celého webu a naopak upozornění na nejčastější pochybení vznikla následující podkapitola. 58

3.2. Co neopomenout a čeho se vyvarovat

3.2

Co neopomenout a čeho se vyvarovat

Při navrhování a vytváření webových aplikací (a jejich obsahů) je dobré znát jak dobré zvyky, tak se poučit z přímých chyb druhých. To ve výsledku nutí vývojáře k zamyšlení, jak vzniklou situaci vyřešit, aniž by opakoval chyby, které už jednou považoval za prokázané. Ideálním přístupem k objevené chybě je takové řešení, které je v souladu s dobrými zvyky a neobsahuje žádnou položku ze seznamu nejčastěji porušovaných pravidel.

3.2.1

Dobré zvyky webdesignu

Dobré zvyky webdesignu45 z pohledu použitelnosti poukazují na osvědčené přístupy, které by měl každý vývojář mít na paměti. Na jedné straně jde o striktní doporučení (např. používat titulky odkazů) a na druhé straně obecná zobecnění (např. konvenční přístup k webu jako celku, přístupnost, členitost a struktura obsahu a podobně). Desatero (rozšířené o dvě dodatečné položky) dobrých zvyků webdesignu, které Jakob Nielsen sestavil za účelem zvýšení použitelnost potenciálně každé stránky webu[34]. Jednotlivé položky jsou upřesněny či doplněny o příklady s případným odkazem na rozšiřující informace: 1. Jméno a logo na každé stránce • jako odkaz na domovskou stránku (s výjimkou domovské stránky) 2. Vyhledávání • na webu s více než 100 stránkami 3. Přímočaré a jednoduchá pojmenování (nadpisy, titulky, odkazy, . . . ) • vystihující obsah stránky (vytržené z kontextu či jako výsledek vyhledávání) • začínající nejdůležitějším slovem[22] 4. Strukturovaný obsah stránky • umožňující rychlou orientaci v textu a jeho čtení[17] • např. rozdělit dlouhý seznam do více menších skupin oddělených podnadpisy 5. Členění obsahu stránky 45

Webdesign je činnost, při které jsou navrhovány webové stránky a webové aplikace. Spočívá v návrhu struktury a vzhledu webových stránek, přičemž pro realizaci se používají zejména technologie HTML (pro strukturu a textový obsah) a CSS společně s obrázky (PNG, GIF, JPEG), které tvoří grafickou podobu webu.[3]

59

3. Použitelnost webu (Web Usability) • na menší tématické podstránky provázané odkazy • např. odkazy na detaily produktu 6. Používání fotografií (např. produktů) • ústřední obrázek s odkazem na • galerii s detaily podle potřeb • např. stránka s produktem v e-shopu 7. Náhledy obrázků zobrazující to podstatné • jako kombinace zmenšení a ořezu (nikoli prosté zmenšení) 8. Titulky odkazů[40] • upřesňující cíl odkazu (dříve, než uživatel klikne) • např. „Adresy poboček společnosti“ k odkazu „. . . na kontaktních místech. . . “ • např. „Kliknutím zvětšit obrázek“ pro odkaz z náhledu 9. Přístupnost (důležitých) stránek (kapitola 2) • pro postižené uživatele (např. zrakově) 10. Konvenční přístup k webu • aby jej uživatelé mohli používat stejně jako ostatní weby • např. rozložení znaků na klávesnici 11. Používejte flexibilní rozložení prvků (liquid layout) • umožněte uživatelům přizpůsobit rozměr stránky svým potřebám 12. Používejte grafiku doplňující obsah • nikoli pouze pro dekoraci

3.2.2

Zásadní chyby webdesignu

Ne vždy se dá jednoduše říci, že chyby webdesignu jsou jednoduchou negací dobrých zvyků. Tvrzení v obou skupinách jsou často implikacemi. Seznamy chyb ukazují, co je špatně, ale často konkrétně neříkají, jak to má být správně. Řešení (byť teoretických) může totiž být více v závislosti na konkrétní situaci, a nebo je řešení pro tento zjednodušený výčet příliš komplexní (a je třeba vysvětleno později nebo v odkazovaných zdrojích). Seznam zásadních chyb webdesignu, který vznikl jako agregace nejčastějších chyb webdesignu z více studií Jakoba Nielsena. Jednotlivé body jsou doplněny o upřesnění či ilustrativní příklady a případně o rozšiřující zdroje:[36] 60

3.2. Co neopomenout a čeho se vyvarovat 1. Špatné vyhledávání[32] • špatné výsledky vyhledávání (příliš mnoho/málo/nerelevantní) • špatná organizace/kategorizace/vizualizace výsledků 2. Nevhodný formát obsahu[29] • obsah byl původně tvořen pro jiné médium (např. tisk) něž web • např. leták v PDF nebo JPEG 3. Nestandardní obarvování odkazů[10] • odlišitelné od okolního textu • rozlišitelné navštívené a nenavštívené odkazy 4. Špatně strukturovaný/nestrukturovaný text • neumožňuje jeho rychlé načtení a orientaci v něm[17] • omezuje možnosti indexace vyhledávacích strojů 5. Absolutní (fixní) velikost písma • zamezuje přizpůsobení velikosti písma preferencím uživatele[19] 6. Pevné rozložení prvků stránky (fixní layout) • např. s pevnou šířkou 7. Nevýstižné titulky stránek • obsahově/délkou/podstatnými slovy 8. Prvky připomínající reklamu • slepota vůči bannerům[9] • animované prvky rozptylující pozornost • blokování vyskakovacích (pop-up) oken 9. Porušování konvencí (zvyklostí) designu • např. nekonzistentní či neobvyklé chování prvků 10. Otevírání nových oken prohlížeče • mate uživatele (zmizí tlačítko Zpět) a zanáší mu obrazovku 11. Nerelevantní odpovědi na dotazy uživatelů • např. vyhýbání se uvádění cen 61

3. Použitelnost webu (Web Usability) 12. Nečitelné písmo • nevhodná velikost, font, kontrast[19] 13. Nevhodné použití technologie Flash[15] • obtěžující animace před vstupem na stránky s typickým nápisem „přeskočit intro“ • nekonečná smyčka na úvodní stránce (připomínající reklamu) 14. Nerespektování nekompatibilit prohlížečů • dodnes některé služby podporují jen konkrétní prohlížeče konkrétních operačních systémů (a ještě to veřejně přiznávají)46 15. Zbytečně obsáhlé formuláře • odstraňte položky, které nejsou potřeba • nevyžadujte povinně položky, dokud to není nutné • podporujte automatické vyplňování (běžné pojmenování položek) • nastavte do pole kurzor (ušetříte uživateli kliknutí) 16. Příliš striktní požadavky na položky formuláře • netrvejte na jednom jediném formátu a umožněte uživatelům zadat např. telefonní číslo nebo datum, jak chtějí (včetně nevýznamných chyb) 17. Chybějící kontakty nebo další informace o společnosti • nezapomeňte zahrnout informace o společnosti a kontakt 18. Neadekvátní velikost obrázků (a náhledů) • typická chyba je zmenšení (obrovského) obrázku pomocí stylů 19. Nestandardní použití prvků grafického uživatelského rozhraní • např. výběr položky pomocí „radio“ tlačítka odešle formulář 20. Nedostatek biografických informací (např. o autorech) • nestačí jen uvést autora ke článku (a datum vložení), ale také zpřístupnit informace o něm (fotografii a další) 21. Chybějící archiv (např. událostí, zpráv) 46 Služba ČSOB Internetbanking 24 na adrese http://www.csob.cz/cz/csob/Castedotazy/Stranky/Caste-dotazy-CSOB-InternetBanking-24.aspx#14

62

3.2. Co neopomenout a čeho se vyvarovat • neaktuální události či akční nabídky se z některých webů smažou místo přesunutí do archivu 22. Změna adresy stránek (bez zachování funkčnosti) • např. přesun z novinek do archivu; adresa události by měla zůstat nezměněná 23. Nadpisy neodpovídající obsahu textu (jakožto potenciální odkazy ve výsledcích vyhledávání apod.) • mají jasně říkat, co je v příslušném obsahu (bez hádanek) • mají lákat jen uživatele, které obsah zajímá (bez návnad — ty fungují jen dočasně) 24. Potlačení nebo zpomalení tlačítka Zpět • otevírání nových oken prohlížeče • okamžité přesměrováním • zamezení „kešování“ (cache) 25. Zavádění internetové moderny (buzzword) • např. soudobý „cloud“ 26. Nízká odezva serveru47 • uživatelé pomalé stránky opouští 27. Neaktuální obsah či informace bez uvedení data • některé informace jsou bez data zveřejnění bezcenné • rok staré novinky na úvodní stránce společnosti o kvalitě webu nevypovídají 28. Titěrné náhledy zmenšením velké detailní fotky • místo prostého zmenšení často pomůže výřez 29. Příliš detailní alternativní text • popisování nepodstatných detailů (typicky loga) 30. Absence alternativních informací • např. rozdíl ceny pro posunutý termín • např. stejné zařízení s jedním (zásadním) rozdílem 47

O tom blíže pojednává následující podkapitola a citovaná studie[44].

63

3. Použitelnost webu (Web Usability) 31. Dlouhé seznamy bez možnosti filtrování dle atributů • stránky s dlouhými seznamy mají filtrování v první řadě podporovat • filtrování má uživatelům dávat smysl aniž by byl expert či zaměstnanec • filtrování má umožnit některé produkty zcela ignorovat • filtrování má být jednoduché 32. Stránky odkazující samy na sebe • častým příkladem je logo na domovské stránce 33. Bezdůvodné používání nejnovějších technologií • typickým příkladem je modelování 3D modelů ve VRML48 , kde je jednodušší zobrazit nákres 2D obrázkem 34. Pohyblivý či jezdící text (marquee) a permanentní animace • jakýkoli pohyb na stránce rozptyluje uživatelovu pozornost 35. Složité a nečitelné odkazy • dlouhé odkazy, které nedávají smysl (obsahují hash nebo číselný identifikátor) • např. také odkazy s vlnovkou ( ), kterou řada uživatelů neumí ani napsat 36. Sirotčí stránky[27] • každá stránka má obsahovat odkaz na úvodní stránku 37. Příliš krátké či příliš dlouhé stránky • typicky příliš krátké bývají rozcestníky s výčtem několika odkazů na podstránky • typicky příliš dlouhé bývají technické specifikace k nějaké technologii 38. Nedostatek navigace • rozebráno v předchozí podkapitole 48 Grafický formát založený na deklarativním programovacím jazyce, který byl navržen především pro popis trojrozměrných scén

64

3.3. Vizuální prezentace webu a styl psaní Uvedený výčet nejčastějších chyb webdesignu dobře poslouží pro rychlou analýzu libovolného webu. V poslední kapitole této práce, Srovnání teorie se soudobou praxí, tuto zkoušku podstoupil web Fakulty informačních technologií ČVUT. Některé uvedené chyby jsou vyloženě technické (26 — odezva serveru), jiné se však více či méně týkají textového obsahu (4 — strukturovaný text, 23 — nadpisy). To jednak poukazuje na potřebu věnovat se použitelnosti webu neustále (nejen při tvorbě systému a původním naplnění), ale také zvláštnostem a rozdílům webového stylu psaní textů od tištěného. Tomu se spolu s dalšími rozdíly webu od tisku věnuje následující podkapitola.

3.3

Vizuální prezentace webu a styl psaní

Při navrhování webových stránek nebo aplikace je dobré mít na paměti rozdíly mezi tiskem a webem. První část této podkapitoly vysvětluje fyzikální rozdíly mezi těmito „světy“, které se po přečtení mohou jevit zcela zřejmé. Jejich zanedbání (např. zpomalení rychlosti odezvy) může mít pro web zbytečně katastrofální důsledky. Uživatelé nejenže tedy přijímají informace z webu a tisku různým způsobem, ale i v úplně jiném psychickém rozpoložení. Čtení novin či odpočinkové knihy u kávy je pro uživatele úplně jiný zážitek než příjem informace na kancelářské židli u pracovního stolu. O rozdílech vnímání informací z tisku a z webu pojednává druhá část této podkapitoly. U některých webových designerů je dodnes klíčovou a zároveň vše spásnou starostí šířka, na kterou chce klient web takzvaně optimalizovat (míněno fixně „nastylovat“). Takový dotaz se hodí možná pro rozměry (nebo poměr stran) billboardu či plakátu — nikoli webu. Poslední část podkapitoly ukazuje současné zastoupení rozlišení obrazovek. Ukazuje, že dnes už nedominuje jedno typické rozlišení, ani nejsme na přechodu mezi dvěma různými (jako tomu bylo v minulosti). Je tedy potřeba tento fakt zohlednit a přestat zarytě trvat na svém jednom (libovolném) fixním rozměru.

3.3.1

Rozdíly mezi tiskovým a webovým designem

Už více než před deseti lety vznikla studie rozdílů mezi tiskovým a webovým designem[11]. Jakob Nielsen upozornil na nejdůležitější rozdíly, které by si každý webový designer měl uvědomovat. Z hlediska dimensionality je tiskový design je vždy dvourozměrný s důrazem na rozložení prvků (layout). Webový design je jak jednorozměrný, tak zároveň vícerozměrný. V tisku je možné otáčet stránky, ale souhra různých stránek bývá neobvyklá. Typicky je každá stránka (novin či časopisu) designována zvlášť. Tiskový design se vztahuje k neměnné velikosti plochy. Často je navíc k dispozici relativně velká plocha. 65

3. Použitelnost webu (Web Usability) Na webu je běžný posun (scrolling) a jednorozměrné vazby (co je dříve či později) jsou důležitější než dvourozměrné. Dvourozměrné rozložení prvků je možné jen v omezené míře (plovoucí obrázek) a závisí na možnostech konkrétního zařízení. Podobně zásadní rozdíl je v navigaci a rozmístění prvků. Zatímco navigace po webu je velmi pestrá (nabídky menu, drobečková navigace, odkazy v textu a další seznamy odkazů souvisejících stránek), v tisku je veškerá navigace redukována na otáčení stránek. S webem přichází také řada parametrů, které se v tisku neřeší — jsou přirozeně dokonalé. Především reakční doba tisku je okamžitá. U webu má prodlení načtení stránky zcela zásadní dopad na použitelnost. Ze studie[44], která se přímo věnovala vlivu rychlosti stránek na chování uživatelů mimo jiné vyplývá, že: • zpomalení výsledků vyhledávání Google o 0,4 sekundy by snížilo počet vyhledávání o 8 milionů dotazů denně, • 25 % uživatelů opustí stránku, která se načítá déle než 4 sekundy, • 50 % mobilních uživatelů opustí stránku, která se načítá déle než 10 sekund, • 25 % mobilních uživatelů používá k procházení internetu pouze svůj mobil, • zpomalení stránky o 1 sekundu by stálo Amazon 1,6 miliardy dolarů ročně. Dalším takovým parametrem, který tisk neřeší, je rozlišení a velikost viditelné plochy. Ve kvalitě obrazu soudobé zobrazovače tisk zvolna dohánějí, avšak velikost viditelné plochy je u počítačů pořád menší a především obecně různá. Tisk je relativně omezený svým neměnným (fixním) rozměrem. Jednoduše se dá říci, že jak se tisk vizualizuje, tak bude vypadat (typicky časopis, noviny, billboard). Naproti tomu mezi informaci na webu a uživatele vstupuje interpret (typicky prohlížeč internetových stránek). Velikost okna prohlížeče je obecně různá, což přináší určitou svobodu a zároveň velká omezení kladená na webdesign. Jednoznačnou výhodou webu jsou multimédia a interaktivita obecně. Možnosti komentování a diskuze, sledování videa či interaktivní mapy posouvají internet jako médium daleko před tisk. Znalost rozdílů webového a tiskového designu je pro pochopení použitelnosti zcela zásadní. Přestože se s příchodem fenoménu Web 2.0 situace oproti minulosti rapidně posunula, dodnes na internetu převažují weby s fixními rozměry a vznikají další. Rychlost načítání stránky kolem 5 – 10 sekund není 66

3.3. Vizuální prezentace webu a styl psaní bohužel výjimkou. Vývojáři si často neuvědomují, že ne každý má tak výkonný hardware a rychlost připojení k internetu, jako oni.

3.3.2

Psaní textů pro tisk a pro web

Dalším podstatným rozdílem přístupu k webu a tisku je psaní textů. To vychází z odlišného přístupu, použití a rozpoložení čtenáře. Zatímco knihu nebo noviny čtou lidé v klidu (u kávy) často jako celek, na internet chodí pro (rychlou) informaci. Nemohou se svalit do pohovky nebo musí myslet na stav baterie u svého tabletu. Jakob Nielsen ve svém článku věnovanému způsobu psaní textů pro tisk a pro web[43] rozlišuje takzvaný vyprávěcí styl psaní (vhodný pro tisk) a akční (vhodný pro web). Texty pro web je potřeba dobře strukturovat a psát hutně. Zatímco v knize může být vyprávěcí styl psaní textů (okořeněný výplněmi a anekdotami), na webu kořenění působí spíše jako vycpávka a čtenáře zpomaluje a tedy obtěžuje. Obě sféry se prolínají a nemají ostrou hranici. Stejně jako se nehodí výplně a anekdoty do diplomové práce, tak mohou být weby, jejichž informaci si lidé stáhnou do elektronické čtečky a pohodlí typické pro čtení novin u kávy si zajistí. Strukturování textů a jejich redukce na to podstatné je dobrou cestou k udržení čtenáře na webu. Jedno z předních pravidel použitelnosti Steva Kruga zní: „Napište text, pak jej zredukujte na půlku, a pak znovu na půlku toho, co zbylo.“[5]

3.3.3

Rozlišení obrazovky a rozložení prvků (layout) stránky

Studie o rozlišení obrazovky a rozložení prvků na stránce[31], kterou Jakob Nielsen publikoval v roce 2006, ústí v dosud platné závěry. Některé konkrétní údaje jsou poplatné době před 5 lety (typické rozlišení). Při koncipování webu dnes již není možné cílit na jedno konkrétní rozlišení. Dříve dominovalo (90 % zastoupení) vždy jedno rozlišení obrazovky49 a jeden konkrétní prohlížeč, který byl většinou maximalizovaný na celou obrazovku. Dnes je 90 % návštěv rozloženo mezi 10 různých rozlišení; prvních 5 velmi rovnoměrně. Z tabulky 3.1 je patrné, že v současnosti zcela nedominuje žádné jedno rozlišení. Většina přístupů je poměrně rovnoměrně rozdělena mezi několik rozlišení. Optimalizace pro rozlišení dnes již neznamená nastavení šířky webu fixně na velikost, která nejlépe vyhovuje maximalizovanému oknu prohlížeče na daném rozlišení50 . Soudobou optimalizací se rozumí rozložení prvků na webu tak, aby při konkrétních nejtypičtějších zobrazeních vypadal co nejlépe. 49

Od 640 × 480 přes 800 × 600 po 1024 × 768. Typicky počítáno jako D − 2 ∗ B − S, kde D je šířka obrazovky, B šířka rámečku prohlížeče a S šířka (vertikálního) posuvníku. 50

67

3. Použitelnost webu (Web Usability) Tabulka 3.1: Prvních 10 rozlišení obrazovky z celkových 1 542 různých hodnot mezi 750 tisíci uživateli v průběhu posledního roku (2010/2011) na fakultním výukovém systému Edux. Rozlišení 1366 × 768 1280 × 800 1920 × 1080 1680 × 1050 1280 × 1024 1440 × 900 1600 × 900 1920 × 1200 1024 × 768 1024 × 600

Počet 189 262 142 651 86 541 64 671 50 721 48 828 25 607 18 388 15 167 12 473

Zastoupení 26,09 % 19,67 % 11,93 % 8,92 % 6,99 % 6,73 % 3,53 % 2,53 % 2,09 % 1,72 %

Nutno poznamenat, že graf zachycuje bohužel jen rozlišení obrazovky a nikoli velikost oken prohlížeče nebo ještě lépe jejich aktivní (obsahové) části. Na velkých obrazovkách (s šířkou přesahující 1 200 pixelů) uživatelé často pracují s různě velikými okny (typicky vedle sebe). V takovém případě ani optimalizace pro několik nejvíce zastoupených rozlišení obrazovek samozřejmě není ideálním řešením a ideálně je třeba zachytit celou škálu rozměrů. Soudobé technologie umožňují vedle flexibilního zobrazení také změnu rozložení (layout) prvků na stránce v závislosti na šířce okna prohlížeče. úzké okno prohlížeče může mít podobné rozložení jako při zobrazení stránek na mobilu a podobně. Nelze opomíjet ani extrémní velikosti na obě strany (do 640 × 480 či naopak s šířkou přesahující 1 200 pixelů). Web by měl být použitelný pro jakéhokoli uživatele (i když třeba s kompromisy). Mobilní prostředí má svá specifika a často je vhodné optimalizovat nejen vzhled, ale také samotný obsah. S rozdílnými rozměry mohou libovolně měnit i proporce obrazu. Proto je při návrhu grafického rozhraní dobré zohlednit i výšku jako nezávislý parametr. Rozdílnost ve velikosti však není jediným podstatným kriteriem, který by měl znalý webový designer zohlednit. Existuje několik typů zařízení, které se liší jak ve velikosti obrazovky, tak ve způsobu používání. Těmto rozdílům se věnuje následující podkapitola.

3.4

Design pro 5 zařízení

Optimalizace webu pro různá rozlišení z předchozí podkapitoly velmi úzce souvisí s optimalizací webu pro různá zařízení. Mimo velikost zobrazené plochy je potřeba zohlednit další důležité rozdíly, jako je především způsob ovládání. 68

3.4. Design pro 5 zařízení Vedle běžně uváděných dvou typů zařízení (počítače a mobily) by weboví designeři v dnešní době neměli zapomínat na televize a extrémní obrazovky (extrémně malé či velké)[38]. Počítači se pro účely této podkapitoly rozumí desktopy a běžné notebooky, které jsou sice přenosné, nikoli však mobilní. První část této podkapitoly se věnuje výhodám počítačů proti mobilním zařízením, které Jakob Nielsen dělí na trvalé a dočasné. Ukazuje, které úkoly se dosud řeší převážně na počítačích, a že tomu tak navzdory přesunu uživatelů k mobilním (a jiným) zařízením podle všeho i do budoucna zůstane. Druhá část podkapitoly se pozastavuje nad internetem v televizích jako fenoménem blízké budoucnosti. Spolu s extrémně malými a extrémně velkými displeji tvoří televize další samostatné skupiny zařízení, která rovněž mají svá specifika a bude potřeba k nim přistupovat samostatně. Podpora jednotlivých skupin zařízení a především respektování jejich rozdílů má zásadní vliv na celkový uživatelský prožitek (user experience). Poslední část podkapitoly pojednává o dosahování jednotného uživatelského dojmu a o důležitosti udržení datové a obsahové konzistence.

3.4.1

Rozdíly počítačů a mobilních zařízení

Výhody počítačů oproti ostatním zařízením rozděluje Jakob Nielsen ve svém článku o designu napříč médii[38] do dvou skupin: 1. Trvalé výhody počítačů zahrnují velikost obrazovek, kvalitní ovládání (velká klávesnice a myš) a další (např. uživatel nemusí hlídat baterie s výjimkou bezdrátových periferií). 2. Mezi dočasné výhody osobních počítačů patří kvalitnější připojení k internetu51 , výkonnější hardware (rychlejší procesor, větší kapacita disku a operační paměti) a vyspělejší software. Proto mají počítače své nezastupitelné místo např. v podnikové sféře. Vedle různých rozlišení obrazovek (a velikostí oken prohlížeče) osobních počítačů se zvýšil (a stále roste) poměr zastoupení mobilních zařízení (mobily, PDA52 , tablety). Rozlišení jejich obrazovek se sice dá přirovnat k obrazovkám (či oknům prohlížečů) osobních počítačů, ale zásadní rozdíly jsou především v jejich ovládání a také ve způsobu použití. Více k uživatelskému rozhraní pro mobilní zařízení pojednává následující podkapitola 3.5 Použitelnost na mobilních zařízeních. Navzdory přesouvání těžiště používání směrem k menším zařízením, použití počítače zůstává smysluplné: 1. Většina úkolů v podnikové sféře se řeší pomocí počítačů 51

Uživatelé mobilních zařízení jsou nuceni trpět jako uživatelé osobních počítačů v roce 1998. 52 Osobní digitální (či datový) asistent (z angl. Personal digital/data assistant)

69

3. Použitelnost webu (Web Usability) • pomalý vývoj speciálního mobilního designu • nákladné přizpůsobování modním výstřelkům • většina práce zaměstnanců by měla být prováděna v kanceláři 2. Většina e-obchodu se provádí skrz počítače • pouze 2 % amerických příjmů z e-obchodů pochází z mobilních zařízení • mobilní komerce bude růst v závislosti na zvyšování zkušenosti uživatelů • obecně se předpokládá 15% růst tržeb přes mobily v roce 2015 • absolutní tržby přes počítače poroste současně s poklesem jejich podílu 3. Většina komplexních úkolů se vykonává mnohem příjemněji na počítači • od průzkumu možností při nákupu nového auta • přes studium nových nemocí a s nimi spojené medikace • až ke správě svého investičního portfólia 4. Většina B2B53 úkolů se i v budoucnu bude provádět na počítači, např. • posouzení seznamů doporučení nebo • vytváření prezentací • jsou komplikované a obsahově náročné úkoly nevhodné ke zpracování na mobilu nebo tabletu

3.4.2

Televize a extrémní displeje

Novým fenoménem blízké budoucnosti je internet v televizi. Rozlišení televizí je opět srovnatelné s rozlišením obrazovky počítače. Vzdálenost od televize vzhledem k její velikosti vůči osobnímu počítači je však vyšší. Současný trend svědčí pro bezdotykové ovládání, které nabízí relativně malou přesnost (podobně jako prst ve srovnání s myší). Za pozornost stojí také velmi velké a velmi malé obrazovky. Typickým příkladem velmi malé obrazovky je displej na spotřební elektronice, „smart“ hodinky nebo malé telefony. Zástupcem velkých obrazovek mohou být obrazovky či projekce v konferenčních místnostech nebo inteligentní budovy (popř. dokonce inteligentní areály). 53 Komerční transakce mezi dvěma byznysy (z angl. Business-to-business), typicky mezi výrobcem a velkoodběratelem nebo mezi velkoodběratelem a prodejci

70

3.5. Použitelnost na mobilních zařízeních

3.4.3

Uživatelský prožitek (User Experience) napříč zařízeními

Pochopení rozdílů jednotlivých zařízení umožní návrhářům systémů zpřístupnit svou webovou službu či nabídku maximálnímu množství uživatelů v jim přijatelné formě. Cílem dobrého návrhu je přizpůsobení uživatelského rozhraní omezením a způsobu použití jednotlivých zařízení a zároveň zachovat celistvý dojem (feel) a klíčovou funkcionalitu webu napříč zařízeními. K dosažení jednotného uživatelského dojmu napříč zařízeními je zapotřebí udržení vizuální konzistence (stejné logo a barevné schéma nestačí). Uživatelům má být vždy jasné umístění prvků při přechodech mezi zařízeními. Také vlastnosti a dovednosti mají být konzistentní — stejná hlavní funkcionalita je dostupná ve všech zařízeních. Uživatelé mají chápat, že je funkcionalita stejná (i když případně zjednodušená). Mělo by být samozřejmostí udržení datové a obsahové konzistence napříč různými zařízeními. Pokud si uživatel na počítači vloží např. zboží do košíku, po přihlášení by jej měl vidět i z mobilního telefonu. A přestože obsah mobilních aplikací má být mnohem stručnější než pro počítače, sdělení musí být stejné. Podrobnější vhled do omezení a problémů použitelnosti mobilních aplikací ukazuje následující podkapitola. Podobně bude potřeba v budoucnu přistoupit ke každé další skupině zařízení, jakmile „dozraje“ (aktuálně to budou zřejmě televize).

3.5

Použitelnost na mobilních zařízeních

Mobilní použití je jednou z nejpalčivějších výzev současných webů. Zároveň hraje důležitou roli pro některé intranety; především ve společnostech s obchodníky na cestách. Termín „mobilní použitelnost“ je svým způsobem oxymóron. Pracovat na webu není s mobilem ani příjemné ani jednoduché. V testech je úspěšnost používání webů na mobilech velice nízká — především při práci na plných verzích webů (nenavrhovaných pro mobily). Tato podkapitola ve své první části rozebírá hlavní problémy mobilů a závěrů z toho plynoucí. Ve druhé části je několik doporučení pro (obtížnou) mobilní použitelnost. Obsahem třetí části této podkapitoly je paralela dnešního mobilního webu s desktopovým webem před deseti lety.

3.5.1

Hlavní problémy mobilů

Přednost mobilních telefonů (zařízení do kapsy) je zároveň zdrojem jejich hlavních problémů[23]. Jsou to především malé obrazovky (aby se zařízení dala pohodlně nosit). Malé obrazovky: 71

3. Použitelnost webu (Web Usability) • nabízí méně viditelných možností v jakémkoli okamžiku, • uživatelé se musí spoléhat na svou krátkodobou paměť, • ztěžují takřka veškerou interakci, • neumožňují nalezení prostoru pro více oken a dalších řešení pokročilého používání aplikací (jako porovnávání produktů). Ovládání mobilních zařízení je veskrze dotykové a vždy nemotorné. Ve srovnání s myší spočívá hlavní nevýhoda dotykového displeje mobilního zařízení ve snížené přesnosti (plocha prstu proti špičce ukazatele myši). K tomu je při návrhu UI webu či webové aplikace dobré zohlednit zakrytí části obrazovky rukou (u praváka pravé a u leváka levé, někdy obou). • Ovládání mobilních zařízení (ať dotykové či jiné) je náchylnější k chybám. • Vkládání textu je vyloženě pomalé a plné překlepů (i na zařízeních s mini-klávesnicemi). Dalšími typickými problémy mobilních zařízení jsou prodlevy při stahování (mobilní připojení k internetu bude vždy pomalejší než pevné) a stránky optimalizované pro jiná zařízení. Na mobilech se takové stránky musí všelijak škálovat. Mobilní zařízení nikdy nenabídnou stejné obrazovky jako pevné počítače. A pevné připojení k internetu bude vždy rychlejší než mobilní. Proto mobily nebudou nikdy stejné jako pevné počítače a je potřeba k nim přistupovat zvlášť. Tvůrci uživatelského rozhraní pro mobilní zařízení se musí rozhodnout, zda upřednostní charakteristický přístup s důrazem na obsah a navigaci či budou navrhovat pro malou obrazovku a nízké rychlosti stahování (více uživatelské interakce, než se dostane ke kýžené informaci).

3.5.2

Obtížnost mobilní použitelnosti

Mobilní alternativa stránek je v dnešní době nutností stejně jako možnost přepnout zobrazení tam i zpět. Při návrhu uživatelského rozhraní je dobré zohlednit „horizontální tah“, který je na mobilních zařízeních zažitým gestem. Zatímco u pevných počítačů se doporučuje vyhýbat se horizontálnímu posunu, u mobilních zařízení je „horizontální tah“ běžný a oblíbený. Pro vylepšení mobilního uživatelského prožitku (user experience) sestavil Jakob Nielsen několik doporučení:[24] 1. Navrhujte samostatné mobilní stránky. 72

3.5. Použitelnost na mobilních zařízeních • První a zřejmě nejdůležitější doporučení pro zlepšení mobilního přístupu. • Neočekávejte, že lidé budou přistupovat na jedny stránky ze všech zařízení. 2. Odkazujte z běžných stránek na mobilní a zpět. • Vyhledávací stroje často odkazují na běžné (plnohodnotné) stránky, přestože mobilní stránky existují. • Ačkoli vyhledávače často odkazují uživatele na konkrétní obsah (běžných stránek), po jeho zpracování přijde odkaz na mobilní verzi webu vhod. 3. Upozorněte na horizontální gesto. • Uživatelé dotykových displejů relativně znají horizontální tah. • Stále se však jedná o relativně méně známé gesto. • Horizontální tah se běžně používá jako gesto k „otáčení“ pásů karet (obrázků) či ploch. 4. Vyvarujte se dvojznačnosti. • Nenavazujte stejné gesto na různé akce téže obrazovky. 5. Dbejte na syndrom tlustého prstu. • Mít úspěšné mobilní stránky nebo aplikaci zjevně znamená designovat pro malou obrazovku. Bohužel někteří tak nečiní a uživatelé jsou nuceni trefovat drobné oblasti mnohem menší než jsou jejich prsty. 6. Omezte počet dovedností (features) aplikace na takové, které jsou nejzávažnější pro mobilní použití. Pokud ve srovnání tisku a webu použijeme termíny klid či pohodlí vůči rychlému získání informace (v podkapitole 3.3 Vizuální prezentace webu a styl psaní ), potom používání mobilních platforem musíme označit za vyloženě hektické[25]. Typickým příkladem může být hledání spoje v papírovém jízdním řádu doma den před odjezdem. Uživatel má čas přečíst všechny vysvětlivky, zda spoj jezdí i v den, který potřebuje a podobně. Na pevném počítači se vyhledávání (pro jednoduchost a spolehlivost) odkládá na poslední chvíli před odchodem a nebývá času nazbyt. Mobilní zařízení se typicky pro nalezení spoje používá, když uživateli tramvaj ujede a musí okamžitě najít alternativu. Pokud tedy platí, že texty na webu mají být oproti tisknutým textům stručné, texty pro mobilní zařízení mají být ještě stručnější. Totéž platí o doplňkové funkcionalitě, která na mobily nepatří. Především mají obsahovat jenom takovou funkcionalitu, která dává smysl pro mobilní použití. 73

3. Použitelnost webu (Web Usability)

3.5.3

Mobilní web 2009 = desktopový web 1998

V roce 2009 publikoval Jakob Nielsen výsledky testování mobilních aplikací a dospěl tak k závěru, že mobilní web 2009 je na úrovni desktopového webu 1998[26]. Mezi porovnávaná patří kriteria úspěšnosti (50 – 60 %), doby stahování (načítání většiny stránek trvá příliš dlouho) a třeba posouvání (skrolování)54 . Výsledky testování prokázaly, že na mobilních telefonech i jinak normální stránky mohou vypadat nafouknutě (příliš velké obrázky zakrývají důležité prvky). Další překážkou optimálního používání mobilních zařízení je jejich různorodost. Uživatelé se tak nemohou poučit od zkušenosti kolegů a často se jim způsob prohlížení webů mění (každé 2 roky). Zajímavým úkazem je problém nazvaný jako vzhled starého média. V devadesátých letech řada stránek napodobovala dobře vypadající tiskové publikace a nabízela nízkou interakci. Dnes jsou stránky designované jako (řekněme) webové stránky — přesněji desktopové webové stránky. To není vhodné médium pro mobilní použití. Dokonce na nejlepších telefonech je ovládání takových stránek bolestivé. Jak je vidět, ani při nejlepší vůli a znalostech není samozřejmé navrhnout bezchybný web či aplikaci, která bude uživatelům po všech směrech zcela vyhovovat. Každý webový designer ví, že správný web není nikdy hotový. Pro vytvoření a dlouhodobé udržení skutečně kvalitních webů a webových aplikací je nutné své produkty průběžně a pravidelně testovat. Tomu se věnuje následující podkapitola.

3.6

Testování použitelnosti webu

Na rozdíl od přístupnosti, kde je přesně daný výčet (technických) pravidel, která pro danou úroveň musí stránky splňovat, u použitelnosti je tomu jinak. Dobré zvyky webdesignu ani v kombinaci s nejčastějšími chybami (z podkapitoly 3.2 Co neopomenout a čeho se vyvarovat) zdaleka neřeší veškeré potenciální problémy použitelnosti. Při navrhování UI je vždy dobré použít vlastní znalost či zkušenost s použitelností, ale svá řešení vždy ověřovat empiricky — testováním. Na počátku bylo testování použitelnosti poměrně nákladným procesem. Bylo zapotřebí laboratoře (usability lab) s pozorovací místností za průhledným zrcadlem a minimálně dvě kamery (pro záznam uživatelských reakcí a věcí, které používali). Získání hodnotných výsledků vyžadovalo mnoho lidí (statisticky významný vzorek). Byla to věda a každé testování bylo velmi nákladné. Ale v roce 1989 Jakob Nielsen ve své publikaci Usability Engineering at a Discount poukázal, že to tak být nemusí. Laboratoře že nejsou vůbec po54

Na rozdíl od devadesátých let, kdy uživatelé neuměli skrolovat, je problém v tom, že uživatelé na mobilech skrolují příliš. Podle výzkumu uživatelé často skrolují, aniž by si to uvědomovali.

74

3.6. Testování použitelnosti webu třeba a je možné dosáhnout stejných výsledků s mnohem menším počtem uživatelů.[6] První část podkapitoly ukazuje, proč je potřeba s testováním začít hned (rychle a levně), proč by se testování nemělo odkládat až do doby plně implementovaného UI a kdo by měl být testujícím. Další část podkapitoly ukazuje, jaké je ideální množství testujících a následující část se zabývá otázkou vícečetného testování. Větší množství testujících uživatelů je tedy vhodné rozdělit do iterativního nebo paralelního přístupu, popř. dalších. Pro účely expertního testování použitelnosti sestavil Jakob Nielsen desatero heuristického ohodnocení, které je jakýmsi výchozím bodem (nejen) pro webové aplikace. Jednotlivým bodům a způsobu tohoto testování se stručně věnuje předposlední část podkapitoly. Závěrečná část této podkapitoly popisuje zkušenost konkrétní společnosti, která důsledným dodržením testovacích praktik docílila zásadních měřitelných výsledků. O své poznatky se společnost ústy své viceprezidentky podělila s veřejností, která v rozhovoru uvedla 5 přesvědčivých důvodů pravidelného testování použitelnosti a poskytla 8 klíčů k úspěšnému výsledku.

3.6.1

Testování před a během práce na UI

Testovat je podle soudobé teorie potřeba začít rychle a levně. Čím rychlejší a levnější metody, tím větší dopady, protože výsledky bývají dostatečně brzy, aby mohly ovlivnit architekturu systému. Ideální je testovat uživatelské rozhraní ještě před svým vznikem. K tomu nejlépe poslouží papírové prototypy (mockupy).[14] Na úrovni papírových prototypů je i zásadní změna návrhu otázkou minut. • Poučit se z předchozího designu. – Lepší části zachovat nebo zdůraznit, – horší části (se kterými mají uživatelé problémy) „pohřbít“ — opravit. • Poznat alternativní UI (konkurenčních stránek). – V případě intranetu je dobré vycházet z výročních zpráv intranetového designu[8]. • Poznat chování uživatelů v jejich přirozeném prostředí. Po „otestování“ prototypů přejít na papírové prototypy nízké úrovně (lo-fi55 mockups) a následně úroveň zvýšit (hi-fi56 mockups). Implementaci je dobré 55

Velmi rychlé, hrubé či dokonce ruční nákresy (z angl. Low Fidelity), typicky za účelem tvorby prototypů. 56 Detailní zpracování včetně řady funkcí (z angl. High Fidelity), typicky za účelem tvorby prototypů.

75

3. Použitelnost webu (Web Usability) průběžně testovat a porovnávat s dřívějšími studiemi (a znalostmi). Čím dříve je chyba odhalena, tím levnější je její oprava. • Vytvořit papírové prototypy nových UI a otestovat je. – Jednoduše bez velkých nákladů. – Může docházet k zásadním a častým změnám. • Postupně vylepšovat ty prototypy, které se nejlépe osvědčily. – Od nízké úrovně zpracování (lo-fi). – Po vysokou úroveň zpracování, která běží na počítači (hi-fi). • Porovnávat UI s ustálenými pravidly použitelnosti. – Z vlastních dřívějších studií nebo z publikací. • Znovu otestovat finální projekt, který je určen k implementaci. – Některé problémy se vynořují až během implementace. Testující uživatelé by měli reprezentovat cílovou skupinu. Pokud je cílových skupin více, je dobré vybrat několik zástupců každé cílové skupiny. Uživatelům je dobré dát několik reprezentativních úkolů (postupně) a rozmluvit je. Následně je dobré pozorovat (nahrávat), co uživatel říká a především co dělá. K tomu dobře poslouží aplikace na zachycování obrazovky a zvuku.

3.6.2

K testování postačí pět uživatelů

Jakob Nielsen a Tom Landauer ve svých výzkumech ukázali[42], že množství nalezených problémů použitelnosti v uživatelských testech s n uživateli je N (1 − (1 − L)n ), kde N je celkový počet problémů použitelnosti objevených jedním uživatelem. Typická hodnota L je 31 %, jak se ukázalo z průměru přes velkou skupinu zkoumaných projektů. Z grafu na obrázku 3.1 lze pozorovat, že jeden testovaný uživatel nalezne 31 % problémů. Mezní užitek z takového testování je celá tato hodnota. Testování druhého uživatele ukazuje, že uživatel udělal některé věci stejně jako ten první, takže se výsledky překrývají. Jelikož se lidé liší, určitě uživatel přinese nějaká nová zjištění. Takže druhý uživatel rozhodně přispěje, ale už ne tolik, co ten první. Mezní užitek s každým dalším uživatelem klesá (zákon klesajícího mezního užitku). Ukázalo se, že většinu (85 %) problémů odhalí prvních pět uživatelů. Více než pět uživatelů na jedno testování je plýtváním času a peněz. Graf na obrázku 3.1 se vztahuje na uživatele, kteří používají stránky podobným způsobem. Pokud mají stránky více odlišných skupin uživatelů, je potřeba testovat s vyšším počtem uživatelů. Pro dvě skupiny se doporučují 3 – 4 uživatelé. Pro tři a více skupin se doporučují vždy aspoň 3 uživatelé (pro pokrytí rozdílů chování uživatelů v rámci skupiny). 76

Nalezené problémy použitelnosti

3.6. Testování použitelnosti webu

100% 75% 50% 25% 0% 0

3

6

9

12

15

Počet testujících uživatelů Obrázek 3.1: Mezní užitek testování použitelnosti více uživateli.

3.6.3

Vícečetné testování

Případný větší počet uživatelů je dobré rozdělit na více oddělených testování. Více testování může probíhat iterativně[28] nad rozhraním, které se po každé iteraci inovuje. Nové testování ověří výsledky předchozího testování a odhalí další nedostatky. Pro odhalení veškerých problému použitelnosti je podle grafu 1 zapotřebí 15 uživatelů. Daný rozpočet (řekněme na 15 lidí) je dobré utratit postupně ve 3 testech po 5 uživatelích. V případě jedné etapy s 15 lidmi už nezbude na testování nového designu. Jak vyplývá z grafu na obrázku 3.1, rozdíl testování s 5 a 15 lidmi je pouhých 15 % problémů. V druhé iteraci 5 dalších uživatelů odhalí většinu zbývajících (15 %) problémů. Přitom bude testovat inovace nového designu a vzhledem k odstranění zásadních nedostatků poskytne hlubší vhled57 . Paralelní přístup spočívá v testování několika různých návrhů v jednom okamžiku. Paralelní přístup nabízí obrovskou flexibilitu, avšak vyžaduje s testováním začít ještě na úrovni papírových prototypů, jinak může být drahý. Variantou paralelního přístupu je konkurenční testování, které paralelně testuje různé konkurenční weby nebo systémy. Paralelnímu přístupu je podobné konkurenční testování, kdy se místo vlastních alternativ jedná o 3 – 4 reálné systémy konkurenčních společností. Proces testování je také podobný, vyjma toho, že originální alternativy jsou existující 57

Účelem testování je nedostatky odstranit, nikoli zdokumentovat!

77

3. Použitelnost webu (Web Usability) stránky nebo aplikace v kontrastu k jednoduchému prototypu vytvořenému jen pro účely studie. S paralelním testováním také úzce souvisí také A/B testování[30]. Jedná se testování dvou odlišných řešení a zkoumání, které se osvědčí nejlépe.

3.6.4

Heuristické ohodnocení použitelnosti

Jakob Nielsen publikoval deset základních heuristik použitelnosti pro návrh uživatelského rozhraní:[35] 1. Viditelnost stavu systému • Systém by měl stále informovat uživatele, co se děje vhodným způsobem a v rozumných intervalech. 2. Souvislost mezi systémem a skutečným světem • Systém by měl hovořit jazykem uživatele, slovy, frázemi a koncepty uživateli známými (než v počítačových termínech). • Držte se konvencí skutečného světa a zobrazujte informace v přirozeném a logickém pořadí. 3. Vláda a svoboda uživatele • Uživatelé často zvolí systémové funkce omylem a potřebují „nouzový východ“ pro opuštění nechtěného stavu aniž by museli procházet složitými dialogy. • Podporujte Zpět a Vpřed (Undo/Redo). 4. Konzistence a standardy • Uživatelé by neměli tápat, zda různá slova, situace nebo akce mají stejný význam. • Dodržujte konvence platformy. 5. Chybová prevence • Lepší než dobrá chybová hláška je obezřetný design, který problémům v první řadě předchází. • Buďto eliminujte podmínky způsobující chyby nebo je kontrolujte a nechte je uživateli potvrdit, než spustí akci. 6. Rozpoznání raději než rozpomínání • Minimalizujte paměťovou zátěž uživatele zobrazením objektů, akcí a možností. 78

3.6. Testování použitelnosti webu • Uživatel by si neměl mít povinnost pamatovat informace z jedné části dialogu do druhého. • Informace k používání systému mají být viditelné a kdykoli snadno zjistitelné. 7. Flexibilita a efektivita použití • Urychlovače (neviditelné nováčkům) mají sloužit ke zrychlení práce se systémem pokročilým uživatelům. • Umožněte uživatelům uzpůsobení frekventovaných akcí. 8. Estetický a minimalistický design • Dialogy by neměly obsahovat irelevantní nebo málokdy potřebné informace. 9. Usnadněte uživateli rozpoznání, pochopení a obnovení z chyby • Chybová hlášení mají být vyjádřena prostým jazykem (nikoli kódem), přesně indikovat problém a konstruktivně navrhovat řešení. 10. Nápověda a dokumentace • Přestože je lepší, pokud je možné systém používat bez dokumentace, může být nezbytné poskytnout nápovědu nebo dokumentaci. • Každá taková informace má být snadno k nalezení, zaměřená na úkon uživatele, vypisovat konkrétní kroky a nemá být příliš dlouhá. Jedná se o metodu nalezení problémů použitelnosti v uživatelském rozhraní tak, aby mohla být použita jako součást iterativního procesu vývoje. Heuristické ohodnocení zahrnuje malou skupinu hodnotících, kteří posuzují úroveň shody s obsaženými principy použitelnosti (s heuristikami). Heuristické ohodnocení[16] se provádí tak, že každý hodnotící prozkoumá rozhraní samostatně. Teprve po dokončení veškerého ohodnocení mohou hodnotící svá zjištění agregovat. Jedině tento přístup zajistí úplnou nezávislost a nestrannost každého hodnotícího.

3.6.5

Testování na týdenní bázi a klíče k úspěšnému výsledku

Americká společnost TiVo provedla během návrhu svých webových stránek 12 uživatelských testů ve 12 týdnech. Společnost tak ukázala, že časté a pravidelné testování dokáže udržet použitelnost návrhu na vysoké úrovni.[41] Viceprezidentka společnosti TiVo, Margret Schmidt, ve svém rozhovoru poskytla 5 přesvědčivých důvodů, proč je přístup týdenního pravidelného testování použitelnosti vhodný: 1. Má nízké náklady 79

3. Použitelnost webu (Web Usability) • Návratnost investice je vysoká. • „Tisíc dolarů nebo dva nejsou nic proti tomu, co tím získáte.“ (Schmidt, TiVo) 2. Nabízí motivaci • Rychlé testovací cykly ujišťují vývojový tým, že je na správné cestě. • „Test za testem vidíte, že jdete tím správným směrem.“ (Schmidt, TiVo) 3. Pomáhá řídit podnikatelská rozhodnutí • Jelikož je zpětná vazba týdenní a v reálném čase, tým může reagovat také v reálném čase. • „Máme tlačit na pilu a jít vpřed nebo opravovat zjištěné problémy? Uživatelé vám říkají, jak se budou chovat na poli.“ (Schmidt, TiVo) 4. Vytváří testovací kulturu • Výsledky testování pomáhají přenést důraz na uživatelův prožitek (user experience) do vedení. • „Nyní je uživatelský prožitek klíčem. Změnilo se, jak strukturujeme veškeré webové projekty směrem vpřed.“ (Schmidt, TiVo) 5. Buduje vnitřní znalosti • „Prezentujeme nové návrhy výzkumníkům, kteří se mohou učit z kontextu ostatních projektů.“ (Schmidt, TiVo) • „Pokaždé, když posloucháte, stáváte se lepším webovým návrhářem.“ (Schmidt, TiVo) Společnost ústy své viceprezidentky také dopomohla k sestavení seznamu 8 klíčů k úspěšnému výsledku: 1. Udělejte to • „Udělejte to a naslouchejte tomu.“ (Schmidt, TiVo) • „Musíte z toho vyndat ego. Návrh je dobrý, když to říkají uživatelé.“ (Schmidt, TiVo) 2. Získejte podporu u majitelů a nalezněte projektového šampiona • „Všechno to má smysl jen, pokud jsou majitelé ochotni poslouchat a konat podle zpětné vazby“ (Torres, TiVo) 3. Povzbuďte zapojení naskrz organizací 80

3.6. Testování použitelnosti webu • „Pozvěte kohokoli, kdo o to má zájem.“ (Torres, TiVo) • „Pozorovací místnosti byly plné návrhářů, produktových manažerů a dalších lidí. Dokonce i vzdálená testování pozorovali manažeři.“ (Torres, TiVo) • Takové spolupodílení zajistí přijetí napříč společností. 4. Určete si priority, abyste měli jasné výsledky • Klaďte cílené otázky a nastavte si jasné účely pro každou obrazovku/úkon, abyste je mohli okamžitě po skončení testu vyhodnotit. 5. Šiřte výsledky — rychle • Lidé v organizaci ocení, když budou mít vždy aktuální výsledky z předešlého testování. 6. Spojte výzkumnou metodu s tím, co zkoušíte odhalit • Různé testovací metody vyhovují různým účelům. 7. Požadujte přijetí výsledku • Nejefektivnějším způsobem získání přijetí je prezentovat zjištění spolu s jejich řešením. • „Pokud sdílíte ryzí výsledky bez návrhů řešení, pak se strachují. Nepotřebujete 20 lidí debatujících, jak se s tím vypořádat.“ (Schmidt, TiVo) 8. Zachovejte si smysl pro humor a dobrý přístup • Sežeňte si flexibilní lidi, kteří dokáží jít s tempem a neznámou povahou práce. • „Nevíte, co budete testovat příště.“ (Torres, TiVo)

81

KAPITOLA

Srovnání teorie se soudobou praxí Podle prováděných měření kvalita a úroveň přístupnosti a použitelnosti komerčních webů se dlouhodobě zlepšuje. Firmy si totiž pod tlakem konkurence začínají uvědomovat potřebu použitelnosti. Uživatelé mají větší výběr služeb a více různých zařízení k jejich dosažení. Mají také rychlejší a dostupnější internet a jsou mnohem náročnější, než dříve. V začátcích internetu původně stačilo „mít web“, v současnosti už musí být dobrý, aby si udržel návštěvnost. Podobným procesem nyní prochází mobilní weby. Jakob Nielsen vypočítal, že (za předpokladu stejného tempa) se použitelnost mobilního webu dostane na současnou úroveň toho desktopového až v roce 2026.[24] Bohužel jsou známy i případy u největších firem58 , které v touze rychle se každému zalíbit občas udělají v použitelnosti i krok zpět (v lepším případě stranou). Názory na některé změny se mohou různit, ale o důsledcích některých nemohou být spory. Např. se s redesignem prodlouží odezva aplikace nebo se (na určitých rozměrech oken prohlížeče) zmenší aktivní použitelná plocha aplikace o desítky procent. Skutečný obsah stránky (např. článek) se pak nevejde na obrazovky malých nevýkonných zařízení, nebo je ještě zpomalí. Nejjednodušším způsobem ohodnocení kvality konkrétního webu je v případě přístupnosti použití nástroje pro automatizované testování (či prosté nahlédnutí do zdrojového kódu). Pro základní analýzu použitelnosti dobře poslouží seznam nejčastějších chyb uvedený v kapitole 3.2.2. Ilustrativní analýza webu s typickými nedostatky je obsahem následující kapitoly. Až teprve po odladění typických „dětských nemocí“ webu má smysl přejít k pokročilým analýzám spojeným s uživatelským testováním. 58

Nedávno spuštěná nová verze Google Plus.

83

4

4. Srovnání teorie se soudobou praxí

4.1

Ilustrativní analýza běžného webu

Pro účely ilustrativní analýzy byl (na přání děkana) vybrán web Fakulty informačních technologií ČVUT. Nutno poznamenat, že výsledek (ač se to tak může jevit) není vzhledem k průměrným webům nijak extrémní v žádném smyslu.

4.1.1

Základní analýza přístupnosti

Fakultní web trpí na typické „dětské choroby“. Pro podchycení základních nedostatků není potřeba pokročilých testů přístupnosti. Jednoduchý náhled do zdrojového kódu okamžitě prozradil, že úvodní stránka fakultního webu: 1. má nevalidní HTML kód, 2. postrádá meta elementy jako • popis (element description), • klíčová slova (element keywords), • případně informace pro roboty (co mají či naopak nemají indexovat) nebo také • technickou mapu stránek (sitemap.xml). 3. neodděluje kaskádové styly od obsahu, 4. obsahuje více nadpisů první úrovně a 5. nedodržuje hierarchii nadpisů (nadpis 6. úrovně následuje za nadpisem 1. úrovně). Následuje (přeložené) shrnutí výsledků automatizovaného testu programem Total Validator59 . Vedle shrnutí program generuje seznam jednotlivých chyb včetně zobrazení na kódu stránky. Kontrolovaná stránka: http://fit.cvut.cz Počet chyb: 20 (HTML: 15, WCAG v2 A: 3, Chybné odkazy: 2) Počet varování: 17 (Interpretace HTML: 1, WCAG v2 A: 16) Použitá verze značkovacího jazyka na stránce: XHTML 1.0 Strict Ze shrnutí výsledků je patrné, že automatizovaný test na stránce odhalil 20 (kritických) chyb rozdělených mezi chyby v kódu stránky (HTML), chyby podle WCAG verze 2 na úrovni shody A a chybné (nefunkční) odkazy. Dále test identifikoval 17 problémů na úrovni varování s analogickým rozdělením. 59

84

http://www.totalvalidator.com

4.1. Ilustrativní analýza běžného webu Vyjmenované problémy přístupnosti jsou jedním z prvních (a zároveň relativně snadných) adeptů na opravu. Před započetím případných oprav je dobré seznam nedostatků doplnit o výsledky kontrol ostatních stránek webu a určit priority dílčích nedostatků. Pro úplnost (na základní úrovni) je možné na zkoumaný web aplikovat seznam nejčastějších chyb webdesignu z hlediska použitelnosti.

4.1.2

Analýza použitelnosti podle seznamu nejčastějších chyb webů

Následující seznam obsahuje chyby použitelnosti, kterých se fakultní web dopouští hned na své úvodní stránce. Seznam vznikl aplikováním jednotlivých bodů bodů seznamu zásadních chyb webdesignu uvedeného v kapitole 3.2.2. 1. Špatné vyhledávání • Při zadání slova „doktorand“ stránky vrátí řadu odkazů. Žádný však nevede na stránku s informacemi o podmínkách pro doktorské studium. • Pro srovnání Google tuto stránku nabídne jako první60 . 2. Nestandardní obarvování odkazů • neodlišitelné od okolního textu (v Novinkách jsou odkazy pouze tučně) • nerozlišitelné navštívené a nenavštívené odkazy (po celém webu) 3. Absolutní (fixní) velikost písma61 4. Pevné rozložení prvků stránky (fixní layout) • pevná šířka, pevná výška řádků a další 5. Porušování konvencí (zvyklostí) designu • Logo má podle konvencí být vlevo. 6. Nečitelné písmo • Dokonce i podle normy přístupnosti62 je kontrast písma v zápatí stránky nedostatečný. 60

Vyhledávací řetězec „doktorand site:fit.cvut.cz“. Soubor style.css, řádek 61: font-size:13px. 62 Podle automatické analýzy kontrastu písma pro barvu pozadí #fff a popředí #808080 je výsledný poměr 3,95 : 1 (tedy menší než požadovaný 4,5 : 1). Takový kontrast splňuje podmínky přístupnosti pouze pro písmo o velikosti 18 bodů nebo 14 bodů tučné. Současná velikost písma v zápatí je však jen 10 bodů. 61

85

4. Srovnání teorie se soudobou praxí 7. Neadekvátní velikost obrázků (a náhledů) • Neúměrně veliký obrázek akce Cisco63 zmenšený pomocí CSS na (vizuálně) přijatelnou úroveň 8. Nedostatek biografických informací (např. o autorech) • Jednotlivé události postrádají datum vložení a autora. 9. Stránky odkazující samy na sebe • Nadpis stránky odkazuje sám na sebe. To je samozřejmě jen „špička ledovce“ a další testování má smysl až po odstranění těchto (veskrze technických) nedostatků. Uvedená zjištění se navíc vztahují pouze k úvodní stránce webu. Na této úrovni jde do velké míry o plošně aplikovatelná zjištění. Aby nezůstalo jen u kritiky, následující podkapitola obsahuje ilustrativní analýzu referenčního webu, který autor vyvíjí mimo jiné právě pro tyto účely.

4.2

Ilustrativní analýza přístupného a použitelného webu

Autor této práce už od roku 2003 vyvíjí vlastní redakční systém64 , na kterém provozuje celou řadu (více či méně použitelných) komerčních webů. Stupeň použitelnosti jednotlivých webů samozřejmě závisí na stupni otevřenosti a důvěry klientů (majitelů). Některé kvality systém garantuje (validita kódu), spoustu jich však není možné algoritmicky ošetřit (typicky kvalitní a správně strukturovaný obsah). V roce 2007 vznikl na uvedeném redakčním systému web, který má autor (na rozdíl od ostatních komerčních webů a projektů) plně ve své moci. Snaží se tak aplikovat všechna pravidla přístupnosti a použitelnosti do praxe. Vychází z koncepce webu Jakoba Nielsena, kterou se snaží dovést k dokonalosti i v místech, kde jeho předloha pokulhává.

4.2.1

Analýza webu autora optimalizovaného na přístupnost a použitelnost

Ukázkovým příkladem vysokého stupně přístupnosti a použitelnosti je web, na kterém publikuje články na téma zdraví a nemoci otec autora této práce, lékař chirurgické ambulance a rychlé záchranné služby Jaroslav Pavelka. Autor 63

V rámci akce „Cisco den na FIT!“ (10.5.2012, 12:50 až 16:00) má přiložený obrázek rozměry 3.782 x 5.235 pixelů @ 24 bitů na pixel (tedy několikrát větší než běžná obrazovka počítače) o velikosti 1,5 MB! 64 CMS IIX na http://cms.iix.cz

86

4.2. Ilustrativní analýza přístupného a použitelného webu web dlouhodobě optimalizuje pro přístupnost a použitelnost a mimo jiné na něm s oblibou ukazuje „druhou stranu mince“ k často scestným představám a požadavkům laických zadavatelů. Letmý pohled do kódu stránky nevykazuje žádné nedostatky. Následuje (přeložené) shrnutí výsledků automatizovaného testu pomocí programu Total Validator65 pro úvodní stránku webu: Výchozí stránka: http://www.pralek.cz Testováno: 16:59:52 GMT, May 08, 2012 Trvání testu: 3 sekundy Verze validátoru: v7.1.0 Celkový počet zkontrolovaných stránek: 1 Celkový počet zkontrolovaných odkazů: 20 Celkový počet nalezených chyb: 0 Použitá verze značkovacího jazyka na stránce: XHTML 1.0 Strict Nastavení: Přístupnost: AAA2 Kontrola chybných (nefunkčních) odkazů: ano Úroveň kontroly: Hlásit veškeré problémy Souběžnost kontroly odkazů: Nekonečná Verze značkovacího jazyka: Automatická detekce Ze shrnutí je patrné, že automatizované testování neodhalilo žádná pochybení (ani na úrovni varování). Stránka tedy splňuje všechna testovaná kriteria přístupnosti podle nejvyšší úrovně shody (AAA) WCAG verze 2 (plyne z výpisu nastavení). Na této úrovni má smysl ručně otestovat požadavky, které automat odhalit nedokáže. Výčet nedostatků použitelnosti, kterých se zkoumaný web dopouští podle seznamu nejčastějších chyb webdesignu je také prázdný. Analogicky web splňuje veškerá doporučení desatera domovské stránky (ve stejné kapitole s nejčastějšími chybami webdesignu). Z hlediska přístupnosti a použitelnosti je tedy zkoumaný web bezesporu mimořádný. Průměrný čtenář se zřejmě neubrání pocitu, že dosažení uvedených předností bylo dosaženo jaksi na úkor grafiky. To však přináší celou řadu nemalých výhod, které čtenáři webu hojně využívají[45]: 1. Plochá struktura webu s přirozenou navigací v záhlaví každé stránky zajišťuje návštěvníkovi přehlednou a intuitivní orientaci. 2. Přirozená velikost a vysoký kontrast písma umožní spolu s dobře strukturovanými texty perfektní čitelnost článků. 3. Bez rozptylujících reklam (a jiných prvků) není rušena pozornost čtenáře od obsahu článku. 65

http://www.totalvalidator.com

87

4. Srovnání teorie se soudobou praxí 4. Stránky lze pohodlně prohlížet i na datově či rychlostně omezeném připojení k internetu. 5. Bez omezující grafiky se obsah stránek dokáže přizpůsobit prostředí návštěvníka (malý mobil či velký monitor), a vždy efektivně využít prostor celého okna prohlížeče. Nutno poznamenat, že navzdory minimální grafické úpravě překročil počet unikátních návštěvníků 16 000 měsíčně, což je podle informací z Google Analytics několikanásobně více, než podobný web stejného rozsahu66 . Návštěvnost webu se od počátku měření (červen 2009) rovnoměrně zvyšuje rychlostí 10 % měsíčně. Stránky jsou bez jakékoli další optimalizace67 a marketingu na předních místech ve výsledcích předních vyhledávacích strojů. To je jen další z následků kvalitního webu. V ideálním světě internetu totiž platí, že web, který je dobrý pro lidi, je dobrý i pro vyhledávače. Proč tedy není každá instance systému autora ani zdaleka tak kvalitním webem, jako ten zmíněný? Odpověď je v místě, kde se střetává teorie s praxí — v následující kapitole.

4.3

Střet webové teorie s praxí

Firmy si často chtějí spravovat obsah webů svépomocí v touze minimalizovat náklady a zkrátit reakční dobu požadavků. Na posty správců webového obsahu pak dosazují kdejaké (náhodné) zaměstnance, kteří na to nemají ani čas ani potřebné schopnosti či vzdělání. Pro laické správce webů autor dlouhodobě udržuje seznam nejčastějších problémů ve správě redakčního systému68 . Ani to samozřejmě nedonutí různé sekretářky, učitele češtiny či hotelové recepční vytvářet a udržovat kvalitní obsah (bez ohledu na úroveň redakčních systémů, která se dlouhodobě zvyšuje). Konzultace a externí výpomoc bývá limitována rozpočtem, který přímo úměrně odráží, jak moc si zadavatel tuto potřebu uvědomuje. Druhý zásadní problémem rozchodu teorie s praxí je spojen s vizualizací webů. Těžko se namítá argumentům zadavatele, že jeho choť či potomek dělá nejlepší designy (a navíc zdarma). Že se (i u celé řady samozvaných odborníků na webdesign) jedná o návrhy dávno překonané s celou řadou zásadních nedostatků, musí většinou ukázat až čas (na statistikách, výsledcích vyhledávání či konkurenčních webech). V tu chvíli ale klienti odchází za jiným dodavatelem v domnění, že on jim „ten jejich úžasný návrh implementuje snad už pořádně“. 66 Vzájemné porovnání návštěvnosti zkoumaných webů nemá vzhledem k jejich rozdílné povaze žádnou vypovídající hodnotu. 67 Z hlediska SEO[2] stránky využívají výhradně etické metody, které jsou podmnožinou pravidel přístupnosti a použitelnosti. 68 Jak zachovat použitelnost na http://cms.iix.cz/pouzitelnost

88

4.3. Střet webové teorie s praxí Výsledky bývají leckdy až děsivé a vůbec ne ke chlubení. Na úvodní horizontálně zmražené stránce nekontrastního webu s malým písmem běží nekonečná ozvučená animace, kterou nejde ztlumit ani zastavit a podobně. Analyzovaný fakultní web je proti tomu navzdory svým nedostatkům poměrně obstojný. Klíčem k úspěchu je kombinace dobrého technologického zázemí (kvalitní redakční systém) se znalým správcem obsahu. To by měl mít každý majitel webu na paměti, pokud chce své stránky dlouhodobě udržet na vysoké úrovni.

89

KAPITOLA

Průvodce úpravou existující aplikace (e-shopu) Vývoj webových aplikací v dnešní době často spočívá v nasazování upravené existující (typicky volně šiřitelná) aplikace. Tím se přirozeně značně urychlí (a zlevní) vývoj, ovšem výsledná aplikace nebývá zdaleka optimální (jelikož se její účel více či méně různí od té původní). Typickým příkladem je omezení funkcionality, která je v nasazované aplikaci jednou z mnoha; a tedy není tak snadno dostupná, jak by mohla být. Průvodce úpravou existující aplikace má ukázat proces, kterým je možné nasazenou aplikaci dovést na nejvyšší úroveň přes veškeré (funkční) úpravy. Kompletní vývoj nové webové aplikace by se ve smyslu přístupnosti a použitelnosti neměl moc lišit. Na počátku přibude několik kroků popsaných v kapitole Testování použitelnosti jako konkurenční testování a prototypy. Průvodce je určený pro vývojářské týmy, protože se jedná o činnost, kterou nemůže vykonávat jednotlivec (především testování použitelnosti). Mimo samotné vývojáře se průvodce týká manažerů a vedoucích týmů, aby dokázali průběh procesu efektivně podpořit. Projekt je dobré průběžně (v rámci výstupů jednotlivých kroků) posuzovat, a to nejlépe s nadřízeným či přímo zadavatelem, ale vždy skupinově (v rámci setkání týmu). Odvážnější týmy mohou průvodce použít přímo k vývoji reálné zakázky. Primárně má ale průvodce sloužit pro vyškolení a „sehrání“ vývojářského týmu. Sekundárně potom i jako vodítko pro vývoj skutečných zakázek. Průvodce je rozdělen na 12 kroků, přičemž začíná vytvořením jednoduchých stránek se cvičným obsahem pro seznámení se s prostředím a základními nástroji. Následuje nasazení systému a propojení se statistikami. Další krok se věnuje pokročilému měření přístupů. Vše po technické i významové stránce. 91

5

5. Průvodce úpravou existující aplikace (e-shopu) Od pátého kroku se průvodce věnuje analýze přístupnosti formou nejprve automatizovaných a následně uživatelských testů a jejich řešením. Devátý krok zahrnuje expertní testování použitelnosti pomocí Nielsenova heuristického ohodnocení a předposlední dva kroky uživatelské testování použitelnosti s navrhováním oprav. Průvodce končí vyhodnocením zjištěných výsledků a rozhodnutím dalšího postupu s doporučením typických možností vzhledem k reálnému statusu projektu.

5.1

Sémantika webového obsahu

Cílem prvního kroku je vytvořit korektně strukturovanou webovou stránku, správně (v souladu se sémantikou) použít jednotlivé prvky HTML dokumentu a výsledek otestovat validátorem. Součástí úkolu je práce s mikroformáty a automatizované testování validity a přístupnosti stránky. Vývojáři by se měli seznámit se základními nástroji, s úložištěm a prostředím, ve kterém budou pracovat. Zkušenost zde získanou využijí už v přípravě na třetí setkání. Alternativně tím vývojáři dostávají šanci včas z projektu odstoupit za předpokladu, že neovládají požadované znalosti. 1. Vytvořte 2 přístupné HTML69 stránky • pouze strukturovaný obsah • neřešte navigaci, záhlaví a zápatí stránky • je možné použít jako zdroj dat web libovolné existující firmy • výsledný kód průběžně kontrolujte validátorem W3C70 • 1. stránka: Kontakty (adresa, telefon, mapa a další) • 2. stránka: libovolná (např. O společnosti, Podmínky spolupráce) 2. Do kontaktních informací vložte sémantické metainformace ve formě mikroformátů • Prostudujte informace o mikroformátech71 • Prostudujte specifikaci mikroformátů hCard72 • Případně si do prohlížeče doinstalujte rozšíření pro podporu mikroformátů (minimálně adres) 3. Prostudujte specifikaci schématu URI pro telefonní čísla 69 Volba konkrétní verze značkovacího jazyka je předmětem domluvy a vzhledem k průvodci je irelevantní. 70 http://validator.w3.org 71 http://microformats.org 72 http://microformats.org/wiki/hcard

92

5.2. Nasazení systému a propojení s Google Analytics • Podle příslušné specifikace73 upravte telefonní čísla v kontaktech • Ověřte správnost (validitu) výsledného kódu • Výsledek otestujte (v prohlížeči, mobilním zařízením) 4. Komplexní automatické testování • Stáhněte si a nainstalujte program Total Validator74 (případně i rozšíření pro Firefox) • Seznamte se s jeho použitím • Otestujte validitu a základní přístupnost výsledného kódu (stačí Úroveň 1, resp. A) 5. Vložte na stránky prohlášení o splnění příslušných norem • nezbytná je validita HTML • volitelná je validita CSS, pokud jsou styly připojeny • případně prohlášení o dosažené úrovni přístupnosti — pokud je splněna Pokročilý vývojář může tuto iniciační fázi průvodce s triviálním výstupem (takzvaný „Hello World“) vynechat. Ovšem pouze za předpokladu, že pracuje s nástroji a v takovém prostředí, které dobře zná včetně technologií obsažených v tomto kroku. To však není doporučeno, neboť tento výstup poslouží jako vstupní data pro třetí krok. Na následující setkání by si měli vývojáři připravit problémy, které se během realizace vyskytly.

5.2

Nasazení systému a propojení s Google Analytics

Cílem druhého kroku je nasazení (deployment) systému pro e-shop, jeho základní konfigurace a propojení se službou GA75 pro účely webové analytiky. Nasazovanou aplikací je OpenCart76 — volně šiřitelný elektronický obchod založený na technologii PHP. Robustní řešení e-komerce pro internetové prodejce umožňující vytvářet vlastní on-line byznys s minimálními náklady. Systém je dobře dokumentovaný a využívá přehlednou architekturu MVC. Robustnost (a otevřenost) systému je zároveň skvělou příležitostí upravit celou řadu vlastností pro konkrétní použití. Pro monitorování přístupů průvodce používá službu GA. Služba má jednoduchou instalaci a je k dispozici zdarma. 73

The tel URI for Telephone Numbers na http://tools.ietf.org/html/rfc3966 http://www.totalvalidator.com 75 Google Analytics 76 http://www.opencart.com 74

93

5. Průvodce úpravou existující aplikace (e-shopu) 1. Kontrola sémantiky (a přístupnosti) webového obsahu • Pomocí (ikon) prohlášení o shodě na webových stránkách provést kontrolu validity stránek (HTML, případně CSS, pokud existuje) • Pomocí nástroje Total Validator zkontrolovat deklarovanou shodu s doporučeními přístupnosti, pokud je uvedena • Diskuze jednotlivých řešení a jejich možných dopadů na přístupnost obsahu • Diskuze identifikovaných problémů při řešení přípravy z minulého kroku 2. Nasazení jednoduchého systému (e-shopu) OpenCart • Stažení instalačních souborů77 • Instalace aplikace OpenCart dle návodu78 • Nastavení databáze pro účely nasazení e-shopu • Základní úprava konfiguračních souborů aplikace podle dokumentace 3. Nastavení profilu na Google Analytics • Založení či aktivace účtu na GA • Založení profilu stránek (testovaného webu) • Přidání členů týmu k profilu s možností náhledu na data v GA 4. Propojení systému e-shopu s GA • Registrace příslušné internetové adresy s projektem • Vložení JS kódu79 na každou stránku projektu Přípravou na následující setkání je proto naplnění systému (správně strukturovanými) daty podle vzoru prvního kroku. Přitom je potřeba řešit technologická omezení systému. Proto mají vývojáři dále identifikovat problémy spojené s převodem stránek do systému a zabývat se vhodností různých přístupů k převodům. 77

http://www.opencart.com/index.php?route=download/download http://www.opencart.com/index.php?route=documentation/documentation&path=4 79 JS kód zobrazí GA na konci procesu registrace stránek. 78

94

5.3. Práce s Google Analytics

5.3

Práce s Google Analytics

Cílem třetího kroku je seznámení členů vývojářského týmu s technologií GA, poskytovanými nástroji pro webovou analytiku a interpretace měření a dat z GA pro přijetí adekvátních rozhodnutí v rozvoji webu. Důležitou myšlenkou je potom okrajové vpravení do problematiky správné interpretace naměřených výsledků s přímým vlivem na řízení e-komerce. Jedná se problematiku poměrně hlubokou a proto hlavní účelem je primárně participanty přesvědčit, že strohá (matematická či statistická) interpretace výsledků je relativně nehodnotná. 1. Kontrola převodu statických stránek do systému OpenCart • Kontrola funkčnosti • Kontrola zachování validity stránek • Kontrola zachování případné přístupnosti stránek a jejich obsahu 2. Diskuze problémů s převodem statických stránek do systému OpenCart a jejich řešení • Identifikace problémů s převodem stránek do systému • Diskuze navržených a použitých způsobů převodu • Volba optimální metody 3. Prezentace funkčnosti systému OpenCart a jeho propojení s GA • Kontrola funkčnosti nasazení systému • Kontrola propojení s GA • Existence profilu • Existence analytických dat (alespoň na minimální úrovni) ověřující funkčnost propojení s GA 4. Definice základních pojmů webové analytiky • Kliknutí (Hits) • Zobrazení stránky (Page views) • Unikátní návštěvníci (Unique visitors) • Návštěva nebo sezení (Visits or sessions) • Konverze (Conversions) 5. Vysvětlení základů práce s Google Analytics • Používání GA 95

5. Průvodce úpravou existující aplikace (e-shopu) • Interpretace základních ukazatelů • Limity možností a poskytovaných informací z GA • Bulharská konstanta ve webové analytice80 V přípravě na následující setkání mají vývojáři naplnit systém (zajímavými) produkty a stanovit si konkrétní cíle a způsob měření jejich dosažení.

5.4

Události na Google Analytics

Cílem čtvrtého kroku je rozšíření propojení webu s analytickým nástrojem GA pro lepší sledování dosahování stanovených cílů. Pomocí pokročilého propojení systému s nástrojem GA mohou členové týmu sledovat aktivity uživatelů, které jsou jinak pro měřící nástroje neviditelné. Typickým použitím může být sledování, které obrázky uživatel zvětšil nebo nad kterými produkty se pohyboval kurzor (aniž by došlo ke kliknutí). Demonstrovaným příkladem je pak použití pokročilého propojení na jednoduchém dotazníku, který uživatele nezdržuje a je možné odpovědět pouze na některé otázky. Výsledky jsou pak dobře dostupné ve statistikách — v přímé souvislosti s ostatními parametry. Není tedy potřeba pro vyhodnocování dotazníku modelovat vlastní sofistikovaný systém. I samotná realizace dotazníku (pouze pomocí JS) je zjednodušená. Nutno poznamenat, že za těchto okolností (zpracování dotazníku pomocí GA) není triviálně možné získávat bez technologie JS. Proto se tento přístup hodí pouze na vedlejší funkce, bez kterých web neutrpí na újmě (typicky ohodnocení článku). 1. Prezentace produktů v systému • Prezentace zaměření webu (e-shopu) na konkrétní typ „produktu“ (např. vtipy, zajímavá videa, tutoriály, obrázky s nějakým zaměřením) 2. Prezentace cílů webu • Diskuze nad zvolenými cíli webové aplikace (e-shopu) • Volby metriky pro určení míry splnění stanovených cílů • Diskuze nad relevancí jednotlivých ukazatelů/kritérií webové analytiky a jejich dopadů na rozhodování o změnách na webu 3. Pokročilé propojení aplikace s GA81 80 81

96

http://www.slideshare.net/mediocz/bulharska-konstanta-ve-webove-analytice https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide

5.5. Analýza přístupnosti • Přidejte do svého e-shopu možnost sledování událostí generovaných uživateli • Nastavení sledování události (JS) • Anatomie sledování událostí (HTML) 4. Práce s událostmi v GA • Ilustrativním příkladem může být web autora82 . Každý článek webu obsahuje seznam otázek, na které ve svém obsahu odpovídá. Uživatelé se tak mohou vyjádřit, jak srozumitelně článek podle nich odpovídá na jednotlivé otázky. Kladné hodnocení pošle do statistik hodnotu 1, zatímco záporné 0. (Statistiky nejsou veřejně přístupné.) Do následujícího setkání by vývojáři měli vytvořit sledování minimálně dvou typů událostí, které nejsou standardně viditelné v GA. Měli by odhadnout vliv sledovaných událostí na stanovené cíle a zamyslet se nad možnými problémy či nedostatky zvolených událostí a sběru takovýchto dat.

5.5

Analýza přístupnosti

Cílem pátého kroku je řešení problémů přístupnosti a jejího testování. Nástroje pro automatické testování přístupnosti se liší podle toho, za jakým účelem který vznikl. Vedle toho existuje skupina vlastností, které není možné automaticky zanalyzovat. Nad tímto tématem se na tomto setkání může vést diskuze současně s tématem hlavních problémů implementovaného systému (funkčních, obsahových) v oblasti přístupnosti. Vývojáři mají za úkol otestovat jednoduchou stránku pomocí 2 vybraných nástrojů a porovnat jejich výsledky. Rozdílnost přístupů a výsledků je dalším tématem diskuze spolu s důvody, proč v některých oblastech testovací nástroje nepracují (správně nebo vůbec). 1. Kontrola propojení událostí z e-shopu do GA • Prezentace struktury testovaný dat • Prezentace typů událostí a sbíraných hodnot 2. Prezentace pokročilého propojení s GA • Diskuze vlivu analyzovaných dat na stanovené cíle • Identifikace a diskuze možných problémů při sběru a interpretaci dat o událostech a jijich vlivu na splnění stanovených kritérií. 82

http://www.pralek.cz

97

5. Průvodce úpravou existující aplikace (e-shopu) 3. Testování základní přístupnosti — možnosti • Diskuze možností automatického, poloautomatického a uživatelského testování přístupnosti • Identifikace hlavních problémů systému (funkčních, obsahových, . . . ) v oblasti přístupnosti 4. Přehled software pro automatické testování přístupnosti • Práce se seznamem dostupných automatických nástrojů • Výběr vhodných nástrojů • (kapitola 2.8.3 Nástroje pro automatické testování ) 5. Seznamte se s minimálně 2 „komplexními“ automatizovanými nástroji pro testování přístupnosti • Otestujte jednoduchou stránku pomocí těchto 2 nástrojů a porovnejte jejich výsledky • Diskutujte jejich rozdílné přístupy k testování a důvody rozdílnosti výsledků • Popište oblasti, ve kterých testovací nástroje nepracují (správně nebo vůbec) a pokuste se odhadnout důvody, které k tomu vedou 6. Seznamte se s minimálně jedním „specializovaným“ automatizovaným nástrojem pro testování specifické oblasti přístupnosti • Pokud pro danou oblast existuje více rozdílných nástrojů, pokuste se je porovnat 7. Prostudujte metodiky tvorby prohlášení o shodě přístupnosti • (kapitola 2.8.4 Formalizace výstupu z testování ) Do dalšího setkání týmu mají vývojáři vypracovat předběžnou hodnotící zprávu přístupnosti. Ta má vycházet minimálně ze 2 různých automatických nástrojů pro testování přístupnosti (jako celku) a jednoho nástroje pro testování specifické oblasti přístupnosti (např. testování kontrastu).

5.6

Řešení přístupnosti

Cílem šestého kroku je se seznámit s vnitřní programovou konstrukcí systému e-shopu a opravit některé nalezené problémy přístupnosti. Po diskuzi k odhaleným problémům přístupnosti a jejich řešení na tomto může dojít k demonstrativní (společné) opravě jednoho z problémů. Přitom se vývojáři seznámí s vnitřní strukturou aplikace. 98

5.7. Uživatelské testování přístupnosti 1. Prezentace předběžné hodnotící zprávy přístupnosti • Prezentujte připravenou hodnotící zprávu 2. Interpretace hodnocení, diskuze k jednotlivým problémům • Prezentujte metodiku hodnocení, její přínos a slabé stránky • Diskutujte odhalené problémy v přístupnosti a navržené řešení vedoucí k jejich odstranění 3. Prostudujte vnitřní strukturu aplikace OpenCart83 • Adresářová struktura • Aplikační interface (API) • Schémata 4. Jednoduchá oprava některého z problémů v přístupnosti • Vyberte si pokud možno co nejjednodušší odhalený problém aplikace v přístupnosti • Proveďte opravu na některé z úrovní • Obsahové (uživatelské) • Administrační • Programátorské — šablony • Programátorské — vnitřních funkcí Do příštího setkání týmu mají vývojáři opravit vybrané (společně či individuálně schválené) problémy a vytvořit stručnou zprávu o způsobu jednotlivých úprav. Různé nedostatky v přístupnosti je možné opravit na různých úrovních. Pro systémové chyby je dobré volit programátorskou úroveň, pro strukturální či obsahové chyby úroveň vyšší.

5.7

Uživatelské testování přístupnosti

Cílem sedmého kroku je provést uživatelské testy přístupnosti webové aplikace. Obsahem uživatelského testování přístupnosti jsou především oblasti, jejichž testování není možné (nebo jednoduché) automatizovat. Jedná se o možnost používat systém jako celek z různých prohlížečů, bez grafiky, bez myši či bez podpory JS. Zajímavou diskuzí je testování (a potenciální podpora) starších verzí prohlížečů, elektronických čteček, malých obrazovek (mobilů) a další. V oblasti posuzování jednoduchosti a čitelnosti už přístupnost naráží na tenkou hranici s použitelností. 83

http://www.opencart.com/index.php?route=documentation/documentation&path=77

99

5. Průvodce úpravou existující aplikace (e-shopu) 1. Prezentace oprav vybraných problémů • Diskuze nad použitými způsoby oprav 2. Uživatelské testování přístupnosti • Použití různých prohlížečů • Bez grafiky • Bez myši • Bez JS a podobně • Použití různých verzí prohlížečů • Použití alternativních zařízení a prohlížečů • Elektronické čtečky, mobily. . . • Použití kontroly překlepů a gramatiky • Posuzování obsahu z pohledu jednoduchosti a čitelnosti 3. Kritéria přístupnosti • Zadání normy či úrovně přizpůsobení • Šablona pro zprávu o výsledcích a závěrech testování přístupnosti Při testování přístupnosti obecně je dobré nejprve stanovit pravidla či úrovně přizpůsobení. Pro tyto účely vývojáři do příštího setkání týmu vyplní tabulku o výsledcích a závěrech z testování přístupnosti.

5.8

Řešení problémů přístupnosti

Cílem osmého kroku je navržení změn webové aplikace vedoucích ke splnění požadavků přistupnosti a jejich implementace. Nalezení některých nedostatků přístupnosti nemusí být triviální. Proto v první části setkání dojde k diskuzi nad vyplněním tabulky nedostatků. Následně budou členové týmu hledat vhodné způsoby jejich řešení. Dojde také k rozhodnutí, které z oprav nedostatků se budou implementovat. 1. Prezentace hodnotící tabulky splnění kritérií 2. Návrhy řešení nesplněných kritérií 3. Výběr, které ze zjištěných nedostatků se budou opravovat (a jak) Do dalšího setkání vývojáři dokončí vybrané úpravy a každý samostatně vypracuje Nielsenovo heuristické ohodnocení (NHO84 ). Na rozdíl od běžných 84

100

Nielsenovo heuristické ohodnocení

5.9. Expertní testování použitelnosti uživatelských testů je během vyhodnocování pomocí NHO možné plně zodpovídat otázky vyhodnocujícího. (Samozřejmě ideálně až po formulaci problému v dané otázce.) Přeneseně je tedy možné testovat i vlastní systém. Během samotného ohodnocování každý vývojář svůj systém několikrát projde, prozkoumá různé dialogy a porovná je s desaterem NHO (kapitola 3.6.4 Heuristické ohodnocení použitelnosti). Dodatečně může testující zvážit a navrhnout libovolné další principy použitelnosti, které ho během procesu napadnou a mohly by se vztahovat k některému z relevantních dialogů. Výstupem z NHO je seznam problémů použitelnosti v rozhraní aplikace s referencemi na ty principy použitelnosti, které jsou v návrhu porušeny v každém případě podle názoru vyhodnocujícího. Nestačí uvést, co se vyhodnocujícímu nelíbí, ale také proč (s odkazem na heuristiky nebo jiný výsledek použitelnosti). Vyhodnocující má být co nejvíce specifický a má uvádět každý problém samostatně (typicky pokud jeden dialog obsahuje více problémů).

5.9

Expertní testování použitelnosti

Cílem devátého kroku je odhalit základní nedostatky systému pomocí Nielsenova heuristického ohodnocení (NHO). Vývojáři mají dojít ke společnému závěru agregací svých individuálních výstupů NHO. Samostatné zpracování v přípravě na toto setkání je důležitou podmínkou kvalitních výsledků. Teprve následně je možné o problémech skupinově diskutovat. Tím je zaručeno, že se testující nebudou vzájemně ovlivňovat během procházení uživatelského rozhraní. Pro zjištěné nedostatky je potřeba najít vhodná řešení a rozhodnout, zda a na jaké úrovni se budou opravovat. V rámci navrhování řešení mohou vznikat lo-fi prototypy (mockupy). 1. Prezentace opravených nedostatků systému 2. Heuristické ohodnocení použitelnosti systému • společné vyhodnocení a navrhovaná řešení • zaznamenání individuálních odlišností 3. Návrh oprav zjištěných nedostatků systému • diskuze nad zjištěnými nedostatky • diskuze nad formou oprav (implementace, lo-fi návrh) Do příštího setkání mají vývojáři dokončit opravy zvolených nedostatků. Některá řešení mohou zůstat na úrovni (lo-fi či hi-fi) návrhů. Vývojáři mají dále připravit několik úkonů pro uživatelské testování použitelnosti. 101

5. Průvodce úpravou existující aplikace (e-shopu)

5.10

Uživatelské testování použitelnosti

Cílem desátého kroku je odhalit nejzávažnější problémy v použitelnosti webové aplikace pomocí uživatelských testů. Po prezentaci oprav z minulého kroku proběhne agregace přípustných úkonů pro testování. Následně vývojáři vzájemně otestují systém85 na vybraných úkonech tak, aby každý vývojář prováděl test jako testující i jako reportér. Různí testující mohou provádět různé úkony, podle náročnosti a množství. 1. Prezentace oprav nedostatků systému • implementace/lo-fi návrhy 2. Prezentace úkonů k testování • volba úkonů k testování 3. Testování použitelnosti ve dvojicích • vzájemné otestování disjunktních množin 2 – 3 úkonů • testovat je možné i prototypy • vzájemná diskuze nad vylepšením procesů (testovaných úkonů) Do příštího setkání zpracuje každý vývojář zprávu o testování (z pohledu reportéra). Ke zjištěným nedostatkům implementuje řešení nebo zpracuje jeho návrh (lo-fi či hi-fi podle náročnosti).

5.11

Úpravy aplikace za účelem zvýšení použitelnosti

Cílem jedenáctého kroku průvodce je vyzkoušet si různé metody návrhu UI a jejich úprav z pohledu maximalizace použitelnosti. Předmětem setkání bude diskuze nad nedostatky odhalenými pomocí uživatelského testování. K relevantním nedostatkům od určitého stupně závažnosti mohou zároveň vznikat návrhy řešení. Ze vzniklého seznamu relevantních nedostatků se určí několik (hlavních nebo nejzajímavějších) k implementaci. 1. Prezentace zjištění z testování a navrhovaných řešení • Diskuze nad navrhovanými řešeními 2. Návrh a implementace některých řešení • Tvorba lo-fi návrhu řešení k implementaci 85 Uživatelské testy by měli provádět nestranní uživatelé (kapitola 3.6.1 Testování před a během práce na UI). Pro cvičné účely postačí vývojáři.

102

5.12. Zhodnocení stavu a určení dalšího postupu Do příštího setkání mají vývojáři nalézt a implementovat řešení ke nedostatkům určeným k implementaci.

5.12

Zhodnocení stavu a určení dalšího postupu

Cílem závěrečného kroku je posouzení celkového stavu aplikace a rozhodnutí o dalším postupu. Některé způsoby řešení jsou pouze ve formě prototypů (zpravidla ty náročnější) a je potřeba vybrat a rozhodnout, které z nich se budou implementovat. Vše samozřejmě záleží na statusu aplikace — zda již byla nasazena na ostrý provoz, zda se jedná o vlastní projekt či zakázku, forma spolupráce se zadavatelem a podobně. Teoreticky je samozřejmě vhodné zahájit další iteraci tohoto průvodce. Od vyhodnocení statistik (pokud už nějaké jsou) a rozšíření o nové měřené události (krok 3) až nakonec. V praxi často vzniká potřeba doplňovat novou funkcionalitu a řešení případných problémů, které se v mezidobí nashromáždily.

103

Závěr Úkolem práce bylo prostudovat problematiky webové použitelnosti a přístupnosti včetně souvisejících norem a předpisů. Obsahem práce mělo být srovnání teoretických podkladů se soudobou praxí a sady nejlepších postupů pro tvorbu webů s ohledem na nejnovější teoretické poznatky i technické možnosti. Součástí zadání bylo vytvoření podrobného průvodce úpravou existující webové aplikace v kontextu přístupnosti a použitelnosti. Webová přístupnost má v porovnání s použitelností výhodu v relativně technickém charakteru. Práce vyšla z ucelených standardů, které doplňuje o českou legislativu a normy. Důraz je kladený na hlavní principy přístupnosti. K sestavení ucelené sady nejlepších postupů webové použitelnosti bylo třeba projít desítkami (dlouhodobě až stovkami) článků. Jednotlivé dílčí informace bylo nutné tematicky agregovat a tím vytvořit souvislou podmnožinu pravidel. Důmyslné poskládání jednotlivých témat vytvořilo celistvý pohled na použitelnost s důrazem na soudobé technologie. Srovnání teorie se soudobou praxí vychází především ze statistik dlouhodobého měření použitelnosti. Kapitola je rozšířena o základní analýzu běžného webu na příkladu stránek Fakulty informačních technologií. Pro názornost kapitola rozebírá i web, který je pro přístupnost a použitelnost přímo optimalizovaný. Průvodce úpravou existující aplikace vychází z kapitol testování přístupnosti resp. použitelnosti a zahrnuje celý proces úpravy existující aplikace včetně jejího nasazení a (pokročilého) propojení s webovou analytikou. Organizačně se průvodce opírá o zkušenost autora s vývojem webů (stránek i aplikací) a s vedením či konzultováním vývojářských týmů. Výsledkem práce je ucelená sada nejlepších postupů pro tvorbu přístupných a použitelných webů s důrazem na jejich testování. Práce ve své srovnávací části poukazuje na místa, kde se teorie střetává s praxí, a ukazuje, proč ani komerční produkty samotného autora práce nejsou všechny zdaleka tak kvalitní, jak by mohly být. Pomocí průvodce úpravou existující aplikace si je možné obsaženou problematiku aktivně osvojit. Zadání se podařilo splnit a zároveň naplnit i očekávání autora. Na práci je možné se odvolávat během vývoje webových aplikací, ať z pozice vývojáře, vedoucího projektu či zadavatele. Práce může také sloužit k pochopení 105

Závěr webové přístupnosti a použitelnosti a jejich důležitosti, a to jak odborníkům, tak i všem ostatním, kteří chtějí svou činnost kvalitně podpořit webem.

106

Literatura [1]

Elektronické obchodování. Dostupné z WWW: http://cs.wikipedia. org/wiki/Elektronick%C3%A9_obchodov%C3%A1n%C3%AD

[2]

Search Engine Optimization. Dostupné z WWW: wikipedia.org/wiki/Search_Engine_Optimization

[3]

Webdesign. Dostupné z WWW: http://cs.wikipedia.org/wiki/ Webdesign

[4]

Krug, S.: Don’t Make Me Think! A Common Sense Approach to Web Usability. Second Edition, New Riders Press, 2006, kapitola 6.

[5]


[6]


[7]

MVČR: Metodický pokyn k vyhlášce č. 64/2008 Sb. Dostupné z WWW: http://www.mvcr.cz

[8]

Nielsen, J.: 10 Best Intranets of 2011. Dostupné z WWW: http://www. useit.com/alertbox/intranet_design.html

[9]

Nielsen, J.: Banner Blindness: Old and New Findings. Dostupné z WWW: http://www.useit.com/alertbox/banner-blindness.html

http://cs.

[10] Nielsen, J.: Change the Color of Visited Links. Dostupné z WWW: http: //www.useit.com/alertbox/20040503.html [11] Nielsen, J.: Differences Between Print Design and Web Design. Dostupné z WWW: http://www.useit.com/alertbox/990124.html [12] Nielsen, J.: Drop-Down Menus: Use Sparingly. Dostupné z WWW: http: //www.useit.com/alertbox/20001112.html [13] Nielsen, J.: Fancy Formatting, Fancy Words = Looks Like a Promotion = Ignored. Dostupné z WWW: http://www.useit.com/alertbox/ fancy-formatting.html 107

Literatura [14] Nielsen, J.: Fast, Cheap, and Good: Yes, You Can Have It All. Dostupné z WWW: http://www.useit.com/alertbox/fast-methods.html [15] Nielsen, J.: Flash: 99% Bad. Dostupné z WWW: http://www.useit. com/alertbox/20001029.html [16] Nielsen, J.: How to Conduct a Heuristic Evaluation. Dostupné z WWW: http://www.useit.com/papers/heuristic/heuristic_evaluation. html [17] Nielsen, J.: How Users Read on the Web. Dostupné z WWW: http: //www.useit.com/alertbox/9710a.html [18] Nielsen, J.: Is Navigation Useful? Dostupné z WWW: http://www. useit.com/alertbox/20000109.html [19] Nielsen, J.: Let Users Control Font Size. Dostupné z WWW: http:// www.useit.com/alertbox/20020819.html [20] Nielsen, J.: Mega Drop-Down Navigation Menus Work Well. Dostupné z WWW: http://www.useit.com/alertbox/mega-dropdown-menus. html [21] Nielsen, J.: Mega-Menus Gone Wrong. Dostupné z WWW: http://www. useit.com/alertbox/mega-menus-wrong.html [22] Nielsen, J.: Microcontent: How to Write Headlines, Page Titles, and Subject Lines. Dostupné z WWW: http://www.useit.com/alertbox/ 980906.html [23] Nielsen, J.: Mobile Usability, First Findings. Dostupné z WWW: http: //www.useit.com/alertbox/mobile-usability-study-1.html [24] Nielsen, J.: Mobile Usability Update. Dostupné z WWW: http://www. useit.com/alertbox/mobile-usability.html [25] Nielsen, J.: Mobile UX Sharpens Usability Guidelines. Dostupné z WWW: http://www.useit.com/alertbox/mobile-ux-guidelines. html [26] Nielsen, J.: Mobile Web 2009 = Desktop Web 1998. Dostupné z WWW: http://www.useit.com/alertbox/mobile-2009.html [27] Nielsen, J.: Original Top Ten Mistakes in Web Design. Bod 5. Dostupné z WWW: http://www.useit.com/alertbox/9605a.html [28] Nielsen, J.: Parallel & Iterative Design + Competitive Testing = High Usability. Dostupné z WWW: http://www.useit.com/alertbox/ design-diversity-process.html 108

Literatura [29] Nielsen, J.: PDF: Unfit for Human Consumption. Dostupné z WWW: http://www.useit.com/alertbox/20030714.html [30] Nielsen, J.: Putting A/B Testing in Its Place. Dostupné z WWW: http: //www.useit.com/alertbox/20050815.html [31] Nielsen, J.: Screen Resolution and Page Layout. Dostupné z WWW: http://www.useit.com/alertbox/screen_resolution.html [32] Nielsen, J.: Search: Visible and Simple. Dostupné z WWW: http://www. useit.com/alertbox/20010513.html [33] Nielsen, J.: Site Map Usability. Dostupné z WWW: http://www.useit. com/alertbox/sitemaps.html [34] Nielsen, J.: Ten Good Deeds in Web Design. Dostupné z WWW: http: //www.useit.com/alertbox/991003.html [35] Nielsen, J.: Ten Usability Heuristics. Dostupné z WWW: http://www. useit.com/papers/heuristic/heuristic_list.html [36] Nielsen, J.: Top 10 Mistakes in Web Design. Včetně souvisejících článků. Dostupné z WWW: http://www.useit.com/alertbox/9605.html [37] Nielsen, J.: Top Ten Guidelines for Homepage Usability. Dostupné z WWW: http://www.useit.com/alertbox/20020512.html [38] Nielsen, J.: Transmedia Design for the 3 Screens (Make That 5). Dostupné z WWW: http://www.useit.com/alertbox/3-screens-transmedia. html [39] Nielsen, J.: Usability 101: Introduction to Usability. Dostupné z WWW: http://www.useit.com/alertbox/20030825.html [40] Nielsen, J.: Using Link Titles to Help Users Predict Where They Are Going. Dostupné z WWW: http://www.useit.com/alertbox/980111. html [41] Nielsen, J.: Weekly User Testing: TiVo Did It, You Can, Too. Dostupné z WWW: http://www.useit.com/alertbox/weekly-usability-tests. html [42] Nielsen, J.: Why You Only Need to Test with 5 Users. Dostupné z WWW: http://www.useit.com/alertbox/20000319.html [43] Nielsen, J.: Writing Style for Print vs. Web. Dostupné z WWW: http: //www.useit.com/alertbox/print-vs-online-content.html 109

Literatura [44] OnlineGraduatePrograms.com: Americans Don’t Have Time For Slow Websites [INFOGRAPHIC]. Dostupné z WWW: http://mashable.com/ 2012/03/14/slow-website-stats-infographic/ [45] Pavelka, J.: Proč jsou tyto stránky téměř bez grafiky. Dostupné z WWW: http://www.pralek.cz/grafika/ [46] ČVUT: BI-PHP - Programování PHP. Dostupné z WWW: https:// edux.fit.cvut.cz/courses/BI-PHP/ [47] ČVUT: BI-PJS - Programování v JavaScriptu. Dostupné z WWW: https://edux.fit.cvut.cz/courses/BI-PJS/ [48] ČVUT: BI-TUR Tvorba uživatelského rozhraní. Dostupné z WWW: https://edux.fit.cvut.cz/courses/BI-TUR/ [49] ČVUT: BI-WT1 Webové technologie 1. Dostupné z WWW: https:// edux.fit.cvut.cz/courses/BI-WT1/ [50] ČVUT: BI-WT2 Webové technologie 2. Dostupné z WWW: https:// edux.fit.cvut.cz/courses/BI-WT2/ [51] ČVUT: MI-NUR Návrh uživatelského rozhraní. Dostupné z WWW: https://edux.fit.cvut.cz/courses/MI-NUR/ [52] ČVUT: Seznam předmětů na Fakultě elektrotechnické ČVUT. Dostupné z WWW: http://www.fel.cvut.cz/education/bk/predmety/ predmetyAll.html [53] ČVUT: Seznam předmětů na Fakultě informačních technologií ČVUT. Dostupné z WWW: https://edux.fit.cvut.cz/ [54] W3C: Statement of Partial Conformance - Third Party Content. Dostupné z WWW: http://www.w3.org/TR/2008/REC-WCAG20-20081211/ #conformance-partial [55] W3C: Web Accessibility Initiative (WAI). Dostupné z WWW: http:// www.w3.org/WAI/ [56] WAI: Developing a Web Accessibility Business Case for Your Organization. Dostupné z WWW: http://www.w3.org/WAI/bcase/ [57] WAI: Evaluating Websites for Accessibility: Overview. Dostupné z WWW: http://www.w3.org/WAI/eval/Overview.html [58] WAI: Preliminary Review of Web Sites for Accessibility. Dostupné z WWW: http://www.w3.org/WAI/eval/preliminary.html 110

Literatura [59] WAI: Principle 1: Perceivable. Dostupné z WWW: http://www.w3.org/ TR/WCAG20/#perceivable [60] WAI: Principle 2: Operable. Dostupné z WWW: http://www.w3.org/ TR/WCAG20/#operable [61] WAI: Principle 3: Understandable. Dostupné z WWW: http://www.w3. org/TR/WCAG20/#understandable [62] WAI: Principle 4: Robust. Dostupné z WWW: http://www.w3.org/TR/ WCAG20/#robust [63] WAI: Template for Accessibility Evaluation Reports. Dostupné z WWW: http://www.w3.org/WAI/eval/template.html [64] WAI: Understanding Accessibility Support. Dostupné z WWW: http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html# uc-accessibility-support-head [65] WAI: WCAG 2.0 Conformance. Dostupné z WWW: http://www.w3. org/TR/WCAG20/#conformance [66] WAI: WCAG 2.0 Supporting Documents. Dostupné z WWW: http:// www.w3.org/TR/WCAG20/#intro-related-docs [67] WAI: Web Content Accessibility Guidelines (WCAG) 2.0. Dostupné z WWW: http://www.w3.org/TR/WCAG20/ [68] Wikipedia: ISO 9241. Dostupné z WWW: http://en.wikipedia.org/ wiki/ISO_9241 [69] Wikipedia: Usability. Dostupné z WWW: http://en.wikipedia.org/ wiki/Usability

111

PŘÍLOHA

Seznam použitých zkratek AJAX Z angl. Asynchronous JavaScript and XML, obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačítání . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 ATAG Doporučení přístupnosti nástrojům pro vytváření webů (z angl. Authoring Tool Accessibility Guidelines) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 AT Podpůrné technologie pro lidi s handicapem (z angl. Assistive technology či adaptive technology), typicky např. naslouchátko . . . . . . . . . . . . . . . . . 43 B2B Komerční transakce mezi dvěma byznysy (z angl. Business-to-business), typicky mezi výrobcem a velkoodběratelem nebo mezi velkoodběratelem a prodejci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 CAPTCHA Automatizované rozlišování lidí od počítačů (z angl. Completely Automated Public Turing test to tell Computers and Humans Apart), běžně známé jako skupina deformovaných písmen, která je potřeba opsat do formuláře . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 CJK čínské, japonské a korejské znaky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 CSS Kaskádové styly (z angl. Cascading Style Sheets) je jazyk pro popis způsobu webových zobrazení stránek. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

113

A

A. Seznam použitých zkratek ČVUT České vysoké učení technické v Praze . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

EARL Strojově čitelný formát pro reportování výsledků testování (z angl. The Evaluation and Report Language). . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21

GA Google Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

GUI Grafické uživatelské rozhraní (z angl. Graphical User Interface) . . . . . 53

HCI Interakce člověka s počítačem (z angl. Human-Computer Interaction) jako průnikový interdisciplinární obor, který se zabývá fenoménem tvorby uživatelských rozhraní . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

hi-fi Detailní zpracování včetně řady funkcí (z angl. High Fidelity), typicky za účelem tvorby prototypů. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

HTML Značkovací jazyk (z angl. HyperText Markup Language) pro vytváření webových stránek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

ISO/TR Technická zpráva Mezinárodní organizace pro normalizaci (z angl. International Organization for Standardization / Technical Report) . 54

ISO Mezinárodní organizace pro normalizaci (z angl. International Organization for Standardization) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

JS JavaScript, skriptovací jazyk zpravidla používaný jako interpretovaný programovací jazyk pro webové stránky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

lo-fi Velmi rychlé, hrubé či dokonce ruční nákresy (z angl. Low Fidelity), typicky za účelem tvorby prototypů. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

MVC Softwarová architektura Model-View-Controller . . . . . . . . . . . . . . . . . . . 20

NHO Nielsenovo heuristické ohodnocení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

114

OOP Objektově orientované programování (z angl. Object-oriented programming) jako metodika vývoje softwaru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 PDA Osobní digitální (či datový) asistent (z angl. Personal digital/data assistant) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 PHP Preprocessor, česky „PHP: Hypertextový preprocesor“, původně Personal Home Page) je skriptovací programovací jazyk určený především pro programování dynamických internetových stránek a webových aplikací . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 RDF Systém popisu zdrojů (z angl. Resource Description Framework) . . . 21 RIA Bohatá internetová aplikace (z angl. Rich Internet Application) má některé vlastnosti grafické desktopové aplikace. Většinou běží ve webovém prohlížeči, ale často pro svůj běh vyžaduje plug-in. . . . . . . . . . . . . . . . . . . 22 SEO Optimalizace pro vyhledávače (z angl. Search Engine Optimization) 24 UAAG Doporučení přístupnosti uživatelských agentů (z angl. User Agent Accessibility Guidelines) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 UI Uživatelské rozhraní (z angl. User Interface) . . . . . . . . . . . . . . . . . . . . . . . . . . 20 URL Jednotný lokátor zdrojů (z angl. Uniform Resource Locator) k jednoznačnému určení umístění zdrojů informací na internetu . . . . . . . . . . . . 52 VRML Grafický formát založený na deklarativním programovacím jazyce, který byl navržen především pro popis trojrozměrných scén . . . . . . . . . 64 W3C Mezinárodní konsorcium (z angl. World Wide Web Consortium), jehož členové společně s veřejností vyvíjejí webové standardy pro World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 WAI/ARIA Doporučení Iniciativy webové přístupnosti pro bohaté internetové aplikace (z angl. Web Accessibility Initiative / Accessible Rich 115

A. Seznam použitých zkratek Internet Applications Suite) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 WAI Iniciativa webové přístupnosti (z angl. Web Accessibility Initiative) 21 WCAG Doporučení přístupnosti webového obsahu (z angl. Web Content Accessibility Guidelines) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

116

PŘÍLOHA

Obsah přiloženého CD

DP_Pavelka_Jiri_2012.pdf........................textový obsah práce 117

B

Přístupnost a použitelnost webu

Recommend Documents