웹접근성의이해및추진전략 - wordpress.com · 4. 웹접근성표준현황 현 준 호 1)...

웹 접근성의 이해 및 추진전략

2008. 4

한국정보문화진흥원

접근기획팀 현준호

[email protected]

숙명여대 정책산업대학원(4.2)

Question ????

웹 접근성에 대해 궁금한

사항이 무엇입니까?

1. 들어가기

현 준 호1

사상누각(沙上樓閣)

모래 위에 집을 짓듯이 기초를 든든하게 하지 않으면

아무리 잘 짓고 정성을 들여도 금방 무너져 노력이

허사가 되고 만다는 뜻

경영, 투자, 스포츠 등 모든 부문에서

기본과 원칙 준수가 매우 중요

경영, 투자, 스포츠 등 모든 부문에서

기본과 원칙 준수가 매우 중요

Web의 기본과 원칙은?

표준화 & 접근성

Web의 기본과 원칙은?

표준화 & 접근성

1. 들어가기 -2

현 준 호2

< 서울대 이상묵 교수 >

“장애인에게 필요한 것은

줄기세포가 아니라 현실적인

정보기술(IT)”

참고자료 : YTN : 장애인 차별 없는 IT 세상, 2008년 3월 12일

http://www.ytn.co.kr/_comm/pop_mov.php?s_mcd=0105&s_hcd=&key=200803121052149079

1. 들어가기 -3

현 준 호

u 시각장애인의 실제 인터넷 사용 애로점 !!!

질 의질 의 답 변답 변

3

1. 들어가기 -4

현 준 호4

q 시각장애인 현금카드로 850만원 꿀꺽(연합뉴스, 2004년 8월 2일)

“1급 시각장애인 심모(23)씨가 술값 30만원을 찾아 달라고 부탁하며 준

현금카드로 인근 편의점에서 26차례에 걸쳐 850만원을 인출…”

q 대구은행, 시각장애인 인터넷 뱅킹 이용 불허(연합뉴스, 2005년 7월 7일)

“시각장애인이기 때문에 인터넷 뱅킹 가입이 불가능하다.. 시각장애인은

대신 음성서비스인 폰뱅킹 이체거래를 이용하면 된다..”

장애인도 비장애인과 동등하게

이용할 수 있는 환경 조성 필요

장애인도 비장애인과 동등하게

이용할 수 있는 환경 조성 필요

1. 들어가기 -5

현 준 호5

장애인은 단지 비장애인과

의사소통, 컴퓨터, 인터넷, …을

다른 방법으로 하는 사람이다 !!!

장애를 느끼지

않는 IT 환경구축 필요

장애를 느끼지

않는 IT 환경구축 필요

출처 : 한국장애인고용촉진공단, http://www.kepad.or.kr/info_center/multi_data/movie.jsp#

2. 우리가 생각하지 않는 것들 !!

현 준 호6

수면 아래, 보이지 않는 곳에서는 무엇이 일어나는가 ??

화면(Presentation) 이외의 구조(Structure), 소스를

다른 사람, 기계가 알도록 만들었는가??

2. 우리가 생각하지 않는 것들 !! -2

현 준 호7

오른쪽은 생각해 보았는가 ?오른쪽은 생각해 보았는가 ?


현 준 호8

하나의

제품과 서비스로

하나의

제품과 서비스로어르신어르신

장애인장애인

어린이어린이

환자환자

보다 많은 사람을 !!!보다 많은 사람을 !!! 보다 많은 환경에서 !!보다 많은 환경에서 !!

여성여성

왼손잡이왼손잡이

무거운 짐을무거운 짐을

장갑을 착용장갑을 착용

미끄러운 손 (비누 등)미끄러운 손 (비누 등)

흑백 프린터

(흑백 복사기)

흑백 프린터

(흑백 복사기)

어둡거나 시끄러울 때어둡거나 시끄러울 때


현 준 호

당신이 그림을 볼 수 없는 환경에 있다면?

당신이 이미지를 검색할 때 기계는 무엇으로 인식할까?

외국어로 된 동영상을 보는 경우 자막이 없다면 ?

당신이 마우스를 사용할 수 없는 환경에 있다면 ?

당신이 흑백 프린터로 웹 페이지를 인쇄한다면 ?

1 2

