Radek Pavlíček - testování přístupnosti a použitelnosti webu
Radek Pavlíček: Přístupný web
-
Upload
kisk-ff-mu -
Category
Education
-
view
2.852 -
download
1
description
Transcript of Radek Pavlíček: Přístupný web
- 1. Radek Pavlek, jen 2009 The Web is not abarrierto people with disabilities, it is thesolution . Paul R. Bohman, WebAIM
2. Co je to pstupn web?
- Pstupn web
-
- respektuje maximum svch uivatel;
-
- neklade svm uivatelm dn pekky;
-
- lpe se pouv i bnm uivatelm;
-
- lpe se udruje a aktualizuje.
- Pstupnost je velmi zce provzna i s dalmi oblastmi tvorby webovch strnek (pouitelnost, informan architektura, SEO).
3. Definice pstupnosti I
- Pstupn webov strnka je pouiteln prokadhouivatele Internetu, a sice nezvisle na jeho postien, schopnostech, znalostech, zkuenostech i zobrazovacch monostech.
Lze tuto definici vbec naplnit? 4. Definice pstupnosti II
- Za pstupn web lze dnes povaovat takov web, kter budenvtvnk s tkm zdravotnm postienm schopen i pes svj zdravotn handicap, za pomoci prostedk, kter m k dispozici, a zpsobem, kter mu vyhovuje, efektivn pouvat a doshnout svho cle.
Lpe odpovd souasn situaci v oblasti pstupnosti (jen o mlokter strnce lze dnes prohlsit, e je naprosto nepstupn). 5. Definice pstupnosti III
- Web vykazuje zsadn nedostatky v pstupnosti a klade handicapovanm uivatelm velk pekky.
- Pi definici pstupnosti je teba brt v potaz
-
- as,
-
- rozsah,
-
- situaci na poli asistivnch technologi a prohle,
-
- clovou skupinu, jej zvyklosti a preference.
? 6. Pro se zabvat pstupnost?
- ?
7. lovk
- Usnadnit prci s webem lidem s handicapem i bez nj.
8. Zisk
- m vce nvtvnk, tm vt kupn sla. spora nklad na webovou prezentaci.
- spora na HR zjemce si informaci zjist na webu, nemus k vm volat.
9. PR, posilovn znaky
- Social responsibility
- Pomhn je v souasnosti v kurzu, tak pro to, e dlme nco pro handicapovan, nedat vdt vem.
- Lep mediln obraz v och veejnosti.
- Lep vnmn spolenosti veejnost.
10. Lep viditelnost ve vyhledvach
- ada prav kvli pstupnosti me pomoci posunout v web pi hledn konkrtnch frz na vy pozice ve vsledcch vyhledvn.
11. Trest
- Vyhnut se soudm nebo kritice za nepstupnost.
12. Komu vemu pomohu I
- Zrakov postien
- (slepota, slabozrakost, barvoslepost)
- Tlesn postien
- (nemonost pouvat my, pomal reakce, omezen jemn
- motorika)
- Sluchov postien
- (hluchota)
- Kognitivn poruchy
- (poruchy uen a soustedn, neschopnost pamatovat si i soustedit se na velk mnostv textu)
- Kombinovan postien
13. Komu vemu pomohu II
- Senioi.
- Technick handicapy.
- Doasn zhoren pracovn podmnky.
Poet znevhodnnch uivatel se pohybuje mezi 20 a 30% (zle na tom, koho veho adme mezi znevhodnn uivatele). 14. Asistivn technologie I.
- Zahrnuj asistivn, adaptivn a rehabilitan prostedky a tak proces pouvan pi jejich vbru a pouvn.
- Speciln software
-
- hlasov syntza (WT Voice, HLAS, RS SOLO)
-
- screen reader pro nevidom
-
- softwarov lupa pro slabozrak
- Speciln hardware
-
- braillsk dek, ozvuen mobiln telefon i PDA
15. Asistivn technologie II.
- Velk i jinak pizpsoben klvesnice ( www.petit-os.cz/klavesnice.htm )
- Software na hlasov ovldn PC ( www.fugasoft.cz )
- Tyinky, trackbally, atp.
16. Co ve m vliv na pstupnost? #1
- Zdravotn postien
-
- jin poadavky m nevidom, slabozrak, sluchov postien, tlesn postien...
- Technick zpracovn (~ zda vyhovuje pravidlm nkter metodiky)
-
- nepodceovat, ale ani nepeceovat.
- Zkuenosti konkrtnho uivatele s pracs webem
-
- m vt zkuenosti, tm lep orientace i na mn pstupnm webu,
-
- zkuen uivatel maj ale zpravidla vy nroky na pstupnost.
17. Co ve m vliv na pstupnost? #2
- Zkuenosti konkrtnho uivatele s prac s asistivn technologi (AT)
-
- nauit se dobe ovldat AT by mla btpovinnostzrakov postienho uivatele,
-
- m lep znalosti, tm lpe me uivatel vyuvat monost strnky -> vy efektivita prce, snaz pstup k informacm,
-
- mal i nedostaten znalosti -> nesmysln poadavky na pstupnost.
18. Co ve m vliv na pstupnost? #3
- Pouit asistivn technologie, jej konfigurace a verze
-
- jinak vid web uivatel JAWS, jinak uivatel Halu, jinak uivatel ZoomTextu i Supernovy.
- Pouit prohle a jeho doplky
- Preference a zvyklosti konkrtnho uivatele
19. Co potebuj nevidom
- Vhodn strukturovn obsahu pomoc nadpis a seznam.
- Pstupnost webu z klvesnice.
- Vhodnou textovou alternativu k vizulnm prvkm.
- Dleit informace na zatku konkrtnho prvku (strnky, nadpisu, odkazu, formule, atp.).
20. Co potebuj slabozrac
- Nepouvat text ve form obrzk.
- Monost zvtovat obsah strnky.
- Dostaten kontrastn barvy.
- Monost pouit jinho barevnho schmatu.
- Umstn klovch informac i funkcionalit na obvykl msta strnky.
- Zvraznn poloky, kter mfocus .
21. Co potebuj sluchov postien
- Jednoduch jazyk, srozumiteln podvan informace.
- Titulky i jinou textovou alternativu pro audio a video.
- Peklad do znakov ei u dleitch multimedi.
22. Co potebuj tlesn postien
- Pstupnost obsahu z klvesnice.
- Zvraznn poloky, kter mfocus .
- Viditeln odkazy pro pechod na rzn sti strnky.
- Prvky, na n lze kliknout, se nepohybuj.
- Dostaten velk oblasti pro kliknut.
- Vhodn pojmenovan prvky strnky ( rozpoznvn hlasu ).
23. Co potebuj lid s kognitivnmi poruchami
- Konzistentn design.
- Mapa webu.
- Text psan sans-serif fontem se zarovnnm vlevo.
- Vstin a nvodn chybov hlky.
- Monost pouit jinho barevnho schmatu.
24. Pro se zabvat asistivnmi technologiemi (AT)?
- Pouh splnn pravidel nkter z metodiknemus btpro relnou pstupnost dostaujc.
- K eskm pravidlmchyb dokumentys popisem technik a postup-> odladn konkrtnho een pomoc AT a dialogem se ZP uivateli je ideln zpsob zajitn reln pstupnosti.
25. Musm umt ovldat AT?
- Nutn to nen.
-
- Netriviln obsluha pro bnho uivatele
-
- Nenasimulujete zpsob prce a vnmn webu uivatelem s postienm
-
- Vysok poizovac cena (dov destky tisc K), demoverze by se dle licennch podmnek pro testovn oficiln pouvat nemly.
-
- Idelnm eenm je spoluprce s nkm, kdo m potebn znalosti, zkuenosti a odpovdajc zzem.
26. Musm tedy umt ovldat AT?
- Je ale dobr vdt,co ve (a jak) um screen readery i sw lupy zpstupnita podle toho strnky tvoit.
- Ve finle je to totikonkrtn handicapovan uivatels konkrtnm sw a hw vybavenm, kdo bude se strnkou muset zaztench podmnekpracovat ne ednk z ministerstva, autor vyhlky, webu atp.
27. Mty kolem bezbarirovho webu
- Vytvoen textov verze strnek je dostaujc.
- Vytvoit pstupn web je komplikovan a nkladn.
- Pstupnost a atraktivn web design se vyluuj. Pstupnost potlauje kreativitu.
- Nvtvnci webovch strnek nemaj s pstupnost problmy.
- Nevidom uivatel nebo uivatel s jinm typempostien nepouvaj Internet.
28. Metodiky pstupnosti
- Nejznmj metodiky
-
- WCAG 1.0 a 2.0
-
- Blind Friendly Web
-
- Dogma W4
-
- Section 508
-
- Pravidla MI z roku 2004
-
- Pravidla tvorby pstupnho webu z roku 2008
29. Metodiky pstupnosti
- IDELYpstupnho webu
- To, e web (pln) nevyhovuje nkter metodice, jet neznamen, e nen pstupn, a naopak.
- V mnoha ppadech takneexistuje jedin sprvn een .
- Vzkum mezi uivateli screenreader -> typick uivatel neexistuje.
30. Co ovlivujekvalitumetodiky
- Datum vydn.
- problmy e (mn nkdy me bt vce).
- Soulad s aktuln situac na poli asistivnch technologi.
- Konkrtnost poadavk.
- Existence dokumentu s technikami pro een konkrtnch ppad.
31. WCAG 2.0
- Vydn v prosinci 2008.
- Progresivn pstup k vci.Nestanovuje jasnou mez, co je pstupn a co nikoliv, dleit je aktuln stav prohle a asistivnch technologi.
- Pravidlaodpovdaj aktulnm trendm , ada pravidel z WCAG 1.0 u je dnes naprosto neaktulnch.
- Pravidla jsouflexibiln, pizpsobiv a nadasov .
- Mitelnj vsledky .
- Nezvislost na technologii .
- Orientace na uivatele.
- Zkladn vciz hlediska pstupnostise nemn .
32. Testovn pstupnosti
- run kontrola;
- automatick kontrola;
- audit odbornka;
- uivatelsk test proveden handicapovanmi uivateli.
33. Kdo me provst test webu? odbornkna pstupnost handicapovan zkuen uivatel X autor webu Kad z nich me pstupnost toho samho webu vyhodnotit rzn. 34. Handicapovan zkuen uivatel
- otestuje web na zklad svch praktickch zkuenost;
- otestuje web pomoc specilnho software a/nebo hardware;
- pidan hodnota ve form pouitelnosti webu pro handicapovan nvtvnky;
- nemus vak postehnout vechny chybyz hlediska pstupnosti;
35. Odbornk na pstupnost
- spolehliv prov web podle nkter z metodik pstupnosti a ppadn i vlastnch praktickch zkuenost;
- sluby v oblasti pstupnosti v souasnosti nabz hodn subjekt,ne kad mus mt odpovdajc znalosti;
- nkte odbornci asto hodnot pouze na zklad teoretickch znalost, nemus mt i nemaj praktick zkuenosti s clovou skupinou;
36. Autor webu
- zn svj web;
- asto trp profesionln slepotou(potencionln chyby nemus vidt);
- stv se tak, e pravidla pstupnosti patn interpretuje. Web, vytvoen podle tchto patn interpretovanch pravidel pak povauje za pstupn, i kdy tomu tak ve skutenosti nen;
37. Nstroje pro testovn pstupnosti
- toolbary
-
- Acce s sibility Toolbar -www.visionaustralia.org.au/ais/toolbar/
-
- Web Developer Extensionwww.czilla.cz/doplnky/rozsireni/web-developer-toolbar/
- on-line validtory
-
- Cynthia Says ( www.cynthiasays.com )
-
- WAVE ( wave.webaim.org )
- asistivn technologie
38. Dal zdroje informac
- www.blindfriendy.cz
- http://zdrojak.root.cz/pristupnost
- http://poslepu.cz
- www.blindfriendy.cz/wcag20
- www.pravidla-pristupnosti.cz
- www.pravidla-pristupnosti.cz/att/publikace.pdf
39. PRAKTICK ST - emu vnovat pozornost v obecn rovin?
- Nadpisy
- Seznamy, odstavce
- Odkazy
- Grafika (CAPTCHA)
- Barvy
- Tabulky
- Formule
- Pstupnost ovldacch prvk webu z klvesnice
40. Smantika je zklad
- Sprvn strukturovn strnkyvrazn zlepuje kvalitu poskytovanch informac a efektivitu prce se strnkou.
- POUVEJTE HTML znaky v souladu s jejich urenm screen readery jsou s kadou novou verz dokonalej a een, kter byla dve povaovny na vhodn, mohou dnes komplikovat prci.
- Vce vizhttp://poslepu.blogspot.com/2008/02/screen-readery-semantika.html
41. Nadpisy
- Z hlediska nevidomch uivatel je naprosto nezbytn vhodn strukturovat obsah strnek pomoc znaek pro nadpisy adodrovat dleitost a hierarchii nadpis .
- Hlavn obsah strnky je vhodn vyznait pomoc nadpisu h1.
- Pro vyznaen nadpis jenutnpouvat znaky , .., , ne vlastn styly i jen znaky pro velk/tun psmo, atp.
42. Nadpisy - skryt
- Pouvme proonadpisovntch st webu (hlavn/ pomocn navigace, atd.), u kterch nen z njakho dvodu mon/ vhodn pout viditeln nadpisy.
- Vhodn technika pro skrvn
-
- .skryj {position: absolute; top: auto; left: -10000px; height:1px; font-size:1px; overflow: hidden;}
-
- Hlavn navigace
-
- http://www.webaccessibility.info/lab/displaytest.html
- Dnes ji e landmarky z WAI-ARIA
43. Seznamy
- Ty sti strnek, kter jsou ze sv podstaty seznamem, je dleit jako poloky seznam vyznaovat (poloky navigac, vty prvk, ...)
- Implementace znaky:
- ,
- ,
- , , ,
44. Odstavce
- Text je vhodn lenit do odstavc, kter jsou vyznaeny znakou
.
- Text odstavc je psn (pokud to charakter sdlen nevyluuje) principem obrcen pyramidy.
- Mezi odstavci jsou dostaten mezery.
45. Odkazy
- Odkazy jsou zkladhypertextu .
- Odkazy mus btpstupn a ovladateln z klvesnice .
- Chyba odkaz, kter nikam nevede
- Produkty
46. Oznaen odkazu
- Oznaen odkazu by mlo dvat smysl i bez okolnho kontextu.
- Nevhodn
-
- Kliknte zde
-
- Zde
-
- Vce
-
- Info
- Oznaen odkazu by mlo bt krtk a vstin.
- Oznaen odkazu nezan nevznamovm znakem.
Jsou situace, kdy nelze jinak, ale pokud je to mon, je vhodn se tomuto zpsobu oznaen odkaz vyvarovat. 47. Vzhled odkazu
- Podtrhvat (v hlavnm obsahu strnky).
- hover, focus, active
- Pklad:
-
-
-
-
- a:hover,
-
-
-
-
-
-
-
- a:focus,
-
-
-
-
-
-
-
- a:active
-
-
-
-
-
-
-
- { b ackground-color:#ffff ff ;c olor:# ff0000 ;}
-
-
-
- Lze pout i vlastnost outline.
48. Informovn o cli odkazu
- Idel o cli odkazu informuj prohlee.
- Skutenost tyto informace (a to jet ne vechny) sdluj pouze screenreadery.
- Pklady:
-
- odkaz do tto strnky,
-
- odkaz vedouc mimo web,
-
- non-HTML obsah,
-
- odkaz otevrajc nov okno prohlee,
-
- jin dokument v rmci webu,
-
- potovn odkaz.
-
- navtven odkaz.
Mus eit autor webu. 49. Odkaz na non-HTML obsah
- Oznaen takovho odkazu mus obsahovat informaci o typu a velikosti clovho souboru.
- Tuto informaci nen vhodn dvat do title (screen-readery neinterpretuj) nebo prezentovat formou ikonky, skrytou na pozad pomoc CSS.
50. Dal typy odkaz
- Odkazy otevrajcnov okna prohlee .
- Odkazy vedoucmimo web .
- Ikonka na pozad odkazu, skryt pomoc CSS, nesta.
- een:
- http://poslepu.blogspot.com/2008/03/externi-odkazy-pristupnost.html
51. Pomocn navigan menu
- Na zatek kad strnky je vhodn umstit skryt pomocn navigan menu (odkazy na dleit sti strnek hlavn obsah, navigace, ...).
- Maximln ti odkazy pro pesun na dleit sti.
- .skryj { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
- Dal zpsob implementace http://pristupnost.nawebu.cz/weblog/blogpost.php?post=94
52. Grafick objekty na strnkch I
- Grafika nen z hlediska pstupnosti patn.
- Grafika zvyuje pstupnost ilustrace, ikony, animace, atp.
- Krom nevidomch, kte ji a tak neocen, je prospn prakticky vem nvtvnkm.
53. Grafick objekty na strnkch II
- Maj ti hlavn ely:
- nesou vznamovou informaci;
- dekorativn funkci (doplnn sdlovan informace bez toho, ani by pinely nco novho);
- slou jako odkazy.
54. Grafick objekty na strnkch III
- Nesouc vznamovou informaci
- Logo
- Fotografie
- Graf
- Obrzek jako odkaz
- CAPTCHA
55. Grafick objekty na strnkch IV
- Nesouc vznamovou informaci
- Samostatn obrzek
- Obrzek s popiskem mimoalt
relevantn popis obrzku
56. Grafick objekty na strnkch V
- Dekorativn
- odrky, ry, zaoblen rohy, ilustran fotografie, ...
- Implementace
- v kdu
- skryt na pozad pomoc CSS
57. Grafick objekty na strnkch VI
- Obrzky jako odkazy.
- Pokud za obrzkem nsleduje odkaz, vedouc na stejn msto, je vhodn bu
-
- Text odkazu
-
- obrzek schovat na pozad odkazu.
58. Alternativn popisek u obrzku
- Uitel na zkladn kole, vysvtluje rozdl mezi malbou, kresbou a rytinou.
- Rodinn pslunk tvo rodokmen.
- Profesor na vysok kole vysvtluje rozdl mezi rznmi typy maleb.
- Historik umn vytv katalog mal portrt.
59. Alternativn popisek ke grafu 60. BARVY A KONTRAST I
- Dostaten vzjemn kontrast barev (CCA).
- Pozor na vzorky na pozad -> kontrast me bt dostaten, ale text nemus bt iteln.
- Nezvislost na nastaven barevnho schmatu.
- Nezvislost na vnmn barev.
61. Colour Contrast Analyzer
- Pro esk pravidla pstupnosti je rozhodujc vsledek oznaen jako "AA". Pokud se tedy pro Vai barevnou kombinaci objev "Vyhovuje (AA)", je kontrast v podku. Pokud se u vsledku objev zrove i "Vyhovuje (AAA)", znamen to, e kontrast je mimodn dobr.
- Jako "Algoritmus" je teba zvolit "Svtelnost". Algoritmus rozdlu barvy a jasu je uren pro star verze pravidel pstupnosti (nap. WCAG 1.0 i pvodn Pravidla MI R).
62. Bn uivatel Barvoslep uivatel 63. 64. Nezvislost na vnmn barev IIb 65. 66. Barvy a kontrast II
- Poadavky na dostaten kontrast se tkaj i textov informace, prezentovan graficky -> kde to lze, je lep se tomuto zpsobu een vyhnout -> hor itelnost textu pi jeho zvten.
67. Psmo
- Dostaten vchoz velikost psma.
- Psmo lze zvtovat i zmenovat pomoc prostedk prohlee.
- Lep je sans-serif.
68. Konzistentn navigace
- Navigace mus bt konzistentn a srozumiteln nap celm webem.
- Navigan mechanismy mus bt umstny stle na stejnch (ideln i obvyklch) mstech.
- Navigace mus bt pstupn.
69. Konzistentn navigace
- Na kad strnce webu obsahuje 5 prvk, kter vdy potebujete mt po ruce
-
- logo,
-
- odkaz na tituln strnku,
-
- sekce,
-
- vyhledvn,
-
- pomcky.
- Vjimkami mohou bt tituln strnka a formule.
70. Navigace kufrov test
- O jak server se jedn? (Logo serveru)
- Na jak jsem strnce? (Nzev strnky)
- Jak jsou hlavn sekce tohoto serveru? (Sekce)
- Jak mm na dan rovni monosti? (Lokln navigace)
- Kde se nachzm v hierarchii serveru? (Drobekov navigace)
- Jakm zpsobem mohu vyhledvat?
71. Ovladatelnost webu z klvesnice
- Dleit pro velkou skupinu handicapovanch osob (nevidom, slabozrac, tlesn postien, ...).
- Vechny ovldac prvky strnky (odkazy, formulov prvky, ...)musbt dostupn aovladatelnz klvesnice.
- Dostaten zvraznn prvek, kter m focus.
- Klvesov zkratky???
72. DAL TECHNOLOGIE
- CSS
- Javascript
- Cookies
- Flash
- ActiveX
- Nen dobr a patn technologie.
- Pouit konkrtn technologie nemus jet nutn zpsobit problm s pstupnost, technologii je teba pout tak, aby si s n pstupov prostedky na stran klienta poradily.
73. FORMULE I
- Dbt na sprvn definovn vazeb mezi prvky a popisky pomoc znakylabela atributforaid
- Vhodn seskupovn prvk pomoc fieldset a legend
- Implementacewww.plavacek.net/formulare
74. TABULKY I
- Tabulky pouvat v souladu s urenm (kov zvisl informace)
-
- do kad buky dvat pouze informace, kter spolu logicky souvis;
-
- tabulka mus dvat smysl tena po dcch;
-
- th, id, headers, summary
- pklad sprvnho pouitwww.idos.cz/blind
- Tabulky pouit pro layout (nepouvat)
75. 76. A to je ve ;-)
- Dkuji za pozornost.
- Kontakt:
- Radek Pavlek
- [email_address]
- www.centrumpronevidome.cz/pavlicek