1

국내 원격 교육 콘텐츠의 접근성 분석 사례A Ca s e S tu d y o n th e Ac c e s s ib ility o f On lin e Le a rn in g

Co n te n t in Ko re a

2003 년 5 월 16 일 한국콘텐츠학회 2003 춘계 종합학술대회

신승식 (S h in , S ung - s h ik)g re g s h in @h a n a fo s .c o m

/ 정보통신 사이버대학

h ttp ://e le a rn in g .h a n a fo s .c o mh ttp ://c a m p u s .h a n a fo s .c o mh ttp ://www.itun iv.o r.kr

2

발표 순서

1 . 접근성의 정의2 . 접근성이 높은 웹디자인의 장점3 . 접근성 관련 지침들4 . 교육용 콘텐츠의 접근성 평가

대상 콘텐츠 자동화된 분석 (B o b b y Te s t) 표준 문법 (유효성 ) 검사 브라우저 호환성 시험 직접 소스 검사 (Ma n u a l Re vie w)

5 . 결론

3

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."

Tim Berners-Lee, W3C Director and Inventor of the World Wide Web

4

1 . 접근성의 정의

웹사이트가 접근가능하다는 말은 장애가 있는 사람들이 비장애인과 똑같이 접근할 수 있고 ,

효과적으로 사용할 수 있다 . ( 미국 재활법 5 0 8 조 , 1 9 7 3 제정 , 1 9 9 8 개정 )

접근성이 문제가 되는 웹 관련 기술 웹 사이트 자체 (즉 , 콘텐츠 ) 사용자 에이전트 ( 웹 브라우저 , 미디어 플레이어 등 ) 웹용 콘텐츠 저작도구 웹용 표현 언어 , 프로그래밍 언어 , 플러그인 , …콘트롤 입출력 하드웨어 , 소프트웨어 , OS 등 기타 웹 관련 (신 )기술

5

1 . 접근성의 정의 : 웹 콘텐츠의 접근성과 관련있는 것들

HTML, XHTML, XML, Ma th ML,

P NG, S MIL, S VG …

상호운용성 장치 독립성

사용자 편의성 사용자 친숙성

보조 기술(a s s is tive te c h n o lo g y)

접근성

사용자 입출력 장치 /기계 사용자 에이전트

저작 도구콘텐츠

표준 적합성

6

1 . 접근성의 정의 : 접근성이 높은 콘텐츠의 예 접근가능하지 않은 웹

<TABLE border="1"> <TR> <TD>이름  <TD>학년  <TD>기말점수 <TR> <TD>김철수  <TD>2 <TD>90 <TR> <TD>홍길동  <TD>1 <TD>80 </TABLE>

접근가능한 웹<TABLE border="1" summary="이 표는 학생들의 학년과 기말고사

점수를 보여준다 ."> <CAPTION>기말 고사 성적 </CAPTION> <TR> <TH scope="col">이름 </TH> <TH scope="col">학년 </TH> <TH scope="col" abbr="점수 ">기말점수 </TH> <TR> <TD>김철수   <TD>2 <TD>90 <TR> <TD>홍길동   <TD>1 <TD>80 </TABLE>

8 01홍길동

9 02김철수기말점수

학년이름

질문 :

홍길동의 기말점수는 ? 김철수는 2 학년인가 ?

7

2 . 접근성이 높은 웹 디자인의 부가적 이득 (1 ) 사용자 측면 : 방문자 도달율 증가 , 시장점유율 향상

: 장애인 ( 또는 노인 / 특수 환경 사용자 ) 의 인구비율 8 ~ 10% 임 . 비장애인과 장애인의 사용자 편의성 향상외국인 , 지식이해도가 낮은 사용자에게 이득 검색 엔진 등록 , 원하는 정보 검색에 도움

• 메타데이터 , 대체 텍스트 , 캡션 , 표 요약 등 의미론적 웹 (s e m a n tic we b ) 지원

• 메타데이타 , 구조와 표현의 분리 , 필터링을 통한 장치 독립성 등 다양한 미래의 웹 접속 장치나 포맷에 대해 개방적

• 스타일시트 , 컬러 독립성 , XML 등 웹의 세계화 에 도움

• 캡션 , m u lti- m o d a lity c o n te n t 등 저속 인터넷 접속자 에게 도움

• “ D” 링크 , 멀티미디어에 대한 텍스트 대체 설명 , 마스터 스타일시트 , 명확한 탐색경로 등

8

9

2 . 접근성이 높은 웹 디자인의 부가적 이득 (2 )