3

9


현 준 호

주민등록 발급일자가반드시 필요한가 !!

주민등록 발급일자가반드시 필요한가 !!

10


현 준 호

u 웹 사이트 사용이 불가능할 경우, 퀴즈는 어떻게 참가 ..!!

11

3. 웹 접근성이란?

현 준 호

웹 접근성 제고 =

인터넷 상의 경사로를 만들어 주자

웹 접근성 제고 =

인터넷 상의 경사로를 만들어 주자

다리가 아플 때

축구, 등산을 하고 난 뒤

무거운 짐을 들고 다닐 때 등

키보드를 활용하지 못할 때

저사양 컴퓨터, 모뎀 등 통신환경이 좋지 않을 때

시끄러운 환경에 놓여 일을 때 동영상 보기 등

12

3. 웹 접근성이란? -2

현 준 호13

Components of

Web Accessibility

Components of

Web Accessibility

* 출 처 : http://www.w3.org/WAI/intro/components

14

3. 웹 접근성 이란? -3

현 준 호

웹 접근성 준수시 효과 (Thatcher et. al., 2002)

장애인장애인, , 노인노인 등을등을 포함한포함한

다양한다양한 범위의범위의 이용자이용자 확대확대

장애인장애인, , 노인노인 등을등을 포함한포함한

다양한다양한 범위의범위의 이용자이용자 확대확대

v 웹 접근성 보장을 통해 장애인, 노인 등 신규 고객확보 가능

v 일반인의 홈페이지 이용 접근성 또한 증대

v 웹 접근성 보장을 통해 장애인, 노인 등 신규 고객확보 가능

v 일반인의 홈페이지 이용 접근성 또한 증대

새로운새로운 장소장소, , 새로운새로운 기기기기

등등 이용상황의이용상황의 확대확대

새로운새로운 장소장소, , 새로운새로운 기기기기

등등 이용상황의이용상황의 확대확대

v 자연환경, 주변환경(공항, 공사장 등)에 구애없이인터넷 접근 가능

v 다양한 정보통신 기기(PDA, Mobile 등)에 구애없이인터넷 접근 가능

v 자연환경, 주변환경(공항, 공사장 등)에 구애없이인터넷 접근 가능

v 다양한 정보통신 기기(PDA, Mobile 등)에 구애없이인터넷 접근 가능

디자인디자인 및및 설계에설계에

있어서의있어서의 효율성효율성 제고제고

디자인디자인 및및 설계에설계에

있어서의있어서의 효율성효율성 제고제고

v 검색엔진의 색인과정, 사이트 개편, 다국어 버전 등

사이트 개편 및 신규 제작시 편의성 증대

v 검색엔진의 색인과정, 사이트 개편, 다국어 버전 등

사이트 개편 및 신규 제작시 편의성 증대

비용비용 절감의절감의 효과효과비용비용 절감의절감의 효과효과v 장기적 관점에서 사이트 운영비용 감소

v 법제도 개선시(접근성 의무화) 추가 제작 불필요

v 장기적 관점에서 사이트 운영비용 감소

v 법제도 개선시(접근성 의무화) 추가 제작 불필요

홍보홍보 효과효과홍보홍보 효과효과 v 장애인, 노인 등을 위한 서비스 제공에 따라 기업이미지 제고에 도움

v 장애인, 노인 등을 위한 서비스 제공에 따라 기업이미지 제고에 도움

15

3. 웹 접근성 이란? -4

현 준 호

국내 사례 (Bad) 해외 사례 (Good)

Case : 점자(Braille) 이미지를 찾고 싶을때(’08년 1월 검색결과)Case : 점자(Braille) 이미지를 찾고 싶을때(’08년 1월 검색결과)

야후 코리아, 영문 사이트에서 점자, Braille로 이미지를 검색한 결과,

우리나라의 경우 의미없는 이미지만 검색된 반면,

영문 사이트에서 점자 이미지가 검색되어 나타남

야후 코리아, 영문 사이트에서 점자, Braille로 이미지를 검색한 결과,

우리나라의 경우 의미없는 이미지만 검색된 반면,

영문 사이트에서 점자 이미지가 검색되어 나타남

16

4. 웹 접근성 표준 현황

현 준 호

1) Web Content Accessibility Guidelines 1.0(WCAG)

