LLL4business projekt

1. Radna prezentacija LLL4business projekt

2. Osnove izrade pristupačne stranice • Prije početka izgradnje pristupačne web stranice ili prilagodbe postojeće web stranice moraju se poštivati osnovni standardi W3C konzorcija • Sav HTML, CSS kod mora biti pisan po standardima • Stranica po mogućnosti mora podržavati mobilni rad(pregled sa tableta, mobitela, itd.)

3. Praktični primjer • Kroz ovu prezentaciju koristiti ćemo primjer stranice http://www.lll4business.com • Naglasiti ćemo sve elemente ove stranice koji već jesu napravljeni u skladu sa standardima i elemente koje još treba poboljšati • Sve tehnike u analizi se mogu primjeniti na bilo kojoj web stranici u svrhu poboljšavanja pristupačnosti

4. Stranica/sadržaj • Na početku moramo odvojiti dva pojma: standardni dizajn web stranice, sadržaj koji se dodaje na postojeću web stranicu • Kada se jednom napravi pristupačni dizaj web stranice onda ga nije teško održavati/poboljšavati • Najveći problem onda postaje u dodavanju novog sadržaja kojeg u pravilu dodaju razni korisnici • Sva pravila dana ovom prezentacijom moraju se primjeniti i na sadržaj koji se naknadno dodaje

5. Validacija web stranice • Postoje razni validatori koji testiraju poštivanje raznih standarda • U ovoj prezentaciji će se koristiti veći broj validatora za razne standarde • Prvi validator koji će se koristiti je http://validator.w3.org/ • W3C validatorom će se testirati HTML, CSS elementi kao i usklađenost sa mobilnim tehnologijama

6. W3C • World Wide Web Consortium • Standardizacija tehnologija weba • AOL, Adobe, Apple, IBM, Microsoft... • besplatna provjera stranice • http://validator.w3.org/

7. W3C STANDARDI • CSS – jezik za formatiranje izgleda sadržaja u HTMLu i XMLu • HTML – jezik za prikaz informacija na web-u • XML – jezik za pohranu, opis i razmjenu podataka • XHTML - verzija HTMLa usklađena s pravilima XMLa

8. XML Schema – jezik za specificiranje strukture XML dokumenta • SOAP – komunikacijski protokol za razmjenu informacija pomoću web servisa baziran na XMLu • WSDL – jezik za opis web servisa baziran na XMLu • SVG - jezik za opis dvodimenzionalne vektorske grafike

9. http://validator.w3.org/

10. http://validator.w3.org/ • Unutar validatora upišemo hiperpoveznicu do stranice koje testiramo(ako se web stranica sastoji od više stranica, potrebno je napraviti analizu za svaku stranicu) • Nakon obrade W3C poslužitelja prikazuje se detaljna analiza web stranice

11. HTML analiza

12. HTML analiza • Na našem primjeru vidimo da stranica ima odstupanja od W3C standarda(XHTML 1.0 Transitional) • Na stranici se nalazi 25 pogreška i 6 upozorenja • Svaka od pogrešaka i upozorenja je detaljno opisana(što omogućava lakše popravljanje)

13. CSS analiza

14. CSS analiza • Na našem primjeru vidimo da stranica ima odstupanja od W3C standarda(CSS 3) • Na stranici se nalazi 9 pogrešaka • Svaka od pogrešaka i upozorenja je detaljno opisana(što omogućava lakše popravljanje)

15. MobileOK provjera stranice

16. Mobilna analiza • Na našem primjeru vidimo da stranica skroz odstupa od standarda W3C-a za mobilne sadržaje • Na stranici se nalazi 9 pogrešaka • Svaka od pogrešaka i upozorenja je detaljno opisana(što omogućava lakše popravljanje) • U sljedećim slajdovima će biti ukratko prikazane sve pogreške

17. Kritični mobileOK problemi • stranica je prevelika • predugo učitavanje • mnogi mobilni pretraživači ne mogu uopće otvoriti velike stranice • puno vanjskih linkova • produžuje vrijeme potrebno za učitavanje

18. Ozbiljni mobileOK problemi • korištenje pop-up prozora • uzrokuju konfuznost korisnika • neki mobilni preglednici mogu otvoriti samo jedan prozor • veći troškovi surfanja • javascript • mnogi pretraživači ne mogu otvoriti ovakve stranice