기술적 측면 : 효율성 향상 사이트 유지보수 용이

• 표현과 구조의 분리• 스타일시트의 사용• 대체 텍스트 ( 내부 개발자에게 참조 )• XML, S VG, S MIL 사용• 접근성 높은 저작도구• 장치 독립성

사이트 검색 효율 향상모바일용 , 다른 장치용 사이트 재구축 용이 서버의 부하 감소

• 스타일 시트• 명확한 탐색 구조• 텍스트 대체

10

2 . 접근성이 높은 웹 디자인의 부가적 이득 (3 )

사회적 책임감의 표명 법적 문제 발생 가능성 감소

미국• 통신법 2 5 5 조 (1 9 9 6 )• 재활법 5 0 4 조 (1 9 7 3 )• 재활법 5 0 8 조 (1 9 8 6 , 1 9 9 8 )• 미국장애인법 (ADA)

일본• 우정성 고시 5 1 5 호• 통신산업성 고시 2 3 1 호• J WAS

11

3 . 웹 접근성 관련 지침 (1 )

Wo rld wid eW3 C : WAI

• WCAG, ATAG, UAAG, XAG IMS G lo b a l : Ac c e s s ib ility Wo rkin g G ro up

• Le a rne r In fo rm a tio n P a c ka g e Ac c e s s ib ility fo r LIP , Guid e line s fo r De ve lo p ing Ac c e s s ib le Le a rn ing Ap p lic a tio n s

미국S e c tio n 5 0 8 o f Re h a b ilita tio n Ac t : 정부가 조달 /구매 /

사용하는 E IT 제품 교육부 : Re q u ire m e n ts fo r Ac c e s s ib le S o ftwa re De s ig nWe b Ac c e s s B o a rdDub lin Co re : 메타 데이터

12

3 . 웹 접근성 관련 지침 (2 )

국내 정보격차해소에관한법 (2 0 0 1 ) 정통부 : 장애인 . 노인 등의 정보통신 접근성 향상을 위한

권장 지침 (2 0 0 2 )한국정보문화진흥원 , 한국전산원 , 정보통신접근성향상표준화포럼 (ia b f.o r.kr)

민간 기업Ap p le : h ttp ://www.a p p le .c o m /d is a b ility/ IB M : h ttp ://www- 3 .ib m .c o m /a b le /o ve rvie w.h tm lAd o b e : h ttp ://a c c e s s .a d o b e .c o m /Mic ro s o ft : h ttp ://www.m ic ro s o ft.c o m /e n a b leS UN : h ttp ://www.s u n .c o m /a c c e s s /

13

평가 도구Wa tc h fire : B o b b y

• h ttp ://www.wa tc h fire .c o m /p ro d u c ts /b o b b y.as p

A- p ro m p t• h ttp ://www.a p ro m p t.c a /in d e x.h tm l

14

4 . 교육용 콘텐츠의 접근성 분석 (1 )

필요성 및 배경 원격 교육의 탄생 배경

• 시간 /장소 / 비용 등의 문제로 교육 자원에 접근할 수 없는 사람들에게 시공을 초월한 학습 편의 제공

원격 교육의 보편화• 많은 지식 습득이 웹을 통해 이루어짐 .• 접근성이 낮은 교육용 콘텐츠는 지식 격차 심화 가능

국내 웹 콘텐츠의 경향• 특정 업체의 기술 독점으로 표준화에 대한 인식 부족 ,

상호운용성 저하 , 다양성 부족으로 인한 위험 발생 요 인 심화

15

4 . 교육용 콘텐츠의 접근성 분석 (2 )

접근성 분석 절차 대상 교육용 콘텐츠 선정 자동 분석 (B o b b y) 문법 검사 (W3 C 의 va lid a tio n s e rvic e ) 브라우저 호환성 검사 소스 분석

16

4 .1 . 분석 대상 교과목 콘텐츠

(주 )캠퍼스 2 1, (주 )엠비존닷컴h ttp ://www.c a m p us 2 1 .c o .kr(J ) 조디악 온라인

한국디지털대학교h ttp ://www.ko re a d u .a c .kr(I) 인간행동과 사회 환경

한양사이버대학교h ttp ://www.h a n ya n g c yb e r.a c .kr(H) 웹디자인 기초

하나로드림주식회사h ttp ://e le a rn in g .h a n a fo s .c o m(G) 성공하는 사람에게 CS 노하우가 있다 .

삼성에스디에스 (주 ) 삼성멀티캠퍼스h ttp ://www.e - c a m p us .c o .kr(F ) 비즈니스 협상 스킬업