(W3C Recommendation 5-May-1999)

2) Authoring Tool Accessibility Guidelines 1.0(ATAG)

(W3C Recommendation 3 February 2000)

3) User Agent Accessibility Guidelines 1.0(UAAG)

(W3C Recommendation 17 December 2002)

2005년부터

WCAG, UAAG

2.0 개발 추진

&

ARIA(Accessibility

Rich Internet

Applications)

표준 추진

2005년부터

WCAG, UAAG

2.0 개발 추진

&

ARIA(Accessibility

Rich Internet

Applications)

표준 추진

17

4. 웹 접근성 표준 현황 -2

현 준 호

2006년 7월부터

개정 작업 추진 중

2006년 7월부터

개정 작업 추진 중

http://teitac.org/wiki/TEITAC_Wiki

2000년 재활법 508조 세부기준 마련 (웹은 16개 지침), 2001년 6월부터 효력

§ 1194.21 Software applications and operating systems

§ 1194.22 Web-based intranet and internet information and applications

http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

18

4. 웹 접근성 표준 현황 -3

현 준 호

2004년 웹 접근성 국가표준(JIS) 제정

(9개 세부 지침으로 구성)

19

5. 우리나라의 웹 접근성 표준화 현황

현 준 호

웹 접근성 기반 조성

(표준, 교육, 실태조사, 품질마크 등)

장애인,

노인 등

모두가

함께하는

인터넷 환경

구축

장애인,

노인 등

모두가

함께하는

인터넷 환경

구축

웹 접근성을

고려한 콘텐츠

웹 접근성을

고려한 콘텐츠

인터넷 웹 콘텐츠 접근성

지침(KICS.OT 10.0003, 2005년)

접근성을 고려한

사용자 에이전트


사용자 에이전트

한국형 사용자 에이전트

접근성 지침

(TTAS.OT 10.0073, 2006년)


웹 저작도구


웹 저작도구

한국형 웹 저작도구

접근성 지침 1.0

(TTAS.OT 10.0074, 2006년)

6. 인터넷 웹 콘텐츠 접근성 지침 개요

20

u 개발기간 : 2003. 9월 ~ 12월

u 개발자 : 김석일 교수(충북대학교)외 4인 & KADO

u 참고지침 : 미국 재활법 508조 기준 & W3C WAI WCAG 1.0

※ TTA 단체표준으로 상정하여, 2005년 12월 국가표준(KICS)으로 채택

인터넷 웹 콘텐츠 접근성 지침 개발 개요인터넷 웹 콘텐츠 접근성 지침 개발 개요

u 구성 : 4개 지침 14개 세부항목

u 4개 지침

- 인식의 용이성 (Perceivable), 운용의 용이성 (Operable), 이해의 용이성

(Understandable), 기술적 진보성 (Robust)

인터넷 웹 콘텐츠 접근성 지침 주요 구성인터넷 웹 콘텐츠 접근성 지침 주요 구성

현 준 호

7. 지침 1(대체 텍스트)

21

텍스트 아닌 콘텐츠의 인식1

텍스트 아닌 콘텐츠 중에서 글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가

가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.

모든 이미지에 대해 화면 낭독 프로그램이 인지할 수 있도록 대체 텍스트를 제공

예)

사례 1 : 이미지에 대한 대체 텍스트 제공사례 1 : 이미지에 대한 대체 텍스트 제공

화면 낭독 프로그램이 잘못된 정보를 제공하지 않도록 의미 없는 이미지에도 대체

텍스트 제공 예)

사례 2 : 의미없는 이미지에 대한 대체 텍스트사례 2 : 의미없는 이미지에 대한 대체 텍스트

현 준 호

7. 지침 1(대체 텍스트) -2

22

u 지침 준수 전략 1 : Do right image right !!

- 이미지 용도에 맞게 이미지를 사용하자(확대시 애로)

- 의미를 잘 설명할 수 있는 이미지를 선택하여 사용하자

부적절한 사례부적절한 사례 RecommendationRecommendation

현 준 호

7. 지침 1(대체 텍스트) -3

23

u 지침 준수 전략 2 : 명쾌하고 짧은 대체 텍스트를 제공하자 !!

(Provide Clear & Short alt-text)

