04.발표 반응형웹에서접근성확보방법

  • Upload
    lab-snc

  • View
    600

  • Download
    0

Embed Size (px)

DESCRIPTION

반응형 웹에서 접근성 확보 방법

Citation preview

  • 1. Web accessibility for responsive web implementation2013.11.07 Jang Sun Young | SNC Lab.

2. 2 3. 01 (Responsive Web Design)?3 4. 1.1 2010 . . : http://gs.statcounter.com/#mobile_vs_desktop-KR-yearly-2009-20134 5. 1.1 PC , PC . , .< 2013 2 Desktop vs Mobile > : http://gs.statcounter.com/#mobile_vs_desktop-ww-quarterly-201302-201302-map5 6. 1.1 2010 4 PC PC PC .() : http://www.newstomato.com/readNews.aspx?no=4077346 7. 1.1 : http://www.bloter.net/archives/1675507 8. 1.2 tab8.01280x80016:10tab10.11280 x 800mini1024x768ipad11024x768ipad21024x7684:3ipad retina2048x15364:31280 x 80016:10720 x 1280 (HD)16:101920 X 1080 (Full HD)16:91920 X 1080 (Full HD)16:91920 X 1080 (Full HD)16:94960x6403:24S960x6403:251136x64016:95S4:316:9G24:31920 x 1080 (Full HD)pro16:1016:9S416:10720 X 1280 (HD)1136x64016:91920x12003:5note37480x800note22:3note1320x480S3S2S< >< > : 8 9. 1.3 ? PC / / . 1024*768 , . N-Screen (Responsive Web).9 10. 1.3 ?< (http://pr.hyundai.com) > ? . , . : http://en.wikipedia.org/wiki/Responsive_web_design10 11. 02 11 12. 2.1 155 47 . (go.com), (microsoft.com), (wikipedia.org) , , / SNS / . 47 108< -2013 10 > : www.alexa.com12 13. 2.2 < >< >13 14. 2.3 2013 1 9 . , . .60160 14050120 40 100 5430 203038 23033836154278060137 88 91 401210 238471020 41 2 3 4 5 6 7 8 9061112213 : / (www.dbcut.com)14 15. 2.4 < >< HGV >15 16. 03 16 17. 3.1 : CJ PHARM : 3 .17 18. 3.1 CJ Pharm (http://www.cjp.co.kr) (main1+ sub1) (main1+ sub1)1. 2. 3. 4. 5. 6. 7. 8. 9. 10. CJ Networks , 11. . (Mobile)12. MOBILE 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 1.2. (Mobile) 3. 2.86:1 (Mobile)1.2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 18 19. 3.1 : : , .19 20. 3.1 (https://www.hdable.co.kr/go.able) (main1+ sub1) (main1+ sub1)1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 22 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 1.2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 20 21. 3.2 : : , .21 22. 3.2 (http://www.komsco.com/contents/main/main.do) (main1+ sub1) 1. (main1+ sub1) 2. 3. 4. 6. 8. 7. 5. 1.9. 10. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 1., .11. 2. .12. 3. .13. 4., .14. , , 15. 5..16. 17. 18. 19. 20. 21. 22. 22 23. 3.2 1 12 . (css/js )44 .32 () id href . , , .5 , .32 3523 24. 3.2 : : .24 25. 3.2 KOMSCO ( http://english.komsco.com/) (main1+ sub1) (main1+ sub1)1. 2. 3. 4. 5. 6. 7. 8. 1. .2. th 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 9. 1.10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 25 26. 3.2 1 . (css/js ).12- . First issuance First issuance - Caption summary .226 27. 3.2 : : .27 28. 3.2 (http://www.samsungsvc.co.kr/index.do) (main1+ sub1) 1. (main1+ sub1) 2. 3. 4. 6. 8. 9. 10. 11. 12. 13. 7. 5. 1.1. 2. 14. 3. 15. ID 16. 5. X (Mobile)17. (Mobile)18. 3. 4. 5. 6. 7. 8. 6.4.2. 19. 10. 11. 12. 20. 9. 21. 22. 28 29. 3.2 11Life companion alt .alt= S4 2 3alt=Life companion4 2 . ( )23 . ( .)4id="lst_problem .29 30. 3.2 : : , / /PC . .30 31. 3.2 (http://www.unionsteel.co.kr/ko/main.do) (main1+ sub1) (main1+ sub1)1. 2. .3. (Mobile)6. 2.5. .4. 1.3. 7. 8. 1.2. 3. 4. 9. 10. 11. 5. 12. 13. 15. 17. 19. 21. 22. 8. 9. 10. 11. 12. 20. 18. 7. 16. 14. 6. 31 32. 3.2 1 1 . (css/js )2 . ,

