Ana Dračina POVEČEVANJE E-VKLJUČENOSTI Z UPORABO SMERNIC WCAG 2.0 Diplomsko delo Maribor, september 2012
POVEČEVANJE E-VKLJUČENOSTI Z UPORABO SMERNIC WCAG 2.0 Diplomsko delo Študentka: Študijski program: Smer: Mentor(ica): Somentor(ica): Lektor(ica): Ana Dračina Univerzitetni študijski program Informatika in tehnologije komuniciranja Tehnologije komuniciranja doc. dr. Gregor Polančič, univ. dipl. inž. rač. in inf. asist. Katja Kous, univ. dipl. inž. rač. in inf. mag. Nataša Koražija, prof. slov.
ZAHVALA Zahvaljujem se mentorju doc. dr. Gregorju Polančiču in somentorci asist. Katji Kous za vso pomoč in vodenje pri diplomskem delu. Zahvaljujem se družini, še posebej staršem, da so mi omogočili študij in me podpirali v času šolanja. Hvala tudi vsem ostalim prijateljem in sorodnikom za podporo, dobro voljo in kakršnokoli pomoč. I
Povečevanje e-vključenosti z uporabo smernic WCAG 2.0 Ključne besede: e-vključenost, smernice, WCAG 2.0, stopnje skladnosti UDK: 004-5:004.738.5(043.2) Povzetek V diplomskem delu smo najprej predstavili področje e-vključenosti in e-dostopnosti ter smernice standarda Web Content Accessibility Guidelines (WCAG) 2.0. Opisali smo tudi stopnje skladnosti in glede na doseženo stopnjo smo merila uspeha uredili v tabelarično obliko. S pomočjo spletnega orodja smo pridobili napake dveh spletnih strani: ene slovenske in ene nemške, obe strani pa ponujata zdravstvene storitve preko spleta. Te napake smo nato analizirali in na tak način ugotovili, da je stran, ki bolj upošteva merila uspeha opisanega standarda, nemška spletna stran. Tako smo tudi potrdili predvidevanja, da v Sloveniji spletne strani niso najbolj dostopne ljudem s posebnimi potrebami. II
Improving e-inclusion with WCAG 2.0. guidelines Key words: e-inclusion, guidelines, WCAG 2.0, Conformance Requirements UDK: 004-5:004.738.5(043.2) Abstract In the diploma thesis we first presented e-inclusion and e-accessibility and guidelines of standard Web Content Accessibility Guidelines (WCAG) 2.0. We also described Conformance Requirements and according to the level they achieve we arranged them in a tabular form. Using the online tool we obtained errors from two websites: one Slovenian and one German, both of them offer health care services over the internet. We analyzed these errors and in this way we found out that the website that complies more with the success criteria of the described standard is German site. We also confirmed the prediction that in Slovenia websites are not accessible to the people with disabilities. III
KAZALO VSEBINE 1 UVOD... 1 2 PREDSTAVITEV PODROČIJ DIPLOMSKEGA DELA... 3 2.1 E-vključenost in e-dostopnost... 3 2.2 Smernice WCAG 2.0... 6 2.2.1 Zaznavanje... 8 2.2.2 Upravljanje... 12 2.2.3 Razumljivost... 15 2.2.4 Robustnost... 18 2.3 Analiza doseganja stopenj skladnosti meril uspeha... 19 3 PRAKTIČNI DEL... 26 3.1 Metoda dela... 26 3.2 Predstavitev in primerjava predmetov analize... 26 3.3 Model ocenjevanja... 28 3.4 Rezultati... 30 4 ZAKLJUČEK... 38 VIRI... 40 5 PRILOGE... 41 7.1 Naslov študenta... 55 7.2 Kratek življenjepis... 55 IV
KAZALO SLIK Slika 2.1: Struktura načel standarda WCAG 2.0... 6 Slika 2.2: Captcha [7]... 10 Slika 2.3: Število meril uspeha glede na stopnjo skladnosti... 24 Slika 2.4: Razdelitev stopnje A med načela... 24 Slika 2.5: Razdelitev stopnje AA med načela... 25 Slika 2.6: Razdelitev stopnje AAA med načela... 25 Slika 3.1: Zaslonska slika začetne strani Barmer GEK... 27 Slika 3.2: Zaslonska slika začetne strani Zavoda za zdravstveno zavarovanje Slovenije... 28 Slika 3.3: Zaslonska slika dela spletne strani AChecker... 29 Slika 3.4: Prikaz rezultatov s pomočjo orodja AChecker... 30 Slika 3.5: Število znanih napak za nemško spletno stran... 36 Slika 3.6: Število znanih napak za slovensko spletno stran... 37 Slika 5.1: Druga stran spletne strani Barmer GEK... 52 Slika 5.2: Tretja stran spletne strani Barmer GEK... 52 Slika 5.3: Četrta stran spletne strani Barmer GEK... 53 Slika 5.4: Peta stran spletne strani Barmer GEK... 53 Slika 5.5: Šesta stran spletne strani Barmer GEK... 54 Slika 5.6: Druga stran spletne strani ZZZS... 54 Slika 5.7: Tretja stran spletne strani ZZZS... 55 V
KAZALO TABEL Tabela 2.1: Analiza SWOT... 4 Tabela 2.2: Poglavja WCAG 2.0... 7 Tabela 2.3: Lastnosti načel, smernic in meril uspeha... 8 Tabela 2.4: Razdelitev načela zaznavanja... 8 Tabela 2.5: Vizualna predstavitev... 12 Tabela 2.6: Razdelitev načela upravljanja... 12 Tabela 2.7: Zahteve prilagodljivosti časa... 14 Tabela 2.8: Razdelitev načela razumljivosti... 16 Tabela 2.9: Napake... 18 Tabela 2.10: Razdelitev načela robustnosti... 18 Tabela 2.11: Merila uspeha... 20 Tabela 3.1: Znane napake spletne strani Barmer GEK... 30 Tabela 3.2: Znane napake spletne strani ZZZS... 31 Tabela 4.1: Cilji... 38 Tabela 5.1: Potencialne napake nemške spletne strani Barmer GEK... 42 Tabela 5.2: Verjetne napake slovenske spletne strani ZZZS... 46 Tabela 5.3: Potencialne napake slovenske spletne strani ZZZS... 46 VI
SEZNAM UPORABLJENIH KRATIC KRATICA POMEN PREVOD Web Content Accessibility Smernice za dostopnost do WCAG Guidelines spletnih vsebin W3C World Wide Web Consortium Konzorcij svetovnega spleta RIS Raba interneta v Sloveniji IKT Informacijsko-komunikacijska tehnologija CAPTCHA Completely Automated Public Turing Test To Tell Computers and Humans Apart Popolnoma avtomatiziran javen, prestrukturiran preizkus, ki loči računalnike in ljudi ZZZS Zavod za zdravstveno zavarovanje Slovenije VII
1 UVOD Živimo v obdobju, ko je internet prisoten že skoraj v vsakem gospodinjstvu. Problem se pojavi ob vprašanju, kako je dostop do informacij na internetu prilagojen za ljudi z omejenimi zmožnostmi (invalidi, starejši ljudje ipd.). Z odgovorom na to vprašanje se ukvarjata dve veji informacijske družbe: e-dostopnost in e-vključenost, ki je pravzaprav širši pojem e-dostopnosti. Še natančneje pa rešitev problema opredeljujejo štiri načela, ki so določena s strani organizacije World Wide Web Consortium (W3C). Ta štiri načela so zaznavanje, upravljanje, razumljivost in robustnost. V diplomskem delu tako želimo opisati pojma e-dostopnost in e-vključenost ter predstaviti smernice s stopnjami skladnosti, ki omogočajo lažji dostop do internetne vsebine vsem ljudem, ne glede na njihove zmožnosti. Predvidevamo, da veliko število izdelovalcev spletnih strani ne pozna smernic, ki bi omogočile ljudem z omejenimi zmožnostmi lažje in potrebam prilagodljivo brskanje po spletu. Z diplomsko nalogo bi tako radi približali te smernice vsem ljudem, ki se na različne načine srečujejo z ustvarjanjem spletnih strani. Cilji diplomske naloge so predstavitev e-vključenosti in e-dostopnosti, identifikacija smernic, razlaga stopenj skladnosti in uporaba teorije na praktičnem primeru. Dosegli jih bomo s pomočjo pregleda literature, analize smernic in stopenj skladnosti ter praktičnega preizkusa smernic na eni izmed e-storitev. V uvodu smo tako na kratko predstavili temo diplomske naloge. Temu sledi predstavitev področij diplomskega dela, v katerem so podrobneje opisana pojma e-vključenost in e- dostopnost. V tem poglavju so prav tako opisane smernice WCAG 2.0 in stopnje skladnosti. 1
Sledi praktični del, v katerem lahko vidimo predstavitev metode dela, analizo dveh spletnih strani, ki ponujata zdravstvene e-storitve, metodo ocenjevanja in pa rezultate. V zaključku diplomskega dela so opisane ugotovitve diplomskega dela, omejitve, koristi za strokovnjake oz. končne uporabnike in možnosti za nadaljnje delo. 2
2 PREDSTAVITEV PODROČIJ DIPLOMSKEGA DELA V nadaljevanju je predstavljeno področje e-vključenosti in e-dostopnosti ter stopnje skladnosti. 2.1 E-vključenost in e-dostopnost Na področju informacijske družbe je e-vključenost (angl. einclusion) ena izmed glavnih nalog Evropske unije in tudi evropska komisija je zelo naklonjena reševanju problematičnosti glede e-vključenosti in temu pripadajočemu področju e-dostopnosti (angl. eaccessibility). Predvidevanja kažejo, da bo v Evropi kmalu kar 98 milijonov ljudi s težavami pri e-vključevanju [6]. V Sloveniji se ima Ministrstvo za šolstvo, znanost in tehnologijo namen usmeriti v povečanje vključenosti vseh ljudi v sodobne družbene in tehnološke tokove, hkrati pa bi se naj informacijska družba vključila v razvoj slovenske družbe kot celota. Bistvene dejavnosti bodo usmerjene predvsem tistim, ki imajo slabše možnosti za vključitev v informacijsko družbo (to so npr. ljudje s posebnimi potrebami, starejši, mlade družine, iskalci zaposlitve ipd.) [4]. Po raziskavah, ki jih je objavil RIS (Raba interneta v Sloveniji), se je povprečna starost spletnega uporabnika povečala s 33 let (leta 2009) na 36 let (leta 2011). To je zelo pozitiven podatek, saj kaže, da vedno več starejših uporablja internet [1]. Vizija e-vključenosti je tako vključevanje vseh ljudi, ne glede na starost, morebitno invalidnost, finančne težave, neinformiranost ipd. v informacijsko družbo, hkrati pa širiti širokopasovne povezave [5]. Kot smo že prej omenili, je e-dostopnost širši del zasnove e-vključenosti. E-dostopnost se zavzema za čim višjo pokritost s širokopasovnimi povezavami in za premagovanje 3
tehničnih ovir in težav. Tako nakazuje potrebo po dostopnosti in uporabi informacijskokomunikacijskih tehnologij (IKT) za vse ljudi, skupaj s tistimi s posebnimi potrebami. Pozitivne in negativne strani e-vključenosti lahko prikažemo tudi z analizo SWOT, ki jo lahko vidimo v Tabeli 2.1. Tabela 2.1: Analiza SWOT PREDNOSTI [6] POMANJKLJIVOSTI [6] Zmanjševanje razlik v uporabi IKT storitev Premalo dostopnih IKT storitev za ljudi s med ljudmi s posebnimi potrebami in posebnimi potrebami drugimi Premalo storitev v uporabniku domačem Ekonomski in družbeni napredek jeziku Večji in lažji dostop do informacij Razlike na področju digitalnih znanj S širjenjem uporabe IKT so nekateri ljudje v Rast produktivnosti vedno večjem zaostanku Zmanjševanje stroškov socialne in Še vedno velika digitalna ločnica ekonomske izključenosti Vključevanje ljudi s posebnimi potrebami v informacijsko družbo PRILOŽNOSTI NEVARNOSTI Nova delovna mesta Izguba socialnega stika Širši spekter znanj Ne-interes za nove tehnologije in storitve Razvoj novih tehnologij in rešitev za Neznanje glede uporabe storitev invalide in gibalno ovirane ljudi Razvoj spletnih informacijskih storitev na področju socialnega varstva, tudi za ljudi s posebnimi potrebami 4
Strateški cilji za povečevanje e-vključenosti in s tem tudi e-dostopnosti so: z elektronskimi storitvami na enostaven način omogočiti mladim družinam in starejšim reševanje zadev, vzpostavitev informacijskih točk, kjer bi ljudje dobili vse informacije o socialnem varstvu, gradiva, informacije, vsebine, bi bile prilagojene tako za invalide kot za druge ljudi, razvoj ustreznih tehnologij in rešitev za invalide in gibalno ovirane, ki bi omogočale enostavno uporabo storitev informacijske družbe, večje vključevanje ljudi s posebnimi potrebami v raziskave in v razvoj rešitev IKT, razvoj spletnih informacijskih storitev v socialnem varstvu, ki bi omogočale vsem uporabnikom enake možnosti uporabe teh storitev, redno obveščanje ljudi o novih storitvah, ki pripomorejo k večji vključenosti v informacijsko družbo, uvajanje usposabljanj na področju informacijske družbe, ustanovitev medgeneracijskih središč, kjer bi ljudje razvijali e-vsebine in se usposabljali na področju informacijske družbe, težja k večji uporabi IKT za boljšo povezanost in večje navezovanje stikov med invalidi in gibalno oviranimi ljudmi, večanje naložb v izobraževanje na področju informacijske družbe. Področja delovanja pa so naslednja [6]: zmanjševanje digitalne ločnice, večja težnja k razvoju, raziskavam in uvedbi različnih rešitev in storitev informacijske družbe, ki bi bila v pomoč invalidom in gibalno oviranim ljudem, dejansko vključevanje vseh ljudi v sodobne družbene in tehnološke tokove, enakopravne možnosti vseh skupin prebivalcev za vključitev v informacijsko družbo, podpiranje politike k hitrejšemu in kakovostnemu uvajanju IKT-ja na področju socialnega varstva oz. dela. 5
2.2 Smernice WCAG 2.0 Celotna diplomska naloga temelji na WCAG 2.0 dokumentu, ki je bil ustvarjen decembra leta 2008 pod okriljem W3C in je nadgradnja WCAG 1.0 dokumenta. Standard je preveden v 17 drugih jezikov, v slovenskem jeziku ga še zaenkrat ni. Glavni del zajema 4 načela, ki vsebujejo 12 smernic, smernice pa 61 meril uspeha. Razdelitev načela smernice prikazuje Slika 2.1, pri kateri vijolična barva prikazuje načela, modra pa smernice. WCAG 2.0 ZAZNAVANJE UPRAVLJANJE RAZUMLJIVOST ROBUSTNOST Možnosti besedila za nebesedilne vsebine Dostopnost preko tipkovnice Berljivost Združljivost Časovno omejen medij Dovolj časa ta uporabnike Prilagodljivost Prilagodljivost Zdravstveni napadi Vhodna pomoč Razlikovanje Navigacija Slika 2.1: Struktura načel standarda WCAG 2.0 Standard WCAG 2.0 vsebuje poleg opisa smernic tudi razne nasvete za razvijalce, dodatne informacije o smernicah in prilagodljiva navodila o zahtevah. Ta poglavja, skupaj z vsebino, lahko vidimo v Tabeli 2.2. Dokument je prvotno namenjen razvijalcem spletnih 6
vsebin in orodij ter vsem tistim, ki želijo na spletni strani uporabiti tehnični standard za spletno dostopnost [8]. Tabela 2.2: Poglavja WCAG 2.0 POGLAVJA OPIS VSEBINA Prilagodljiva Smernice Spoznavanje navodila o Merila uspeha WCAG 2.0 zahtevah Tehnike Tehnike WCAG 2.0 WCAG 2.0 Razumevanje WCAG 2.0 Nasveti za razvijalce W3C Standard Dodatne informacije Viri Primeri Programski kod Navodila podpore za brskalnike in podporne tehnologije Postopki testiranja Načela Smernice Merila uspeha Skladnosti Privilegij ljudi s posebnimi potrebami Primeri različnih možnih scenarijev Viri Tehnike Vsako načelo, smernica ali merilo uspeha ima svoje lastnosti, katere lahko vidimo v Tabeli 2.3. 7
Tabela 2.3: Lastnosti načel, smernic in meril uspeha NAČELA SMERNICE MERILO USPEHA Spletni strani da želeno Ločujejo merila uspeha v Združujejo smernice v štiri dostopnost, saj ima vsaka različne kategorije, ki načela izmed teh dodeljeno pokrivajo različna področja stopnjo skladnosti Nanašajo se na pretekle, sedanje in prihodnje Ne morejo se testirati Lahko se testirajo tehnologije. Pomagajo razumeti različna merila uspeha 2.2.1 Zaznavanje Prvo izmed načel je zaznavanje, ki vsebuje štiri smernice in 22 meril uspeha. Razdelitev lahko vidimo v Tabeli 2.4. Tabela 2.4: Razdelitev načela zaznavanja SMERNICA Možnosti besedila za nebesedilne vsebine Časovno omejen medij MERILO USPEHA Možnosti besedila za nebesedilne vsebine Samo avdio in samo video (vnaprej posneto) Napisi (vnaprej posneto) Zvočni opis ali medijska alternativa (vnaprej posneto) Napisi (v živo) Zvočni opis (vnaprej posneto) Znakovni jezik (vnaprej posneto) 8
SMERNICA Prilagodljivost Razlikovanje MERILO USPEHA Obširnejši zvočni opis (vnaprej posneto) Medijska alternativa (vnaprej posneto) Samo avdio (v živo) Informacije in relacije Smiselno zaporedje elementov Senzorične lastnosti Uporaba barv Nadzor zvoka Minimalni kontrast Nastavljiva velikost besedila Slike besedila Okrepljen kontrast Tišji zvok oz. brez zvoka v ozadju Vizualna predstavitev Slike besedila (brez izjeme) Načelo zaznavanja omogoča, da so vse informacije in komponente napisane tako, da jih uporabnik lahko zazna [3]. To pomeni, da mora za pomembne informacije vedno obstajati enakovredna alternativa za ljudi, ki ne morejo uporabljati vsaj enega izmed svojih čutov. Izjema je le primer, kadar za določeno komponento ali informacijo že obstaja alternativa. V primeru, da imamo na spletni strani nebesedilno vsebino 1, mora ta imeti enakovredno alternativo besedilne vsebine. Obstajajo pa primeri, kadar je potrebno, da je vsebina nebesedilna. Te izjeme so: kontrole in vhodi, časovno omejeni mediji, testi, posebna 1 Nebesedilna vsebina je vsebina, ki je prikazana ljudem z namenom čutnega zaznavanja. 9
senzorična izkušnja, dekoracija/oblikovanje/nevidnost in captcha (lahko jo vidimo na Sliki 2.2). Slika 2.2: Captcha [7] Časovno omejen medij (angl. Time-based media) je sestavljen iz zvočnih in video posnetkov, kombinacije obeh ali pa vključuje zvočne oz. video materiale. Pri zvočnih posnetkih, ki so lahko vnaprej posneti ali pa predvajani v živo, moramo zagotoviti napise 2, prav tako pa moramo zagotoviti napise za vse dogodke, ki so predvajani v realnem času. Če želimo vključiti še večjo množico uporabnikov, pa moramo zraven napisov zagotoviti tudi opis informacij v tekstovni obliki. Kadar na spletno stran vključimo vnaprej posnet zvočni posnetek, mora biti na voljo enakovredno besedilo. Tako lahko tudi uporabniki, ki imajo težave s sluhom, koristijo informacije. Poleg tega moramo takšnim zvočnim posnetkom zagotoviti tudi interpretacijo znakovnega jezika. Za največjo možno dostopnost moramo zagotoviti, da zvočni zapis ne vsebuje zvočnega ozadja, slednje mora imeti možnost ugasnitve, glasbeno ozadje pa je vsaj 20dB nižje, kot govor v ospredju. Možna izjema je le t. i.»captcha«, kjer je zvok v ozadju dovoljen za preprečitev avtomatiziranemu sistemu, da prepozna govor. Pri video vsebinah moramo biti pozorni, da so informacije dostopne tudi preko zvočnega zapisa oz. opisa, saj na tak način omogočimo ljudem s kognitivnimi težavami in slepim, da prejmejo informacije. V primeru, da želimo krog uporabnikov povečati, pa moramo 2 Napisov ne smemo zamenjevati s podnapisi, saj prvi vsebujejo več informacij. 10
zagotoviti obširnejši zvočni opis 3, ki pomaga ljudem s posebnimi potrebami, da pridobijo dodatne informacije o določeni sceni z video posnetka [2]. Vsa vsebina, ki je uporabljena na spletni strani, mora biti prilagodljiva, kar pomeni, da je lahko predstavljena na različne načine. Kljub temu pa ne sme izgubiti informacij in strukture, ki so poleg relacij lahko programsko določene ali pa so v tekstovni obliki [3]. Pomembno je, da imajo podporne tehnologije dostop do informacij, saj jih lahko na tak način predstavijo v obliki, ki je primerna potrebam uporabnika. Pri tem so jim v pomoč tudi HTML elementi. Paziti moramo tudi na smiselno zaporedje elementov 4, ki je prav tako lahko programsko določeno. Kadar uporabljamo zvočne efekte, ki se navezujejo na odziv računalnika, moramo zagotoviti primerno alternativo, ki pa se ne sme nanašati na senzorične lastnosti [2]. Pri ustvarjanju spletne strani moramo uporabniku omogočiti, da čim lažje razlikuje med barvami in tudi med ozadjem ter ospredjem [3]. Barve moramo uporabiti na smiseln način, saj mora stran biti dostopna tudi, če je samo v črno-beli barvi. Pomembno je tudi, da ima uporabnik nadzor nad zvokom, kar pomeni, da mora vsak zvočni posnetek, ki traja dlje kot 3 sekunde, imeti takšen nadzor glasnosti, ki je neodvisen od sistemskega nadzora glasnosti. To omogoča predvsem ljudem, ki uporabljajo bralnik zaslona, da lažje ločijo med zvokom bralnika zaslona in zvokom s spletne strani [2]. K boljšemu razlikovanju pripomore tudi kontrast, ki je lahko minimalen ali pa okrepljen. Prvi ima razmerje vsaj 4:5:1, slednji pa vsaj 7:1. Izjema je povečano besedilo in slike povečanega besedila. Tako je v primeru izjeme pri minimalnem kontrastu razmerje vsaj 3:1, pri okrepljenem pa vsaj 4:5:1. Logotipi, blagovne znamke, besedila, slike besedila, ki služijo samo dekoraciji, pa nimajo najmanjšega zahtevanega razmerja [3]. Če želimo, da našo spletno stran uporablja največje možno število uporabnikov, potem lahko slike besedila uporabimo samo za dekoracijo oz. tam, kjer je takšen način predstavitve besedila pomemben za posredovanje informacij (npr. digitalni podpis). Nastavljiva mora biti velikost besedila 5, ki omogoča spremembo besedila do 200 %, brez pomoči podporne 3 Primerno je, da obstaja možnost, da se uporabnik zanj sam odloči. V primeru, da se zanj odloči, potem lahko posnetek zaustavi, pridobi dodatne informacije in nato nadaljuje s predvajanjem. 4 To lahko dosežemo z uporabo CSS-a. 5 Ne velja za napise in slike besedila. 11
tehnologije. Da je besedilo bolj berljivo, je potrebno informacije pravilno vizualno predstaviti. Pomembne napotke za to lahko vidimo v Tabeli 2.5 [2]. Tabela 2.5: Vizualna predstavitev VIZUALNA PREDSTAVITEV Širina ne presega 80 znakov Razmik med vrsticami je vsaj 1.5, med odstavki pa 1.5-krat večji kot med vrsticami Samostojna izbira barve ozadja in ospredja Besedilo ni poravnano obojestransko 2.2.2 Upravljanje Drugo načelo je upravljanje. Sestavljajo ga prav tako štiri smernice in 20 meril uspeha, kar prikazuje Tabela 2.6. Tabela 2.6: Razdelitev načela upravljanja SMERNICA Dostopnost preko tipkovnice Dovolj časa za uporabnike Zdravstveni napadi (angl. Seizures) MERILO USPEHA Tipkovnica Brez pasti tipkovnice Tipkovnica (brez izjeme) Prilagodljiv čas Premor, zaustavitev, nevidnost Brez časovnega roka Prekinitve Ponovno preverjanje pristnosti Tri utripi ali pod pragom (angl. Three Flashes or Below Threshold) Tri utripi (angl. Three Flashes) 12
SMERNICA Navigacija MERILO USPEHA Izogibanje blokov vsebine Naslov strani Žarišče vrstnega reda Povezava namena (v kontekstu) Različni načini iskanja spletne strani Naslovi in nalepke Vidno žarišče Lokacija Povezava namena (samo povezava) Področje naslovov Vse komponente, ki so uporabljene na spletni strani, skupaj z navigacijo, morajo biti upravljive. Prav tako pa morajo biti vse funkcionalnosti dostopne preko tipkovniškega vmesnika [3]. Miška, ki lahko služi kot alternativa tipkovnice, ni uporabna za ljudi z okvaro vida. Pomembno je, da če z miško potrebujemo samo en klik, da izvršimo nek ukaz, potem mora biti s tipkovnico podobno. V primeru, da gre uporabnik na določen del aplikacije, mu mora biti omogočeno, da se lahko na prvotno lokacijo vrne samo s pomočjo tipkovnice. Kadar želimo stran narediti dostopno največji množici uporabnikov, pa ne smemo uporabiti časovne omejenosti 6. Vsem uporabnikom moramo dati na voljo dovolj časa, da lahko preberejo in uporabijo vsebino. Omejene seje so lahko pomembne, kadar moramo neko opravilo zaključiti v določenem časovnem obdobju. Da ima uporabnik kljub temu dovolj časa, je potrebno zagotoviti, da je časovni rok 7 lahko prilagodljiv. To prilagodljivost določa šest zahtev, ki jih lahko vidimo v Tabeli 2.7. V primeru, da časovni rok ni pomemben del vsebine dogodka, lahko s tem povečamo dostopnost strani [2]. 6 Časovna omejenost pomeni, da mora biti tipka na tipkovnici pritisnjena in zadržana za določeno časovno obdobje ali pa pritisnjena n-krat v določenem časovnem obdobju. 7 V primeru, da časovni rok ni pomemben del vsebine dogodka, lahko s tem dosežemo največjo možno dostopnost. 13
Tabela 2.7: Zahteve prilagodljivosti časa ZAHTEVA Izklop časovnega roka Prilagoditev časovnega roka Podaljšanje časovnega roka Izjema realnega časa Pomemben časovni rok 20-urna izjema OPIS Uporabnik lahko predhodno izklopi časovni rok. Uporabnik lahko prilagodi časovni rok glede na različno dane dolžine. 8 Uporabnik je pred potekom časovnega roka opozorjen in ga lahko v roku 20 sekund podaljša. Uporabnik ne more podaljšati časovnega roka, kadar je ta pomemben del dogodka realnega časa (npr. dražba). Uporabnik ne more podaljšati časovnega roka, kadar bi to pomenilo neveljavno aktivnost. Uporabniku je na razpolago časovni rok, ki je daljši od 20 ur. Spletna stran lahko vsebuje tudi samodejno nadgrajujočo, premikajočo ali utripajočo informacijo, ki je predstavljena vzporedno z drugo vsebino, poleg tega pa se lahko slednje zaženejo samodejno in trajajo dlje kot 5 sekund. V takšnem primeru moramo uporabniku zagotoviti orodje, ki lahko te informacije skrije, ugasne, ustavi, pri samodejno nadgrajujočih informacijah pa tudi nadzoruje posodobitve. Izjemo lahko naredimo le, kadar so takšne informacije del pomembne aktivnosti [3]. Pojavijo se lahko tudi prekinitve, katere lahko uporabnik zatre ali odloži, razen v izrednih situacijah, kot so izguba podatkov, življenjska ogroženost, varnost. Izgubo podatkov moramo preprečiti tudi, kadar spletna stran zahteva ponovno preverjanje identitete medtem, ko je uporabnik že začel določeno opravilo [2]. 8 Ena izmed danih dolžin mora biti vsaj desetkratna dolžina privzete nastavitve. 14
Pomembno je, da na spletni strani ni objavljeno ničesar, kar utripne več kot trikrat v enosekundnem obdobju. Utripanje lahko nekaterim uporabnikom povzroči zdravstvene napade [3]. Uporabnikom mora biti omogočena tudi enostavna navigacija, s pomočjo katere lažje iščejo vsebino in imajo pregled, kje se nahajajo. Na voljo jim mora biti najmanj en način za iskanje želenih podatkov med spletnimi stranmi, ki si morajo slediti v smiselnem zaporedju. Lokacijo pa najpogosteje določimo s pomočjo drobtinic. Ljudem s posebnimi potrebami bomo prihranili veliko časa, če bomo na spletno stran vključili orodje, ki bo omogočalo izogibanje vsebini oz. elementu, ki se ponavlja na več spletnih straneh. Vsem uporabnikom pa moramo vizualno nakazati, kje bo potekal naslednji ukrep. Naslovi, nalepke (angl. label) in področja naslovov 9 morajo biti edinstveni in pri tem opisovati namen ter vsebino, ki sledi. Ime nalepke mora biti samo po sebi že dovolj, da bo uporabnik razumel namen področja za urejanje, ki ga ta opisuje. Pri uporabi povezav moramo biti pozorni, da bo uporabnik že samo z branjem besedila povezave vedel, kakšna funkcionalnost se nahaja na spletni strani. Pri imenovanju moramo paziti na doslednost povezava na isto stran, z različne lokacije, mora biti podobno poimenovana [2]. 2.2.3 Razumljivost Razumljivost je tretje načelo, predstavljeno v WCAG 2.0 standardu. Zajema tri smernice in 17 meril uspeha. Kako je načelo razdeljeno, nam prikazuje Tabela 2.8. 9 Področje naslovov uporabljamo za organizacijo vsebine, uporabljati pa jih moramo glede na hierarhijo: za Naslovom 1 mora vedno biti Naslov 2 in nikoli Naslov 3. 15
Tabela 2.8: Razdelitev načela razumljivosti SMERNICA Berljivost Predvidljivost Vhodna pomoč MERILO USPEHA Jezik strani Jezik določenih delov vsebine Nenavadne besede Okrajšave Stopnja branja Izgovorjava Žarišče Vhod Dosledna navigacija Dosledna identifikacija Sprememba na zahtevo Napaka identifikacije Nalepke in navodila Predlogi napak Preprečevanje napak (pravnih, finančnih, podatkovnih) Pomoč Preprečevanje napak (vseh) Informacije morajo biti predstavljene na razumljiv način, prav tako tudi delovanje uporabniškega vmesnika [3]. Vsebina mora biti berljiva tako uporabniku, kot tudi podpornim tehnologijam. Stopnja branja ne sme biti naprednejša od nižje ravni osnovnošolskega izobraževanja, saj moramo v nasprotnem primeru zagotoviti dodatno verzijo, ki ne zahteva teh sposobnosti branja. Za ljudi, ki uporabljajo bralnik zaslona, moramo navesti smer besedila. Programsko moramo določiti tudi privzeti jezik spletne strani. Kadar v vsebino vključimo katero besedo ali besedilo, ki ne spada pod privzeti jezik, moramo ta del vsebine posebej 16
opredeliti in določiti primeren jezik. Zagotoviti moramo orodje 10, ki identificira specifične definicije oz. pomen nenavadnih besed ali okrajšav. Prav tako mora biti na voljo izgovorjava besed, katerih pomen je lahko dvoumen. Delovanje in prikazovanje spletne strani mora biti predvidljivo, v primeru, da to ni mogoče, pa moramo uporabniku vnaprej zagotoviti opozorila in navodila za nadaljnje ravnanje. Kadar bi razna spreminjanja nastavitev oz. vhoda določene komponente spremenila vsebino, moramo pred uporabo le-te prav tako zagotoviti opozorilo. Če želimo zajeti največ možnih uporabnikov, pa moramo poskrbeti, da do spremembe ne bo prišlo brez privolitve uporabnika [2]. Pomembna je tudi doslednost. Pri ponavljajočih se navigacijskih orodjih se to kaže tako, da se ta vedno pojavijo v enakem vrstnem redu. V primeru, da želimo še dosledno identifikacijo, pa morajo vse komponente z enakimi funkcionalnostmi imeti isto referenco. Poleg tega mora biti uporabniku omogočeno, da se lahko sam odloči, kdaj je pripravljen na naslednji korak [3]. Pri ustvarjanju spletne strani ne smemo pozabiti na dodatno pomoč, ki jo lahko uporabniki uporabijo. Primerno jim lahko pomagamo že s tem, da podamo natančna navodila, glede izpolnjevanja polj. Zagotoviti moramo tudi opozarjanje na napake, katere lahko uporabniki z našo pomočjo tudi sami odpravijo. Obstaja več meril uspeha, ki govori o napakah, vse pa so zbrane v Tabeli 2.9 [2]. 10 Takšno orodje je lahko slovar, do katerega nato ustvarimo povezavo. 17
Tabela 2.9: Napake NAPAKE Napaka identifikacije Predlogi napak Preprečevanje napak 12 OPIS Vse napake, ki so samodejno zaznane, se sporočijo uporabniku, opis napake pa je v tekstovnem načinu. Kadar so pri samodejno zaznanih napakah predlogi popravkov znani, se lahko ti pošljejo uporabniku. 11 Oddaje so reverzibilne, vneseni podatki se morajo preveriti in v primeru napake tudi popraviti. Uporabniku mora biti na voljo orodje, s pomočjo katerega ima pregled nad informacijami, katere lahko tudi spreminja, preden jih dokončno odda. Na voljo ima prav tako možnost preklica oddaje. 2.2.4 Robustnost Zadnje načelo je robustnost, vsebuje pa eno smernico in 2 merili uspeha. To lahko vidimo v Tabeli 2.10 Tabela 2.10: Razdelitev načela robustnosti SMERNICA Združljivost MERILO USPEHA Razčlenjevanje Ime, vloga, vrednost Vsa vsebina mora biti dovolj robustna, da bo lahko interpretirana s strani različnih uporabniških agentov, podporne tehnologije in brskalnikov, pri katerih je pomembna združljivost s sedanjimi in prihodnjimi izdelki. 11 Predlogi se ne pošljejo uporabniku v primeru, če bi to ogrozilo varnost podatkov ali namen vsebine. 12 Preprečujemo lahko pravne, finančne, podatkovne napake ali pa vse napake, kar nudi večjo dostopnost uporabnikom. Opis velja za obe vrsti preprečevanja napak. 18
Kjer uporabljamo označevalni jezik, morajo imeti elementi popolne začetne in končne oznake, pravilno morajo biti ugnezdeni, ne smejo vsebovati podvojenih atributov in vsi IDji morajo biti edinstveni. Spletni avtorji morajo zagotoviti, da so kontrole uporabniškega združljive s podpornimi tehnologijami. Tako lahko te kontrole uporabljajo tudi ljudje s posebnimi potrebami [3]. 2.3 Analiza doseganja stopenj skladnosti meril uspeha Vsako merilo uspeha ima svojo stopnjo oz. nivo skladnosti (angl. Conformance Requirements). Te tri stopnje so A, AA in AAA. Kadar je naša spletna stran v skladu s stopnjo A, ki zajema 25 meril uspeha, potem pomeni, da smo odpravili glavne ovire za dostopnost. To seveda ne pomeni, da je naša spletna stran zelo dostopna, vendar zagotavlja, da je dostopna za večino primerov. Ni pa priporočljivo, da bi naša spletna stran bila narejena samo v skladu s stopnjo A. Stopnja AA vsebuje 13 meril uspeha in zagotavlja zelo dobro dostopnost. Če bo naša spletna stran narejena v skladnosti s stopnjo AA, bo ta dostopna za večino ljudi in za večino tehnologij, ki jih ljudje uporabljajo. Največ spletnih strani temelji prav na stopnji AA. Tretja izmed stopenj je stopnja AAA (zajema 23 meril uspeha), ki je zelo natančna, zagotavlja zelo visoko raven dostopnosti, vendar pa jo je zelo težko vzdrževati. Ta stopnja je pomembna v zelo specifičnih situacijah (npr. za izboljševanje zahtev na stopnji AA). Zmotno je misliti, da je stopnjo AAA nemogoče zagotoviti, vendar je včasih lahko vsebina tista, katera nam tega ne dovoljuje. Nemogoče je ustvariti spletno stran, ki bi bila dostopna vsem ljudem in na vseh ravneh, vseeno pa mora spletna stran biti dostopna v najverjetnejših situacijah [2]. 19
V Tabeli 2.11 lahko vidimo vsa merila uspeha skupaj s stopnjo skladnosti, ki zraven slovenskega vsebujejo tudi angleško poimenovanje in točko, pod katero se to merilo uspeha nahaja v WCAG 2.0 standardu. Tabela 2.11: Merila uspeha MERILO MERILO STOPNJA TOČKA V USPEHA USPEHA SKLADN NAČELO/SMERNICA WCAG 2.0 (v slovenščini) (v angleščini) OSTI Možnosti besedila za nebesedilne vsebine Non-text Content A Zaznavanje/Možnosti besedila za nebesedilne vsebine 1.1.1 Samo avdio in samo Audio-only and Zaznavanje/Časovno omejen video (vnaprej Video-only A medij posneto) (Prerecorded) 1.2.1 Napisi (vnaprej Captions Zaznavanje/Časovno omejen A posneto) (Prerecorded) medij 1.2.2 Audio Description Zvočni opis ali or Media Zaznavanje/Časovno omejen medijska alternativa A Alternative medij (vnaprej posneto) (Prerecorded) 1.2.3 Informacije in Info and relacije Relationships A Zaznavanje/Prilagodljivost 1.3.1 Smiselno zaporedje Meaningful elementov Sequence A Zaznavanje/Prilagodljivost 1.3.2 Senzorične lastnosti Sensory Characteristics A Zaznavanje/Prilagodljivost 1.3.3 Uporaba barv Use of Color A Zaznavanje/Razlikovanje 1.4.1 Nadzor zvoka Audio Control A Zaznavanje/Razlikovanje 1.4.2 Tipkovnica Keyboard A Upravljanje/Dostopnost preko tipkovnice 2.1.1 Brez pasti Upravljanje/Dostopnost preko No Keyboard Trap A tipkovnice tipkovnice 2.1.2 Prilagodljiv čas Timing Adjustable A Upravljanje/Dovolj časa za uporabnike 2.2.1 Premor, zaustavitev, Upravljanje/Dovolj časa za Pause, Stop, Hide A nevidnost uporabnike 2.2.2 20
MERILO MERILO STOPNJA TOČKA V USPEHA USPEHA SKLADN NAČELO/SMERNICA WCAG 2.0 (v slovenščini) (v angleščini) OSTI Tri utripi ali pod Three Flashes or Upravljanje/Zdravstveni A pragom Below Threshold napadi 2.3.1 Izogibanje blokov vsebine Bypass Blocks A Upravljanje/Navigacija 2.4.1 Naslov strani Page Titled A Upravljanje/Navigacija 2.4.2 Žarišče vrstnega reda Focus Order A Upravljanje/Navigacija 2.4.3 Povezava namena (v Link Purpose (In kontekstu) Context) A Upravljanje/Navigacija 2.4.4 Jezik strani Language of Page A Razumljivost/Berljivost 3.1.1 Žarišče On Focus A Razumljivost/Predvidljivost 3.2.1 Vhod On Input A Razumljivost/Predvidljivost 3.2.2 Napaka identifikacije Error Identification A Razumljivost/Vhodna pomoč 3.3.1 Nalepke in navodila Labels or Instructions A Razumljivost/Vhodna pomoč 3.3.2 Razčlenjevanje Parsing A Robustnost/Združljivost 4.1.1 Ime, vloga, vrednost Name, Role, Value A Robustnost/Združljivost 4.1.2 Napisi (v živo) Captions (Live) AA Zaznavanje/Časovno omejen medij 1.2.4 Zvočni opis (vnaprej Audio Description Zaznavanje/Časovno omejen AA posneto) (Prerecorded) medij 1.2.5 Minimalni kontrast Contrast (Minimum) AA Zaznavanje/Razlikovanje 1.4.3 Nastavljiva velikost besedila Resize text AA Zaznavanje/Razlikovanje 1.4.4 Slike besedila Images of Text AA Zaznavanje/Razlikovanje 1.4.5 Različni načini iskanja spletne strani Multiple Ways AA Upravljanje/Navigacija 2.4.5 Naslovi in nalepke Headings and Labels AA Upravljanje/Navigacija 2.4.6 Vidno žarišče Focus Visible AA Upravljanje/Navigacija 2.4.7 Jezik določenih delov vsebine Language of Parts AA Razumljivost/Berljivost 3.1.2 21
MERILO MERILO STOPNJA TOČKA V USPEHA USPEHA SKLADN NAČELO/SMERNICA WCAG 2.0 (v slovenščini) (v angleščini) OSTI Dosledna navigacija Consistent Navigation AA Razumljivost/Predvidljivost 3.2.3 Dosledna Consistent identifikacija Identification AA Razumljivost/Predvidljivost 3.2.4 Predlogi napak Error Suggestion AA Razumljivost/Vhodna pomoč 3.3.3 Preprečevanje napak (pravnih, finančnih, podatkovnih) Error Prevention (Legal, Financial, Data) AA Razumljivost/Vhodna pomoč 3.3.4 Znakovni jezik Sign Language Zaznavanje/Časovno omejen AAA (vnaprej posneto) (Prerecorded) medij 1.2.6 Obširnejši zvočni Extended Audio Zaznavanje/Časovno omejen opis Description AAA medij (vnaprej posneto) (Prerecorded) 1.2.7 Medijska alternativa Media Alternative Zaznavanje/Časovno omejen AAA (vnaprej posneto) (Prerecorded) medij 1.2.8 Samo avdio (v živo) Audio-only (Live) AAA Zaznavanje/Časovno omejen medij 1.2.9 Okrepljen kontrast Contrast (Enhanced) AAA Zaznavanje/Razlikovanje 1.4.6 Tišji zvok oz. brez Low or No zvoka v ozadju Background Audio AAA Zaznavanje/Razlikovanje 1.4.7 Vizualna predstavitev Visual Presentation AAA Zaznavanje/Razlikovanje 1.4.8 Slike besedila (brez Images of Text (No izjeme) Exception) AAA Zaznavanje/Razlikovanje 1.4.9 Tipkovnica (brez Keyboard (No Upravljanje/Dostopnost preko AAA izjeme) Exception) tipkovnice 2.1.3 Brez časovnega roka No Timing AAA Upravljanje/Dovolj časa za uporabnike 2.2.3 Prekinitve Interruptions AAA Upravljanje/Dovolj časa za uporabnike 2.2.4 Ponovno preverjanje Upravljanje/Dovolj časa za Re-authenticating AAA pristnosti uporabnike 2.2.5 Tri utripi Three Flashes AAA Upravljanje/Zdravstveni 2.3.2 22
MERILO MERILO STOPNJA TOČKA V USPEHA USPEHA SKLADN NAČELO/SMERNICA WCAG 2.0 (v slovenščini) (v angleščini) OSTI napadi Lokacija Location AAA Upravljanje/Navigacija 2.4.8 Povezava namena Link Purpose (Link (samo povezava) Only) AAA Upravljanje/Navigacija 2.4.9 Področje naslovov Section Headings AAA Upravljanje/Navigacija 2.4.10 Nenavadne besede Unusual Words AAA Razumljivost/Berljivost 3.1.3 Okrajšave Abbreviations AAA Razumljivost/Berljivost 3.1.4 Stopnja branja Reading Level AAA Razumljivost/Berljivost 3.1.5 Izgovorjava Pronunciation AAA Razumljivost/Berljivost 3.1.6 Sprememba na zahtevo Change on Request AAA Razumljivost/Predvidljivost 3.2.5 Pomoč Help AAA Razumljivost/Vhodna pomoč 3.3.5 Preprečevanje napak Error Prevention (vseh) (All) AAA Razumljivost/Vhodna pomoč 3.3.6 Če primerjamo med seboj vse tri stopnje skladnosti glede na načelo, lahko vidimo, da se stopnje A, AA in AAA v vsakem načelu razlikujejo. Na Sliki 2.3 lahko vidimo prikaz primerjave števila stopenj skladnosti za merila uspeha zbrana v določenem načelu. Pri načelu zaznavanja tako vidimo, da je največ meril uspeha, ki dosegajo osnovno raven dostopnosti. Samo eno merilo uspeha manj zajema stopnjo AAA, pet meril uspeha pa spada pod stopnjo AA. V tem načelu je 22 meril uspeha. Pri načelu upravljanja je situacija podobna, razlika je le v tem, da pod stopnjo AA spadajo tri merila uspeha. Načelo upravljanja vsebuje 20 meril uspeha. Načelo razumljivosti pa vsebuje največ meril uspeha s stopnjo skladnosti AAA. Stopnji A in AA pa sta porazdeljeni enako. Vsega skupaj je v tem načelu 17 meril uspeha. Zadnje načelo, načelo robustnosti, vsebuje le 2 merili uspeha in obe dosegata osnovno dostopnost. 23
Število meril uspeha 10 9 8 7 6 5 4 3 2 1 0 Stopnja A Stopnja AA Stopnja AAA Stopnja skladnosti Razumljivost Robustnost Upravljanje Zaznavanje Slika 2.3: Število meril uspeha glede na stopnjo skladnosti Med seboj pa lahko primerjamo tudi porazdelitev stopenj skladnosti med načela. Tako lahko na Sliki 2.4 vidimo, kako je stopnja A razdeljena glede na načela. Načeli zaznavanja in upravljanja vsebujeta vsaka 36 % vseh meril uspeha, ki imajo stopnjo skladnosti A. Pri načelu razumljivosti je ta delež 20 %, pri robustnosti pa 8 %. zaznavanje upravljanje razumljivost robustnost 8% 20% 36% 36% Slika 2.4: Razdelitev stopnje A med načela 24
Slika 2.5 nam prikazuje, kako je razdeljena stopnja AA. Načelo zaznavanja vsebuje 39 % meril uspeha s stopnjo AA, upravljanje 23 % in razumljivost 38 %. Načelo robustnosti ne vsebuje nobenega merila s to stopnjo. zaznavanje upravljanje razumljivost robustnost 0% 38% 39% 23% Slika 2.5: Razdelitev stopnje AA med načela Prikaz za stopnjo AAA lahko vidimo na Sliki 2.6. Načeli zaznavanja in upravljanja imata vsaka 35 % meril uspeha s stopnjo AAA, načelo razumljivosti 30 %, robustnost pa ne vsebuje meril uspeha z opisano stopnjo. zaznavanje upravljanje razumljivost robustnost 0% 30% 35% 35% Slika 2.6: Razdelitev stopnje AAA med načela 25
3 PRAKTIČNI DEL Praktični del vsebuje opis metode dela, predstavitev predmeta analize, model ocenjevanja in rezultate analize. Analiza rezultatov je bila narejena 24. 8. 2012, opis spletnih strani pa 28. 8. 2012. 3.1 Metoda dela Praktičnega preizkusa smernic smo se lotili tako, da smo najprej poiskali dve spletni strani, ki ponujata zdravstveno e-storitev, pri tem pa je ena spletna stran slovenska, druga pa nemška. Za e-storitev smo si izbrali zdravstveno zavarovanje v tujini. Za dostop do želenega obrazca za izpolnitev zavarovanja v tujini moramo na nemški strani obiskati šest strani, na slovenski pa tri. S pomočjo orodja AChecker 13 smo preverili vseh 9 strani, na vseh stopnjah skladnosti za standard WCAG 2.0 in tako dobili napake za vsako stran posebej. Nato smo združili vse znane napake za slovensko stran in vse znane napake za nemško stran v tabelo. Na enak način smo predstavili tudi potencialne napake za obe spletni strani. Rezultati so tako predstavljeni v tabelarični obliki. V tabeli znanih napak imamo zraven smernice, merila uspeha in stopnje skladnosti, v katero spada napaka, ter opisa napake, pa tudi navodila, kako te napake odpravimo. 3.2 Predstavitev in primerjava predmetov analize Prvi izmed kandidatov za primerjavo je nemški ponudnik zavarovanja Barmer GEK 14, ki omogoča storitve registriranim uporabnikom oz. tistim, ki imajo pri njih sklenjeno zavarovanje. Trenutno ime se uporablja od 1. januarja leta 2010, ko sta se združila Barmer Ersatzkasse (BEK) in Gmünder Ersatzkasse (GEK). Koda te spletne strani je napisala v HTML označevalnem jeziku, vsebuje pa tudi JavaScript in CSS. Na začetku spletne strani ima možnost povezave na njihovo Twitter in Facebook stran. Barmer GEK je največja 13 Dostopno na http://achecker.ca/checker/index.php [28.08.2012]. 14 Dostopno na https://www.barmer-gek.de/barmer/web/portale/versicherte/rundumgutversichert/startseite/startseite.html [28.08.2012]. 26
zdravstvena zavarovalnica v Nemčiji in zajema približno 8,6 milijonov zavarovancev, kar je približno 10 % vseh prebivalcev. Pravni sedež je v Berlinu, ima pa tudi devet pokrajinskih uradov in čez 1000 podružnic po vsej Nemčiji. Mnenja o kakovosti in zadovoljstvu uporabnikov se delijo. Zaslonsko sliko začetne strani lahko vidimo na Sliki 3.1, zaslonske slike ostalih preverjenih strani pa v Prilogi B (slike 5.1, 5.2, 5.3., 5.4. in 5.5) [9]. Slika 3.1: Zaslonska slika začetne strani Barmer GEK Drugi izmed kandidatov je Zavod za zdravstveno zavarovanje Slovenije 15 (ZZZS). Ta javni zavod omogoča storitve vsem uporabnikom, ki imajo sklenjeno obvezno zdravstveno zavarovanje, ki ga izvaja od leta 1992. Tudi tukaj je koda napisala v HTML označevalnem jeziku in vsebuje JavaScript. Spletna stran ne vsebuje povezav do Facebooka in Twitterja. Zavod za zdravstveno zavarovanje Slovenije ima 10 območnih enot, ki se nahajajo po 15 Dostopno na http://www.zzzs.si/ [28.08.2012]. 27
celotni državi. Na Sliki 3.2 imamo zaslonsko sliko začetne strani, v prilogi B pa se nahajajo še zaslonske slike drugih strani (sliki 5.6 in 5.7), ki smo jih preverili z orodjem AChecker. Slika 3.2: Zaslonska slika začetne strani Zavoda za zdravstveno zavarovanje Slovenije 3.3 Model ocenjevanja Rezultate bomo pridobili s pomočjo že prej omenjenega orodja AChecker. To odprtokodno orodje omogoča prepoznavo vseh elementov, ki niso v skladu z izbranim standardom in jih loči na znane napake, verjetne napake in potencialne napake. Napake lahko preverjamo s pomočjo URL-ja (na tak način bomo preverjali v našem primeru), s pomočjo naložitve HTML dokumenta ali pa s pomočjo vpisa HTML kode. 28
Preden želimo preveriti, katere napake vsebuje želena spletna stran, si moramo urediti nastavitve. Validacije HTML-ja in CSS-ja ter vira ne potrebujemo, tako da tega ne obkljukamo. Ker želimo izvedeti napake za standard WCAG 2.0, moramo poleg tega označiti tudi izbiro stopnje skladnosti, na podlagi katere želimo izvedeti napake. Vedeti moramo, da če izberemo stopnjo skladnosti AA ali AAA, se nam bodo izpisale napake tudi za nižjo stopnjo skladnosti. Za izpis napak označimo, da jih želimo imeti izpisane glede na smernice. To lahko vidimo tudi na Sliki 3.3. Slika 3.3: Zaslonska slika dela spletne strani AChecker Pri izpisu podatkov si lahko izberemo, ali želimo izpis znanih, verjetnih ali potencialnih napak. Vedno nam pa orodje poda smernico, v kateri se napaka merila uspeha nahaja, merilo uspeha, opis napake, pri znanih napakah nam poda tudi, kako to napako odpravimo, in pove nam, v kateri vrstici in stolpcu kode se napaka nahaja. Pri tem je tudi prikazan del kode in pa morebitna slika. Primer lahko vidimo na Sliki 3.4. 29
Slika 3.4: Prikaz rezultatov s pomočjo orodja AChecker Orodje omogoča tudi izvoz želenih napak, prijavljenim uporabnikom pa dovoljuje, da si izpis napak tudi shranijo. 3.4 Rezultati V Tabeli 3.1 lahko vidimo znane napake, ki jih vsebuje nemška spletna stran Barmer GEK. Tabela 3.1: Znane napake spletne strani Barmer GEK SMERNICA/ MERILO USPEHA OPIS NAPAKE ODPRAVA NAPAKE STOPNJA SKLADNOSTI Nebesedilna vsebina/možnosti besedila za nebesedilne vsebine Element <img> ne vsebuje atributa»alt=«16. Dodati moramo atribut»alt=«v <img> element 17. A Samo elementa Navigacija/Naslovi in nalepke Gnezdenje naslova je nepravilno 18. <h1> ali <h2> lahko sledita elementu AA <h1> 19. 16 Angl. img element missing alt attribute. 17 Angl. Add an alt attribute to your img element. 18 Angl. Header nesting - header following h1 is incorrect. 19 Angl. Modify the header levels so only an h1 or h2 follows h1. 30
Enako lahko vidimo tudi za slovensko stran ZZZS. V Tabeli 3.2 so navedene znane napake, ki so smo jih dobili s pomočjo orodja AChecker. Tabela 3.2: Znane napake spletne strani ZZZS SMERNICA/MERILO USPEHA OPIS NAPAKE ODPRAVA NAPAKE STOPNJA SKLADNOSTI Obrazcu manjkata elementa <fieldset> in <legend> za skupino radijskih gumbkov 20. V obrazec vsake skupine radijskih gumbkov moramo dodati elementa <fieldset> in <legend> 21. <input> elementu, Dodati moramo element vrste»besedilo«manjka <label>, ki obdaja pripadajoči element kontrolni <label>. <label> 22. Atribut»for=«Prilagodljivost/Informacije in relacije <input> elementu, vrste»radio«manjka pripadajoči element elementa <label> moramo nastaviti na enako vrednost kot je A <label> 24. atribut»id=«kontrole. In/ali dodati moramo <input> Elementu <select> elementu atribut manjka pripadajoči «title=«in/ali element <label> 25. ustvariti <label> element, ki vsebuje <input> element 23. <input> element Dodati moramo vrste»radio«nima v besedilo pripadajoči 20 Angl. Form missing fieldset and legend to group multiple radio buttons. 21 Angl. Add a fieldset and legend element to the form for each group of radio buttons. 22 Angl. input element, type of "text", missing an associated label. 23 Angl. Add a label element that surrounds the control's label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element. 24 Angl. input element, type of "radio", missing an associated label. 25 Angl. select element missing an associated label. 31
SMERNICA/MERILO USPEHA OPIS NAPAKE ODPRAVA NAPAKE STOPNJA SKLADNOSTI elementu <label> oznaki elementa besedila 26. <input>, ki opisuje <input> element namen ali funkcijo vrste»besedilo«nima v kontrole 27. elementu <label> besedila 28. Poskrbeti moramo, da Razlikovanje/Uporaba barv Določene niso vse barve besedila 29. so vse ali nobena barva besedila določeni z uporabo atributov v A <body> elementu 30. Dodati moramo besedilo ali elementu <a> ali atributu Navigacija/Povezava namena (v kontekstu) Sidro povezave ne vsebuje besedila 31.»title=«elementa <a>, ali v primeru, da je slika uporabljena v sidru A ji moramo dodati besedilo v atribut»alt=«32. Za HTML dokumente moramo dodati atribut»lang=«in veljavno Berljivost/Jezik strani Jezik dokumenta ni določen 33. ISO-639-1 dvomestno jezikovno oznako za A začetni HTML element. Za XHTML dokumente moramo dodati atributa 26 Angl. input element, type of "radio", has no text in label. 27 Angl. Add text to the input element's associated label that describes the purpose or function of the control. 28 Angl. input element, type of "text", has no text in label. 29 Angl. All text colors are not set. 30 Angl. Ensure all the text colors or none of the text colors are set using attributes on the body element. 31 Angl. Anchor contains no text. 32 Angl. Add text to the a element or the title attribute of the a element or, if an image is used within the anchor, add Alt text to the image. 33 Angl. Document language not identified. 32
SMERNICA/MERILO USPEHA OPIS NAPAKE ODPRAVA NAPAKE STOPNJA SKLADNOSTI»lang=«in»xmllang=«z veljavno ISO-639-1 dvomestno jezikovno oznako za začetni HTML element 34. Dodati moramo veljavno dvomestno ali trimestno jezikovno oznako, kot je Dokument vsebuje opredeljeno v ISO 639 nepravilno jezikovno specifikaciji za HTML oznako 35. atribut»lang=«. Za XHTML dokument morata biti določena atributa»lang=«in»xml:lang=«36. Vhodna pomoč/nalepke in navodila Oznaka besedila je prazna 37. Dodati moramo besedilo v element <label> 38. A Združljivost/Razčlenjevanje Atribut»id=«ni edinstven 39. Poskrbeti moramo, da bo vrednost atributa»id=«edinstvena 40. A Zamenjati moramo Razlikovanje/Nastavljiva velikost besedila Uporabljen je element <b> (krepko) 41. element <b> z elementoma <em> ali AA <strong> 42. 34 Angl. For HTML documents add the lang attribute and a valid ISO-639-1 two letter language code to the opening HTML element. For XHTML documents add both the lang and xmllang attributes with a valid ISO- 639-1 two letter language code to the opening HTML element. 35 Angl. Document has invalid language code. 36 Angl. Add a valid 2 letter or 3 letter language code as defined in the ISO 639 specification to the HTML 'lang' attribute. For XHTML, both 'lang' and 'xml:lang' must be set. 37 Angl. Label text is empty. 38 Angl. Add text to the label element. 39 Angl. id attribute is not unique. 40 Angl. Modify the id attribute value so it is unique. 41 Angl. b (bold) element used. 42 Angl. Replace your b (bold) elements with em or strong. 33
SMERNICA/MERILO USPEHA OPIS NAPAKE ODPRAVA NAPAKE STOPNJA SKLADNOSTI Uporabljen je element Odstraniti moramo <font> 43. element <font> 44. Razmerje kontrasta med barvo obiskanih povezav in ozadja povezave ni zadovoljivo za stopnjo AA po standardu Razlikovanje/Minimalni kontrast WCAG 2.0 45. Razmerje kontrasta med barvo aktivnih povezav in ozadja povezave ni zadovoljivo za stopnjo AA po standardu WCAG 2.0 47. Uporabiti moramo ocenjevalec kontrasta, da lahko določimo razmerje kontrasta 4:5:1 za normalno besedilo in 3:1 za večje besedilo 46. AA Razmerje kontrasta med barvo besedila povezav in ozadja povezave ni zadovoljivo za stopnjo AA po standardu WCAG 2.0 48. Razmerje kontrasta med Uporabiti moramo Razlikovanje/Okrepljen kontrast barvo obiskanih povezav in ozadja povezave ni ocenjevalec kontrasta, da lahko določimo razmerje kontrasta 7:1 AAA zadovoljivo za stopnjo za normalno besedilo in 43 Angl. font used. 44 Angl. Remove the font element from the document. 45 Angl. The contrast between the colour of visited link text and its background for the element is not sufficient to meet WCAG2.0 Level AA. 46 Angl. Use a colour contrast evaluator to determine if text and background colours provide a contrast ratio of 4.5:1 for standard text, or 3:1 for larger text. Change colour codes to produce sufficient contrast. http://www.w3.org/tr/understanding-wcag20/visual-audio-contrast-contrast.html#visual-audiocontrast-contrast-resources-head 47 Angl. The contrast between the colour of active link text and its background is not sufficient to meet WCAG2.0 Level AA. 48 Angl. The contrast between the colour of link text and its background is not sufficient to meet WCAG2.0 Level AA. 34
SMERNICA/MERILO USPEHA OPIS NAPAKE ODPRAVA NAPAKE STOPNJA SKLADNOSTI AAA po standardu 4:5:1 za večje WCAG 2.0 49. besedilo 50. Razmerje kontrasta med barvo aktivnih povezav in ozadja povezave ni zadovoljivo za stopnjo AAA po standardu WCAG 2.0 51. Barva besedila povezave mora zagotavljati visok kontrast z barvo ozadja 52. Če primerjamo obe spletni strani med seboj, lahko vidimo, da ima več znanih napak slovenska spletna stran. Nemška spletna stran ima 2 znani napaki eno na stopnji skladnosti A (ta je merilo uspeha Možnosti besedila za nebesedilne vsebine) in eno na stopnji AA (ta je merilo uspeha Naslovi in nalepke). Grafični prikaz lahko vidimo na Sliki 3.5. 49 Angl. The contrast between the colour of visited link text and its background is not sufficient to meet WCAG2.0 Level AAA. 50 Angl. Use a colour contrast evaluator to determine if text and background colours provide a contrast ratio of 7:1 for standard text, or 4.5:1 for larger text. Change colour codes to produce sufficient contrast. http://www.w3.org/tr/understanding-wcag20/visual-audio-contrast-contrast.html#visual-audiocontrast-contrast-resources-head 51 Angl. The contrast between the colour of active link text and its background is not sufficient to meet WCAG2.0 Level AAA. 52 Angl. Link text colour must provide high contrast with its background colour. 35
Število znanih napak: 2 Stopnja A Stopnja AA Stopnja AAA 0 (0%) 1 (50%) 1 (50%) Slika 3.5: Število znanih napak za nemško spletno stran Slovenska spletna stran ima kar 20 znanih napak. 12 od teh napak pripada stopnji A, 5 stopnji AA in 3 stopnji AAA. Razdelitev lahko vidimo na Sliki 4.2. Merila uspeha, ki vsebujejo napake in imajo stopnjo skladnosti A, so Informacije in relacije, Uporaba barv, Povezava namena (v kontekstu), Jezik strani, Nalepke in navodila in Razčlenjevanje. Slovenska spletna stran ima kar 20 znanih napak. 12 od teh napak pripada stopnji skladnosti A, te napake pa so razdeljene med merila uspeha, ki so Informacije in relacije, Uporaba barv, Povezava namena (v kontekstu), Jezik strani, Nalepke in navodila in Razčlenjevanje. 5 napak pripada stopnji AA, razdeljene pa so med 2 merili uspeha, in sicer Nastavljiva velikost besedila in Minimalni kontrast. Stopnji skladnosti AAA pripadajo 3 napake, vse pa spadajo v merilo uspeha Okrepljen kontrast. Razdelitev lahko vidimo na Sliki 3.6. 36
Število znanih napak: 20 Stopnja A Stopnja AA Stopnja AAA 3 (15%) 5 (25%) 12 (60%) Slika 3.6: Število znanih napak za slovensko spletno stran Če primerjamo med seboj nemško in slovensko spletno stran glede na znane napake, lahko vidimo, da ima slovenska spletna stran dosti več napak. Verjetne napake vsebuje samo slovenska stran, in sicer eno. Tabelo te napake lahko vidimo v Prilogi A (Tabela 5.2). V tej prilogi se nahajata tudi dve tabeli potencialnih napak za obe spletni strani (Tabela 5.1 za nemško in Tabela 5.3 za slovensko spletno stran). V primeru, da ju primerjamo na podlagi teh napak, pa imata obe spletni strani zelo podobne napake in tudi zelo podobno število napak: nemška stran jih ima 44, slovenska pa 48. Kljub temu da moramo na nemški spletni stran obiskati več strani, da pridemo do želenega obrazca za izpolnitev zavarovanja v tujini, kot pa na slovenski strani, je ta stran bolj dostopna kot slovenska. Negativna lastnost nemške strani je ta, da si moramo na koncu natisniti izpolnjeni obrazec, medtem ko na slovenski spletni strani lahko to enostavno pošljemo preko spleta in dobimo čez nekaj dni kartico za zdravstveno zavarovanje v tujini. 37
4 ZAKLJUČEK V diplomskem delu smo tako predstavili področje e-vključenosti in e-dostopnosti, opisali smo načela, smernice in merila uspeha, ki se nahajajo v WCAG 2.0 standardu, ter stopnje skladnosti. S pomočjo spletnega orodja smo preverili, v kolikšni meri dve izbrani spletni strani upoštevata vsa navedena merila uspeha. Cilje diplomske naloge smo tako uresničili, kar lahko vidimo v Tabeli 4.1, prav tako pa tudi način doseganja teh ciljev. Tabela 4.1: Cilji CILJ ANALIZA DOSEGANJA CILJA ARGUMENTACIJA Predstavitev e-vključenosti in e-dostopnosti Dosežen Glej poglavje 2.1 Identifikacija smernic Dosežen Glej poglavje 2.1 Razlaga stopenj skladnosti Dosežen Glej poglavje 2 Uporaba teorije na praktičnem primeru Dosežen Glej poglavje 3 Tudi naša predvidevanja so se uresničila. Slovenska spletna stran je tako imela znatno več znanih napak kot pa nemška, zaradi česa obstaja možnost, da v Nemčiji bolje poznajo standard WCAG 2.0 kot pa pri nas. Zelo malo je tudi slovenskih virov na temo opisanega standarda, in glede na to, da še ni prevoda standarda WCAG 2.0 v slovenski jezik, bi lahko ta diplomska naloga pomagala slovenskih razvijalcem, da bi izdelovali dostopnejše spletne strani. V prihodnje bi lahko problem dostopnosti bolj razširili med ljudi, ki se ukvarjajo z izdelovanjem spletnih strani, pa tudi različnim podjetjem. Ti bi nato lahko izdelovali bolj dostopne spletne strani prav s pomočjo standarda WCAG 2.0. Večjo podporo standardu bi moralo dati tudi na ministrstvu. Preverili bi lahko tudi še več različnih spletnih strani in rezultate nato med seboj preverjali. Prav tako bi lahko preverjali tudi rezultate, pridobljene s katerimi drugimi spletnimi orodji, in ne samo z ACheckerjem. 38
Pri pisanju diplomske naloge smo se omejili samo verzijo 2.0 standarda WCAG in na področje e-vključenosti. Zavedati se moramo možnosti, da bi dobili drugačne rezultate, če bi preverili kateri drugi dve spletni strani. Na pridobljene rezultate je prav tako vplivalo izbrano orodje AChecker in postopek pridobivanja rezultatov oz. metoda dela. Standard WCAG 2.0 ima tudi pomanjkljivosti. Še vedno je problem razumljivost standarda, saj je napisan v kompleksnem jeziku, polnem žargona, in tudi povezave do definicij kompleksnejših besed ne rešijo težave popolnoma. Prav tako se sama možnost uporabe smernic verzije 2.0 glede na predhodno verzijo ni dosti izboljšala. K temu pripomore tudi obširen celoten dokument, poln različnih povezav. Če potegnemo črto, je standard WCAG 2.0 vsekakor zelo koristen za vse uporabnike in vsak razvijalec spletnih strani bi ga moral vsaj enkrat prebrati skozi, pa če bo uporabil te smernice ali ne. 39
VIRI [1] 86% mesečnih uporabnikov interneta splet uporablja vsak dan. Dostopno na http://www.ris.org/db/27/12127/raziskave/86_mesecnih_uporabnikov_interneta_splet_up orablja_vsak_dan/ [4.8.2012]. [2] Babinszki, T. WCAG Tutorial: WCAG 2.0 Tutorial. 2009. Dostopno na: http://www.evengrounds.com/wcag-tutorial/ [4.8.2012]. [3] Caldwell, B., Cooper, M., Guarino Reid, L., Vanderheiden, G. Web Content Accessibility Guidelines (WCAG) 2.0: W3C Recommendation 11 December 2008, W3C. W3C, 2008. Dostopno na: http://www.w3.org/tr/wcag20/ [4.8.2012]. [4] E- VKLJUČENOST. Dostopno na : http://www.arhiv.mvzt.gov.si/si/delovna_podrocja/informacijska_druzba/e_storitve_in_e_ vsebine/e_vkljucenost/ [4.8.2012]. [5] E-vključenost in e-dostopnost. 2007. Dostopno na: http://www.informacijskadruzba.si/index.php/vsebine-id/podro%c3%a4%c2%8djadelovanja/e-vklju%c3%a4%c2%8denost [4.8.2012]. [6] Strategija razvoja informacijske družbe v Republiki Sloveniji: si2010. 2007. Dostopno na: http://www.arhiv.mvzt.gov.si/fileadmin/mvzt.gov.si/pageuploads/pdf/informacijska_druzb a/si2010.pdf [4.8.2012]. [7] Ustvarite nov Google Račun. Dostopno na: https://accounts.google.com/signup?service=mail&continue=https%3a%2f%2fmail.goo gle.com%2fmail%2f<mpl=default&hl=sl [4.8.2012] [8] Web Content Accessibility Guidelines (WCAG) Overview. 2011. Dostopno na: http://www.w3.org/wai/intro/wcag.php [19.8.2012] [9] Wikipedia, Barmer GEK. Dostopno na http://de.wikipedia.org/wiki/barmer_gek [31.8.2012] 40
5 PRILOGE Priloga A Tabele verjetnih in potencialnih napak 41
Tabela 5.1: Potencialne napake nemške spletne strani Barmer GEK SMERNICA / MERILO USPEHA Možnosti besedila za nebesedilne vsebine / Možnosti besedila za nebesedilne vsebine Prilagodljivost/Informacije in relacije Prilagodljivost/Senzorične lastnosti Razlikovanje/Uporaba barv OPIS NAPAKE <img> element lahko zahteva dolg opis 53. Slika lahko vsebuje besedilo, ki ni v besedilu atributa»alt=«54. Besedilo atributa»alt=«ni prazno in slika lahko služi dekoraciji 55. Besedilo atributa»alt=«ne posreduje iste informacije kot slika 56. Tabelaričnim podatkom lahko manjka oznaka tabele 57. Vizualni seznami so lahko nepravilno označeni 58. Zahtevane so lahko Unicode oznake od desne proti levi ali od leve proti desni 59. Za identifikacijo sprememb v smeri besedila je lahko zahtevan atribut «dir=«60. <input> element <label>, vrste»besedilo«ni postavljen blizu kontrole 61. Besedilo se lahko nanaša na postavke po obliki, velikosti ali samem relativnem položaju 62. Slika lahko sama uporablja barvo 63. STOPNJA SKLADNOSTI A A A A 53 Angl. img element may require a long description. 54 Angl. Image may contain text that is not in Alt text. 55 Angl. Alt text is not empty and image may be decorative. 56 Angl. Alt text does not convey the same information as the image. 57 Angl. Tabular information may be missing table markup. 58 Angl. Visual lists may not be properly marked. 59 Angl. Unicode right-to-left marks or left-to-right marks may be required. 60 Angl. dir attribute may be required to identify changes in text direction. 61 Angl. input element label, type of "text", is not positioned close to control. 62 Angl. Text may refer to items by shape, size, or relative position alone. 42
SMERNICA / MERILO USPEHA Dostopnost preko tipkovnice/tipkovnica Zdravstveni napadi/tri utripi ali pod pragom Navigacija/Izogibanje blokov vsebine Navigacija/Naslov strani Navigacija/Povezava namena (v kontekstu) Vhodna pomoč/napaka identifikacije Vhodna pomoč/nalepke in navodila OPIS NAPAKE Slika lahko vsebuje besedilo s slabim kontrastom 64. Element <input> lahko sam uporablja barvo 65. Element <script> lahko sam uporablja barvo 66. Element <script> uporabniškega vmesnika je lahko nedosegljiv 67. Element <script> lahko povzroči utripanje zaslona 68. Dokumentu lahko manjka povezava»skoči na vsebino«69. Skupine povezav s skupim namenom niso označene 70. Element <title> ne opisuje dokumenta 71. Besedilo povezave je lahko nesmiselno 72. Sidro besedila ne določi položaja destinacije 73. Obrazec za predložitev sporočila o napaki ne more določiti praznih zahtevanih polj 74. Vsa zahtevana polja niso označena kot zahtevana 75. STOPNJA SKLADNOSTI A A A A A A 63 Angl. Image may be using color alone. 64 Angl. Image may contain text with poor contrast. 65 Angl. input possibly using color alone. 66 Angl. script may use color alone. 67 Angl. script user interface may not be accessible. 68 Angl. script may cause screen flicker. 69 Angl. Document may be missing a "skip to content" link. 70 Angl. Groups of links with a related purpose are not marked. 71 Angl. title might not describe the document. 72 Angl. Link text may not be meaningful. 73 Angl. Anchor text may not identify the link destination. 74 Angl. Form submission error messages may not identify empty required fields. 75 Angl. All required form fields may not be indicated as required. 43
SMERNICA / MERILO USPEHA Razlikovanje/Slike besedila Navigacija/Različni načini iskanja spletne strani Navigacija/Nalepke in naslovi Predvidljivost/Dosledna navigacija Predvidljivost/Dosledna identifikacija OPIS NAPAKE Element <label> ne opisuje pripadajoče kontrole 76. Oznaka <input> elementa vrste»besedilo«ne opisuje namena ali funkcije kontrole 77. Slika lahko vsebuje besedilo, ki ni v besedilu atributa»alt=«78. Strani manjka zemljevid strani 79. Element <h1> lahko služi oblikovanju 80. Element <h2> lahko služi oblikovanju 81. Element <h3> lahko služi oblikovanju 82. Element <h4> lahko služi oblikovanju 83. Element <h5> lahko služi oblikovanju 84. Ponavljajoče se komponente, se ne prikažejo vsakič v enakem vrstnem redu 85. Zaporedje zavihka ne sledi logičnemu zaporedju 86. Dolge kotacije ne smejo biti označene z uporabo elementa <blockquote> 87. STOPNJA SKLADNOSTI AA AA AA AA AA 76 Angl. label may not describe its associated control. 77 Angl. input element, type of "text", label may not describe the purpose or function of the control. 78 Angl. Image may contain text that is not in Alt text. 79 Angl. Site missing site map. 80 Angl. h1 may be used for formatting. 81 Angl. h2 may be used for formatting. 82 Angl. h3 may be used for formatting. 83 Angl. h4 may be used for formatting. 84 Angl. h5 may be used for formatting. 85 Angl. Repeated components may not appear in the same relative order each time they appear. 86 Angl. Tab order may not follow logical order. 44
SMERNICA / MERILO USPEHA OPIS NAPAKE STOPNJA SKLADNOSTI Vhodna pomoč/predlogi napak Obrazec za predložitev sporočila o napakah ne zagotavlja pomoči 88. AA Obrazec za predložitev podatkov ni predstavljen uporabniku, Vhodna pomoč/preprečevanje preden ta dokončno sprejme napak (pravnih, finančnih, AA transakcijo 89. podatkovnih) Obrazec lahko izbriše informacijo brez možnosti razveljavitve 90. Razlikovanje/Okrepljen kontrast Slika lahko vsebuje besedilo s slabim kontrastom 91. AAA Navigacija/Področje naslovov Področja niso označena z naslovi 92. AAA Navigacija/Lokacija Dokument lahko zahteva drobtinice 93. AAA Berljivost/Nenavadne besede Manjka referenca do slovarja 94. AAA Okrajšave niso označene z elementom <abbr> 95. Berljivost/Okrajšave Akronimi niso označeni z elementom <acronym> 96. AAA Vhodna pomoč/preprečevanje Obrazec lahko izbriše informacijo napak (vseh) brez možnosti razveljavitve 97. AAA 87 Angl. Long quotations may not be marked using the blockquote element. 88 Angl. Form submission error messages may not provide assistance. 89 Angl. Form submission data may not be presented to the user before final acceptance of an irreversable transaction. 90 Angl. Form may delete information without allowing for recovery. 91 Angl. This image may contain text with poor contrast. 92 Angl. Sections may not be marked with headers. 93 Angl. Document may require a breadcrumb trail. 94 Angl. Reference to glossary may be missing. 95 Angl. Abbreviations may not be marked with abbr element. 96 Angl. Acronyms may not be marked with acronym element. 97 Angl. Form may delete information without allowing for recovery. 45
Tabela 5.2: Verjetne napake slovenske spletne strani ZZZS SMERNICA/ MERILO USPEHA OPIS NAPAKE STOPNJA SKLADNOSTI Prilagodljivost/Informacije in relacije Element <p> je lahko nepravilno uporabljen (lahko je naslov) 98. A Tabela 5.3: Potencialne napake slovenske spletne strani ZZZS SMERNICA/ MERILO USPEHA Nebesedilna vsebina/možnosti besedila za nebesedilne vsebine Prilagodljivost/Informacije in relacije OPIS NAPAKE <img> element lahko zahteva dolg opis 99. Slika lahko vsebuje besedilo, ki ni v besedilu atributa»alt=«100. Besedilo atributa»alt=«ni prazno in slika lahko služi dekoraciji 101. Besedilo atributa»alt=«ne posreduje iste informacije kot slika 102. Tabelaričnim podatkom lahko manjka oznaka tabele 103. Vizualni seznami so lahko nepravilno označeni 104. Zahtevane so lahko Unicode oznake od desne proti levi ali od leve proti desni 105. Za identifikacijo sprememb v STOPNJA SKLADNOSTI A A 98 Angl. p element may be misused (could be a header). 99 Angl. img element may require a long description. 100 Angl. Image may contain text that is not in Alt text. 101 Angl. Alt text is not empty and image may be decorative. 102 Angl. Alt text does not convey the same information as the image. 103 Angl. Tabular information may be missing table markup. 104 Angl. Visual lists may not be properly marked. 105 Angl. Unicode right-to-left marks or left-to-right marks may be required. 46
SMERNICA/ MERILO USPEHA OPIS NAPAKE STOPNJA SKLADNOSTI smeri besedila je lahko zahtevan atribut»dir=«106. <input> element <label>, vrste»radio«ni postavljen blizu kontrole 107. <input> element <label>, vrste»besedilo«ni postavljen blizu kontrole 108. Element <table> lahko zahteva elemente <th> 109. Besedilo se lahko nanaša na Prilagodljivost/Senzorične postavke po obliki, velikosti ali lastnosti samem relativnem položaju 110. A Postavitev tabele ni linearna 111. Slika lahko sama uporablja barvo 112. Razlikovanje/Uporaba barv Slika lahko vsebuje besedilo s slabim kontrastom 113. Element <input> lahko sam uporablja barvo 114. Element <script> lahko sam uporablja barvo 115. A Element <script> Dostopnost preko uporabniškega vmesnika je lahko tipkovnice/tipkovnica A nedosegljiv 116. Zdravstveni napadi/tri utripi ali Slika (GIF) lahko utripa 117. A 106 Angl. dir attribute may be required to identify changes in text direction. 107 Angl. input element label, type of "radio", is not positioned close to control. 108 Angl. input element label, type of "text", is not positioned close to control. 109 Angl. Data table may require th elements. 110 Angl. Text may refer to items by shape, size, or relative position alone. 111 Angl. Layout table may not linearize. 112 Angl. Image may be using color alone. 113 Angl. Image may contain text with poor contrast. 114 Angl. input possibly using color alone. 115 Angl. script may use color alone. 116 Angl. script user interface may not be accessible. 117 Angl. Image (GIF) may flicker. 47
SMERNICA/ MERILO USPEHA OPIS NAPAKE STOPNJA SKLADNOSTI pod pragom Element <script> lahko povzroči utripanje zaslona 118. Dokumentu lahko manjka Navigacija/Izogibanje blokov povezava»skoči na vsebino«119. vsebine Skupine povezav s skupim A namenom niso označene 120. Navigacija/Naslov strani Element <title> ne opisuje dokumenta 121. A Besedilo povezave je lahko Navigacija/Povezava namena (v nesmiselno 122. kontekstu) Sidro besedila ne določi položaja A destinacije 123. Predvidljivost/Žarišče Nalaganje spletne strani lahko povzroči odpiranje novega okna 124. A Obrazec za predložitev sporočila o Vhodna pomoč/napaka napaki ne more določiti praznih identifikacije zahtevanih polj 125. A Vsa zahtevana polja niso označena kot zahtevana 126. Vhodna pomoč/nalepke in navodila Element <label> ne opisuje pripadajoče kontrole 127. Oznaka <input> elementa vrste»potrditveno polje«ne opisuje namena ali funkcije kontrole 128. A Razlikovanje/Slike besedila Slika lahko vsebuje besedilo, ki ni AA 118 Angl. script may cause screen flicker. 119 Angl. Document may be missing a "skip to content" link. 120 Angl. Groups of links with a related purpose are not marked. 121 Angl. title might not describe the document. 122 Angl. Link text may not be meaningful. 123 Angl. Anchor text may not identify the link destination. 124 Angl. Loading web page may cause new window to open. 125 Angl. Form submission error messages may not identify empty required fields. 126 Angl. All required form fields may not be indicated as required. 127 Angl. label may not describe its associated control. 128 Angl. input element, type of "checkbox", label may not describe the purpose or function of the control. 48
SMERNICA/ MERILO USPEHA Navigacija/Različni načini iskanja spletne strani Navigacija/Nalepke in naslovi Predvidljivost/Dosledna navigacija Predvidljivost/Dosledna identifikacija Vhodna pomoč/predlogi napak Vhodna pomoč/preprečevanje napak (pravnih, finančnih, podatkovnih) Razlikovanje/Okrepljen kontrast Navigacija/Področje naslovov OPIS NAPAKE v besedilu atributa»alt=«129. Strani manjka zemljevid strani 130. Element <h1> lahko služi oblikovanju 131. Element <h2> lahko služi oblikovanju 132. Ponavljajoče se komponente, se ne prikažejo vsakič v enakem vrstnem redu 133. Zaporedje zavihka ne sledi logičnemu zaporedju 134. Dolge kotacije ne smejo biti označene z uporabo elementa <blockquote> 135. Obrazec za predložitev sporočila o napakah ne zagotavlja pomoči 136. Obrazec za predložitev podatkov ni predstavljen uporabniku, preden ta dokončno sprejme transakcijo 137. Obrazec lahko izbriše informacijo brez možnosti razveljavitve 138. Slika lahko vsebuje besedilo s slabim kontrastom 139. Področja niso označena z naslovi 140. STOPNJA SKLADNOSTI AA AA AA AA AA AA AAA AAA 129 Angl. Image may contain text that is not in Alt text. 130 Angl. Site missing site map. 131 Angl. h1 may be used for formatting. 132 Angl. h2 may be used for formatting. 133 Angl. Repeated components may not appear in the same relative order each time they appear. 134 Angl. Tab order may not follow logical order. 135 Angl. Long quotations may not be marked using the blockquote element. 136 Angl. Form submission error messages may not provide assistance. 137 Angl. Form submission data may not be presented to the user before final acceptance of an irreversable transaction. 138 Angl. Form may delete information without allowing for recovery. 139 Angl. This image may contain text with poor contrast. 49
SMERNICA/ MERILO USPEHA OPIS NAPAKE STOPNJA SKLADNOSTI Navigacija/Lokacija Dokument lahko zahteva drobtinice 141. AAA Berljivost/Nenavadne besede Manjka referenca do slovarja 142. AAA Okrajšave niso označene z elementom <abbr> 143. Berljivost/Okrajšave Akronimi niso označeni z elementom <acronym> 144. AAA Sprememba vsebine se lahko Predvidljivost/Sprememba na zgodi brez uporabnikove zahtevo aktivacije 145. AAA Vhodna pomoč/preprečevanje Obrazec lahko izbriše informacijo napak (vseh) brez možnosti razveljavitve 146. AAA 140 Angl. Sections may not be marked with headers 141 Angl. Document may require a breadcrumb trail. 142 Angl. Reference to glossary may be missing. 143 Angl. Abbreviations may not be marked with abbr element. 144 Angl. Acronyms may not be marked with acronym element. 145 Angl. Change of context may occur without user activation. 146 Angl. Form may delete information without allowing for recovery. 50
Priloga B Posnetki zaslonov 51
Slika 5.1: Druga stran spletne strani Barmer GEK Slika 5.2: Tretja stran spletne strani Barmer GEK 52
Slika 5.3: Četrta stran spletne strani Barmer GEK Slika 5.4: Peta stran spletne strani Barmer GEK 53
Slika 5.5: Šesta stran spletne strani Barmer GEK Slika 5.6: Druga stran spletne strani ZZZS 54
Slika 5.7: Tretja stran spletne strani ZZZS 7.1 Naslov študenta Ana Dračina Tovarniška cesta 45 2215 Ceršak 7.2 Kratek življenjepis Rojena: 25. 8. 1989 v Mariboru Šolanje: Osnovna šola Rudolfa Maistra Šentilj (1996 2004) Škofijska gimnazija Antona Martina Slomška, Maribor (2004 2008) Fakulteta za elektrotehniko, računalništvo in informatiko, Maribor (2008 ) 55
56
57
58