- ‘링크’, ‘여기’, ‘클릭’ 등의 단어는 사용하지 말자

- ‘ ~ 하십시요, ~ 됩니다’ 등 친절한(?) 설명을 자제하고 짧

게

- ‘사진 1’, ‘사진 2’, ‘사진 3’ 등 무의미한 대체 텍스트를 지양

- 파일명을 대체 텍스트로 제공하지 마라 !!이미지를 보지 못하고 텍스트만을 듣는다고 생각해 보라 !!!

현 준 호

24

u 지침 준수 전략 3 : 신규 & 이용자가 올리는 이미지에 대한

대체 텍스트 제공 방안 마련

- 대체 텍스트를 제공해야 이미지 업로드 가능하도록 !!

u 지침 준수 전략 4 : 보안, 메일링 서비스, 회원가입 인증 등

부가 서비스시에도 대체 텍스트를 제공 !!

- 부가 서비스 제공시 대체 텍스트 제공을 고민하라 !!

7. 지침 1(대체 텍스트) -4

현 준 호

25

잘못된 사례잘못된 사례 RecommendationRecommendation

음성으로서비스 제공음성으로

서비스 제공

7. 지침 1(대체 텍스트) -5

현 준 호

26

7. 지침 1(대체 텍스트) -6

현 준 호

27

정보통신 접근성 향상 표준화 포럼

http://www.iabf.or.kr/정보통신 접근성 향상 표준화 포럼

http://www.iabf.or.kr/Firefox Web Developer extension https://addons.mozilla.org/firefox/60/

Firefox Web Developer extension https://addons.mozilla.org/firefox/60/

평가 방법평가 방법

7. 지침 1(대체 텍스트) -7

현 준 호

28

영상매체의 인식2

시간에 따라 변화하는 영상매체는 해당 콘텐츠와 동기되는 대체 매체를 제공해야 한다

사례 1 : IBM 홈페이지

(동기화된 캡션 제공)

사례 1 : IBM 홈페이지

(동기화된 캡션 제공)사례 2 : 도움나라 홈페이지

(동기화된 캡션 및 수화 제공)

사례 2 : 도움나라 홈페이지

(동기화된 캡션 및 수화 제공)

7. 지침 2(동영상 캡션 제공)

현 준 호

29

u 지침 준수 전략 1 : 모든 동영상에 캡션을 제공하라 !

- 캡션은 영상매체나 음향매체와 동기되어야 함

- 영상정보와 캡션을 동시에 접해야만 콘텐츠를 인식할 수

있도록 만들어서는 안됨

7. 지침 2(동영상 캡션 제공) -2

현 준 호

30

u 지침 준수 전략 2 : Client측 동영상 플레이어에서 작동

되도록 동영상을 제공하라

- 웹 사이트 제공자가 형태로 제공되는 동영상 제공 지양

부적절한 사례부적절한 사례 RecommendationRecommendation


현 준 호

31

Best

Practices

사용자 동영상 플레이어 선택대본 제공(스페인어까지..)


현 준 호

32

색상에 무관한 인식3

콘텐츠가 제공하는 모든 정보는 색상을 배제하더라도 인지할 수 있도록 구성해야 한다

사례 2 : Jim Thatcher 홈페이지

(색깔과 특수문자(*) 동시제공 )

사례 2 : Jim Thatcher 홈페이지

(색깔과 특수문자(*) 동시제공 )

사례 1 : **청 홈페이지

(색깔만으로 정보제공)

사례 1 : **청 홈페이지

(색깔만으로 정보제공)

X

7. 지침 3(색상에 무관한 인식)

현 준 호

33

u 지침 준수 전략 1 : 색상만으로 정보를 제공하지 말자 !!

부적절한사례

부적절한사례

당신이 흑백 프린터로 출력한다면 ??

7. 지침 3(색상에 무관한 인식) -2

현 준 호

34

부적절한사례

부적절한사례


35

u 지침 준수 전략 2 : 전경-배경과의 고대비를 고민하자 !!

- 회색톤의 글씨체를 지양하자 !!

- 고대비를 생각하자 !! (흑백으로 프린할 경우)


현 준 호

36

Best

Practices


현 준 호

37

Vischeckhttp://www.vischeck.com/vischeck/vischeckImage.php

