웹접근성Best PracticeDaum service 웹표준 FT     조규태
Mobile > 발표자 소개                                      조규태                                      Daum Service 웹표준FT          ...
Contents           I.    접근성 (Accessibility)           II.   PC 웹 접근성 (Daummail 개선사례)           III. Mobile 웹 접근성         ...
접근성 (Accessibility)
접근성(Accessibility)                     접근성이란?      어떠한 기술환경에서든 어떠한 사용자(장애인, 고령자 등)라도 젂문적인 능력 없이 제공하는 모든 정보에 접근할 수 있도록 보장하는...
Daum은 접근성을 지켜야만 하는가?접근성 준수의 필요성   법률적인 문제   웹 접근성 관련 CS 증가   사회적 기업으로서의 책임                       6
접근성(Accessibility) > 접근성 준수의 필요성     법률적인 문제   「국가정보화기본법(2009.05.22 공포)」    • 제 32조(장애인, 고령자 등의 정보접근 및 이용 보장)   「장애인차별금지 및...
접근성(Accessibility) > 접근성 준수의 필요성       웹 접근성 관련 CS 증가   저는 다음 한메일을 주로 이용하는 시각장애인입니다.   저 같은 사람들도 사용하기 좋은.. 사용성도 좀 고려해주세요.....
접근성(Accessibility) > 접근성 준수의 필요성     사회적 기업으로서의 책임                                   9
접근성(Accessibility) > Daum의 웹 접근성 개선 노력     웹 접근성 TFT                                     FT 가이던스                          ...
접근성(Accessibility) > Daum의 웹 접근성 개선 노력     개편 프로세스 접근성 강화                                         1. 툴을 통한 자동검사     접근성 테스...
접근성(Accessibility) > Daum의 웹 접근성 개선 노력     개편 프로세스 접근성 강화                                         1. 툴을 통한 자동검사     접근성 테스...
접근성(Accessibility) > Daum의 웹 접근성 개선 노력                                         13
접근성(Accessibility) > Daum의 웹 접근성 개선 노력     개편 프로세스 접근성 강화                                         1. 툴을 통한 자동검사     접근성 테스...
접근성(Accessibility) > Daum의 웹 접근성 개선 노력     개편 프로세스 접근성 강화                                         1. 툴을 통한 자동검사     접근성 테스...
PC 웹 접근성- Daummail 개선 사례 -
PC 웹 접근성 개선 사례 (Daum 메일)    Skip Navigation 통일                           심플버전 메일           통합버전 메일                        ...
PC 웹 접근성 개선 사례 (Daum 메일)    Heading Tag 정리                            명확하고 논리적인 순서로 헤딩 정리                                 ...
PC 웹 접근성 개선 사례 (Daum 메일)    불필요한 요소 제거   <span title=“2011년 7월 18일 13시 29분”>11.07.18 13:29</span>      <span>11.07.18 13:2...
PC 웹 접근성 개선 사례 (Daum 메일)    의미중심의 대체 텍스트 제공       <img src=“http://i1.daumcdn.net…” width="5" height="9“        alt=“토글버튼"...
Mobile 웹 접근성
Mobile 환경   Importance of Mobile Accessibility           Accessibility Tools   Better way for mobile Accessibility     ...
Mobile > Importance of Mobile Accessibility     Better Accessibility!                                     <               ...
Mobile > Importance of Mobile Accessibility   1. Much easier                                      <                       ...
Mobile > Importance of Mobile Accessibility   2. Much closer                                     <                        ...
Mobile > Importance of Mobile Accessibility   3. Much cheaper                                          <                  ...
Mobile > Importance of Mobile Accessibility   4. More linearized                                              27
Mobile 환경   Importance of Mobile Accessibility           Accessibility Tools   Better way for mobile Accessibility     ...
Mobile > Accessibility tools                             Voice Control                                                    ...
Mobile > Accessibility tools                               VoiceOver                                           30
Mobile > Accessibility tools     Setting     VoiceOver                               31
Mobile > Accessibility tools                               32
Mobile > Accessibility tools     Rotor                               33
Mobile > Accessibility tools     Rotor                               34
Mobile > Accessibility tools     Setting     Rotor                               35
Mobile > Accessibility tools                               36
Mobile 환경   Importance of Mobile Accessibility            Accessibility Tools   Better way for mobile Accessibility    ...
Mobile > Better way for mobile Accessibility                     1. Screen_out Text                                       ...
Mobile > Better way.. > 1. Screen_out Text                                             39
Mobile > Better way.. > 1. Screen_out Text      VoiceOver                          는..     눈에 보이지 않는 것은 읽어주지 않는다.     내용은 ...
Mobile > Better way.. > 1. Screen_out Text                                             41
Mobile > Better way.. > 1. Screen_out Text                        .screen_out {                              display:block...
Mobile > Better way.. > 1. Screen_out Text                                             43
Mobile > Better way for mobile Accessibility                        2. EM       vs   IN vs PX                             ...
Mobile > Better way.. > 2. EM vs IN vs PX                   Phark Method            Text-indent: -9999em / -9999in / -9999...
Mobile > Better way.. > 2. EM vs IN vs PX Normal case                                              “젂체보기” Delayed case    ...
Mobile > Better way.. > 2. EM vs IN vs PX       TEST      1.   아이폰3GS / 아이폰4 - 캐시 모두 비우고, 실행중인 프로그램 모두 끈 조건      2.   샘플페이...
Mobile > Better way.. > 2. EM vs IN vs PX    해석   1. Phark Method IR기법 사용 시 보이스오버에서        text-indent의 단위에 따라 퍼포먼스 하락이 발생...
Mobile > Better way.. > 2. EM vs IN vs PX    결론    1. 모바일웹에서 Phark Method 사용 시, text-indent의 단위는       모두 PX로 사용하는 것이 권장된다...
Mobile > Better way for mobile Accessibility                          3. WAI-ARIA                                         ...
Mobile > Better way.. > 2. WAI-ARIA    Web Accessibility Initiative - Accessible Rich Internet Applications    How to incr...
Mobile > Better way.. > 2. WAI-ARIA      W3C Candidate Recommendation (2011.01.18)           Roles           - Roles for W...
Mobile > Better way.. > 2. WAI-ARIA               Tag 중심이 아닌, 역할 중심의 Mark-up             <a href=“#” role=“button” >Send</...
Mobile > Better way.. > 2. WAI-ARIA    Landmark Role                                      Paris!          London!         ...
Mobile > Better way.. > 2. WAI-ARIA    Landmark Role                         <div id=“gnb" role="navigation">    ex 1) 메인메...
Mobile > Better way.. > 2. WAI-ARIA  Landmark Role    • Banner                                                  role=“bann...
Mobile > Better way.. > 2. WAI-ARIA iOS 4 supports WAI-ARIA Landmark    1. iOS4.0 이상 부터 WAI-ARIA Landmark Role 지원 시작    2....
Mobile > Better way.. > 2. WAI-ARIA                                       role=“banner”   role=“navigation”               ...
Mobile > Better way.. > 2. WAI-ARIA                                      59
요청winterpp @ daumcorp.com
Devon 2011-f-5 웹 접근성 베스트 프랙티스
Upcoming SlideShare
Loading in …5
×

Devon 2011-f-5 웹 접근성 베스트 프랙티스

1,101 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,101
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Devon 2011-f-5 웹 접근성 베스트 프랙티스

  1. 1. 웹접근성Best PracticeDaum service 웹표준 FT 조규태
  2. 2. Mobile > 발표자 소개 조규태 Daum Service 웹표준FT winterpp@daumcorp.com - 현재 Daum Service 웹표준FT 3파트 / Daum 웹접근성 TFT - Daum 희망해, 모바일 영화, 모바일 소셜쇼핑, Biz&Platform 웹표준 마크업 및 FT개발 - Chrome Application : iPSim, StyleKiller, Wakuview 등 개발 2
  3. 3. Contents I. 접근성 (Accessibility) II. PC 웹 접근성 (Daummail 개선사례) III. Mobile 웹 접근성 IV. 마무리 V. Q&A 3
  4. 4. 접근성 (Accessibility)
  5. 5. 접근성(Accessibility) 접근성이란? 어떠한 기술환경에서든 어떠한 사용자(장애인, 고령자 등)라도 젂문적인 능력 없이 제공하는 모든 정보에 접근할 수 있도록 보장하는 것 보다 많은 사람들이 이용할 수 있는 보편적인 접근 사람을 위한 것 5
  6. 6. Daum은 접근성을 지켜야만 하는가?접근성 준수의 필요성 법률적인 문제 웹 접근성 관련 CS 증가 사회적 기업으로서의 책임 6
  7. 7. 접근성(Accessibility) > 접근성 준수의 필요성 법률적인 문제 「국가정보화기본법(2009.05.22 공포)」 • 제 32조(장애인, 고령자 등의 정보접근 및 이용 보장) 「장애인차별금지 및 권리구제 등에 관한 법률」 • 제 21조 (정보통신, 의사소통에서의 정당한 편의제공의무) • 시행령 제14조 (정보통신, 의사소통에서의 정당한 편의제공의 단계적 범위 및 편의의 내용) 2013년 4월부터 모든 법인체 웹 접근성 준수! 장차법 권리구제 절차에 의해 손해배상 청구 가능 7
  8. 8. 접근성(Accessibility) > 접근성 준수의 필요성 웹 접근성 관련 CS 증가 저는 다음 한메일을 주로 이용하는 시각장애인입니다. 저 같은 사람들도 사용하기 좋은.. 사용성도 좀 고려해주세요.. (chy*****@hanmail.net) 파일찾기나 이런버튼이 젂혀접근이 되질않아 스크린리더 사용자는 키보드로는 전혀 사진을 올릴수가 없습니다. (ls***@hanmail.net) 편지쓰기에서 본문내용을 적을 부분에는 본문내용이라는 대체텍스트를 제공하여 본문내용을 기입할 수 있도록.. (con***@hanmail.net) 8
  9. 9. 접근성(Accessibility) > 접근성 준수의 필요성 사회적 기업으로서의 책임 9
  10. 10. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 웹 접근성 TFT FT 가이던스 웹 접근성 TFT WA Guide Part WA Education Part 웹 접근성 가이드 제작 웹 접근성 준수에 & 필요한 교육 및 연구 진행 서비스 접근성 테스트 10
  11. 11. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 개편 프로세스 접근성 강화 1. 툴을 통한 자동검사 접근성 테스트 (접근성 체크리스트) 2. 웹 접근성 TFT 수동검사 3. 젂문가(실사용자) 수동검사 11
  12. 12. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 개편 프로세스 접근성 강화 1. 툴을 통한 자동검사 접근성 테스트 (접근성 체크리스트) 2. 웹 접근성 TFT 수동검사 3. 젂문가(실사용자) 수동검사 관렦내용 취합하여 FT개발팀에 젂달 웹 접근성 QA JIRA를 통해서 젂달 12
  13. 13. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 13
  14. 14. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 개편 프로세스 접근성 강화 1. 툴을 통한 자동검사 접근성 테스트 (접근성 체크리스트) 2. 웹 접근성 TFT 수동검사 3. 젂문가(실사용자) 수동검사 관렦내용 취합하여 FT개발팀에 젂달 웹 접근성 QA JIRA를 통해서 젂달 웹표준FT팀에서 최종확인 14
  15. 15. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 개편 프로세스 접근성 강화 1. 툴을 통한 자동검사 접근성 테스트 (접근성 체크리스트) 2. 웹 접근성 TFT 수동검사 3. 젂문가(실사용자) 수동검사 관렦내용 취합하여 FT개발팀에 젂달 웹 접근성 QA JIRA를 통해서 젂달 웹표준FT팀에서 최종확인 접근성 강화를 위해 오픈 프로세스에서도 동일하게 적용!! 15
  16. 16. PC 웹 접근성- Daummail 개선 사례 -
  17. 17. PC 웹 접근성 개선 사례 (Daum 메일) Skip Navigation 통일 심플버전 메일 통합버전 메일 심플버젂과 통합버젂의 Skip Navigation 통일 17
  18. 18. PC 웹 접근성 개선 사례 (Daum 메일) Heading Tag 정리 명확하고 논리적인 순서로 헤딩 정리 스크린리더기에서 사용자가 원하는 콘텐츠로의 이동 용이해짐 18
  19. 19. PC 웹 접근성 개선 사례 (Daum 메일) 불필요한 요소 제거 <span title=“2011년 7월 18일 13시 29분”>11.07.18 13:29</span> <span>11.07.18 13:29</span> 19
  20. 20. PC 웹 접근성 개선 사례 (Daum 메일) 의미중심의 대체 텍스트 제공 <img src=“http://i1.daumcdn.net…” width="5" height="9“ alt=“토글버튼" /> <img src=“http://i1.daumcdn.net…” width="5" height="9“ alt="편지함 리스트 접기 토글버튼" /> 20
  21. 21. Mobile 웹 접근성
  22. 22. Mobile 환경 Importance of Mobile Accessibility  Accessibility Tools Better way for mobile Accessibility 22
  23. 23. Mobile > Importance of Mobile Accessibility Better Accessibility! < 23
  24. 24. Mobile > Importance of Mobile Accessibility 1. Much easier < 24
  25. 25. Mobile > Importance of Mobile Accessibility 2. Much closer < 25
  26. 26. Mobile > Importance of Mobile Accessibility 3. Much cheaper < 26
  27. 27. Mobile > Importance of Mobile Accessibility 4. More linearized 27
  28. 28. Mobile 환경 Importance of Mobile Accessibility  Accessibility Tools Better way for mobile Accessibility 28
  29. 29. Mobile > Accessibility tools Voice Control Zoom VoiceOver Assistive Touch White on Black Entering Text 29
  30. 30. Mobile > Accessibility tools VoiceOver 30
  31. 31. Mobile > Accessibility tools Setting VoiceOver 31
  32. 32. Mobile > Accessibility tools 32
  33. 33. Mobile > Accessibility tools Rotor 33
  34. 34. Mobile > Accessibility tools Rotor 34
  35. 35. Mobile > Accessibility tools Setting Rotor 35
  36. 36. Mobile > Accessibility tools 36
  37. 37. Mobile 환경 Importance of Mobile Accessibility  Accessibility Tools Better way for mobile Accessibility 37
  38. 38. Mobile > Better way for mobile Accessibility 1. Screen_out Text 38
  39. 39. Mobile > Better way.. > 1. Screen_out Text 39
  40. 40. Mobile > Better way.. > 1. Screen_out Text VoiceOver 는.. 눈에 보이지 않는 것은 읽어주지 않는다. 내용은 있지만 영역이 없는 것 역시 읽어주지 않는다. * visibility:hidden * display:none * 영역없이 text-indent:-9999px로 날려버린 경우 40
  41. 41. Mobile > Better way.. > 1. Screen_out Text 41
  42. 42. Mobile > Better way.. > 1. Screen_out Text .screen_out { display:block; overflow:hidden; position:absolute; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; text-indent:-9999px; } 42
  43. 43. Mobile > Better way.. > 1. Screen_out Text 43
  44. 44. Mobile > Better way for mobile Accessibility 2. EM vs IN vs PX 44
  45. 45. Mobile > Better way.. > 2. EM vs IN vs PX Phark Method Text-indent: -9999em / -9999in / -9999px 다운로드 다운로드 45
  46. 46. Mobile > Better way.. > 2. EM vs IN vs PX Normal case “젂체보기” Delayed case “젂체보기” 1~2 sec 46
  47. 47. Mobile > Better way.. > 2. EM vs IN vs PX TEST 1. 아이폰3GS / 아이폰4 - 캐시 모두 비우고, 실행중인 프로그램 모두 끈 조건 2. 샘플페이지에서 IR 요소의 text-indent 단위를 바꿔가며 테스트 3. 커서를 해당버튼으로 옮긴 순간과 해당내용을 읽어주는 순간 사이를 스톱워치로 측정 iOS 4.3.3 iOS 4.3.1 iOS 5.0.1 In/Em/Px 단위에 관계없이 모두 즉시 읽히지만 In/Em 단위의 경우 읽어준 후 종종 포커스 위치가 헤매는 현상 발생 47
  48. 48. Mobile > Better way.. > 2. EM vs IN vs PX 해석 1. Phark Method IR기법 사용 시 보이스오버에서 text-indent의 단위에 따라 퍼포먼스 하락이 발생 2. 이러한 퍼포먼스 하락은 기기의 성능이 아닌 OS의 버전별 차이에 기인한 것으로 추정 (아이폰4/3GS 관계없이 iOS의 버전에 따라 차이) 48
  49. 49. Mobile > Better way.. > 2. EM vs IN vs PX 결론 1. 모바일웹에서 Phark Method 사용 시, text-indent의 단위는 모두 PX로 사용하는 것이 권장된다. 2. 모바일로 PC웹에 접속할 경우를 대비한다면 PC웹에서의 IR에도 PX단위를 사용하는 것을 권장. 49
  50. 50. Mobile > Better way for mobile Accessibility 3. WAI-ARIA 50
  51. 51. Mobile > Better way.. > 2. WAI-ARIA Web Accessibility Initiative - Accessible Rich Internet Applications How to increase the accessibility of dynamic content and UI components developed with client-side scripts 51
  52. 52. Mobile > Better way.. > 2. WAI-ARIA W3C Candidate Recommendation (2011.01.18) Roles - Roles for Widgets („alert‟, „menuitem‟, „treeitem‟, „slider‟, progressbar‟) - Roles for Structures („article‟, „document‟, „heading‟, „list‟, „note‟) - Roles for Landmark („application‟, „banner‟, „main‟, „form‟, „search‟) States and Properties - Properties for Widgets („aria-checked‟, „aria-disabled‟, „aria-invalid‟) - Properties for live region of page - Properties for drag-and-drop Provides keyboard navigation (tabindex) 52
  53. 53. Mobile > Better way.. > 2. WAI-ARIA Tag 중심이 아닌, 역할 중심의 Mark-up <a href=“#” role=“button” >Send</a> 해당 태그의 역할을 바로 알 수 있어 개발자 자신도 편하고, 브라우저나 다른 기기, 장애인을 포함한 모든 사용자가 쉽게 접근 가능 53
  54. 54. Mobile > Better way.. > 2. WAI-ARIA Landmark Role Paris! London! Rome! 54
  55. 55. Mobile > Better way.. > 2. WAI-ARIA Landmark Role <div id=“gnb" role="navigation"> ex 1) 메인메뉴 <h2>메인메뉴</h2> <ul> <li><a href="#">첫페이지</a></li> <li><a href="#">새소식</a></li> <li><a href="#">커뮤니티</a></li> <li><a href="#">자료실</a></li> </ul> <a href="#">사이트 맵</a> </div> <div id="body" role="main"> ex 2) 본문 <h2>새 소식</h2> <h3>What is WAI-ARIA?</h3> <p> The domain of web accessibility defines how to make web content usable by persons with disabilities. Persons with certain types of disabilities use assistive technologies (AT) to interact with content… </p> </div> 55
  56. 56. Mobile > Better way.. > 2. WAI-ARIA Landmark Role • Banner role=“banner” • Navigation • Main role=“form” • Application role= role= navigation “search” • Form role=“main” • Search “ • Complementary role= • Contentinfo role= “compleman ” “application” tary” role=“contentinfo” 56
  57. 57. Mobile > Better way.. > 2. WAI-ARIA iOS 4 supports WAI-ARIA Landmark 1. iOS4.0 이상 부터 WAI-ARIA Landmark Role 지원 시작 2. Roter를 통해 Landmark 단위 웹페이지 탐색 가능 3. HTML5 유효성검사만 통과가능 (XHTML은 오류) 4. iOS에서 해당 Landmark가 가진 역할을 읽어주지는 않는다. 57
  58. 58. Mobile > Better way.. > 2. WAI-ARIA role=“banner” role=“navigation” role=“main” role=“application” role=“complementary” role=“contentinfo” 58
  59. 59. Mobile > Better way.. > 2. WAI-ARIA 59
  60. 60. 요청winterpp @ daumcorp.com

×