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

웹접근성

Best Practice

Daum service 웹표준 FT

조규태

2

Mobile > 발표자 소개

조규태

[email protected]

Daum Service 웹표준FT

- 현재 Daum Service 웹표준FT 3파트 / Daum 웹접근성 TFT

- Daum 희망해, 모바일 영화, 모바일 소셜쇼핑, Biz&Platform 웹표준 마크업 및 FT개발

- Chrome Application : iPSim, StyleKiller, Wakuview 등 개발

mailto:[email protected]

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)


9

사회적 기업으로서의 책임


10

웹 접근성 TFT

접근성(Accessibility) > Daum의 웹 접근성 개선 노력

웹 접근성 TFT

FT 가이던스

WA Guide Part WA Education Part

웹 접근성 가이드 제작

&

서비스 접근성 테스트

웹 접근성 준수에

필요한 교육 및 연구 진행

11

개편 프로세스 접근성 강화

접근성 테스트 (접근성 체크리스트)


1. 툴을 통한 자동검사

2. 웹 접근성 TFT 수동검사

3. 젂문가(실사용자) 수동검사

12



관렦내용 취합하여 FT개발팀에 젂달




웹 접근성 QA JIRA를 통해서 젂달


13


14




웹표준FT팀에서 최종확인






15




웹표준FT팀에서 최종확인





접근성 강화를 위해 오픈 프로세스에서도 동일하게 적용!!


PC 웹 접근성

- Daummail 개선 사례 -

17

Skip Navigation 통일

PC 웹 접근성 개선 사례 (Daum 메일)

심플버젂과 통합버젂의

Skip Navigation 통일

심플버전 메일 통합버전 메일

18

Heading Tag 정리

스크린리더기에서

사용자가 원하는 콘텐츠로의 이동 용이해짐

명확하고 논리적인 순서로 헤딩 정리


19

불필요한 요소 제거

<span title=“2011년 7월 18일 13시 29분”>11.07.18 13:29</span>

<span>11.07.18 13:29</span>


20

의미중심의 대체 텍스트 제공

<img src=“http://i1.daumcdn.net…” width="5" height="9“

alt=“토글버튼" />

<img src=“http://i1.daumcdn.net…” width="5" height="9“

alt="편지함 리스트 접기 토글버튼" />


Mobile 웹 접근성

22

Mobile 환경

Importance of Mobile Accessibility

Accessibility Tools

Better way for mobile Accessibility

23

Mobile > Importance of Mobile Accessibility

<

Better Accessibility!

24


1. Much easier

<

25


<

2. Much closer

26


<

3. Much cheaper

27


4. More linearized

28

Mobile 환경


Accessibility Tools


29

Mobile > Accessibility tools

VoiceOver

Voice Control

Zoom

White on Black

Entering Text

Assistive Touch

30


VoiceOver

31


Setting VoiceOver

32


33


Rotor

34


Rotor

35


Setting Rotor

36


37

Mobile 환경


Accessibility Tools


38

Mobile > Better way for mobile Accessibility

1. Screen_out Text

39

Mobile > Better way.. > 1. Screen_out Text

40


눈에 보이지 않는 것은 읽어주지 않는다.

내용은 있지만 영역이 없는 것 역시 읽어주지 않는다.

VoiceOver 는..

* visibility:hidden

* display:none

* 영역없이 text-indent:-9999px로 날려버린 경우

41


.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


44


2. EM vs IN vs PX

45

Mobile > Better way.. > 2. EM vs IN vs PX

Text-indent: -9999em / -9999in / -9999px

Phark Method

다운로드 다운로드

46


“젂체보기”

“젂체보기”

1~2 sec

Normal case

Delayed case

47


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


1. Phark Method IR기법 사용 시 보이스오버에서

text-indent의 단위에 따라 퍼포먼스 하락이 발생

2. 이러한 퍼포먼스 하락은 기기의 성능이 아닌 OS의 버전별 차이에

기인한 것으로 추정 (아이폰4/3GS 관계없이 iOS의 버전에 따라 차이)

해석

49


결론

1. 모바일웹에서 Phark Method 사용 시, text-indent의 단위는

모두 PX로 사용하는 것이 권장된다.

2. 모바일로 PC웹에 접속할 경우를 대비한다면 PC웹에서의 IR에도

PX단위를 사용하는 것을 권장.

50


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


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


Tag 중심이 아닌, 역할 중심의 Mark-up

role=“button” <a href=“#”

해당 태그의 역할을 바로 알 수 있어 개발자 자신도 편하고,

브라우저나 다른 기기, 장애인을 포함한 모든 사용자가 쉽게 접근 가능

54


London!

Paris!

Rome!

Landmark Role

55


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


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가 가진 역할을 읽어주지는 않는다.


58


role=“banner”

role=“navigation”

role=“main”

role=“application”

role=“complementary”

role=“contentinfo”

59


winterpp @ daumcorp.com

요청

Documents

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