후지쯔 Color Doctor (색맹 시험)http://design.fujitsu.com/en/universal/assistance/colordoctor/download.html

평가방법


현 준 호

39

부적절한사례

부적절한사례

7. 지침 4(이미지맵) -2

현 준 호

40

프레임 사용 제한5

콘텐츠를 구성하는 프레임의 수는 최소한으로 하며,

프레임을 사용하는 경우에는 프레임별로 제목을 붙여야 한다

사례 1 : **부 홈페이지

(+:+: 라는 의미없는 의미지 사용)

사례 1 : **부 홈페이지

(+:+: 라는 의미없는 의미지 사용)

X

사례 2 : Yahoo 홈페이지

(프레임별 제목을 제공함)

사례 2 : Yahoo 홈페이지

(프레임별 제목을 제공함)

메인페이지

Movie 페이지

검색(Internet) 페이지

7. 지침 5(프레임 사용제한)

현 준 호

41

1. 웹 접근성 자동평가 도구를 통한 점검

- KADO-WAH 이용(100% 달성)

2. 적절한 프레임 제목을 부여하였는지 평가할 것 !!

- 개발사에서 자동평가도구만을 통과하도록 많이 제작함

- 페이지 소스에서 또는 등을 찾아, 프레임에 적합한

을 제공하는지 파악할 것 !!

3. 프레임은 한 페이지에서 4개 이상 사용하지 않는 것이 바람직

4. 페이지별로 이동해서 페이지 타이틀이 변하는지를 파악할 것

7. 지침 5(프레임 사용제한) -2

현 준 호

42

깜박거리는 객체 사용 제한6

콘텐츠는 스크린의 깜박거림을 피할 수 있도록 구성되어야 한다

◈ 웹 콘텐츠에는 애니메이션 등과 같이 깜박거리는 주파수의 범위가 3 Hz

에서 49 Hz 사이인 콘텐츠 요소들을 포함하지 않아야 한다

◈ 만일 위의 조건을 만족할 수 없을 경우에는 이 페이지에 깜박거림이

있음을 사전에 사용자에게 경고해 주여야 한다. 또한 스크린의 깜박거림이

배제된 대체 페이지를 별도로 제공해야 한다

한곳에 집중하기 어려운 사람, 광과민성 발작 증세 등이

혼란없이 웹 콘텐츠에 접근함

한곳에 집중하기 어려운 사람, 광과민성 발작 증세 등이

혼란없이 웹 콘텐츠에 접근함

7. 지침 6(깜빡이는 객체 사용 제한)

현 준 호

43

o 웹 콘텐츠에는 애니메이션 등과 같이 깜박거리는 회수가 1초에 3번에서

49번 되는 것은 없는지를 살펴보아라 !!

o 페이지 소스에서 , 와 같은 태그를 사용하지 않는지?

< 참고 사이트 >

깜박임을 파악할 수 있는 사이트

http://ncam.wgbh.org/richmedia/media/flicker_demo.html

http://www.webaccessibile.org/test/check.aspx

7. 지침 6(깜빡이는 객체 사용 제한) -2

현 준 호

44

키보드만으로 운용 가능7

키보드 (또는 키보드 인터페이스)만으로도

웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다

사례 1 : 조선일보 홈페이지

(자동으로 이동)

사례 1 : 조선일보 홈페이지

(자동으로 이동)

X

사례 2 : Apple 홈페이지

(Tab키로 모든 정보에 접근가능)

사례 2 : Apple 홈페이지

(Tab키로 모든 정보에 접근가능)

7. 지침 7(키보드만으로 운용 가능)

현 준 호

45

o tab 키를 이용하여 모든 기능에 접근할 수 있는 지를 파악 !!

- + 로 거꾸로 이동할 수 있는 지를 파악 !!

O 온라인 서식 등 순서가 제대로 가는지를 파악할 것 !!

부적절한사례

부적절한사례

7. 지침 7(키보드만으로 운용 가능) -2

현 준 호

46

반복 네비게이션 링크8

웹 콘텐츠는 반복적인 네비게이션 링크를 뛰어넘어

페이지의 핵심부문으로 직접 이동할 수 있도록 구성하여야 한다

◈ 웹 콘텐츠 상에 반복적 네비게이션 링크

개체가 포함되어 있으며, 이 링크 객체가