한성대학교h ttp ://www.itun iv.o r.kr(E ) 디지털 영상 컨텐츠 제작

서울디지털대학교h ttp ://www.s d u .a c .kr(D) MIS

남서울대학교h ttp ://www.itun iv.o r.kr(C) ERP 시스템

(주 )이케이엘씨h ttp ://www.2klc .c o m(B ) Dr. TOE IC

(주 )클라인텍h ttp ://www.c lin e te c h .c o m(A) B a s ic MB A

제작 / 공급 기관URL( 도메인명만 표시 )과목명

17

4 .2 . 자동 분석 : B o b b y Te s t

2 모든 문서에는 제목을 붙여야 한다 .21 3 .2

2 클라이언트측 이미지맵에는 별도의 텍스트 링크를 따로 제공 해야 한다 .31 .5

2 이미지맵 핫스팟 (ARE A) 에 대체 텍스트를 제시해야 한다 .11 .1

5 서로 다른 링크에 똑같은 텍스트를 사용하면 안된다 .21 3 .1

7 이벤트 핸들러가 마우스와 키보드를 모두 지원해야 한다 .29 .3

9 표의 요약을 제시해야 한다 .35 .5

9 문서의 사용 언어를 명시해야 한다 .34 .3

9 절대적이 아닌 상대적인 크기와 위치를 지정해야 한다 .23 .4

9 문서의 앞부분에 DOCTYP E 을 명시해야 한다 .23 .2

9 모든 이미지에 대해 대체 텍스트를 붙여야 한다 .11 .1

위반사례수 체크포인트 내용중요

도WCAG 체크포인트

분석 기준 : WCAG 1 .0 분석 항목 : 9 4 개 ( 완전 자동 분석 항목 2 5 개 ) 분석 결과 주요 위반 항목

18

4 .3 . 문법 검사W3C 의 Ma rkUp Va lid a tio n S e rvic e 를 이용 DOCTYP E 은 HTML 4 .0 1 Tra n s itio n a l 로 강제 지정 인코딩 방식은 e u c - kr 로 강제 지정

검사 결과 위반 사례 수

1 2 개6 4 줄(J ) 조디악 온라인3 5 개7 8 줄(I) 인간행동과 사회 환경5 8 개111 줄(H) 웹디자인 기초2 7 개144 줄(G) 성공하는 사람에게 CS 노하우가 있다 .

5 8 개111 줄(F ) 비즈니스 협상 스킬업3 5 개337 줄(E ) 디지털 영상 컨텐츠 제작1 9 개3 5 줄(D) MIS

2 5 개125 줄(C) ERP 시스템119 개468 줄(B ) Dr. TOE IC

4 1 개170 줄(A) B a s ic MB A

위반 사례 소스의 라인수과목명

19

4 .3 . 문법 검사 (계속 ) 문법 오류의 주요 유형

http://example.org/prog?x=1&amp;y=2

<a onFocus="this.blur()">

<img src="a.png" align="middle"><a href="alternative.html" onClick="javascript:func()">

<head> <script> </script> </head> <body>

<script type="text/JavaScript" language="JavaScript">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

고친 예

http://example.org/prog?x=1&y=2

<a onFocus=this.blur()>

<img src="a.png" align="absmiddle"><a href="javascript:func()">

<head> <script> </script> <body>

<script language="JavaScript">

<meta http-equiv=Content-Type content="text/html; charset=ks_c_5601-1987">

유형이 명시되지 않음 .

잘못된 예

인식할 수 없는 엔터티 를 사용한 경우

반드시 인용부호가 필요 한 속성값에 인용부호를

묶지 않은 경우

속성의 값이 범위에 맞 지 않거나 잘못된 경우

태그의 위치가 잘못된경우

잘못된 속성 (a ttrib ute ) 을 사용하거나 필수 속

성을 빠뜨린 경우

문서의 인코딩 방식을 명시하지 않았거나 잘못

표기한 경우

문서의 유형을 명시하지 않은 경우

유형

20

4 .4 . 브라우저 호환성 시험

테스트 환경

Mo z illa 는 다중 플랫폼을 지원하는 오픈 소스 브라우저로 Ne ts c a p e Co m m u n ic a to r 는 모질라를 기반으로 개발됨 .

Lyn x 는 텍스트 기반 브라우저로 저속 환경 접속자에게 웹 접근이 가능하게 할 뿐 아니라 , s c re e n re a d e r, vo ic e b ro ws e r 등 장애인을 위한 보조 기술 장치

