přístupnost prakticky 2.0

Download Přístupnost prakticky 2.0

Post on 30-Nov-2014

697 views

Category:

Internet

0 download

Embed Size (px)

DESCRIPTION

Povdn o pstupnosti a WCAG 2.0 na srpnovm UX Monday v Praze.

TRANSCRIPT

  • 1. Pstupnost prakticky 2.0 Mgr. Luk Marvan

2. AVG Confidential2 Kdopak to mluv? Strun pedstaven. Pro pstupnost? Jakou mme motivaci. Web Content Accessibility Guidelines (WCAG) 2.0 Rychl tipy pro lep pstupnost. Zvr Rady a otzky Zdroje Dotazy Pivo V program na pondln veer 3. AVG Confidential Mgr. Luk Marvan / @BoBMarvan Ped tm, ne jsem zaal pracovat v AVG Technologies, tak jsem 10 let vyrbl a vymlel weby v Seznam.cz. Pstupnosti se vnuji od roku 2006. O pstupnosti m kolil jet David pinar ;) Byl jsem soust tmu kter autorizoval peklad Web Content Accessibility Guidelines 2.0 Kdopak to mluv? 4. Pro pstupnost? Nae / vae motivace 5. AVG Confidential Kdo me bt povaovn za postienou osobou? Nevidom a zrakov postien (nap. barvoslep) lid. Tlesn postien lid. Neslyc nebo jinak sluchov postien lid. Lid s kognitivnmi poruchami. Lid mluvc jinm mateskm jazykem. Vyhledvc roboti. Rzn alternativn uivatelsk rozhran. Rzn typy postien 6. AVG Confidential Motivan obrazov ploha # 1 7. AVG Confidential Motivan obrazov ploha # 2 8. AVG Confidential Motivan obrazov ploha # 3 9. AVG Confidential protoe lkask zznamy jsou dvrn, ale existuje odhad, e se jedn a o I kdyby to bylo jen 5%, tak se to tk 8 500 000 uivatel AVG. Nevme, kolik postiench lid ije na Zemi, 30 % 10. AVG Confidential 2 pklady: odeta obrazovky & braillsk dek Asistivn technologie 11. AVG Confidential To u je sakra hodn. Vzkumn studie od Microsoftu dokazuje, e 57 % dosplch uivatel pota me mt prospch z pstupnch technologi. 57 % Zdroj: Microsoft.com 12. AVG Confidential Opening Doors to IT http://www.pravidla-pristupnosti.cz/ www.section508.gov Nezapomnejme na zkony 13. AVG Confidential Je to hluboce sprvn vc. Ve skutenosti existuje jet jeden ohromn dvod, pro se vnovat pstupnosti: 14. AVG Confidential Kdykoliv pemlte o pstupnosti, pipomete si nsledujc fakta: Nevidom uivatel je schopen zskat ze strnky pouze informace v textov podob. Nevidom uivatel vnm informace, kter jsou na strnce, linern - chyb mu globln pohled. Nevidom uivatel obsluhuje osobn pota a veker programy pouze z klvesnice. Slabozrak uivatel vzhledem k pouit softwarov lupy, me vidt v jednu chvli pouze malou st strnky. Mjte prosm na pamti 15. Web Content Accessibility Guidelines (WCAG) 2.0 Svtov standard od roku 2008 16. AVG Confidential Mn striktnch pravidel, vce zkladnch princip. Web Content Accessibility Guidelines (WCAG) 2.0 Web Content Accessibility Guidelines 2.0 17. AVG Confidential Princip pravidlo kritrium technika. Kad princip je dle lenn na nkolik pravidel (celkem je jich 12). Kad pravidlo m nkolik kritri, kter maj opt piazeny priority (A, AA, AAA) a jejich ne/splnn lze ovit. K pravidlm a kritrim jsou piazeny techniky. WCAG 2.0 struktura metodiky 18. AVG Confidential18 tyi zkladn principy 1. Vnmatelnost. 2. Ovladatelnost. 3. Srozumitelnost. 4. Robustnost. Web Content Accessibility Guidelines 2.0 19. AVG Confidential Textov alternativy Nadpisy a jejich alternativy Kustomizovateln obsah Dostaten kontrast WCAG 2.0 - Vnmatelnost 20. AVG Confidential Pstupnost z klvesnice. Dostatek asu na peten a prci s obsahem strnky. Pozor na zchvaty. Navigace a snadn nalezen obsahu. WCAG 2.0 - Ovladatelnost 21. AVG Confidential iteln a srozumiteln texty. Obsah se zobrazuje a funguje tak, jak uivatel pedpokld. Pomozte uivatelm vyvarovat se chyb a opravit je. WCAG 2.0 - Srozumitelnost 22. AVG Confidential Maximln kompatibilita se stvajcmi i budoucmi technologiemi, vetn asistivnch technologi. WCAG 2.0 - Robustnost 23. Pklady dopad na grafick uivatelsk rozhran Rychl tipy pro lep pstupnost 24. AVG Confidential el kadho odkazu me bt uren pouze z textu samotnho. Nov cenky naleznete zde. vs. Zde naleznete nov cenky. el kadho odkazu me bt uren pouze z textovho oznaen nebo z textovho oznaen v kombinaci s jeho programov urenm kontextem. Vjimku tvo ppad, kdy je el odkazu nejednoznan pro vechny uivatele. (rove A) 2.4.4 el odkazu (v kontextu) 25. AVG Confidential Barva nen pouvna jako jedin vizuln prostedek, slouc k poskytnut urit informace. Toto je link uprosted delho textu. vs. Toto je link uprosted delho textu. Barva nen pouvna jako jedin vizuln prostedek, slouc k poskytnut urit informace, k indikovn urit akce, k vyjden poadavku na odezvu i k odlien uritho vizulnho prvku. (rove A) 1.4.1 Pouvn barev 26. AVG Confidential Text i text ve form obrzku m vi svmu pozad kontrast minimln 4,5:1. Nstroj: Color Contrast Analyzer for Chrome Vjimku tvo nsledujc ppady (rove AA): Texty psan velkm fontem: Texty psan velkm fontem i texty tohoto typu prezentovan ve form obrzku maj kontrast minimln 3:1. Texty, kter se nhodou staly soust prezentace a nejsou pro ni relevantn: text nebo text v obrzku, kter jsou soust neaktivnho prvku uivatelskho rozhran, texty slouc ist dekorativnm elm, texty, kter nejsou viditeln dnmu uivateli nebo texty, kter jsou soust obrzku s nm vznamov nesouvis, nemus splovat dn poadavky tkajc se kontrastu. Logotypy: Text, kter je soust loga nebo nzvu firmy i produktu, nepodlh dnm poadavkm na minimln kontrast. 1.4.3 Minimln kontrast 27. AVG Confidential Webov strnky neobsahuj dn prvky, blikajc vce jak tikrt za sekundu nebo je toto blikn pod prahem stanovenm obecn pro blikn a pod prahem stanovenm pro erven blikn. (rove A) 2.3.1 Ti zblesky nebo podprahov blikn 28. AVG Confidential + Absolutn velikost a relativn pozice prvk rozhran min 7.5 mm 29. Dopady na zdrojov kd Rychl tipy pro lep pstupnost 30. AVG Confidential Opatete kad netextov obsah textovmi alternativami, kter je mon podle poteby pevst do jinch formt jako napklad zvten psmo, bodov psmo, fonetick pepis i zjednoduen jazyk. Kad netextov obsah, kter je uivateli prezentovn, m svou textovou alternativu, slouc stejnmu elu (rove A) Jestlie netextovm obsahem je ovldac prvek i prvek reagujc na vstup uivatele, pak m tento prvek nzev popisujc jeho el. 1.1 Netextov obsah 31. AVG Confidential Semantick struktura dokumentu. Pouvejte nadpisy sprvn Informace, strukturu a vzjemn vztahy obsaen v prezentaci lze programov urit nebo jsou dostupn ve form textu. (rove A) 1.3.1 Informace a vzjemn vztahy 32. AVG Confidential Jestlie uivatel provede zmnu v nastaven urit poloky uivatelskho rozhran, nevyvol to automaticky zmnu kontextu Jestlie uivatel provede zmnu v nastaven urit poloky uivatelskho rozhran, nevyvol to automaticky zmnu kontextu nebo je na zmnu pedem upozornn. (rove A) 3.2.2 Pi akci uivatele 33. AVG Confidential Jmno strnky - Jmno webu Kad webov strnka m titulek, vystihujc jej tma i el. (rove A) 2.4.2 Strnky maj titulek 34. AVG Confidential body { font-size: 13px; } vs. body { font-size: 89%; } S vjimkou titulk a text ve form obrzk me bt text zvten a o 200% bez pomoci asistivnch technologi, ani dojde ke ztrt obsahu i poruen funknosti. (rove AA) 1.4.4 Zmna velikosti textu 35. AVG Confidential nap. Peskoit na obsah .hidden { position:absolute; left:-1000px; top:-1000px; width:1px; height:1px; overflow:hidden; } peskoit na obsah Uivatel m k dispozici mechanismus, umoujc mu peskakovat bloky informac, kter se opakovan objevuj na vce strnkch prezentace. (rove A) 2.4.1 Pesko bloky 36. AVG Confidential nap. ve formulch. R Nadpisy a popisky odpovdaj svmu elu nebo tmatu. (rove AA) 2.4.6 Nadpisy a popisky 37. Zvr 38. AVG Confidential o em jsme si tu dnes povdali Pro pstupnost? Jakou mme motivaci. Web Content Accessibility Guidelines (WCAG) 2.0 Rychl tipy pro lep pstupnost. Zvr + Nastudujte si dal Zdroje Shrnut 39. AVG Confidential kter bych vm chtl na zvr dt 1. Se zavedenm postup zlepujcch pstupnost neotlejte! Jejich zptn implementace je mnohem nronj ve srovnn s tm, jak snadn je jejich pouit od startu projektu. 2. Dleit jsou kvalitn testovac nstroje. Dv dobr rady 40. AVG Confidential kter by si ml kad z vs nyn poloit 1. Co je patn na vaem webu? 2. Co udlte pro zlepen pstupnosti vaeho webu? Dv kruciln otzky 41. AVG Confidential Prce na lep pstupnosti webu nikdy nekon. Uvdomte si 42. ekm na vae otzky a/nebo jdeme na pivo?! Mgr. Luk Marvan | UX Designer | T +420 725 695 148 E lukas.marvan@avg.com 43. AVG Confidential Kde se dozvte mnohem vce o pstupnosti. Web Content Accessibility Guidelines (WCAG) 2.0 (CZ) Easy Checks - A First Review of Web Accessibility WebAIM's WCAG 2.0 Checklist (CZ) Web accessibility tutorials Accessible Rich Internet Applications (WAI-ARIA) 1.0 Section508.gov Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes Dont Make Me Think, Revisited (chapter 12. Accessibility and You) Zdroje