콘텐츠의 핵심부문보다 먼저 읽어주도록

구성된 경우에는 이들 링크들의 읽기를

생략하고 직접 콘텐츠의 메인부문으로

직접 이동할 수 있도록 링크를 제공

사례 1 : CNN 홈페이지

(뉴스로 바로 이동)

사례 1 : CNN 홈페이지

(뉴스로 바로 이동)

7. 지침 8(반복 네비게이션 링크)

현 준 호

47

RecommendationRecommendation

7. 지침 8(반복 네비게이션 링크) -2

현 준 호

48

반응시간의 조절기능9

실시간 이벤트나 제한된 시간에 수행하여야 하는 활동 등은

사용자가 시간에 구애 받지 않고 읽거나 상호작용을 하거나 응답할 수 있어야 한다

◈ 웹 콘텐츠 시간 제약 조건이 최소한 아래 조건을 만족해야 함

- 사용자가 시간제한 기능을 동작하지 않도록 할 수 있거나,

- 일반적으로 사람들이 선호하는 시간의 10배 이상으로 제한시간을

늘릴 수 있도록

- 주어진 시간이 종료하기 전에 경고를 말하며, 제한시간을 늘리기 위해

최소한 10초 이상 시간이 주어질 수 있어야 함

7. 지침 9(반응시간의 조절기능)

현 준 호

49

데이터 테이블 구성10

데이터 테이블은 테이블을 구성하는 데이터 셀의

내용에 대한 정보가 충분히 전달될 수 있어야 한다

머릿글에는 id, 내용에는 headers

속성을 이용해 머릿글과 내용을

적절하게 짝지은 표의 예

사례 1 : IBM 홈페이지사례 1 : IBM 홈페이지

머릿글에 머릿글이 미치는

범위(scope)를 명시함으로써

내용과 적절히 짝지은 표 예

사례 2 : 정보통신 사이버대학사례 2 : 정보통신 사이버대학

7. 지침 10(데이터 테이블)

현 준 호

50

AA

BB

◈ 어느 것이 좋을까요 ??

7. 지침 10(데이터 테이블) -2

현 준 호

51

논리적 구성11

콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다

◈ 문서의 모양이나 콘텐츠의 배치를

위해서는 스타일 시트(Style

Sheet)를 사용하여야 한다

◈ 배치용 테이블을 사용하여 콘텐츠의

모양이나 배치를 할 경우에는

모든 셀들을 왼쪽상단에서 오른쪽

하단에 이르는 순서대로 늘어

놓았을 때도 그 내용을 충분히

이해할 수 있도록 한다

사례 1 : CSS Zen Garden 홈페이지

(CSS 사용 예)

사례 1 : CSS Zen Garden 홈페이지

(CSS 사용 예)

7. 지침 11(논리적 구성)

현 준 호

52

온라인 서식 구성12

온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식구성요소,

필요한 기능, 작성 후 제출과정 등 서식과 관련한 모든 정보를 제공해야 한다.

텍스트 필드에 을 짝지어

놓지 않아 어떤 필드가 어떤 역할을

하는지 알기 어려움.

사례 1 : **대 홈페이지사례 1 : **대 홈페이지 X

1. 텍스트 필드에는 적절한 식별자(id)를,

그 식별자에 맞는 label을 반드시 제공

2. 키보드를 이용해 정확한 순서대로 값을

입력할 수 있도록 tabindex=“값” 제공

해결방안해결방안

7. 지침 12(온라인 서식)

현 준 호

53

부적절한사례

부적절한사례

7. 지침 12(온라인 서식) -2

현 준 호

54

신기술의 사용13

스크립트, 애플릿 또는 플러그 인 등과 같은 프로그래밍 요소들은 현재의 보조기술의 수준에서

이들 프로그래밍 요소들의 내용을 사용자에게 전달해 줄 수 있을 경우에만 사용해야 한다

◈ 콘텐츠를 나타내기 위해 혹은 인터페이스 요소를 만들기 위해 스크립트

언어를 이용하는 경우에는 스크립트에 의해 제공되는 중요한 정보는

최신의 보조기술을 이용해 접근가능해야 한다

◈ 애플릿, 플러그인 혹은 다른 응용 프로그램을 이용하여 웹 콘텐츠를

