A Case Study on Accessibility of Online Learning Content in Korea
Download as PPT, PDF2 likes3,083 views
국내의 웹기반 교육용 콘텐츠 10개를 선정하여 접근성 평가를 실시하였다. (1) 자동 분석 프로그램인 Bobby를 사용한 웹 콘텐츠 접근성 지침(WCAG) 1.0 준수 여부에 대한 기초 자료 산출 (2) HTML, XML, CSS에 대한 표준 문법 검사 (3) 텍스트 브라우저를 포함한 여러 브라우저에서의 호환성 시험 (4) W3C가 제안한 접근성 체크포인트를 중심으로 소스에 대한 직접 분석 순으로 접근성을 평가한 결과, 대부분의 콘텐츠가 낮은 점수를 얻었다. 그 주요 이유는 웹 표준, 브라우저 호환성, 장치 독립성에 대해서 거의 고려를 하지 않고 콘텐츠를 개발하기 때문인 것으로 보인다. 또 검사 대상 콘텐츠들은 대부분 가장 잘 꾸며진 환경의 사용자를 중심으로 한 시청각적인 효과에 치중한 결과, 제한된 사용자 환경에서의 대안적인 접근 경로를 제공하지 않고 있었다. 보편적인 정보 취득을 포함한 점점 더 많은 학습이 온라인으로 이루어지는 현실에서 접근성이 낮은 콘텐츠들은 정보 격차를 더 심화시킬 수 있을 것이다. 따라서, 학습용 콘텐츠의 품질을 결정하는 중요한 요소로 접근성 문제를 고려해야 한다.
![국내 원격 교육 콘텐츠의 접근성 분석 사례 A Case Study on the Accessibility of Online Learning Content in Korea 2003 년 5 월 16 일 한국콘텐츠학회 2003 춘계 종합학술대회 신승식 (Shin, Sung-shik) [email_address] / 정보통신 사이버대학 http://elearning.hanafos.com http://campus.hanafos.com http://www.ituniv.or.kr](https://image.slidesharecdn.com/accessibilityinlearningcontentpresentation-1226148934114486-8/85/A-Case-Study-on-Accessibility-of-Online-Learning-Content-in-Korea-1-320.jpg)
A Case Study on Accessibility of Online Learning Content in Korea
- 1. 국내 원격 교육 콘텐츠의 접근성 분석 사례 A Case Study on the Accessibility of Online Learning Content in Korea 2003 년 5 월 16 일 한국콘텐츠학회 2003 춘계 종합학술대회 신승식 (Shin, Sung-shik) [email_address] / 정보통신 사이버대학 http://elearning.hanafos.com http://campus.hanafos.com http://www.ituniv.or.kr
- 2. 발표 순서 1. 접근성의 정의 2. 접근성이 높은 웹디자인의 장점 3. 접근성 관련 지침들 4. 교육용 콘텐츠의 접근성 평가 대상 콘텐츠 자동화된 분석 (Bobby Test) 표준 문법 ( 유효성 ) 검사 브라우저 호환성 시험 직접 소스 검사 (Manual Review) 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. 접근성의 정의 웹사이트가 접근가능하다는 말은 장애가 있는 사람들이 비장애인과 똑같이 접근할 수 있고 , 효과적으로 사용할 수 있다 . ( 미국 재활법 508 조 , 1973 제정 , 1998 개정 ) 접근성이 문제가 되는 웹 관련 기술 웹 사이트 자체 ( 즉 , 콘텐츠 ) 사용자 에이전트 ( 웹 브라우저 , 미디어 플레이어 등 ) 웹용 콘텐츠 저작도구 웹용 표현 언어 , 프로그래밍 언어 , 플러그인 , 콘트롤… 입출력 하드웨어 , 소프트웨어 , OS 등 기타 웹 관련 ( 신 ) 기술
- 5. 1. 접근성의 정의 : 웹 콘텐츠의 접근성과 관련있는 것들 HTML, XHTML, XML, MathML, PNG, SMIL, SVG… 상호운용성 장치 독립성 사용자 편의성 사용자 친숙성 보조 기술 (assistive technology) 접근성 사용자 입출력 장치 / 기계 사용자 에이전트 저작 도구 콘텐츠 표준 적합성
- 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 > 질문 : 홍길동의 기말점수는 ? 김철수는 2 학년인가 ? 80 1 홍길동 90 2 김철수 기말점수 학년 이름
- 7. 2. 접근성이 높은 웹 디자인의 부가적 이득 (1) 사용자 측면 : 방문자 도달율 증가 , 시장점유율 향상 : 장애인 ( 또는 노인 / 특수 환경 사용자 ) 의 인구비율 8 ~ 10% 임 . 비장애인과 장애인의 사용자 편의성 향상 외국인 , 지식이해도가 낮은 사용자에게 이득 검색 엔진 등록 , 원하는 정보 검색에 도움 메타데이터 , 대체 텍스트 , 캡션 , 표 요약 등 의미론적 웹 (semantic web) 지원 메타데이타 , 구조와 표현의 분리 , 필터링을 통한 장치 독립성 등 다양한 미래의 웹 접속 장치나 포맷에 대해 개방적 스타일시트 , 컬러 독립성 , XML 등 웹의 세계화 에 도움 캡션 , multi-modality content 등 저속 인터넷 접속자 에게 도움 “ D” 링크 , 멀티미디어에 대한 텍스트 대체 설명 , 마스터 스타일시트 , 명확한 탐색경로 등
- 9. 2. 접근성이 높은 웹 디자인의 부가적 이득 (2) 기술적 측면 : 효율성 향상 사이트 유지보수 용이 표현과 구조의 분리 스타일시트의 사용 대체 텍스트 ( 내부 개발자에게 참조 ) XML, SVG, SMIL 사용 접근성 높은 저작도구 장치 독립성 사이트 검색 효율 향상 모바일용 , 다른 장치용 사이트 재구축 용이 서버의 부하 감소 스타일 시트 명확한 탐색 구조 텍스트 대체
- 10. 2. 접근성이 높은 웹 디자인의 부가적 이득 (3) 사회적 책임감의 표명 법적 문제 발생 가능성 감소 미국 통신법 255 조 (1996) 재활법 504 조 (1973) 재활법 508 조 (1986, 1998) 미국장애인법 (ADA) 일본 우정성 고시 515 호 통신산업성 고시 231 호 JWAS
- 11. 3. 웹 접근성 관련 지침 (1) Worldwide W3C : WAI WCAG, ATAG, UAAG, XAG IMS Global : Accessibility Working Group Learner Information Package Accessibility for LIP, Guidelines for Developing Accessible Learning Applications 미국 Section 508 of Rehabilitation Act : 정부가 조달 / 구매 / 사용하는 EIT 제품 교육부 : Requirements for Accessible Software Design Web Access Board Dublin Core : 메타 데이터
- 12. 3. 웹 접근성 관련 지침 (2) 국내 정보격차해소에관한법 (2001) 정통부 : 장애인 . 노인 등의 정보통신 접근성 향상을 위한 권장 지침 (2002) 한국정보문화진흥원 , 한국전산원 , 정보통신접근성향상표준화포럼 (iabf.or.kr) 민간 기업 Apple : http://www.apple.com/disability/ IBM : http://www-3.ibm.com/able/overview.html Adobe : http://access.adobe.com/ Microsoft : http://www.microsoft.com/enable SUN : http://www.sun.com/access/
- 13. 평가 도구 Watchfire : Bobby http://www.watchfire.com/products/bobby.asp A-prompt http://www.aprompt.ca/index.html
- 14. 4. 교육용 콘텐츠의 접근성 분석 (1) 필요성 및 배경 원격 교육의 탄생 배경 시간 / 장소 / 비용 등의 문제로 교육 자원에 접근할 수 없는 사람들에게 시공을 초월한 학습 편의 제공 원격 교육의 보편화 많은 지식 습득이 웹을 통해 이루어짐 . 접근성이 낮은 교육용 콘텐츠는 지식 격차 심화 가능 국내 웹 콘텐츠의 경향 특정 업체의 기술 독점으로 표준화에 대한 인식 부족 , 상호운용성 저하 , 다양성 부족으로 인한 위험 발생 요인 심화
- 15. 4. 교육용 콘텐츠의 접근성 분석 (2) 접근성 분석 절차 대상 교육용 콘텐츠 선정 자동 분석 (Bobby) 문법 검사 (W3C 의 validation service) 브라우저 호환성 검사 소스 분석
- 16. 4.1. 분석 대상 교과목 콘텐츠 ( 주 ) 캠퍼스 21, ( 주 ) 엠비존닷컴 http://www.campus21.co.kr (J) 조디악 온라인 한국디지털대학교 http://www.koreadu.ac.kr (I) 인간행동과 사회 환경 한양사이버대학교 http://www.hanyangcyber.ac.kr (H) 웹디자인 기초 하나로드림주식회사 http://elearning.hanafos.com (G) 성공하는 사람에게 CS 노하우가 있다 . 삼성에스디에스 ( 주 ) 삼성멀티캠퍼스 http://www.e-campus.co.kr (F) 비즈니스 협상 스킬업 한성대학교 http://www.ituniv.or.kr (E) 디지털 영상 컨텐츠 제작 서울디지털대학교 http://www.sdu.ac.kr (D) MIS 남서울대학교 http://www.ituniv.or.kr (C) ERP 시스템 ( 주 ) 이케이엘씨 http://www.2klc.com (B) Dr. TOEIC ( 주 ) 클라인텍 http://www.clinetech.com (A) Basic MBA 제작 / 공급 기관 URL( 도메인명만 표시 ) 과목명
- 17. 4.2. 자동 분석 : Bobby Test 분석 기준 : WCAG 1.0 분석 항목 : 94 개 ( 완전 자동 분석 항목 25 개 ) 분석 결과 주요 위반 항목 2 모든 문서에는 제목을 붙여야 한다 . 2 13.2 2 클라이언트측 이미지맵에는 별도의 텍스트 링크를 따로 제공해야 한다 . 3 1.5 2 이미지맵 핫스팟 (AREA) 에 대체 텍스트를 제시해야 한다 . 1 1.1 5 서로 다른 링크에 똑같은 텍스트를 사용하면 안된다 . 2 13.1 7 이벤트 핸들러가 마우스와 키보드를 모두 지원해야 한다 . 2 9.3 9 표의 요약을 제시해야 한다 . 3 5.5 9 문서의 사용 언어를 명시해야 한다 . 3 4.3 9 절대적이 아닌 상대적인 크기와 위치를 지정해야 한다 . 2 3.4 9 문서의 앞부분에 DOCTYPE 을 명시해야 한다 . 2 3.2 9 모든 이미지에 대해 대체 텍스트를 붙여야 한다 . 1 1.1 위반 사례수 체크포인트 내용 중요도 WCAG 체크포인트
- 18. 4.3. 문법 검사 W3C 의 MarkUp Validation Service 를 이용 DOCTYPE 은 HTML 4.01 Transitional 로 강제 지정 인코딩 방식은 euc-kr 로 강제 지정 검사 결과 위반 사례 수 12 개 64 줄 (J) 조디악 온라인 35 개 78 줄 (I) 인간행동과 사회 환경 58 개 111 줄 (H) 웹디자인 기초 27 개 144 줄 (G) 성공하는 사람에게 CS 노하우가 있다 . 58 개 111 줄 (F) 비즈니스 협상 스킬업 35 개 337 줄 (E) 디지털 영상 컨텐츠 제작 19 개 35 줄 (D) MIS 25 개 125 줄 (C) ERP 시스템 119 개 468 줄 (B) Dr. TOEIC 41 개 170 줄 (A) Basic MBA 위반 사례 소스의 라인수 과목명
- 19. 4.3. 문법 검사 ( 계속 ) 문법 오류의 주요 유형 http://example.org/prog?x=1&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"> 유형이 명시되지 않음 . 잘못된 예 인식할 수 없는 엔터티를 사용한 경우 반드시 인용부호가 필요한 속성값에 인용부호를 묶지 않은 경우 속성의 값이 범위에 맞지 않거나 잘못된 경우 태그의 위치가 잘못된 경우 잘못된 속성 (attribute) 을 사용하거나 필수 속성을 빠뜨린 경우 문서의 인코딩 방식을 명시하지 않았거나 잘못 표기한 경우 문서의 유형을 명시하지 않은 경우 유형
- 20. 4.4. 브라우저 호환성 시험 테스트 환경 Mozilla 는 다중 플랫폼을 지원하는 오픈 소스 브라우저로 Netscape Communicator 는 모질라를 기반으로 개발됨 . Lynx 는 텍스트 기반 브라우저로 저속 환경 접속자에게 웹 접근이 가능하게 할 뿐 아니라 , screen reader, voice browser 등 장애인을 위한 보조 기술 장치들로 웹에 접속했을 때에 유사한 환경을 시험해볼 수 있게 해줌 . Red Hat Linux 8.0 / Xfree86 4.2 / Gnome terminal Windows 2000 Professional SP3 Lynx 2.8.5 Windows 2000 Professional SP3 Red Hat Linux 8.0 / Xfree86 4.2 Mozilla 1.3.1 Windows 2000 Professional SP3 Internet Explorer 6.0 SP1 테스트 환경 브라우저
- 21. 4.4. 브라우저 호환성 시험 결과 Lynx, Basic MBA 과정 Lynx, ERP 과정
- 22. 4.4. 브라우저 호환성 시험 결과 Mozilla, 성공하는 사람에게는 CS 노하우가 있다 . Mozilla, 비즈니스 협상 스킬업
- 23. 4.4. 브라우저 호환성 시험 결과 www.w3.org 의 경우는 ?
- 24. 4.4. 브라우저 호환성 시험 결과 ( 정리 ) CSS 의 (visual) formatting model 을 사용 절대위치 지정 layer 를 사용 이미지가 겹쳐 보임 object 태그로 대체 embed 태그 사용 오디오 플레이 안됨 다른 브라우저의 Plug-in 모델 지원 및 표준 script 사용 ActiveX 컨트롤 및 JScript 사용 오디오 및 비디오 플레이 불가 ECMA-262 표준에 맞는 스크립트 ( 예 : JavaScript) 사용 vbscript 를 사용 초기 화면에서 Loading... 만 나오고 진행이 안됨 . 잘못된 action script 사용 플래시의 사용자 마우스 입력을 받을 수 없음 . ECMA-262 표준 준수 및 type 을 명시 정체불명의 script 사용 마우스 클릭 이벤트를 받지 못하거나 이벤트 발생후 변화를 주지 못함 . object 태그와 관련 속성으로 대체 비표준 img 태그의 속성 (dynsrc) 사용 소개 동영상을 볼 수 없음 . object 태그를 사용 비표준 태그 bgsound 를 사용 백그라운드 음성 강의를 들을 수 없음 . W3C 의 표준 DOM 을 준수 비표준 MS DOM 에 맞춘 script 사용 사용자 마우스 클릭 입력을 받을 수 없음 . Media Player 를 웹에 내장하여 구동하는 Java Applet 동시 사용 . 또는 Cross-platform 을 지원하는 미디어 포맷으로 대체 Media Player ActiveX 컨트롤 삽입 비 Internet Explorer 및 비 Windows 계열에서 미디어 플레이어 작동 안함 알 수 없음 . 모의토익은 IE 4.0 이상만 지원 Learn2.com 에서 플러그인을 다운로드받으면 정상 작동 링크 오류 Plug-in 링크가 잘못됨 . (ActiveX 컨트롤은 이상 없음 .) 대체 텍스트를 붙여야 함 . 대체 텍스트가 없음 . 모든 이미지 , 링크 , 스크립트 , 동영상 등에 대한 대체 텍스트가 전혀 없어 텍스트 브라우저로 접근이 완전히 불가능함 . 대책 증상이 나타나는 이유 ( 추정 ) 주요 증상
- 25. 4.5. 직접 소스 검사 ( 주관적 분석 ) 분석의 틀 : WCAG 2.0 의 범주 적용 ※ WCAG 1.0 의 경우는 총 14 개의 최상위 지침 (guidelines) 이 있음 . 현재의 브라우저나 웹 기술 , 그리고 미래의 기술에 대해서도 접근성을 최대화할 수 있도록 콘텐츠를 작성해야 한다 . Robust ( 콘텐츠 강건성 ) 콘텐츠와 컨트롤을 최대한 이해하기 쉽게 제시해야 한다 . Understandable ( 이해 용이성 ) 콘텐츠의 현재 위치 , 방향을 명확히 하고 탐색이 쉽게 해야 한다 . Navigable ( 탐색 용이성 ) 콘텐츠의 인터페이스 요소가 어떤 사용자에게도 조작 가능해야 한다 . Operable ( 조작 용이성 ) 의도한 기능과 정보가 어떤 사용자에게도 지각 가능한 형태로 제시되어야 한다 ( 단 , 말로 절대 표현할 수 없는 경우만 제외하고 ) Perceivable ( 지각 용이성 )
- 26. 4.5. 직접 소스 검사 : 결과 모든 과목 W3C 의 웹 표준을 지키지 않고 Windows 의 Internet Explorer 에 종속된 기술 ( 예 : vbscript, MS DOM, ActiveX 컨트롤 , MS extension of HTML, Windows Media Player 등 ) 만을 제공함 . 플래시 애니메이션 사용시 접근성이 고려되지 않았음 . 절대적 크기의 이미지와 표 등을 사용하여 해상도가 낮은 환경에 대한 고려가 되어있지 않음 . 콘텐츠 강건성 G, I, B 인터페이스 조작에 대한 도움말이 없거나 부족함 . 메뉴명이 직관적으로 이해하기 힘들며 이에 대한 풍선 도움말이 없음 . 이해 용이성 F, C, H 지나친 프레임 사용으로 탐색에 혼란을 주거나 프레임을 지원하지 않는 브라우저에게 접근을 어렵게 함 . 표를 구조화된 정보를 담기 위한 목적이 아닌 레이아웃 목적으로 사용하여 탐색 순서를 정할 수 없고 , 선형화했을 때에 이해하기 힘듬 . 완전한 임의 접근 (random access) 이 어렵고 , 현재의 위치에 대한 정보가 부족함 . 탐색 용이성 G, A 키보드로 접근 가능한 방법이 명시되어 있지 않고 , 하이퍼링크나 폼 등에 tabindex 가 명시되어 있지 않아 텍스트 브라우저에서 조작하기가 어려움 . 빠르게 변하는 플래시 애니메이션에 대해 사용자가 완급을 조절하거나 멈출 수 있는 방법이 없어 인지적인 장애 ( 예 : 학습 장애 , 난독 , 간질 등 ) 나 마우스 조작에 어려움이 있는 장애를 가진 사람들에게 접근이 어려움 . 조작 용이성 B, D, E, F, I 텍스트로 나타내도 충분한 요소들 ( 예 : 긴 내용의 본문 ) 이 완전히 비트맵 그래픽으로 처리되어 있어 화면 음성 변환 장치 (screen reader) 등의 프로그램에서 처리할 방법이 없음 . 문서 인코딩 (MIME charset) 방식을 명시하지 않았거나 부호화된 문자셋 (coded character set) 을 인코딩 방식으로 잘못 표기하여 외국어 OS 에서 문서를 정확히 표시하지 못하는 문제점이 있음 . 제시되는 텍스트의 크기 등 사용자가 스타일을 조정할 수 없음 . 지각 용이성 과목 문제점들 범주
- 27. 5. 결론 (1) 연구의 제한점 직접 장애인이 피험자로 참여하지 않았음 . 최소 요구 조건인 W3C 의 표준 기술 호환성 , 브라우저의 독립성에 분석이 치중 실제 장애인의 접근성을 위해서는 실무 제작시 고려할 요소가 훨씬 많음 . 접근성의 다른 요소 ( 기본 정보통신 환경 , 사용자 에이전트 , 보조 기술 등 ) 는 다루지 않았음 .
- 28. 5. 결론 (2) 국내 교육용 콘텐츠의 접근성 실태 대부분 접근성을 거의 고려하지 않았음 . 대부분 W3C 의 표준을 지키지 않았음 . 대부분 특정 플랫폼 , 특정 브라우저 , 특정 환경에 종속적으로 제작됨 .
- 29. 5. 결론 (2) 개선 방향 제언 교육용 콘텐츠의 품질 기준의 한 요소로 접근성을 고려해야 함 . 정부 기관에 납품 / 조달하는 교육용 콘텐츠 , 웹 사이트 , 정보통신 기술과 제품에 대해서는 지침 또는 관련 법규를 통해 접근성이 입찰의 중요한 변수로 고려되어야 함 . 접근성의 경제적인 가치 , 필요성과 파급 효과에 대한 인식과 홍보 제고가 필요함 .