19. greške u CSS-u • sintaksne pogreške uzorkuju nemogućnost potpunog učitavanja stranice • problemi s veličinom slika • pretraživači moraju dodatno downloadati slike čije se dimenzije ne slažu s određenima u CSS-u • ostali problemu većinom vezani uz HTML

20. Testiranje brzine web stranice/poslužitelja • Nakon testiranja osnovnih standarda poželjno je testirati brzinu web stranice/poslužitelja • Brzina utječe na sve aspekte rada sa web stranicom • U analizi je korišten google pagespeed alat kao jedan od najboljih dostupnih alata • https://developers.google.com/speed/pagespeed/insights

21. Google pagespeed

22. Testiranje brzine web stranice • Prilikom testiranja brzine web stranice pokazano je da naslovnica ima rezultat 82/100 po google speed testu što je vrlo dobar rezultat ali i dalje ima mjesta za napredak. • Pronađeno je 16 pogrešaka koje bi svojim ispravljanjem utjecalo na brzinu rada sa web stranicom. • Sve pogreške su detaljno opisane na stranici sa rezultatima

23. Analiza pristupačnosti • Postoji veliki broj alata za testiranje pristupačnosti web stranice • Službeni popis sa W3C stranice se nalazi na http://www.w3.org/WAI/RC/tools/complete • U sljedećoj analizi ćemo koristiti http://wave.webaim.org/ alat

24. http://wave.webaim.org/

25. http://wave.webaim.org/ • Analiza se radi u tri kategorije: sa stilovima, bez stilova i kontrast • Sve tri kategorije su jednako važne u izradi pristupačnih web stranica

26. Wave validator sa stilovima

27. Wave validator bez stilova

28. Wave validator kontrasta

29. Analiza Wave validatora • U našoj analizi pokazano je da trenutna stranica nije upotpunosti usklađena sa standardima pristupačnosti • Postoji veliki broj pogrešaka u analizi sa i bez stila • Analiza kontrasta pokazala je da na osam mjesta naslovnice kontrast nije dobar(mala je razlika u kontrastu između pozadine i teksta)

30. Analiza kontrasta • Prilikom analize rezultata wave validatora kontrasta smo primjetili greške u kontrastu • Zbog takvih rezultata smo odlučili dodatno testirati kontrasthttp://www.checkmycolours.com/ alatom • Ovaj alat detaljno opisuje razlike u bojama tj. kontrastu

31. http://www.checkmycolours.com/

32. http://www.checkmycolours.com/

33. Analiza kontrasta • Analiza rezultata ovog validatora nam daje detaljan opis svih elemenata stranice • Analiza ne daje samo rezultate test kontrasta nego i razlike u osvjetljenju koje je jednako važno prilikom izrade pristupačne web stranice

34. Zaključak analiza validatora • Svaka web stranica koja teži pristupačnosti mora zadovoljiti većinu priloženih validatora • U većini slučajeva je nemoguće zadovoljiti sve standarde u potpunosti ali se svakako mora tome težiti • Iako svaki od validatora daje detaljne informacije odstupana od standarda, poželjno je da se prilikom izrade/promjene web stranice koristi jednim od službenih standarda kao što su: WCAG 2.0 ili Section 508

35. Osnovne vodilje dizajna • Prije nego se upustimo u analizu postojećih standarda i njihovu primjenu na našem primjeru analizirati ćemo neke od osnovnih logičkih postavki prilikom izrade pristupačne web stranice • Teško je stalno razmišljati o svim stavkama standarda, ali nije teško uvijek misliti o par osnovnih vodilja prilikom izrade

36. Osnovne vodilje dizajna • Redosljed i korištenje elemenata moraju imati smisla kada se samo koristi tekst • Paziti na minimalni kontrast • Povećanje teksta do 200% u web pregledniku bez gubitka funkcionalnosti • Višestruke mogućnosti navigiranja po sadržaju npr. Tipkovnica • Sadržaj mora biti logičan i "predvidljiv" • Stranica mora pružati identifikaciju pogrešaka, prijedloge i instrukcije • Stranica mora biti kompatibilna sa drugim tehnologijama iste i slične tematike

37. Standardi • Web Content Accessibility Guidelines (WCAG) 2.0 • Section 508 • Dva nabrojana standarda su trenutno najbolja pomoć prilikom izrade pristupačne web stranice • U ovoj prezentaciji ćemo pokušati predočiti zahtjeve koje pred nas postavljaju dani standardi

