![? ??? ?? ??
?? ?? ???? 5%
3,000,000
2,519,241?(11? 12?? ??)
2006?
2,500,000
2007?
2008?
2,000,000 2009?
2010?
1,500,000
2006? 2007? 2008? 2009? 2010?
[ ?? : ????? ?? ??? ????]
8](https://image.slidesharecdn.com/random-130218021852-phpapp01/85/-8-320.jpg)
![? ??? ???? FAQ
K-WAH? 95%? ???? ???? ???? ?? ????
K-WAH? ? ??? ??? ??? ?? ??? 95?? Rule? ??
????? ??? ? ?? ??
?) ????? ??? ?? <alt> ??? ????? ??
???? ???? ??
? ??? ????? ??? ??
????? ?? ???? ????? K-WAH? 95%?? ??? ?
?? ???, ????? [? ??? ??? - ??? - ?? ? ??
?? - 389? ? ??? ?????(??)]? ??
99](https://image.slidesharecdn.com/random-130218021852-phpapp01/85/-99-320.jpg)
![??? ?? ???? ??
□ ???? ??? ?? ??? ?? ?? ??
?? 2.4.2 (?? ??) ???, ???, ??? ???? ??? ??? ??
?? ?? ??.
- Head ?? title? ??? ???? ???? ??? ???? ??
?? ? ??? ??? ?? ????? ?? ??
??
[?? ???? – ???]? ??
??
107](https://image.slidesharecdn.com/random-130218021852-phpapp01/85/-107-320.jpg)
????? ????
- 1. ? ??? ??? ?? 2.0 ?? ? ??? ??
- 2. ???? ? ??? ?? ??? ? ??? ??? ?? 2.0 ? ??? ???? ??? ?? Q&A 2
- 3. ? ??? ?? 3
- 4. ? ??? ?? ?? Web + Access + Ability 4
- 5. ? ??? ?? ?? 5
- 6. ? ??? ?? ?? 6
- 7. ? ??? ?? ?? ? ?? ??? 10% (? 6? 5???) ( ?? : UN ENABLE Websites, http://www.un.org/disabilities/default.asp?id=18 ) 7
- 8. ? ??? ?? ?? ?? ?? ???? 5% 3,000,000 2,519,241?(11? 12?? ??) 2006? 2,500,000 2007? 2008? 2,000,000 2009? 2010? 1,500,000 2006? 2007? 2008? 2009? 2010? [ ?? : ????? ?? ??? ????] 8
- 9. ? ??? ?? ?? ????? ??? ???? 78.3 54.4%, ???? 78.3%? 23.9 77.6 24.9 76.3 26.4 ?? 23. 9%p ?? ?? ???? 72.8 31.8 54.4 ` 52.7 ??????(10) : 252?(5%) 49.9 ??? 41.0 ???: 6? 5??(??10%) (?? : %) ????? : ??? 90% 2005 2007 2009 2011 9
- 10. ? ??? ?? ?? ??? ?? 1990 ???? ?? 1995 ???????? ?? 1998 ??? 508? (1194.21, 22) ?? 2004 ???????? ?? 2010 ???508?/???255? ??? ?? ? ?? ?? ?? 2003 ? ??? ?? ??(JIS X 8341-1~5) ※ Section 508 applies to all Federal agencies when they develop, procure, maintain, or use ?? electronic and information technology. 1992 ????????(DDA) ※ ????: WCAG 2.0 (W3C); ISO 9471 series (ISO) 10
- 11. ? ??? ?? ?? ??? ?? v America Online vs. NFB - 1999? ?? ????????? ?????? AOL? ??? ???? ????? ???? ??? ??? ?? - AOL? ?? ???? ???? ????? ???? ?? ?? v Maguire vs. Sydney Organising Communittee for the Olympic Game - 1999? 6? ?? ????? Maquire? ??? ??? ?? ??? ?????? ???? ?? ?, ? ??? ??? ??????? ???? ?? ? ?? ?? ???? ??? ?? ??????? ??? ??? ?? - 2000? 8? ???? ??? ??? ?????? ? ???? ???? ??? ?? ?? ?? ???? ???? ??, ???? ???? ?? ????? ??? ???? ??? ???????? ?24??? ??????, ?? ?? ??? ?????? ??? ??? ??? ???? ??? ?? 11
- 12. ? ??? ?? ?? ??? ?? ???????? (’09.5 ??, ’09.8 ??) - ?? 『????????』 ??? ??? ??? ?32? 1??? ???·??? ?? ?? ???? ? ????? ?? ???? ?? ※ 2001? 1? ??? 『??????? ?? ??』? ?? ??????? ? ???? ?? ?? ??(’07.4 ??, ’08.4 ??) - ?? ?? ???? ??? ??? ??? ????, ??? ??? ?? ?? ? ?? ??? ????? ???? ?? ??(????: ?21? ? ??? 14?) - ??? ??? ??, ???? ?? ??? ??, ??? ? ????, ???? ? ? ?? ????? ?? - ?? ????? 2009? 4? 11??? ????, ????? 2015??? ?? ? ???? ? ???? ???? ? ??????(’11. 3 ?? ??) - ?22?(???? ??) : ??? ??????? ???? ??? ???? ?? ?? ??? ??? ??? ? ??? ????·???? ?? ???? ?? ?? ?? ??. 12
- 13. ? ??? ?? ?? ??? ?? ?32? (???·??? ?? ???? ? ?? ??) ① ???? ?? ???? ??? ??? ???? ??? ? ??? ·??? ?? ?? ????? ??? ? ??? ???? ????? ??. ② 『????? ???? ? ???? ?? ?? ??』 ?2? ?3?? ?? ??????? ???? ? ???? ??? ? ???·??? ?? ??? ??? ??? ???? ??? ????? ??. ③ ???? ?? ????? ?????? ? ?????? ??, ??, ??? ? ???·? ?? ?? ?? ???? ??? ? ??? ????? ??. ④ ???? ?? ??????? ??? ? ???·??? ?? ????? ????? ?? ? ??????? ???? ????? ??? ??. ⑤ ????? ??? ???·??? ?? ???? ? ???? ??? ?? ??????? ? ?????? ?? ??·?? ?? ??? ????? ??. 13
- 14. ? ??? ?? ?? ??? ?? ?21? (???? ·??????? ??? ??????) ①(??)???? ??·???? ???? ? ? ????? ??? ???? ??? ?? ??? ???? ??·??? ? ??? ??, ?? ? ??? ??? ????? ??. ??? ?14? (????·??????? ??? ?? ??? ???? ? ??? ??) ①? 21?1? ??? ?? ???? ??·??? ? ??? ??, ?? ? ??? ?? ? ????? ?? ??? ?? ??? ??? ?? 3? ??. ②? 21? 1?? ?? ????? ?? ??? ??? ???? ??? ?? ? ?? ??. 1. ???? ??????? ??? ???? ????? ??? ??? ???? ??? ? ??? ???? ???? ???? 14
- 15. ? ??? ?? ?? ??? ?? ??? ???? ???? ???? ???? ?????? ?? ?? ????/???? ?????? ‘09. 4. 11 ???? ?? ?????/ ???? ?????? ???????? ?????????/ ‘10. 4. 11 ???(??)???·???/ ???????/????? ??????/?·?·? ? ????/??/?? ??/?? ??(100? ? ?? ‘11. 4. 11 ?)/???? ? ??? (?? 30? ?? ??) ???????/ ‘12. 4. 11 ???????·??? ?????/?? ? ? ?? ????,????/ ?? ’13. 4. 11 (?? 30? ??????? ??????/?? ?? ?? ??) (100? ??) ??????? ? ‘15. 4. 11 ????/?????(300?~)/? ????·??? 15
- 16. ? ??? ?? ?? ??? ?? ????? ?? ????(? ?46?) ????? ?? ????(? ?49?) ?? : ????? 16
- 17. ? ??? ?? ?? ??? ?? v ????? vs ??? e-????? - ?????? ????? ???? e-?? ?????? ????? ???? ??? ??, ??? ?? ???? ?? ????? ???? ??? ?? ?????? ??? ? ?? ?? ??? ???????? ?? - ???????? ?? ?? ???? ?? ???? ? ??? ??? ????? ?? v ?????? vs OO?? ???????? - ????? ?? ????? OO??? ??? ??? ??? ?? ????? ?? ???? ??? ?? ???? ?? ?? ??? ? ?? ??? ????? ??? ?? - ???????? ?? ?? OO???? ????? ?? ?? ?????? ?????? ?? ??? ?????? ?? ????? ??? ???? ?? ???? ?? ?? 17
- 18. ??? ? ??? ??? ?? 2.0 18
- 19. KWCAG 2.0 ?? - ?? ?? § ? ??????? ???? ?? ú ???? ? RIA ??? ??? ? Flash, Flex, Silverlight, JavaScript, Java ? ??? HTML? ?? ???? ? ? ?????, ????? ????? ? ?? ???? ?? ? ? ???? ? ??????? ??? ?? ú ???? ??? ? ?? ?? ?? ?? 19
- 20. KWCAG 2.0 ?? - ?? ?? § ???? ??? ?? ??(WCAG2.0) ?? WC 10 AG . WC 20 AG . o ?? : 1999? 5? o ?? : 2008? 12? o ?? : 14? ?????, ??? ?? (lex F ible) o ?? : 4? ??, 12? 65? ????? + ????? ?? ?????, 61? o ?? : HTML ?? (esta T ble) ???? o ?? : HTML, RIA ? ??? ?? ※ ?? : http://www.w3.org/2008/12/wcag20- ※ ???? ?? : ??? 1 : 25?, pressrelease.html.en ??? 2 : 13?, ??? 3 : 23? 20
- 21. KWCAG 2.0 ?? – ?? § KWCAG 2.0 ???? ú ?? ??? : 2010? 12? 31? ú ??? : ??????? ?2010-59? ú ???? : KICS.OT-10.003/R1 ú ?? : 4? ??(Principle), 13? ??(Guideline) 22? ????(Requirement) ※ ??: http://www.tta.or.kr/data/ttas_view.jsp?rn=2&pk_num=KCS.OT-10.0003/R1&nowSu=1 21
- 22. KWCAG 2.0 ?? - ?? § 4? ??(Principles) ú ??? ???(P) : ?? ???? ???? ??? ? ??? ??. ú ??? ???(O) : ??? ????? ????? ?? ???? ????? ? ? ??? ??. ú ??? ???(U) : ???? ??? ? ??? ??. ú ???(R) : ? ???? ??? ???? ??? ? ??? ???? ???? ??. 22
- 23. KWCAG 2.0 ?? - ?? § 13? ??(Guidelines) ú ? ???? ???? ???? ?? ???? ?? ???? 13? ?? § 22? ????(Requirements) ú 13? ??? ?????? ???? ?? 22?? ? ??? ???? 23
- 24. KWCAG 2.0 VS. 1.0 ú ??? ??: ?? HTML ???? ?? ? ?? ? ??(Flash, Silverlight, Java ?)? ?? ú ???? ??: ?? ?? ?? ? ????? W3C ?? (??? 1) ?? ※ ?? ?? ? ?? ????????(???? ???? ?)?? ??? ?? ※ WCAG(Web Content Accessibility Guidelines) 2.0 ? 12 ? ???? ??, ???? ???? ?? ??? 1, 2, 3?? ??. ??? ?? ???? ??? 2?? ?? ??? 24
- 25. KWCAG 2.0 VS. 1.0 ú ??? ???: KWCAG 1.0? ???? ? ??? ? ????? KWCAG2.0? ??? ú ?? ??? ??: ??? ???? ???? ?? ??? ????? ?? ú ?? ??: ????? ??? ???? ?? 25
- 26. KWCAG 2.0 VS. 1.0 KWCAG 2.0 KWCAG 1.0 ?? 1.1 ?? ??? 1.1 ??? ?? ???? ?? ?? 1.2 ????? ?? ?? 1.2 ????? ?? ?? 1.3 ??? 1.3 ??? ??? ?? ??(?? ??) 2.1 ??? ??? 2.4 ?????? ?? ?? ?? 2.2 ??? ?? ?? 2.6 ????? ?? ?? ?? 2.3 ???? ?? ?? 2.3 ????? ?? ?? ?? ?? 2.2 ???? ?? ?? ?? 2.4 ?? ????? 2.5 ??????? ?? ?? 3.1 ??? ?? 3.2 ????? ?? 3.1 ??? ??? ?? 3.3 ???? ??? ?? 3.2 ??? ?? 3.4 ?? ?? 3.3 ??? ?? ?? ?? 4.1 ?? ?? ?? 4.2 ? ?????? ??? 4.1 ???? ?? ??(??) 2.1 ??? ? ?? ???? ?? 4.2 ?? ? ??? ?? ?? 26
- 27. KWCAG 2.0 ???? - ??? ??? ??(3?) ????(6?) 1.1 (?? ???) ??? ?? 1.1.1(??? ?? ??? ??) ??? ?? ???? ????? ?? ???? ? ? ??? ??? ??? ? ??? ?? ???? ?? ??? ??. ?? ??. 1.2(????? ?? ??) ? ??,?? ? ????? ?? 1.2.1(?? ??) ????? ????? ??, ?? ?? ?? ??? ? ??? ?? ??? ???? ??. ??? ???? ??. 1.3.1(?? ??? ??? ??) ???? ?? ???? ??? ? ??? ??. 1.3.2(??? ???? ??) ????? ??, ??, ??, 1.3(???) ???? ???? ??, ?, ?? ?? ???? ??? ? ??? ??. ????? ??. 1.3.3(??? ???? ?? ??) ??? ???? ?? ?? ?? ??? 4.5? 1 ????? ??. 1.3.4(??? ?? ??) ???? ???? ???? ? ??? ??? ??. 27
- 28. ??? ??? – 1.1 ?? ??? ???? 1.1.1 (??? ?? ??? ??) § ??? ?? ???? ? ??? ??? ??? ? ??? ? ? ???? ???? ??. <img src=/ryu01258/ss-16597089/“logo.png”> ※ ?????? ???? ?? <img src=“logo.png” alt=“???” ※ ??? ?? ?? ???? ??? ??? ???? ?? <??????> <img src=“logo.png” alt=“?????” ※ ??????? ??? ??? ?? ???? ?? 28
- 29. ??? ??? – 1.1 ?? ??? <img src=/ryu01258/ss-16597089/"languge.gif" alt="language" usemap="#language"> <map name="language"> <area alt="English" shape="rect" coords="10,5,66,19" href="/en/"> <??? ?? ?? ???> <area alt="Korean" shape="rect" coords="10,17,66,32" href="/ko/"> </map> 29
- 30. ??? ??? – 1.1 ?? ??? <?? ???> <input type="image" src=/ryu01258/ss-16597089/"btn write.gif" alt="???? ? ???"> <????? ???> <img alt="2008? 10? 62,983(??) : ??????? 1,751, ?????? 931, 2008? 11? 63,777(? ?) : ??????? 1,745, ?????? 920, 2008? 12? 63,732(? ?) : ??????? 1,724, ?????? 904“ src="http://img1.kbstar.com/img/house/graph joiner 090123.gif" /> 30
- 31. ??? ??? – 1.1 ?? ??? <?????? ?? ??? ?? ??> ?? ??? ???? ??? ??? ??? ??? ?? ?? ????? ? ???? ?? ??? ?? 31
- 32. ??? ??? – 1.1 ?? ??? <??? ??? ??? ? ?? ?? ??? ??> ※ ???? ??? ?? ??? ?? ?? ??? ???? ? ??, ?? ???? “???- ??????????”?? ???? ???? ???? 2004?? 2005?? ??? ? ? ????? ?? ??? ? ? ? ?? 32
- 33. ??? ??? – 1.1 ?? ??? <?? ???? title ????? ??? ??> <img src=/ryu01258/ss-16597089/“logo.gif" title="???????? ??“> ※ ‘title’ ??? ??? ???? ???? ?? ????? ?? 33
- 34. ??? ??? – 1.1 ?? ??? <?? ???? ???? ??> <img src=/ryu01258/ss-16597089/“org.gif" alt=“OOO???“> 34
- 35. ??? ??? – 1.1 ?? ??? <??? ? ??? ???? ?? ?? ??? ?? ??> 1) longdesc ?? <p><img src=/ryu01258/ss-16597089/"chart.gif" alt="???? ? ??? ????" longdesc="dest_chart.html"/> </p> 2) ??? ?? <p><img src=/ryu01258/ss-16597089/"chart.gif" alt="???? ? ??? ????"/></p> <P>2008?? ????? ? ??? ????? ??? ... ... <p> ※ Longdesc ??? ?? ?? ??? ???? ???? ??? ? ??? ? ?? 35
- 36. ??? ??? – 1.1 ?? ??? <??? ? ??? ???? ?? ?? ??? ?? ??> 3) ??? ?? ?? <p> <a href="chartdesc.html"> <img src=/ryu01258/ss-16597089/"chart.gif" alt="???? ? ??? ????"/> </a> </p> ※ ????? ???? ??? ??? ??? ???? ??? ? ?? ?? 36
- 37. ??? ??? – 1.2 ????? ?? ?? ???? 1.2.1 (????) § ????? ????? ??,?? ?? ??? ???? ??. <???? ??? ??? ??? ??> <???? ?? ??? ??? ??> 37
- 38. ??? ??? – 1.2 ????? ?? ?? ???? 1.2.1 (????) § ????? ????? ??,?? ?? ??? ???? ??. <???? ??? ?? ???? ??> ※ ??? ??? ??? ???? ???? ?? ??? ???? ?? ???? 38
- 39. ??? ??? – 1.2 ????? ?? ?? <????? ??? ??? ??> 39
- 40. ??? ??? – 1.2 ????? ?? ?? <?? ?? ?? ??? ??> ※ ?? ??? ??? ? ????? ??? ?? 40
- 41. ??? ??? – 1.3 ??? ???? 1.3.1(?? ??? ??? ??) § ???? ?? ???? ??? ? ??? ??. ※ ?? ???? ??? ? ???? ? 41
- 42. ??? ??? – 1.3 ??? <???? ???? ??? ? ?? ??> ※ ??? ?????? ??? ? ??? ??(□△○??? ?)? ??? ? ? ??? ????? ??? ???? ? 42
- 43. ??? ??? – 1.3 ??? ???? 1.3.2(??? ?? ?? ??) § ?? ??? ??, ??, ??, ??, ?, ?? ?? ?? ?? ??? ? ??? ??. "??? ???? ??? ??? ?? ??? ??“ “??? ???? ? ?? ? ?(?? ?? ? ?? ??? ?? ??)? ??” 43
- 44. ??? ??? – 1.3 ??? <?????? ?? ??? ?> § ?? ??? ???? <form action="http://... " > <input type=submit value=??/> </form> <?????? ?? ??? ?> § (??)???~<img src=/ryu01258/ss-16597089/“O.gif”/> § (??)???~<img src=“X.gif”/> 44
- 45. ??? ??? – 1.3 ??? <?????? ?? ???? ?> § ??? ??? ????. ※ ??, ??, ??, ? ? ??? ???? ?? § ? ??? ????. ? ???? è ??? ??? ? ? § ?? ?? ??? ????. ?? ??? ??? ? ??? ? § ??? ??? ????. <?????? ?? ???? ?> ※ ???? ???? ? § (??)???~, (??)???~ ?? ???? è ??? ???? ?? ? ??? ???? ? 45
- 46. ??? ??? – 1.3 ??? ???? 1.3.3(??? ???? ?? ??) § ??? ???? ?? ?? ?? ??? 4.5? 1 ????? ??. 46
- 47. ??? ??? – 1.3 ??? ???/??? ?? ????? ? Colour Contrast Check(snook.ca) http://www.snook.ca/technical/colour_contrast/colour.html ? Colour Contrast(Juicy Studio) http://juicystudio.com/services/luminositycontrastratio.php ? Colour Contrast Analyzer(Colors on the web) http://www.colorsontheweb.com/colorcontrast.asp ? Contrast Analyser(The Paciello Group) http://www.paciellogroup.com/resources/contrast-analyser.html Windows/MAC Application. 47
- 48. ??? ??? – 1.3 ??? Colour Contrast Analyzer ??? 1. Colour Contrast Analyzer? ????. 4. Contrast ratio? ?? ?? ?? ???, ?? ?? pass? Fail? ?????. ? ?? ??? 2. ????? ?? ??? ???? ??? ? ?? ???? ????. ???(Colour Picker) ???? ????. 3. ???? ????? ????, ??? ????? ????. 48
- 49. ??? ??? – 1.3 ??? ???? 1.3.4(??? ?? ??) § ???? ???? ???? ???? ??? ??. <???? ???? ???? ???? ???? ??> ※ ???? ????? ??? ? ???? ???? ?? ??? ??? ? è ???? ??? ?? ?? ? ???? ??? ??? ?? ? 49
- 50. ??? ??? – 1.3 ??? <???? ?? ??? ???? ??> § ??? ????? 3? ??? ???, § ???? ?? ??? ???? ??? ?? ??? ???? ?? 50
- 51. ??? ??? – 1.3 ??? <??? ??/??? ??? ??? ???? ???? ???? ??> 51
- 52. KWCAG 2.0 ???? – ??? ??? ??(4?) ????(8?) 2.1.1(??? ?? ??) ?? ??? ??????? 2.1(??? ???) ???? ? ??? ? ??? ??. ??? ??? ? ??? ??. 2.1.2(?? ??) ???? ?? ??? ????? ? ??? ??, ????? ??? ? ??? ??. 2.2.1(???? ??) ????? ?? ???? ??? 2.2(??? ?? ??) ???? ?? ??? ? ??? ??. ?? ???? ? ??? ??? ???? ??. 2.2.2(?? ?? ??) ???? ???? ???? ? ??? ??? ? ??? ??. 2.3(???? ?? ??) ??? 2.3.1(???? ??? ?? ??) ?? 3~50?? ?? ? ??? ??? ? ?? ??? ? ????? ???? ???? ???? ??? ? ? ???? ??? ??. ?. 2.4.1(?? ?? ????) ???? ???? ??? ??? ? ??? ??. 2.4(?? ?????) ???? 2.4.2(?? ??) ???, ???, ??? ???? ?? ?? ?????? ? ??? ? ? ??? ???? ??. ?. 2.4.3(??? ?? ???) ?? ???? ??? ?? ? ??? ? ??? ???? ??. 52
- 53. ??? ??? – 2.1 ??? ??? ???? 2.1.1(??? ?? ??) § ?? ??? ??????? ??? ? ??? ??. < ???? ?? ???? ??? ???? ?? > ※ ???, ??, ??? ?? ?? ??? ? ?????? ?? ??? ???? è ?? ??? ??? ??? ??? ?? ?? ???? ?? ? ???? ??? ?? ???? ? 53
- 54. ??? ??? – 2.1 ??? ??? < ???? ??? ???? ?? ???? ????? ???? ?? > < ???? ??? ??? ? ??? ??? ?? > <input type="submit" onfocus="this.blur()"> <a onfocus="this.blur()" href="Page.html">????</a> ※ ?? ???? ?? ??? ??? ?? onfocus=“this.blur()”? ??? ?? ? ??? ??? ??? ? ?? è ?? ???? ?? ??? ?? ??? ?? 54
- 55. ??? ??? – 2.1 ??? ??? ???? 2.1.2 (?? ??) § ???? ?? ??? ????? ???? ??, ???? ? ??? ? ??? ??. < ??? ?? ?? ??? ???? ?? > 55
- 56. ??? ??? – 2.1 ??? ??? < ??? ?? ???? ????? ???? ?? > 56
- 57. ??? ??? – 2.2 ??? ?? ?? ???? 2.2.1 (?? ?? ??) § ?? ??? ?? ???? ????? ??? ? ??? ? ?. < ????(3?) ??? ?? ???? ???? ???? ?? > ※ ?????? ???? ? ?? ???? ?? ? ?? è ????? ?????, ? ?? ? ??? ???? ? 57
- 58. ??? ??? – 2.2 ??? ?? ?? ???? 2.2.2 (?? ?? ??) § ???? ???? ???? ???? ??? ? ??? ? ?. <????? ?? ???? ???? ???? ??> ※ ???? ???? ???? ???? ?? ???? ??? ? ?? è ???? ??? ? ?? ???? ??? 58
- 59. ??? ??? – 2.3 ???? ?? ?? ???? 2.3.1 (???? ??? ?? ??) § ?? 3~50?? ??? ????? ???? ???? ?? ?? ??? ??. <??? ???? ?? ??? ?? ??? ???> 59
- 60. ??? ??? – 2.3 ???? ?? ?? <?? 4)> ??? ???? ?? ??? <????? ???? ?? ?? ?? ???? ? ???> 60
- 61. ??? ??? – 2.3 ???? ?? ?? <?? 4)> ??? ???? ?? ??? <????? ??? ??> ※ 1997? ??? ?? ????? ‘?????’? 38?? ????? ‘?? ?? ???’? ? ???? ???? ???? ??? ???? ?? ? ?? ??? ???? TV? ?? ???? ??? 685?? ??? ?? ??? ? ? 150? ?? ??? ??? ? ??. ????? ????? ?? ???? ?????? ?? ???? ?? ???? ?? ??? ? ???? ?? ??? ???? ?? ??? ?? ? ?? 61
- 62. ??? ??? – 2.4 ?? ????? ???? 2.4.1 (?? ?? ????) § ???? ???? ??? ??? ? ??? ??. <??? ??? ? ?? ???? ??? ??? ??> ※ 3? ?? ?? ???? ??? ??? ???? ?????? ???? ? 62
- 63. ??? ??? – 2.4 ?? ????? ???? ?? ???? ?? ?? § CSS? ???? ??? ???? ??? ???? ? ?? ???? ?? ú Firefox?? ??(View) à ?? ???(Page Style) à ??? ??(No Style) ?? CSS ?? ?? § HTML ????? ???? ??? ?? 63
- 64. ??? ??? – 2.4 ?? ????? ???? 2.4.2 (?? ??) § ???, ???, ??? ???? ??? ??? ???? ? ?. <???? ??? ? ?? ??? ?? ??> ※ ? ??? ?? ??? ??? ???? ??? ? ??? ?? ? 64
- 65. <?? 8)> ??? ???? ?? ??? ?? <?? 12)> ??? ???? ???? ?? ??? ??? – 2.4 ?? ????? <??? ??? ??? ??> ※ ?? ?? ????? ?? ?? ???? ??? ??? “??? ?? Mozilla Firefox”??? ????? ?? ???? ????? ? ? ?? è ??? ?? ??? ???? ? 65
- 66. <?? 8)> ??? ???? ?? ??? ?? <?? 12)> ??? ???? ???? ?? ??? ??? – 2.4 ?? ????? <????? ??? ???? ??> ※ ??? ??? ?? ?? ??? ?? ??? è ?? ?? ??? ????? ???? ??, ??? ??? ??? 66
- 67. ??? ??? – 2.4 ?? ????? <? ???? ??? ? ?? ?? ??? tltle ?? ??> <frameset> <frame title=“????”/> <frameset> <frame title=“????”/> <frame title=“??? ??”/> </frameset> </frameset> ※ ?? ???? title ??? ???? ?. ? ????? ??? title ??? ???? ?? ?? ???? ???? ?? ??? ??? ? ?? 67
- 68. ??? ??? – 2.4 ?? ????? ???? 2.4.3 (??? ?? ???) § ?? ???? ??? ??? ??? ? ??? ???? ? ?. ?? ??? ??? ???? <a href="here.html">??</a>? ???? ?. ?? ??? ??? ???? <a href="guide.html">??? ?? ?? </a>? ?????. 68
- 69. KWCAG 2.0 ???? – ??? ??? ??(4?) ????(6?) 3.1(???) ???? ?? ??? 3.1.1(?? ?? ??) ?? ???? ??? ???? ? ??? ??. ??. 3.2(?? ???) ???? ??? 3.2.1(??? ??? ?? ??) ???? ???? ? ?? ??? ?? ???? ??. ? ??(? ?,???? ?)? ???? ??? ??. 3.3.1(???? ???) ???? ???? ??? ? 3.3(???? ???) ???? ? ??? ??. ???? ???? ??. 3.3.2(?? ??) ?? ???? ?? ???? ??. 3.4.1(??? ??) ?? ???? ???? ???? 3.4(?? ??) ?? ??? ??? ???? ??. ?? ??? ? ??? ??. 3.4.2(?? ??) ?? ??? ??? ? ? ? ??? ???? ??. 69
- 70. ??? ??? – 3.1 ??? ???? 3.1.1 (???? ??) § ?? ???? ??? ???? ??. < HTML 4.0 ????? ????(???)> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ko"> <head> < XHTML 1.0 ????? ????(???)> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="ko"> <head> 70
- 71. ??? ??? – 3.1 ??? < ??? ????(ISO ??)> ?? ?? ?? ?? ?? ?? ???(Chinese) zh ???(Japanese) ja ???(German) de ???(Korean) ko ??(English) en ????(Russian) ru ??(French) fr ????(Spanish) es ※ ?? : ?? ?? ??(ISO 630) ?? http://www.loc.gov/standards/iso639-2/php/code_list.php 71
- 72. ??? ??? – 3.1 ??? < ??? ??? ??? ??> <p>????? “?????”?? ??? ?? <span lang=“zh”> </span>?? ????. </p> ※ ????? ???? ???? ???? ? ??? ?? ??? ???? ?? ?? ????? ?? ??? ??? ??? ? ?? 72
- 73. ??? ??? – 3.2 ?? ??? ???? 3.2.1 (??? ??? ?? ??) § ???? ???? ?? ?? (? ?, ???? ?)? ??? ? ??? ??. < ?? ????? ?? ?? ??? ?? > ※ ?? ????? ? ? ?/??? ?? ?? ???? ?? ??? ??? ?? ? è ???? ???? ?? ?? ?? ?? ???? ??? ? 73
- 74. ?? ??? ???? ???? ???? ??? ??? ?? ??? ??? – 3.2 ?? ??? < ??? ?? ??? ???? ???? ? ?? ???? ?? > < ???? ????? ?? ???? ???? ??? ?? > 74
- 75. ??? ??? – 3.2 ?? ??? < ????? ? ?? ??? ????? ?? ?> ?? ??? “? ? ??”? ? ? 75
- 76. ??? ??? – 3.2 ?? ??? < ???? ??? ?? ??? ?? ?? ?? > < ???? ?? ?? ?? ? ???? ???? ????? ?? ?? > 76
- 77. ??? ??? – 3.3 ???? ??? ???? 3.3.1 (???? ???) § ???? ???? ??? ???? ??. < ???? ??? ?? > ※ CSS? ???? ??? ?? ? ??? ?? ??? ??? ??? ???? ? ??? ??? 77
- 78. ??? ??? – 3.3 ???? ??? ???? 3.3.2 (?? ??) § ?? ???? ?? ???? ??. ?? ?? : <th> ※ ??? ?? ?? ?? 1. ?? ??? ?? ? ???? ? 2. ??? ?? ?? ?? ?? : <td> ? ??? ? ? ?? ? 78
- 79. ??? ??? – 3.3 ???? ??? ???? 3.3.2 (?? ??) § ?? ???? ?? ???? ??. <table class="data" summary=“??? ?? 3??? ?????, ??? ??? ?? ???? ??? ??"> <caption>????? 3?? ???? </caption> 79
- 80. ??? ??? – 3.4 ?? ?? ???? 3.4.1 (???? ??) § ?? ???? ???? ???? ???? ??. < ??? ??? ???? ??? ?? > <label for="uid">???</label> <input type="text" id="uid" > <label for="upw">????</label> <input type="password" id="upw" > ※ ????(??? ?? ??, ??? ??, ?? ?? ?)? ??? ? ?? ?? ??? ????? ? 80
- 81. ??? ??? – 3.4 ?? ?? ???? 3.4.2 (?? ??) § ?? ??? ??? ? ?? ??? ???? ??. < ??? ??? ? ??? ?????? ???? ?? > ※ ??? ?? ?? 1. ??? ???? ?? ? ??? ??? 2. ??? ??? ? ?? ??? ?? ? 81
- 82. KWCAG 2.0 ???? - ??? ??(2?) ????(2?) 4.1(?? ??) ? ???? ??? 4.1.1(??? ?? ??) ??? ??? ??? ?? ? ??? ??? ???? ??. ?, ?? ?? ? ?? ??? ??? ??? ??. 4.2(? ?????? ???) ? ? 4.2.1(? ?????? ??? ??) ???? ??? ?????? ???? ??? ? ? ??????? ???? ??? ??. ?. 82
- 83. ??? – 4.1 ?? ?? ???? 4.1.1 (??? ?? ??) § ??? ??? ??? ?? ??, ?? ?? ? ?? ??? ??? ??? ??. <??? ?? ??> ??? ?? ?? ?? ? ???? ???? <strong>???<strong>? ? ?? ???. ? ???? ???? <strong>???</strong>? ? ?? ???. 83
- 84. ??? – 4.1 ?? ?? <??? ?? ??> ??? ???? ?? <p>????? <strong>???? ??.</p></strong> <p> ????? <strong>???? ??.</strong></p> 84
- 85. ??? – 4.1 ?? ?? <id?? ?> <div id="header"> ... </div> <div id="content"> ... </div> ... <form ...> ... <textarea id="content" name="content"></textarea> ※ id=content? ? ... ??? ???? </form> ... ???? ??? <script type="text/javascript"> ???? function validateForm() { è ?? ??? id? ... var el = document.getElementById('content'); ????? ?? if (el.value) { ?? ? ... } ... } </script> 85
- 86. ??? – 4.1 ?? ?? <W3C ??? ??? ??> ※ ??: http://validator.w3.org/ 86
- 87. ??? – 4.2 ? ?????? ??? ???? 4.2.1 (? ?????? ??? ??) § ???? ??? ? ??????? ???? ??? ??. < ???? ? ?????? > 1. Ajax, JavaScript 2. Flash, Flex, Silverlight 3. Java ??? ※ ???? ??? ?? ?? 1. ???? ???? ????, ?? ?? ????? API? ????, API ??? ??(on-off)? ? ??? ? 2. ???? ???? ????, ?? ??? ??? 87
- 88. ??? – 4.2 ? ?????? ??? < ????? ???? ?? ?, ??? ??? ? ?? ?? ?? ?? ??> 88
- 89. ??? – 4.2 ? ?????? ??? < ? ??????? ?? ???? ????? ??? ?? > 89
- 90. ??? – 4.2 ? ?????? ??? ???? ??? ?? ? ?? ??? ?? ?? ?? < ???? ??? ?? ?? ?? > ※ ? ??????? UI Spy, UIA Verify? ?? ????? ??? ?? ? ?? ????? ?? ?? ????? ???? ??? ※ ????? ???? ?? ?? ???? ? ????? ??? ?? ?? ?? ????, ????? ????? ???? ?? ????? ??? ? ???? ???? ?? ??? ??? 90
- 91. ??? – 4.2 ? ?????? ??? ???? ??? ?? ? ?? ??? ?? ?? ?? < ??? ?????? ????? ?? ?? ?? ?? > ※ ????(Preference) > ?? ??(Advanced) > ??? (Content) > ?? ???? ??(Enable plug-ins)?? ? ?? ???? ???? ?? ? ??? ? ?? ?? ? ? ?????? ???? ?? ???? ????? ??? ? ??. 91
- 92. ??? – 4.2 ? ?????? ??? ? ??????? ?? ?? ? ??? ????? ?? ?? ● Best Practices for Accessible Flash Design http://www.adobe.com/resources/accessibility/best_practices/best_practices_ acc_flash.pdf ● Flex accessibility http://www.adobe.com/accessibility/products/flex/ ● UI Automation and Microsoft Active Accessibility http://msdn.microsoft.com/en-us/library/ms788733.aspx ● Silverlight Accessibility Overview http://msdn.microsoft.com/en-us/library/cc707824(VS.95).aspx ● Java Accessibility Helper Early Access v0.8 http://java.sun.com/developer/earlyAccess/jaccesshelper/ ● Accessible Explorer http://msdn.microsoft.com/en-us/library/ms696082.aspx 92
- 93. ???????? 93
- 94. ? ??? ???? ?? ??? ? ???? ? ??? ??? ??? ??? ? ??? ????? ??? ?? ? ??? ?? ? ??? ??? ???? ?? ???? ?? ??? ???? ???? ??? 94
- 95. ? ??? ???? ?? ? ???? ???? ?? ???? ??? ???? ??? ?? ??? ???? ? ??? ??? ?? ?? ?????? ??? ? ???? ????? ??? ?? ? ???? ???? ?? ??? ??? ??? ?? ? ??? ?? 95
- 96. ? ??? ???? ???? ??? ?? ??? ?? ??? ??? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???? 95%?? ??
- 97. ? ??? ???? ??? ???? 400? 350? 300? 250? 200? 150? 100? 50? ? ?10? ?11? ?12? ?13? ?14? ?15? ?1? ?2? ?3? ?4? ?5? ?6? ?7? ?8? ?9? 2007? 2008? 2009? 2010? 2011? 97
- 98. ? ??? ???? ?? ?? ?? 35.35% ?? ?? 800 ?? ??? ? ??? ? ??? 666 657 579 2007? 40 15 37.50% 600 2008? 123 43 34.96% 400 280 297 2009? 579 95 16.41% 200 123 95 4015 43 2010? 666 280 42.04% 0 2011? 657 297 45.21% ?? 2065 730 35.35%
- 99. ? ??? ???? FAQ K-WAH? 95%? ???? ???? ???? ?? ???? K-WAH? ? ??? ??? ??? ?? ??? 95?? Rule? ?? ????? ??? ? ?? ?? ?) ????? ??? ?? <alt> ??? ????? ?? ???? ???? ?? ? ??? ????? ??? ?? ????? ?? ???? ????? K-WAH? 95%?? ??? ? ?? ???, ????? [? ??? ??? - ??? - ?? ? ?? ?? - 389? ? ??? ?????(??)]? ?? 99
- 100. ? ??? ???? ?????? AS IS TO BE ?? ??(??-???-???) ?? ??(??? & ???) ?? 97?(????) ?? 30?(????) ?? ?? ?? ?? ????? ?? ?? ????? ?? ? ?? ?? ?? ??? ?????? ??? ?? ??? ? ?? 100
- 101. ??? ?? 101
- 102. ??? ?? ????? + OTP ?? ?? ① ?????? ??? ????? ② ????? ??? ?? ?? ③ ????? 4? ?? ④ ?????? - ??? ?? ?? 4? ?? ??? ????? ????? ActiveX ?? ??OS? ?? Brows ???? ???? er ??? ?? ??. ?? - ????? ???? ??? ?????+OTP ??? ??? ???? ?? ???. 102
- 103. ??? ?? ????? + OTP □ ????? ?? ?? 2.1.1(??? ?? ??) ?? ??? ??????? ??? ? ??? ?? ??. - ????? ???? ?????? ??? ??? ??? ??????? ???? ????? ????? ?? ??? ???? ????, ??? ???? ?? OS? ????? ???? ????? ????? ? ? ?? ?. - ?????? ???? : ??????, ??????, OTP???? ??. - ? ??? ???? ?????? ???? ??? ? ?? ??? ??. ? ???? ??? ???? : OS? ???? Windows? ?? ??? ?? ??? ????? ???? ?? ????? ????? ?? ???. ?? Mac OS? ???? ????? ????. 103
- 104. ??? ?? ????? + OTP □ OTP - OTP(One-Time Password) : ???????? ?? ? ??? ??? ???? ????? ???? ????? ????? ??? ??? ?? ???? ?????? ?? ?? ?????? ???? ?? ? ?? ??? ?????????? ???? : ??????, ?? ????, OTP???? ??. - ??? ???? ?????? OTP ?? ?? - ??? ? ???? ???? ???? ????? ??? ?? ?? 104
- 105. ??? ?? ????? ?? ?? ?? □ ??? ??? ?? ?? ?? 3.2.1(??? ??? ?? ??) ???? ???? ?? ??(? ?, ? ?? ? ?? ?)? ???? ??? ??. - ??????? ??? ???? ??? ??? ?? ??? ??? ?? ????? ? ????? ??? ?? ?? ?? ????? ?? ? ?? ex) ???? ???? ?? ? ?? ?? ? ?? 105
- 106. ??? ?? ???? ?? □ 5~10? ?? ??? ??? ?? ? ?? ???? ?? 2.2.1 (?? ?? ??) ?? ??? ?? ???? ????? ??? ?? ? ??? ??. - ????? ????? ?? 5~10? ?? ??? ??? ?? ? ? ? ????? - ???? : 10?, ???? : 10?, ???? : 9?, ???? : 5? ?? - 1??? ??? ???? ?? ????? ????? ???? ? ??? ??? ?????? ???? ???? ?? ??? ??? ? ?? ?? ???? ????? ?? ??? ??? ????? ? ?? 106
- 107. ??? ?? ???? ?? □ ???? ??? ?? ??? ?? ?? ?? ?? 2.4.2 (?? ??) ???, ???, ??? ???? ??? ??? ?? ?? ?? ??. - Head ?? title? ??? ???? ???? ??? ???? ?? ?? ? ??? ??? ?? ????? ?? ?? ?? [?? ???? – ???]? ?? ?? 107
- 108. ??? ?? ???? □ ?? ?? - Ajax ??? ?? ??? ?? - ??? ???? ?? ?? ??? ? ??? ?? - ????? ?? ? ??? ?? ?? ?? ?? ?? ? 108
- 109. Q&A 109