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
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
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
14. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력
개편 프로세스 접근성 강화
1. 툴을 통한 자동검사
접근성 테스트 (접근성 체크리스트)
2. 웹 접근성 TFT 수동검사
3. 젂문가(실사용자) 수동검사
관렦내용 취합하여 FT개발팀에 젂달 웹 접근성 QA JIRA를 통해서 젂달
웹표준FT팀에서 최종확인
14
15. 접근성(Accessibility) > Daum의 웹 접근성 개선 노력
개편 프로세스 접근성 강화
1. 툴을 통한 자동검사
접근성 테스트 (접근성 체크리스트)
2. 웹 접근성 TFT 수동검사
3. 젂문가(실사용자) 수동검사
관렦내용 취합하여 FT개발팀에 젂달 웹 접근성 QA JIRA를 통해서 젂달
웹표준FT팀에서 최종확인
접근성 강화를 위해 오픈 프로세스에서도 동일하게 적용!!
15
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
40. Mobile > Better way.. > 1. Screen_out Text
VoiceOver 는..
눈에 보이지 않는 것은 읽어주지 않는다.
내용은 있지만 영역이 없는 것 역시 읽어주지 않는다.
* visibility:hidden
* display:none
* 영역없이 text-indent:-9999px로 날려버린 경우
40
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
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
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