구성하였을 때에는 이들 프로그램 요소에 의해 제공되는 중요한 정보는

보조기술을 이용해 읽을 수 있어야 한다

7. 지침 13(신기술의 사용)

현 준 호

55

부적절한사례

부적절한사례

JavascriptJavascript

FlashFlash

ActiveXActiveX

7. 지침 13(신기술의 사용) -2

현 준 호

56

별도 웹 사이트 제공14

콘텐츠가 항목 1에서 13에 이르는 13개 검사항목을 만족하도록

최대한 노력하였으나, 해결되지 않는 부문이 남아있다면

텍스트만의 콘텐츠를 제공하는 웹 페이지(또는 웹 사이트)를 별도로 제공해야 한다

사례 1 : 미 백악관 홈페이지 (일반홈페이지 & 텍스트 전용 홈페이지)사례 1 : 미 백악관 홈페이지 (일반홈페이지 & 텍스트 전용 홈페이지)

Text-Only Homepage

7. 지침 14(별도 웹 사이트 제공)

현 준 호

57

부적절한사례

부적절한사례

이미지가 있는

텍스트 페이지

이미지가 있는

텍스트 페이지

7. 지침 14(별도 웹 사이트 제공) -2

현 준 호

58

일반 웹 사이트에 비해 턱 없이 부족한 시각장애인용 사이트 !!!일반 웹 사이트에 비해 턱 없이 부족한 시각장애인용 사이트 !!!부적절한

사례부적절한

사례

7. 지침 14(별도 웹 사이트 제공) -2

현 준 호

59

8. 외국 기업들의 접근성 제고 활동

1. Microsoft(http://www.microsoft.com/enable/)

- Microsoft 접근성 사명(Commitment) 제정

- MSDN (Microsoft Developer Network) 구축 및 운영

- MSAA (Microsoft Active Accessibility) : MS 운영체제와 보조

기술과의 호환성을 보장하기 위해 접근성 관련 정보를 제공

- MS 운영체제의 접근성 보장 : 음성 및 읽기 기능, 키보드 및 마우스

기능, 접근성 마법사 제공

- 보조기술 관련 최신 정보 제공

- 사례 제공

현 준 호

60 현 준 호


61

2. IBM(http://www-03.ibm.com/able/index.html)

- 접근성 이니셔티브 지원 서비스 : 관련 기업 및 기관에게 접근성 컨설팅

- 웹 접근성 가이드라인 및 사례 제공 (개발자 지침 제공)

- 접근성을 고려한 교육 관리 시스템

- 접근성 구축 사례 제공을 통한 인식제고

1) 아리조나 주 사례 : 접근성을 고려한 홈페이지 구축

2) 텍사스 주의 시각장애인 학교 : IBM Homepage Reader 이용

3) 캐나다 Saint Mary’s University : IBM 음성기술을 활용하여 교수

강의를 실시간으로 스크린을 통해 봄(청각장애인), 다양한 포맷(텍스

트, 음성)으로 온라인 상에서 교수의 강의를 다시 접함(시각 등)

현 준 호


62 현 준 호


63