들로 웹에 접속했을 때에 유사한 환경을 시험해볼 수 있게 해줌 .

Re d Ha t Lin u x 8 .0 / Xfre e 8 6 4 .2 / Gn o m e te rm in a lWin d o ws 2 0 0 0 P ro fe s s io n a l S P 3

Lyn x 2 .8 .5

Win d o ws 2 0 0 0 P ro fe s s io n a l S P 3Re d Ha t Lin u x 8 .0 / Xfre e 8 6 4 .2

Mo z illa 1 .3 .1

Win d o ws 2 0 0 0 P ro fe s s io n a l S P 3In te rn e t E xp lo re r 6 .0 S P 1

테스트 환경브라우저

21

4 .4 . 브라우저 호환성 시험 결과Lyn x, B a s ic MB A 과정

Lyn x, E RP 과정

22

4 .4 . 브라우저 호환성 시험 결과Mo z illa , 성공하는 사람에게

는 CS 노하우가 있다 .

Mo z illa , 비즈니스 협상 스킬업

23

4 .4 . 브라우저 호환성 시험 결과www.w3 .o rg 의 경우는 ?

24

4 .4 . 브라우저 호환성 시험 결과 (정리 )

CS S 의 (vis ua l) fo rm a tting m o d e l 을사용 절대위치 지정 la ye r 를 사용 이미지가 겹쳐 보임

o b je c t 태그로 대체e m b e d 태그 사용 오디오 플레이 안됨

다른 브라우저의 P lug - in 모델 지원 및 표준 s c rip t 사용Ac tive X 컨트롤 및 J S c rip t 사용 오디오 및 비디오 플레이 불가

ECMA- 262 표준에 맞는 스크립트(예 : J a va S c rip t) 사용vb s c rip t 를 사용 초기 화면에서 Lo a d ing ... 만 나오고

진행이 안됨 .

  잘못된 a c tio n s c rip t 사용 플래시의 사용자 마우스 입력을 받을 수 없음 .

ECMA- 262 표준 준수 및 typ e 을 명시 정체불명의 s c rip t 사용 마우스 클릭 이벤트를 받지 못하거나

이벤트 발생후 변화를 주지 못함 .

o b je c t 태그와 관련 속성으로 대체 비표준 im g 태그의 속성 (d yns rc ) 사용 소개 동영상을 볼 수 없음 .

o b je c t 태그를 사용 비표준 태그 b g s o und 를 사용 백그라운드 음성 강의를 들을 수 없음 .

W3C 의 표준 DOM 을 준수 비표준 MS DOM 에 맞춘 s c rip t 사용

사용자 마우스 클릭 입력을 받을 수 없음 .

Me d ia P la ye r 를 웹에 내장하여 구동 하는 J a va Ap p le t 동시 사용 . 또는

Cro s s - p la tfo rm 을 지원하는 미디어 포맷으로 대체

Me d ia P la ye r Ac tive X 컨트롤 삽입비 In te rne t Exp lo re r 및 비Wind o ws 계열에서 미디어 플레이어 작동 안함

  알 수 없음 . 모의토익은 IE 4 .0 이상만 지원

Le a rn2.c o m 에서 플러그인을 다운로 드받으면 정상 작동 링크 오류P lug - in 링크가 잘못됨 . (Ac tive X 컨

트롤은 이상 없음 .)

대체 텍스트를 붙여야 함 . 대체 텍스트가 없음 .

모든 이미지 , 링크 , 스크립트 , 동영 상 등에 대한 대체 텍스트가 전혀 없어

텍스트 브라우저로 접근이 완전히 불가능함 .

대책 증상이 나타나는 이유 (추정 ) 주요 증상

25

4 .5 . 직접 소스 검사 ( 주관적 분석 )

분석의 틀 : WCAG 2 .0 의 범주 적용

현재의 브라우저나 웹 기술 , 그리고 미래의 기술에 대해서도 접근성을 최대화할 수 있도록 콘텐츠를 작성해야 한다 .

Ro b u s t( 콘텐츠 강건성 )

콘텐츠와 컨트롤을 최대한 이해하기 쉽게 제시해야 한다 .Un d e rs ta n d a b le( 이해 용이성 )

콘텐츠의 현재 위치 , 방향을 명확히 하고 탐색이 쉽게 해야 한다 .

Na vig a b le( 탐색 용이성 )

콘텐츠의 인터페이스 요소가 어떤 사용자에게도 조작 가능해야한다 .