38. Web Content Accessibility Guidelines • WCAG je izdan od strance W3C konzorcija • Sastoji se od seta vodilja za izradu pristupačnih sadržaja prvenstveno za hendikepirane korisnike • Trenutačna verzija je 2.0 koje je ujedino i ISO standard, ISO/IEC 40500:2012

39. Web Content Accessibility Guidelines (WCAG) 2.0 • Slojevi uputa za izradu web stranice: • Principi web pristupačnosti • Pregledni princip • Operabilni princip • Razumljivi princip • Robusni princip • Vodilje – 12 vodilja • Kriterij uspješnosti – ocjene A, AA, AAA • Tehnike

40. Pregledno Alternativni tekst i multimedija Dizajn koji omogućuje alternativne prezentacije Prilagodljivost izgleda, boja i zvuka Operativno Omogućiti rad s tipkovnicom Osigurati dodatno vrijeme Pomoći korisniku prilikom navigacije Razumljivo Čitljivo Dosljedno Pomoći korisniku da izbjegne pogreške WCAG 2.0 principi

41. Section 508 • Standard SAD-a • Politike izrade pristupačnosti se razlikuju između država, ali u većini država, uključujući europsku uniju, koriste WCAG vodilje • Section 508 je baziran na W3C vodiljama prve razine • Kao takav standard slaže se sa WCAG standardom ali ga je lakše primjeniti jel nije "strog" kao i WCAG standard

42. Preporuka • Radi lakšeg razumijevanja, saželi smo sve vodilje section 508 standarda(ujedino i WCAG prve razine) • Svi elementi web stranice se moraju usporediti sa ovim vodiljama • Sav sadržaj koji se dodaje naknadno na web stranicu se mora usporediti sa ovim vodiljama

43. Vodilje standarda 508 - HTML • (a) Za svaki ne tekstualni element mora postojati njegova ne tekstualna alternativa(primjeri. alt atribut, opis, sadržaj u elementu) • PRIMJER: Slike koje imaju funkciju(slike unutar poveznica, slike gumbovi) moraju imati alternativni tekst koji objašnjava povezanu funkcionalnosti

44. Vodilje standarda 508 • (b) Za svaku multimedijsku prezentaciju mora postojati ekvivalentna alternativa koja će biti sinkronizirana sa prezentacijom • PRIMJER: Sadržaj koji je prezentiran videom ali nema zvuk mora imati zvučno objašnjenje

45. Vodilje standarda 508 • (c) Web stranice moraju biti dizajnirane tako da sve informacije koje su prikazane sa bojom se mogu vidjeti bez boje • PRIMJER: Boja ne smije biti jedini nosioc važne informacije

46. Vodilje standarda 508 • (d) Dokument mora biti organiziran tako da ga je moguće pročitati bez korištenja stilova kao što je CSS • PRIMJER: Stilovi kao CSS mogu biti korišteni kod sučelja, ali dokument mora ostati čitak i razumljiv(makar vizualno ne izgleda jednako primamljivo)

47. Vodilje standarda 508 • (e) Za svaku aktivnu regiju poslužiteljskih slikovnih mapa mora biti dodana tekstualna poveznica • (f) Klijentske slikovne mape imaju prednost pred poslužiteljskim osim u situacijama kada regije nisu definirane dostupnim geometrijskim oblicima • PRIMJER: Svaka slike kao i njene aktivne regije imaju alternativni tekst

48. Vodilje standarda 508 • (g) Redovi i zaglavlja kolona tablica moraju biti identificirani • PRIMJER: Korištenje <th> taga kod identificiranja zaglavlja kolone tablice

49. Vodilje standarda 508 • (h) Oznake moraju biti korištene kod povezivanja ćelija zaglavlja i ćelija podataka za tablice koji imaju dvije ili više razina redova ili zaglavlja kolona • PRIMJER: Ćelije tablice su povezane sa pripadajućim zaglavljem korištenjem id atrubuta

50. Vodilje standarda 508 • (i) Okviri moraju biti nazvani sa tekstom koji naglašava identifikaciju i navigaciju • PRIMJER: Svaki okvir ima naziv koji opisuje namjenu ili sadržaj okvira