3. ORACLE(http://www.oracle.com/accessibility/index.html)

현 준 호


64

4. BEA

(http://www.bea.com/content/news_events/white_papers/BEA_section508_v5.pdf)

현 준 호


65

5. 후지쯔(http://www.fujitsu.com/global/accessibility/)

http://www.fujitsu.com/downloads/US/GND/web-accessibility-guide.pdf

현 준 호


66

9. 웹 접근성 제고 방안

현 준 호

철저한 AS-IS 분석 & 사내 인식제고1

q 자사 웹 사이트, 제품에 대한 접근성 평가 실시

o 소프트웨어 접근성 지침, 재활법 508조 기준에 따른 접근성 준수 평가

o 시각, 지체 등의 장애인 대상 핸디소프트 제품 테스트 실시

o 마이크로소프트에서 개발한 것을 제외한 브라우저(Firefox, Opera,

Safari) 및 운영체제(Mac, 리눅스)에서 가능여부 평가

q 접근성 R & D 추진

o 국내외 지침 분석, 개발 방법 등에 대한 R & D

q 웹 접근성 평가, 캠페인 개최

67 현 준 호

접근성 정책(Policy) 수립2

q 접근성 정책 수립

예제) OO000는 장애인들의 웹 접근성 제고를 위해 ‘한국형 웹 콘텐츠

접근성 지침 1.0”을 준수하여 홈페이지를 제작 운영함

OOOO 제품은 장애인 접근성 제고를 위해 소프트웨어 접근성 지침,

미국 재활법 508조 Section 508조 소프트웨어 지침을 준수하여 개발


68 현 준 호

Best

Practices


69 현 준 호

웹 접근성 조직 구성3

q 접근성 조직 구성

- 장애인 테스터를 1명만이라도 고용해 보자 !!! (Yahoo, Microsoft, IBM 등)

- 접근성, 보편적 설계(Universal Design) 조직을 구성하자

q역 할

- 자사 IT 제품 및 서비스 접근성 실태의 주기적 파악

- 자사 IT 제품 및 서비스 개발시 접근성 고려사항 제시

- 사내 접근성 제고를 위한 제반 활동 수행 (홍보, 교육 등)

- 접근성 관련 기술 표준화, 기술개발, 동향 파악 등


70 현 준 호

관련기관과의 유기적 협력체계 구축4

q 장애인단체, 연구기관, 보조기술 개발업체와 유기적 협력체계 구축

- Microsoft, IBM, Amazon 등 다양한 기업에서 관련기관과 협력 추진

대 상 협 력 분 야

장애인 단체o 제품 및 서비스 이용자 모니터

o 장애인 요구(Needs) 파악 등

보조기술 개발업체o 호환성 테스트 및 기술정보 교환

o 공동 기술개발 등

연구기관o 접근성 관련 표준화 및 기술개발

o 접근성 관련 정보 교류 등


71 현 준 호

Best

Practices


72 현 준 호

사회공헌활동(CSR)으로서의 접근성 추진5

q 생색내기식 사회공헌에서 벗어나, 자사의 제품과 서비스를 장애인, 노인

등을 위해 개발하는 프로젝트 수행 필요

- 사회 공헌을 비용(Cost) 측면이 아니라 투자(Investment)로 보자 !!

u 사회공헌활동(CSR)에 새로운 시각(Porter, 2006, HBR)

1) 비즈니스와 사회와 별개 à 상호 관련이 있는 관점으로 전환 필요

2) 사회공헌에만 초점을 맟춤 à 사회공헌을 기업의 전략과 연계 필요

3) 기부금, 활동 등 input에만 초점 à CSR을 통한 사회적 영향에 초점


73 현 준 호

Best

Practices


10. Rethinking the web

현 준 호74

모습보다는 콘텐츠(Contents)에 집중하자 !!!1

ü 웹은 정보를 교환하는 공간이다 !!

ü 모두가 쉽게 이해할 수 있는 콘텐츠를 제공하라 !!


현 준 호75

수면 아래를 신경쓰자, Machine Helps You !!2

ü 웹 표준을 준수하여 웹 사이트를 제작하자 !!

ü 선형화(linearize), 검색엔진 최적화, 새로운 기술과 호환성 확보 필요 !!


현 준 호76

고객은 신기술보다는 사용하기 쉬운 웹을 ??3

ü 고객이 진정으로 원하는 것에 대해 보다 깊은 고민 필요

ü 사용하기 쉬운 웹(Easy of Use)을 신경쓰자 !!

11. 결 론

현 준 호

접근성

비용인가? vs 투자인가??

77

11. 결 론

현 준 호78

Back to the BasicBack to the Basic

장애인, 노인 등 모든 사람이 (Possible)

손쉽게 이용하며 (Easy)

원하는 것을 빨리 (Fast) 할 수 있는 웹 사이트로

AccessibilityUniversal Design

Usability

Customer Satisfaction

79

11. 결 론

접근성 ≒ [ 가치 ]

가치(Value)

ü Think Different à Innovation à Making $$$$

ü Corporate (Individual) Social Responsibility

ü Machine (Technology) helps you

같이(Together)

üWeb(IT) for everyone

ü Cooperation between developer and users

현 준 호

감 사 합 니 다

문의처 : [email protected]

http://jhyun.wordpress.com/

웹접근성의이해및추진전략 - wordpress.com · 4. 웹접근성표준현황 현 준 호 1)...

Documents