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