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:

• ,

1. ,
2. , , ,

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