Masarykova univerzita Fakulta}w¡¢£¤¥¦§¨ informatiky !"#$%&'()+,-./012345<yA| Pˇr´ıstupnostwebov´ych aplikac´ı postaven´ych na aplikaˇcn´ıch r´amc´ıch Diplomova´ prace´ Michal Bureˇs Brno, 2013 Prohl´aˇsen´ı Prohlaˇsuji,ˇzetato diplomov´apr´aceje m´ymp˚uvodn´ım autorsk´ymd´ılem, kter´ejsem vypracoval samostatnˇe.Vˇsechny zdroje, prameny a literaturu, kter´ejsem pˇrivypracov´an´ı pouˇz´ıval nebo z nich ˇcerpal,v pr´aciˇr´adnˇecituji s uveden´ım´upln´ehoodkazu na pˇr´ısluˇsn´y zdroj. Vedouc´ı pr´ace: Mgr. LudˇekB´artek,Ph.D. ii Podˇekov´an´ı Chtˇelbych podˇekovat vedouc´ımu pr´aceMgr. Lud’ku B´artkovi za cenn´epˇripom´ınkyk m´e diplomov´epr´aci. iii Shrnut´ı C´ılemt´etopr´aceje zmapovat problematiku pˇr´ıstupnosti webov´ych aplikac´ıvyv´ıjen´ych s pouˇzit´ımaplikaˇcn´ıch r´amc˚u.Pr´acepˇredstavuje pojem pˇr´ıstupnosta pod´av´a´uvod do relevantn´ıch standard˚ua technologi´ıv kontextu Internetu a webov´ych aplikac´ı.N´aslednˇe je definov´anasada krit´eri´ıpro hodnocen´ıaplikaˇcn´ıch r´amc˚uz hlediska podpory tvorby pˇr´ıstupn´ych aplikac´ı.J´adrempr´aceje anal´yzavybran´eskupiny aplikaˇcn´ıch r´amc˚una z´akladˇetˇechto krit´eri´ı.Souˇc´ast´ıpr´acejsou tak´edvˇeuk´azkov´eaplikace, kter´eprakticky demonstruj´ıtechniky pro tvorbu pˇr´ıstupn´ych aplikac´ıv r´amc´ıch Google Web Toolkit a Apache Flex. iv Kl´ıˇcov´aslova pˇr´ıstupnost,webov´eaplikace, asistivn´ıtechnologie, webov´eaplikaˇcn´ır´amce,WAI-ARIA, WCAG, WCAG 2.0, JavaServer Faces, Google Web Toolkit, Cappucino, Flex, Silverlight, JavaFX, JQuery UI v Obsah 1 Uvod´ ......................................... 3 2 Od webovych´ str´anek k aplikac´ım ....................... 5 2.1 HTML a CGI .................................. 5 2.2 Applety ..................................... 6 2.3 DHTML ..................................... 6 2.4 AJAX ...................................... 7 2.5 Aplikaˇcn´ır´amce ................................ 7 3 Pˇr´ıstupnost na webu ............................... 8 3.1 Proˇcna pˇr´ıstupnostiz´aleˇz´ı ........................... 8 3.2 Pil´ıˇrepˇr´ıstupnostina webu .......................... 8 3.3 Asistivn´ıtechnologie .............................. 9 3.4 Standardy a doporuˇcen´ıW3C ......................... 11 3.4.1 WCAG 1.0 . 11 3.4.2 WCAG 2.0 . 14 3.4.3 WAI-ARIA . 15 4 Srovn´avac´ı krit´eria ................................ 17 4.1 S´emantika ovl´adac´ıch prvk˚u .......................... 17 4.2 Adaptabilita rozhran´ı ............................. 18 4.3 Ovladatelnost kl´avesnic´ı ............................ 18 4.4 Prevence a oprava chyb ............................ 18 4.5 Podpora alternativn´ıch grafick´ych t´emat ................... 19 4.6 Platformn´ınez´avislost ............................. 19 4.7 V´yvoj´aˇrsk´en´astroje a kvalita dokumentace . 19 5 Srovn´avan´e aplikaˇcn´ı r´amce ........................... 20 5.1 Spektrum r´amc˚upro v´yvoj webov´ych aplikac´ı . 20 5.1.1 Architektura . 20 5.1.2 Platforma . 21 5.1.3 Jazyk uˇzivatelsk´ehorozhran´ı . 22 5.2 Pˇrehledzvolen´ych r´amc˚u ............................ 23 6 Srovn´an´ı vybranych´ r´amc˚u ........................... 24 6.1 JavaServer Faces (JSF) ............................ 24 6.1.1 Hodnocen´ıkrit´eri´ı . 25 6.1.2 Shrnut´ı . 26 6.2 Google Web Toolkit .............................. 27 6.2.1 Hodnocen´ıkrit´eri´ı . 27 1 6.2.2 Shrnut´ı . 29 6.3 Cappucino .................................... 30 6.3.1 Hodnocen´ıkrit´eri´ı . 30 6.3.2 Shrnut´ı . 31 6.4 Apache Flex ................................... 32 6.4.1 Hodnocen´ıkrit´eri´ı . 32 6.4.2 Shrnut´ı . 34 6.5 Microsoft Silverlight .............................. 34 6.5.1 Hodnocen´ıkrit´eri´ı . 34 6.5.2 Shrnut´ı . 36 6.6 JavaFX ..................................... 36 6.6.1 Hodnocen´ıkrit´eri´ı . 36 6.6.2 Shrnut´ı . 37 6.7 JQuery UI .................................... 38 6.7.1 Hodnocen´ıkrit´eri´ı . 38 6.7.2 Shrnut´ı . 39 6.8 Ext JS ...................................... 40 6.8.1 Hodnocen´ıkrit´eri´ı . 40 6.8.2 Shrnut´ı . 41 7 Praktick´e pouˇzit´ı vybranych´ r´amc˚u ...................... 42 8 Tvorba aplikace v Google Web Toolkit .................... 43 8.1 Anal´yzaa n´avrh ................................ 44 8.2 Implementace a testov´an´ıpˇr´ıstupnosti .................... 45 8.2.1 Ovladatelnost kl´avesnic´ı . 45 8.2.2 Citelnostˇ pro asistivn´ıtechnologie . 46 8.2.3 Shrnut´ı . 47 9 Tvorba aplikace v Apache Flex ......................... 48 9.1 Anal´yzaa n´avrh ................................ 49 9.2 Implementace a testov´an´ıpˇr´ıstupnosti .................... 49 9.2.1 Ovladatelnost kl´avesnic´ı . 49 9.2.2 Citelnostˇ pro asistivn´ıtechnologie . 49 9.3 Shrnut´ı ..................................... 51 10 Z´avˇer ......................................... 52 11 Terminologicky´ slovn´ık .............................. 53 12 Obsah pˇriloˇzen´eho CD .............................. 56 13 Pouˇzit´a literatura ................................. 57 2 Kapitola 1 Uvod´ Se st´alerostouc´ı dostupnost´ı a popularitou Internetu jde ruku v ruce rozvoj techno- logi´ı,kter´eho vyuˇz´ıvaj´ı.Nad z´akladn´ımkonceptem hypertextov´ych dokument˚ua pro- tokolu HTTP [14] vyrostl v uplynul´ych dek´ad´ach bohat´yekosyst´emtechnologi´ı,kter´e otev´ıraj´ı nov´ezp˚usoby vyuˇzit´ı celosvˇetov´es´ıtˇe.Patˇr´ı mezi nˇemimo jin´eprovoz tak- zvan´ych webov´ych aplikac´ı.Oznaˇcujeme tak aplikace, ke kter´ymuˇzivatel pˇristupujepˇres s´ıt’ (Internet, pˇr´ıpadnˇeintranet) pomoc´ıwebov´ehoprohl´ıˇzeˇce.Webov´eaplikace radik´alnˇe zjednoduˇsuj´ıcelou ˇraduproces˚uve v´yvoji software (distribuce k uˇzivatel˚um,´udrˇzbaa aktualizace, zajiˇstˇen´ıkompatibility s r˚uzn´ymioperaˇcn´ımisyst´emy a zaˇr´ızen´ımia dalˇs´ı). Nen´ıtedy divu, ˇzesi v posledn´ıch letech z´ısk´avaj´ıvelkou popularitu a tvoˇr´ıst´alevˇetˇs´ı ˇc´astobsahu, se kter´ymse pr˚umˇern´yuˇzivatel Internetu setk´av´a. Tato pr´acesi d´av´aza c´ılnahl´ednoutbl´ıˇzedo problematiky pˇr´ıstupnosti(z anglick´eho accessibility) webov´ych aplikac´ı.U pˇrev´aˇznˇestatick´ych webov´ych str´anek(dokument˚u v jazyce HTML [36]) existuj´ızabˇehnut´ea ˇsiroce adoptovan´estandardn´ıtechniky, jak umoˇznitzpˇr´ıstupnˇen´ı obsahu uˇzivatel˚umse zvl´aˇstn´ımi n´arokya uˇzivatel˚umzaˇr´ızen´ı s omezen´ymizdroji (mobiln´ı telefony, tablety, . ). Nˇekter´ez tˇechto technik lze ve webov´ych aplikac´ıch bez velk´ych ´uprav pˇrevz´ıt,ale je zˇrejm´e,ˇzeto samo o sobˇenestaˇc´ı. Webov´eaplikace maj´ısice zpravidla st´alez´akladv HTML, ale d´ıkyrozs´ahl´emu pouˇzit´ı skriptov´an´ıse podobaj´ıv´ıceinteraktivn´ımuˇzivatelsk´ymrozhran´ım,neˇzdokument˚um. R´amcepro v´yvoj webov´ych aplikac´ı zpˇr´ıstupˇnuj´ı v´yvoj´aˇr˚umrozs´ahl´eknihovny kom- plexn´ıch ovl´adac´ıch prvk˚ua ˇc´astiuˇzivatelsk´ehorozhran´ıjsou pr˚ubˇeˇznˇeaktualizov´any, aniˇzby doˇslok nov´emu naˇcten´ıcel´ewebov´estr´anky. Udˇelattakov´yobsah srozumiteln´y pro bˇeˇznˇepouˇz´ıvan´easistivn´ıtechnologie (napˇr.odeˇc´ıtaˇceobrazovky) je natolik proble- matick´e,ˇzeproducenti software na to ˇcastobud’ zcela rezignuj´ı,anebo pro tento ´uˇcel poskytuj´ınez´avislevyvinut´ezjednoduˇsen´erozhran´ı.V t´etopr´acije prozkoum´anonˇekolik popul´arn´ıch aplikaˇcn´ıch r´amc˚u,pouˇz´ıvan´ych k tvorbˇewebov´ych aplikac´ıa vyhodnoceno, nakolik podporuj´ıtvorbu pˇr´ıstupn´ych uˇzivatelsk´ych rozhran´ı. Uvodn´ıˇc´astdiplomov´epr´acepodrobnˇejipˇribliˇzujekl´ıˇcov´epojmy.´ Pˇredstavuje hlavn´ı technologie, spojen´es webov´ymiaplikacemi a jejich historick´yv´yvoj. N´aslednˇese bl´ıˇze zab´yv´apojmem pˇr´ıstupnost,jeho v´yznamem a r˚uzn´ymiaspekty v kontextu webov´ych aplikac´ı.Seznamuje tak´eˇcten´aˇres nejd˚uleˇzitˇejˇs´ımistandardy, kter´ev t´etosouvislosti vydala skupina World Wide Web Consortium (W3C)1 a jejich aplikac´ıv praxi. Kapitoly 4 a 5 dokumentuj´ıv´ybˇer reprezentativn´ıskupiny aplikaˇcn´ıch r´amc˚ua de- 1. http://www.w3c.org 3 1. Uvod´ finuj´ı seznam krit´eri´ı, na z´akladˇekter´ych bude srovn´av´anajejich podpora pro v´yvoj pˇr´ıstupn´ych uˇzivatelsk´ych rozhran´ı.V kapitole 6 n´asleduje vlastn´ısrovn´an´ıvybran´ych r´amc˚u. Souˇc´ast´ıpr´aceje tak´en´avrha implementace uk´azkov´eaplikace s pouˇzit´ımsrovn´ava- n´ych aplikaˇcn´ıch r´amc˚u.Dokumentace tohoto procesu a uk´azkov´eaplikace je posledn´ı ˇc´ast´ıpr´ace. 4 Kapitola 2 Od webov´ych str´anekk aplikac´ım Webovou aplikac´ıje typicky rozumˇenaaplikace typu klient-server, jej´ıˇzklientsk´aˇc´ast bˇeˇz´ıv prostˇred´ıwebov´ehoprohl´ıˇzeˇce(na rozd´ılod nativn´ıch klient-server aplikac´ı,u nichˇz je uˇzivatelsk´erozhran´ına klientovi zprostˇredkov´anosamostatnˇeinstalovan´ymprogra- mem). To znamen´a,ˇzeklientsk´aˇc´astaplikace mus´ıpouˇz´ıvat technologie, kter´ymbˇeˇzn´e webov´eprohl´ıˇzeˇcerozumˇej´ı.To ji omezuje bud’ na pouˇzit´ıjazyk˚u,kter´ejsou v prohl´ıˇze- ˇc´ıch standardnˇepodporov´any (HTML1, CSS2, JavaScript3, . ), nebo na vyuˇz´ıv´an´ıdo- stateˇcnˇerozˇs´ıˇren´ych doplˇnk˚uprohl´ıˇzeˇce,vyd´avan´ych tˇret´ıstranou (napˇr.Java4, Flash Player5, Silverlight6). Tato kapitola obsahuje velmi struˇcn´ypohled do historie technik pro tvorbu dyna- mick´ych webov´ych str´aneka webov´ych aplikac´ı.Jej´ımc´ılemje podat z´akladn´ıpˇrehled o aktu´aln´ısituaci v oblasti webov´ych aplikac´ıa usnadnit orientaci mezi r˚uzn´ymitypy r´amc˚upro jejich v´yvoj, rozeb´ıran´ymiv pozdˇejˇs´ıch kapitol´ach. 2.1 HTML a CGI Vznik prvn´ıverze znaˇckovac´ıhojazyka HTML, kter´yje dodnes hlavn´ımpil´ıˇrem webov´eho obsahu, se datuje k roku 1990 [37]. Tato prvotn´ıspecifikace nezahrnovala ˇz´adnouformu interaktivity na stranˇeklienta. Webov´estr´ankymohly b´ytdynamick´epouze v tom smyslu, ˇzejejich obsah byl generov´anserverem na z´akladˇeakc´ı uˇzivatele. V´ysledn´y HTML dokument obdrˇzen´yuˇzivatelem uˇzbyl zcela statick´y.Velk´yrozvoj v tomto smyslu dynamick´ych webov´ych str´aneknastal po pˇredstaven´ınormy Common Gateway Inter- face (CGI) v roce 1993 [10]. Norma definovala rozhran´ımezi webov´ymserverem a ex- tern´ımprogramem, pouˇzit´ymk vygenerov´an´ıodpovˇedina poˇzadavek klienta. Umoˇznila tak pouˇz´ıvat libovoln´yjazyk pro generov´an´ıwebov´ych str´anekzcela nez´avislena imple- mentaci samotn´ehowebov´ehoserveru. Praktick´evyuˇzit´ıCGI bylo zpoˇc´atkudom´enou 1. http://www.w3.org/TR/REC-html40/ 2. http://www.w3.org/Style/CSS/specs 3. Skriptovac´ıjazyk vyvinut´yspoleˇcnost´ıNetscape a pozdˇejiformalizovan´yjako webov´ystandard pod n´azvem ECMAScript.