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

웹접근성

Best Practice

Daum service 웹표준 FT

조규태

Mobile > 발표자 소개

조규태

winterpp@daumcorp.com

Daum Service 웹표준FT

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

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

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

Contents

I. 접근성 (Accessibility)

II. PC 웹 접근성 (Daummail 개선사례)

III. Mobile 웹 접근성

IV. 마무리

V. Q&A

접근성 (Accessibility)

접근성(Accessibility)

어떠한 기술환경에서든 어떠한 사용자(장애인, 고령자 등)라도

젂문적인 능력 없이 제공하는 모든 정보에 접근할 수 있도록 보장하는 것

보다 많은 사람들이 이용할 수 있는 보편적인 접근

접근성이란?

사람을 위한 것

Daum은 접근성을 지켜야만 하는가?

법률적인 문제

접근성 준수의 필요성

웹 접근성 관련 CS 증가

사회적 기업으로서의 책임

접근성(Accessibility) > 접근성 준수의 필요성

• 제 21조 (정보통신, 의사소통에서의 정당한 편의제공의무)

• 시행령 제14조 (정보통신, 의사소통에서의 정당한 편의제공의 단계적 범위 및 편의의 내용)

「장애인차별금지 및 권리구제 등에 관한 법률」

법률적인 문제

• 제 32조(장애인, 고령자 등의 정보접근 및 이용 보장)

「국가정보화기본법(2009.05.22 공포)」

2013년 4월부터 모든 법인체 웹 접근성 준수!

장차법 권리구제 절차에 의해 손해배상 청구 가능

웹 접근성 관련 CS 증가

저는 다음 한메일을 주로 이용하는 시각장애인입니다. 저 같은 사람들도 사용하기 좋은.. 사용성도 좀 고려해주세요..

(chy*****@hanmail.net)

파일찾기나 이런버튼이 젂혀접근이 되질않아 스크린리더 사용자는 키보드로는 전혀 사진을 올릴수가 없습니다.

(ls***@hanmail.net)

편지쓰기에서 본문내용을 적을 부분에는 본문내용이라는 대체텍스트를 제공하여 본문내용을 기입할 수 있도록..

(con***@hanmail.net)

사회적 기업으로서의 책임

웹 접근성 TFT

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

웹 접근성 TFT

FT 가이던스

WA Guide Part WA Education Part

웹 접근성 가이드 제작

서비스 접근성 테스트

웹 접근성 준수에

필요한 교육 및 연구 진행

개편 프로세스 접근성 강화

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

1. 툴을 통한 자동검사

2. 웹 접근성 TFT 수동검사

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

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

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

웹표준FT팀에서 최종확인

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

PC 웹 접근성

- Daummail 개선 사례 -

Skip Navigation 통일

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

심플버젂과 통합버젂의

Skip Navigation 통일

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

Heading Tag 정리

스크린리더기에서

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

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

불필요한 요소 제거

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

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

alt=“토글버튼" />

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

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

Mobile 웹 접근성

Mobile 환경

Importance of Mobile Accessibility

Accessibility Tools

Better way for mobile Accessibility

Mobile > Importance of Mobile Accessibility

Better Accessibility!

1. Much easier

2. Much closer

3. Much cheaper

4. More linearized

Mobile 환경

Accessibility Tools

Mobile > Accessibility tools

VoiceOver

Voice Control

White on Black

Entering Text

Assistive Touch

VoiceOver

Setting VoiceOver

Setting Rotor

Mobile 환경

Accessibility Tools

Mobile > Better way for mobile Accessibility

1. Screen_out Text

Mobile > Better way.. > 1. Screen_out Text

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

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

VoiceOver 는..

* visibility:hidden

* display:none

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

.screen_out { display:block; overflow:hidden; position:absolute; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; text-indent:-9999px; }

2. EM vs IN vs PX

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

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

Phark Method

다운로드 다운로드

“젂체보기”

1~2 sec

Normal case

Delayed case

iOS 4.3.3 iOS 4.3.1

1. 아이폰3GS / 아이폰4 - 캐시 모두 비우고, 실행중인 프로그램 모두 끈 조건 2. 샘플페이지에서 IR 요소의 text-indent 단위를 바꿔가며 테스트 3. 커서를 해당버튼으로 옮긴 순간과 해당내용을 읽어주는 순간 사이를 스톱워치로 측정

iOS 5.0.1 In/Em/Px 단위에 관계없이 모두 즉시 읽히지만

In/Em 단위의 경우 읽어준 후 종종 포커스 위치가 헤매는 현상 발생

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

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

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

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

해석

결론

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

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

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

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

3. WAI-ARIA

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

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>

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

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

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

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

London!

Paris!

Landmark Role

<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) 본문

Landmark Role • Banner

• Navigation

• Main

• Application

• Form

• Search

• Complementary

• Contentinfo

role=“form”

role=“banner”

role=“main”

role= “compleman

tary”

role= “search”

role= “application”

role=“contentinfo”

iOS 4 supports WAI-ARIA Landmark

1. iOS4.0 이상 부터 WAI-ARIA Landmark Role 지원 시작

2. Roter를 통해 Landmark 단위 웹페이지 탐색 가능

3. HTML5 유효성검사만 통과가능 (XHTML은 오류)

4. iOS에서 해당 Landmark가 가진 역할을 읽어주지는 않는다.

role=“banner”

role=“navigation”

role=“main”

role=“application”

role=“complementary”

role=“contentinfo”

winterpp @ daumcorp.com

요청

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

Documents

국내종합병원의 웹 접근성 실태에 관한연구

요약파서로 웹 접근성 정적분석하기rosaec.snu.ac.kr/meet/file/20130131j.pdf · 웹 접근성 관련 제도 • 국외 • 유럽연합, 영국, 호주 등: W3C 웹 접근성

웹 접근성 및 사례

[2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!

이러닝 콘텐츠의 웹 접근성 개선방안

소셜커머스 애플리케이션의 모바일 접근성 및 개선 방안

웹접근성과 보편적 접근성

한국 댄스 베스트 5

2014년도 알기쉬운 이노비즈 인증 Q&A 베스트

교통지리청보시스웹(GIS-T)에 기반한 접근성 분석* Analyzing ... · 2020. 6. 4. · 주요어 : 접근성， 기동력， 교통지리정보시스댐(GIS-T)， 포텐셜，

웹 접근성 부록 B

05 It세미나 접근성 향상 실행리스트

[2017널리세미나] 캡차의 접근성(Accessibility of CAPTCHA)

알기쉬운 이노비즈 Q&a 베스트

파이썬 인 프랙티스 : 디자인 패턴, 동시성, 네트워킹, 성능 최적화, GUI 제작 기법

Ux와 장애인 접근성

[한이음 데이] 미니 해커톤 베스트 프로젝트 : 잉여인간들 팀

Honeymoon] 허니문 베스트 플레이스 10

네이버의 웹 접근성 개선 방향

웹 접근성 평가도구 OpenWAX 뜯어보기