Op e ra b le( 조작 용이성 )

의도한 기능과 정보가 어떤 사용자에게도 지각 가능한 형태로 제시되어야 한다 (단 , 말로 절대 표현할 수 없는 경우만 제외

하고 )

P e rc e iva b le( 지각 용이성 )

※ WCAG 1 .0 의 경우는 총 14 개의 최상위 지침 (g u id e lin e s ) 이 있음 .

26

4 .5 . 직접 소스 검사 : 결과

모든과목

• W3C 의 웹 표준을 지키지 않고 Win d o ws 의 In te rn e t Exp lo re r 에 종속된 기술 (예 : vb s c rip t, MS DOM, Ac tive X 컨트롤 , MS e xte n s io n o f HTML, Win d o ws Me d ia P la ye r 등 ) 만을 제공함 .

• 플래시 애니메이션 사용시 접근성이 고려되지 않았음 . • 절대적 크기의 이미지와 표 등을 사용하여 해상도가 낮은 환경에 대한 고려가 되어있지 않음

.

콘텐츠강건성

G, I, B

• 인터페이스 조작에 대한 도움말이 없거나 부족함 . • 메뉴명이 직관적으로 이해하기 힘들며 이에 대한 풍선 도움말이 없음 .

이해용이성

F , C, H

• 지나친 프레임 사용으로 탐색에 혼란을 주거나 프레임을 지원하지 않는 브라우저에게 접근 을 어렵게 함 .

• 표를 구조화된 정보를 담기 위한 목적이 아닌 레이아웃 목적으로 사용하여 탐색 순서를 정할 수 없고 , 선형화했을 때에 이해하기 힘듬 .

• 완전한 임의 접근 (ra n d o m a c c e s s ) 이 어렵고 , 현재의 위치에 대한 정보가 부족함 .

탐색용이성

G, A

• 키보드로 접근 가능한 방법이 명시되어 있지 않고 , 하이퍼링크나 폼 등에 ta b in d e x 가 명시 되어 있지 않아 텍스트 브라우저에서 조작하기가 어려움 .

• 빠르게 변하는 플래시 애니메이션에 대해 사용자가 완급을 조절하거나 멈출 수 있는 방법이 없어 인지적인 장애 (예 : 학습 장애 , 난독 , 간질 등 ) 나 마우스 조작에 어려움이 있는 장애

를 가진 사람들에게 접근이 어려움 .

조작용이성

B , D,

E , F , I

• 텍스트로 나타내도 충분한 요소들 (예 : 긴 내용의 본문 ) 이 완전히 비트맵 그래픽으로 처리 되어 있어 화면 음성 변환 장치 (s c re e n re a d e r) 등의 프로그램에서 처리할 방법이 없음 .

• 문서 인코딩 (MIME c h a rs e t) 방식을 명시하지 않았거나 부호화된 문자셋 (c o d e d c h a ra c te r s e t) 을 인코딩 방식으로 잘못 표기하여 외국어 OS 에서 문서를 정확히 표시하지 못하는 문

제점이 있음 .• 제시되는 텍스트의 크기 등 사용자가 스타일을 조정할 수 없음 .

지각용이성

과목문제점들범주

27

5 . 결론 (1 )

연구의 제한점 직접 장애인이 피험자로 참여하지 않았음 . 최소 요구 조건인 W3 C 의 표준 기술 호환성 , 브

라우저의 독립성에 분석이 치중 실제 장애인의 접근성을 위해서는 실무 제작시 고

려할 요소가 훨씬 많음 . 접근성의 다른 요소 ( 기본 정보통신 환경 , 사용자에이전트 , 보조 기술 등 ) 는 다루지 않았음 .

28

5 . 결론 (2 )

국내 교육용 콘텐츠의 접근성 실태 대부분 접근성을 거의 고려하지 않았음 .

대부분 W3 C 의 표준을 지키지 않았음.

대부분 특정 플랫폼 , 특정 브라우저 , 특정 환경에 종속적으로 제작됨 .

29

5 . 결론 (2 )

개선 방향 제언 교육용 콘텐츠의 품질 기준의 한 요소로 접근성을

고려해야 함 . 정부 기관에 납품 / 조달하는 교육용 콘텐츠 , 웹사이트 , 정보통신 기술과 제품에 대해서는 지침

또는 관련 법규를 통해 접근성이 입찰의 중요한 변 수로 고려되어야 함 .

접근성의 경제적인 가치 , 필요성과 파급 효과에 대한 인식과 홍보 제고가 필요함 .