모바일 웹 어플리케이션 접근성

1,814 views
1,632 views

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,814
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
23
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

모바일 웹 어플리케이션 접근성

  1. 1. 모바일 웹 어플리케이션 접근성 조 은 NHN Technology Services UIT Development Office cho.eun@nhn.com http://techhtml.org
  2. 2. 모바일 웹
  3. 3. 모바일 웹 접근성
  4. 4. 모바일 웹 접근성 지침
  5. 5. 모바일 웹 접근성 지침
  6. 6. 모바일 앱 접근성 지침 한국형 웹 콘텐츠 접근성 지침
  7. 7. 모바일 앱 접근성 지침 한국형 웹 콘텐츠 접근성 지침
  8. 8. 하던 것만 잘 지켜도…
  9. 9. 하던 것만 잘 지켜도… 그러나
  10. 10. 하던 것만 지켜도… 그러나 모바일 웹 어플리케이션
 모범 사례 http://html5.clearboth.org/mwbp
  11. 11. 다양한 입력장치를 고려하세요. http://html5.clearboth.org/mwbp
  12. 12. 포인터 터치 화면
 제어
  13. 13. 자바스크립트 없는 버전도
 지원할 필요가 있을 수 있습니다. http://html5.clearboth.org/mwbp
  14. 14. 모바일 앱 접근성 지침 한국형 웹 콘텐츠 접근성 지침 모바일 웹 어플리케이션 모범사례+
  15. 15. 한국형 웹 콘텐츠 접근성 지침 모바일 웹 어플리케이션 모범사례+
  16. 16. 널리 모바일 웹 접근성 체크리스트 http://nuli.nhncorp.com/accessibility/nwcag/checklist
  17. 17. WAI-ARIA W3C Recommendation
  18. 18. 요소에 역할, 상태, 속성을 부여하자
  19. 19. 요소에 역할을 부여하자
  20. 20. <ul> <li><a href=“#webtoon”>뿜/웹툰</a></li> <li><a href=“#videos”>동영상</a></li> <li><a href=“#app”>앱/게임</a></li> </ul> <section id=“webtoon”> <h1 class=“blind”>뿜/웹툰</h1> </section>
 <section id=“videos”> <h1 class=“blind”>동영상</h1> </section>
 <section id=“app”> <h1 class=“blind”>앱/게임</h1> </section>
  21. 21. <ul> <li><a href=“#webtoon”>뿜/웹툰</a></li> <li><a href=“#videos”>동영상</a></li> <li><a href=“#app”>앱/게임</a></li> </ul> <section id=“webtoon”> <h1 class=“blind”>뿜/웹툰</h1> </section>
 <section id=“videos”> <h1 class=“blind”>동영상</h1> </section>
 <section id=“app”> <h1 class=“blind”>앱/게임</h1> </section>
  22. 22. <ul> <li><a href=“#webtoon”>뿜/웹툰</a></li> <li><a href=“#videos”>동영상</a></li> <li><a href=“#app”>앱/게임</a></li> </ul> <section id=“webtoon”> <h1 class=“blind”>뿜/웹툰</h1> </section>
 <section id=“videos”> <h1 class=“blind”>동영상</h1> </section>
 <section id=“app”> <h1 class=“blind”>앱/게임</h1> </section>
  23. 23. <ul> <li><a href=“#webtoon” role=“tab">뿜/웹툰</a></li> <li><a href=“#videos” role=“tab">동영상</a></li> <li><a href=“#app” role=“tab">앱/게임</a></li> </ul> <section id=“webtoon” role=“tabpanel”> <h1 class=“blind”>뿜/웹툰</h1> </section>
 <section id=“videos” role=“tabpanel”> <h1 class=“blind”>동영상</h1> </section>
 <section id=“app” role=“tabpanel”> <h1 class=“blind”>앱/게임</h1> </section>
  24. 24. Role의 4가지 카테고리
  25. 25. Role의 4가지 카테고리 Document Structure Roles Abstract Roles Widget Roles Landmark Roles
  26. 26. Role의 4가지 카테고리 Abstract Roles 온톨로지를 위해 사용하는 역할입니다. 콘텐츠에 사용해서는 안됩니다.
  27. 27. Role의 4가지 카테고리 Widget Roles 위젯에서 사용하는 유저 인터페이스를 나타낼 때 사용합니다.
  28. 28. Role의 4가지 카테고리 문서의 구조를 나타낼 때 사용합니다. Document Structure Roles
  29. 29. Role의 4가지 카테고리 페이지의 네비게이션을 나타낼 때 사용합니다.
  30. 30. Role의 4가지 카테고리 페이지의 네비게이션을 나타낼 때 사용합니다. Landmark Roles
  31. 31. Ajax 접근성
  32. 32. 페이지 일부분을 업데이트하기 위한 정보를 서버에 바로 요청
  33. 33. 사용자 입력 값의 유효성 검사에 용이
  34. 34. 이 때 동적 변경 영역을 Live Region이라 합니다
  35. 35. 스크린리더에 따라
 못 읽어 줄 수도 있다.
  36. 36. AJAX의 단점을 해결할 4개의 속성들
  37. 37. aria-busy (state) aria-live aria-atomic aria-relevant AJAX의 단점을 해결할 4개의 속성들
  38. 38. AJAX의 단점을 해결할 4개의 속성들 aria-live 콘텐츠가 업데이트 될 때 그 내용을r 보조기기에 알려주는 시점을 결정합니다.
  39. 39. <ul> <li><strong>아이유</strong></li> <li><strong>아이유</strong> 봄사랑벚꽃말고</li> <li><strong>아이유</strong> 단발</li> <li><strong>아이유</strong> 은혁</li> <li><strong>아이유</strong> 다이어트</li> </ul>
  40. 40. aria-live=“polite” aria-live=“off” aria-live=“assertive” <ul aria-live=“polite”> <li><strong>아이유</strong></li> <li><strong>아이유</strong> 봄사랑벚꽃말고</li> <li><strong>아이유</strong> 단발</li> <li><strong>아이유</strong> 은혁</li> <li><strong>아이유</strong> 다이어트</li> </ul> 업데이트를 알리지 않음 입력이 끝나면 전달 업데이트가 발생하면 바로 전달 (default)
  41. 41. aria-atomic 콘텐츠가 업데이트 될 때i 변경된 요소만 알려줄 지 모두를 알려줄 지 결정합니다. AJAX의 단점을 해결할 4개의 속성들
  42. 42. aria-atomic=“false” aria-atomic=“true” <ul aria-live=“polite” aria-atomic=“true”> <li><strong>아이유</strong></li> <li><strong>아이유</strong> 봄사랑벚꽃말고</li> <li><strong>아이유</strong> 단발</li> <li><strong>아이유</strong> 은혁</li> <li><strong>아이유</strong> 다이어트</li> </ul> 모든 내용을 알림 업데이트 되는 요소만 알림 (default)
  43. 43. aria-busy (state) Live Region 내의 요소가i 업데이트를 진행 중인지 여부를 결정합니다. AJAX의 단점을 해결할 4개의 속성들
  44. 44. aria-busy=“false” aria-busy=“true” <ul aria-live=“polite” aria-busy=“true”> <li><strong>아이유</strong></li> <li><strong>아이유</strong> 봄사랑벚꽃말고</li> <li><strong>아이유</strong> 단발</li> <li><strong>아이유</strong> 은혁</li> <li><strong>아이유</strong> 다이어트</li> </ul> Live Region은 여전히 업데이트 되고 있습니다. Live Region에 더 이상 업데이트 할 것이 없습니다. (default)
  45. 45. aria-relevant Live Region의 내용이 변경 될 때i 어떤 변경유형을 감시해서 알려줄 지 결정합니다. AJAX의 단점을 해결할 4개의 속성들
  46. 46. aria-relevant=“removals” aria-relevant=“additions” aria-relevant=“text” <ul aria-live=“polite” aria-relevant=“additions”> <li><strong>아이유</strong></li> <li><strong>아이유</strong> 봄사랑벚꽃말고</li> <li><strong>아이유</strong> 단발</li> <li><strong>아이유</strong> 은혁</li> <li><strong>아이유</strong> 다이어트</li> </ul> Region 내의 DOM에 요소가 추가되었을 때 Region 내의 DOM에 요소가 삭제되었을 때 요소의 콘텐츠가 변경되었을 때 aria-relevant=“all” 위의 세가지 조건 모두 감시 (default) (default)
  47. 47. 그러나
  48. 48. WAI-ARIA는 보조하는 기술일 뿐, 그게 주가 되어서는 안된다.
  49. 49. 결론
  50. 50. 힘들다고 주저말고 귀찮다고 포기말고 하던대로 열심히
  51. 51. 감사합니다.

×