id href .
id id .232 33. 3.2 : : .33 34. 3.2 (http://store.samsung.com/sec/) (main1+ sub1) 1. (main1+ sub1) 2. 3. 4. 6. 8. 3.ID 4. (Mobile)10. 2.9. 11. 12. 7. 1.5. 1.13. 2. 3. 4. 5. 6. 7. 8. 9. 14. 15. 16. 17. 18. 19. 20. 21. 22. 10. 11. 12. 34 35. 3.2 1 .2Input 1:1 3 2 1title .3id . (id = guestEmailid )35 36. 3.2 : Samsung-Engineering : . .36 37. 3.2 (http://www.samsungengineering.com/kor/index) (main1+ sub1) 1. (main1+ sub1) 2. 3. 4. 6. 8. 10. 11. 12. 13. 3. 4. 14. 15. 16. ( 17. 18. 19. 20. 21. 22. .5. , . 16. .) 3. 2.2. 9. 1.7. 5. 1. .6. 7. 8. 9. 10. 11. 12. 37 38. 3.2 1 1 . ( ) alt . (alt=)2, , . .3 Tab , .2 11338 39. 3.2 : PROGRESSIVE EXR : - , . - , .39 40. 3.2 EXR (http://www.exrkorea.com/main.asp) (main1+ sub1) 1. (main1+ sub1) 2. 3. 4. 6. 8. 2. 3. 4. 9. 7. 5. 1.10. 12. 11. 5. 1. .2. .13. / .14. 4. .15. 7. 8. 9. 10. 11. 12. 3.6. 16. 17. 18. 19. 20. 21. 22. 40 41. 3.2 2?1 , .2, . .31 onclick , . , .4 Tab , .4 13
FAMILY SITE
  • CASTELBAJACKOREA ()
41 42. 3.2 : : , .42 43. 3.2 (http://www.cocacola.co.kr/) (main1+ sub1) 1. (main1+ sub1) 2. 3. 4. 6. 8. 7. 5. 1.9. 10. 3. 4. 5. 2. 1. 2. 11. 3. 12. 4. 13. 5. 14. 6.Id 15. 16. 17. 18. 19. 20. 21. 22. 6. 7. 8. 9. 10. 11. 12. 43 44. 3.2 1 1 , .2 .3 25463 4 . (css/js ) . ( )5 . ( . )6id . (id id="blog_wrap")44 45. 04 , ? ( )45 46. - : : - PC : - Mobile : PCIOSAndroid()()Ie843Sense ReaderIOS 6.1.3 4.1.246 47. CJ PHARMA : CJ PHARMA : - PC : 22 - Mobile : alt Top PCIOSAndroid()()()Ie843Sense ReaderIOS 6.1.3 4.1.247 48. : : - PC : 6 - Mobile : PCIOSAndroid()()()Ie843Sense ReaderIOS 6.1.3 4.1.248 49. - : : - PC : / - Mobile : PCIOSAndroid()()()Ie843Sense ReaderIOS 6.1.3 4.1.249 50. 05 50 51. 5.1 HTML 1 .TabletJS JS CSS CSS PCJS MobileCSS51 52. 5.2 HTML 1 . CSS JS .CSSHTML JS / 52 53. 5.3 < PC >< > CSS PC CSS . PC , PC CSS .53 54. 5.3 PC MOBILE . display: none; / visibility: hidden; 54 55. 5.3 - PC .Lang=en55 56. 5.3 - Lang=en Lang en() , , Pc (IOS) , , . , .- : Andorid (4.2.2) , pc 56 57. 5.3 PC MOBILE , .- Voiceover .57 58. 5.3 MOBILE Pc . , .58 59. 06 59 60. 6. 60 61. / / 2 3 277-43 805 E-mail : [email protected] : 02-2201-9928