Devon 2011-f-5 웹 접근성 베스트 프랙티스
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 906 views

 

Statistics

Views

Total Views
906
Views on SlideShare
906
Embed Views
0

Actions

Likes
1
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. 웹접근성Best PracticeDaum service 웹표준 FT 조규태
  • 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. Contents I. 접근성 (Accessibility) II. PC 웹 접근성 (Daummail 개선사례) III. Mobile 웹 접근성 IV. 마무리 V. Q&A 3
  • 4. 접근성 (Accessibility)
  • 5. 접근성(Accessibility) 접근성이란? 어떠한 기술환경에서든 어떠한 사용자(장애인, 고령자 등)라도 젂문적인 능력 없이 제공하는 모든 정보에 접근할 수 있도록 보장하는 것 보다 많은 사람들이 이용할 수 있는 보편적인 접근 사람을 위한 것 5
  • 6. Daum은 접근성을 지켜야만 하는가?접근성 준수의 필요성 법률적인 문제 웹 접근성 관련 CS 증가 사회적 기업으로서의 책임 6
  • 7. 접근성(Accessibility) > 접근성 준수의 필요성 법률적인 문제 「국가정보화기본법(2009.05.22 공포)」 • 제 32조(장애인, 고령자 등의 정보접근 및 이용 보장) 「장애인차별금지 및 권리구제 등에 관한 법률」 • 제 21조 (정보통신, 의사소통에서의 정당한 편의제공의무) • 시행령 제14조 (정보통신, 의사소통에서의 정당한 편의제공의 단계적 범위 및 편의의 내용) 2013년 4월부터 모든 법인체 웹 접근성 준수! 장차법 권리구제 절차에 의해 손해배상 청구 가능 7
  • 8. 접근성(Accessibility) > 접근성 준수의 필요성 웹 접근성 관련 CS 증가 저는 다음 한메일을 주로 이용하는 시각장애인입니다. 저 같은 사람들도 사용하기 좋은.. 사용성도 좀 고려해주세요.. (chy*****@hanmail.net) 파일찾기나 이런버튼이 젂혀접근이 되질않아 스크린리더 사용자는 키보드로는 전혀 사진을 올릴수가 없습니다. (ls***@hanmail.net) 편지쓰기에서 본문내용을 적을 부분에는 본문내용이라는 대체텍스트를 제공하여 본문내용을 기입할 수 있도록.. (con***@hanmail.net) 8
  • 9. 접근성(Accessibility) > 접근성 준수의 필요성 사회적 기업으로서의 책임 9
  • 10. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 웹 접근성 TFT FT 가이던스 웹 접근성 TFT WA Guide Part WA Education Part 웹 접근성 가이드 제작 웹 접근성 준수에 & 필요한 교육 및 연구 진행 서비스 접근성 테스트 10
  • 11. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 개편 프로세스 접근성 강화 1. 툴을 통한 자동검사 접근성 테스트 (접근성 체크리스트) 2. 웹 접근성 TFT 수동검사 3. 젂문가(실사용자) 수동검사 11
  • 12. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 개편 프로세스 접근성 강화 1. 툴을 통한 자동검사 접근성 테스트 (접근성 체크리스트) 2. 웹 접근성 TFT 수동검사 3. 젂문가(실사용자) 수동검사 관렦내용 취합하여 FT개발팀에 젂달 웹 접근성 QA JIRA를 통해서 젂달 12
  • 13. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 13
  • 14. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 개편 프로세스 접근성 강화 1. 툴을 통한 자동검사 접근성 테스트 (접근성 체크리스트) 2. 웹 접근성 TFT 수동검사 3. 젂문가(실사용자) 수동검사 관렦내용 취합하여 FT개발팀에 젂달 웹 접근성 QA JIRA를 통해서 젂달 웹표준FT팀에서 최종확인 14
  • 15. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력 개편 프로세스 접근성 강화 1. 툴을 통한 자동검사 접근성 테스트 (접근성 체크리스트) 2. 웹 접근성 TFT 수동검사 3. 젂문가(실사용자) 수동검사 관렦내용 취합하여 FT개발팀에 젂달 웹 접근성 QA JIRA를 통해서 젂달 웹표준FT팀에서 최종확인 접근성 강화를 위해 오픈 프로세스에서도 동일하게 적용!! 15
  • 16. PC 웹 접근성- Daummail 개선 사례 -
  • 17. PC 웹 접근성 개선 사례 (Daum 메일) Skip Navigation 통일 심플버전 메일 통합버전 메일 심플버젂과 통합버젂의 Skip Navigation 통일 17
  • 18. PC 웹 접근성 개선 사례 (Daum 메일) Heading Tag 정리 명확하고 논리적인 순서로 헤딩 정리 스크린리더기에서 사용자가 원하는 콘텐츠로의 이동 용이해짐 18
  • 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. 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. Mobile 웹 접근성
  • 22. Mobile 환경 Importance of Mobile Accessibility  Accessibility Tools Better way for mobile Accessibility 22
  • 23. Mobile > Importance of Mobile Accessibility Better Accessibility! < 23
  • 24. Mobile > Importance of Mobile Accessibility 1. Much easier < 24
  • 25. Mobile > Importance of Mobile Accessibility 2. Much closer < 25
  • 26. Mobile > Importance of Mobile Accessibility 3. Much cheaper < 26
  • 27. Mobile > Importance of Mobile Accessibility 4. More linearized 27
  • 28. Mobile 환경 Importance of Mobile Accessibility  Accessibility Tools Better way for mobile Accessibility 28
  • 29. Mobile > Accessibility tools Voice Control Zoom VoiceOver Assistive Touch White on Black Entering Text 29
  • 30. Mobile > Accessibility tools VoiceOver 30
  • 31. Mobile > Accessibility tools Setting VoiceOver 31
  • 32. Mobile > Accessibility tools 32
  • 33. Mobile > Accessibility tools Rotor 33
  • 34. Mobile > Accessibility tools Rotor 34
  • 35. Mobile > Accessibility tools Setting Rotor 35
  • 36. Mobile > Accessibility tools 36
  • 37. Mobile 환경 Importance of Mobile Accessibility  Accessibility Tools Better way for mobile Accessibility 37
  • 38. Mobile > Better way for mobile Accessibility 1. Screen_out Text 38
  • 39. Mobile > Better way.. > 1. Screen_out Text 39
  • 40. Mobile > Better way.. > 1. Screen_out Text VoiceOver 는.. 눈에 보이지 않는 것은 읽어주지 않는다. 내용은 있지만 영역이 없는 것 역시 읽어주지 않는다. * visibility:hidden * display:none * 영역없이 text-indent:-9999px로 날려버린 경우 40
  • 41. Mobile > Better way.. > 1. Screen_out Text 41
  • 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. Mobile > Better way.. > 1. Screen_out Text 43
  • 44. Mobile > Better way for mobile Accessibility 2. EM vs IN vs PX 44
  • 45. Mobile > Better way.. > 2. EM vs IN vs PX Phark Method Text-indent: -9999em / -9999in / -9999px 다운로드 다운로드 45
  • 46. Mobile > Better way.. > 2. EM vs IN vs PX Normal case “젂체보기” Delayed case “젂체보기” 1~2 sec 46
  • 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. Mobile > Better way.. > 2. EM vs IN vs PX 해석 1. Phark Method IR기법 사용 시 보이스오버에서 text-indent의 단위에 따라 퍼포먼스 하락이 발생 2. 이러한 퍼포먼스 하락은 기기의 성능이 아닌 OS의 버전별 차이에 기인한 것으로 추정 (아이폰4/3GS 관계없이 iOS의 버전에 따라 차이) 48
  • 49. Mobile > Better way.. > 2. EM vs IN vs PX 결론 1. 모바일웹에서 Phark Method 사용 시, text-indent의 단위는 모두 PX로 사용하는 것이 권장된다. 2. 모바일로 PC웹에 접속할 경우를 대비한다면 PC웹에서의 IR에도 PX단위를 사용하는 것을 권장. 49
  • 50. Mobile > Better way for mobile Accessibility 3. WAI-ARIA 50
  • 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. 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. Mobile > Better way.. > 2. WAI-ARIA Tag 중심이 아닌, 역할 중심의 Mark-up <a href=“#” role=“button” >Send</a> 해당 태그의 역할을 바로 알 수 있어 개발자 자신도 편하고, 브라우저나 다른 기기, 장애인을 포함한 모든 사용자가 쉽게 접근 가능 53
  • 54. Mobile > Better way.. > 2. WAI-ARIA Landmark Role Paris! London! Rome! 54
  • 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. 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. 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. Mobile > Better way.. > 2. WAI-ARIA role=“banner” role=“navigation” role=“main” role=“application” role=“complementary” role=“contentinfo” 58
  • 59. Mobile > Better way.. > 2. WAI-ARIA 59
  • 60. 요청winterpp @ daumcorp.com