Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

2,556 views

Published on

한국형 웹 콘텐츠 접근성 2.0에 대한 개괄적인 소개 자료입니다.

  • Be the first to comment

웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

  1. 1. 서울대 중앙전산원 강의[2011. 1. 18) 강의[2011. 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 지침 2.0을 중심으로 한국정보화진흥원 현 준 호 책임 (jhyun22@nia.or.kr, Twitter : @jhyun22 http://jhyun.wordpress.com/) 현 준 호
  2. 2. 1. 들어가기 축구 ≒ 웹 축구를 잘 하려면, 기본은? 체력이 좋아야지요!! 1 현 준 호
  3. 3. 1. 들어가기 축구 ≒ 웹좋은 웹이 될려면, 기본은 ?표준과 접근성을 지켜야지요!! 2 현 준 호
  4. 4. 1. 들어가기 축구 ≒ 웹 축구에서는 체력이,웹에서는 표준 및 접근성 준수 없이는 최고의 선수최고의 웹 사이트가 될 수는 없지요!! 3 현 준 호
  5. 5. 1. 들어가기물리적 공간(지하철)ü 지하철에서 언제부터 휠체어 장애인을 보았는가?가상의 공간(IT)ü 우리의 잘못된 질문 : 정보시스템과 웹 및 IT를 장애인이 이용하는가? 몇 명이 장애인, 어르신 고객이에요 ? 우리 시스템은 장애인, 어르신이 사용하지 않아요, 그런데도 접근성을 지켜야 하나요 ?물리적 공간(지하철)처럼, 편의시설(접근성)이 갖추어져야지만장애인, 어르신 등이 IT를 이용할 수 있음 4 현 준 호
  6. 6. 2. 접근성이란? 접근성이란? 누구를 위한 웹? My Web ( ? ) Way Not Developer & Operators, But My 5 현 준 호
  7. 7. 1. 들어가기 My Web My Wayhttp://www.bbc.co.uk/accessibility/ 6 현 준 호
  8. 8. 2. 접근성이란? 접근성이란? 누구를 위한 웹? 보다 Web For All 보다많은 사람 많은 환경 출처 : http://www.w3.org/Consortium/mission 7 현 준 호
  9. 9. 2. 접근성이란? 접근성이란? 장애인 전 세계 인구의 10% (6억 5천만명) 미국 인구 중 5천 4백만명, 19% 우리나라 약 2백 4십만명 어떤 계층일까요?? ( 출처 : UN ENABLE Websites, http://www.un.org/disabilities/default.asp?id=18 ) ( 출처 : 미국 통계국,http://www.census.gov/newsroom/releases/archives/facts_for_features_special_editions/cb10-ff13.html ) 8 현 준 호
  10. 10. 1. 들어가기출처 : 한국장애인고용공단,https://www.kead.or.kr/view/info_center/info_center02_03_01.jsp?gotopage=2&gubn=001&change= 장애인은 단지 비장애인과 의사소통, 컴퓨터, 인터넷, …을 다른 방법으로 하는 사람이다 !!! 장애를 느끼지 않는 IT 환경구축 필요 9 현 준 호
  11. 11. 2. 접근성이란? 접근성이란? 보조기기 보조기기(Assistive Technology)란?정보통신 보조기기 체험관: http://at4u.or.kr/ http://abledata.com/ 10 현 준 호
  12. 12. 2. 접근성이란? 접근성이란? 경제적 효과장애인/노인의 웹 접근성 개선을 위한 추가비용(1유로 1,800원 기준) 이용도 2% 5% 15% 30% 287,079,790유로 250,694,590유로 129,410,592유로 -52,515,405유로 5% (5,167억원) (4,512억원) (2,329억원) (-945억원) 손실 598,416,379유로 562,031,180유로 440,747,181유로 258,821,184유로 10% (1조 771억원) (1조 116억원) (7,933억원) (4,658억원) 1,221,089,558유로 1,184,704,358유로 1,063,420,360유로 881,494,363유로 20% (2조 1,979억원) (2조 1,324억원) (1조 9,141억원) (1조 5,866억원)※ 출처 : 유럽연합(Commission of the European Communities), Accessibility of ICT products and services to disabled and older people, 2008. 11※ 주 : 전자정부 사이트를 장애인/노인 등이 연 2회 이용한다고 가정함http://ec.europa.eu/information_society/newsroom/cf/itemdetail.cfm?item_id=4722 11 현 준 호
  13. 13. 2. 접근성이란? 접근성이란? Components of Web Accessibility (WAI, Wendy) Technical Components Human Components - Technical Specification - Contents producers - Contents Contents - End-users - Tools - Tool developers Evaluation Tools Browsers, media players Authoring Tools Assisitive Technologies Accessibility Guidelines ATAG, WCAG, UAAGDevelopers Technical Spec Users (HTML, XML, CSS, SVG, SMIL, etc..) 출처 : http://www.w3.org/WAI/EO/Drafts/slides/components.html 12 현 준 호
  14. 14. 2. 접근성이란? 접근성이란? 핵심 개념 Equivalent동등한 접근 보장 필요 (동일한 접근은 아님)보는 방법이 다른 사람 및 환경 ­ 시각장애인 등듣는 방법이 다른 사람 및 환경­ 청각장애인 등입력 방법이 다른 사람 및 환경 ­ 지체장애인 등 13 현 준 호
  15. 15. 2. 접근성이란? 접근성이란? 관련 동영상http://www.wah.or.kr/Accessibility/publicity.asp http://www.wah.or.kr/Accessibility/blind1.asp http://www.wah.or.kr/campaign/contents/mov ie.asp 동 영 상 14 현 준 호
  16. 16. 3. 한국형 웹 콘텐츠 접근성 지침 2.0표준명 및 제정일자 : 한국형 웹 콘텐츠 접근성 지침 2.0(KICS.OT-10.0003/R1, 2010년 12월 31일)구성 : 4개 원칙, 13개 지침, 22개 검사항목- 원칙(4개) : 인식의 용이성(Perceivable), 운용의 용이성 (Operable), 이해의 용이성(Understandable), 견고성(Robust)- 지침(13개) : 대체 텍스트, 멀티미디어 대체 수단 등 13개- 검사항목(22개) : 적절한 대체 텍스트 제공 등 총 22개 15 현 준 호
  17. 17. 3. 한국형 웹 콘텐츠 접근성 지침 2.0 – 1.0과 비교 1.0과 (신기술 반영) 기존 HTML 중심에서 Flex, Sliverlight 등 웹 개발 관련 신기술 추가 (국제표준 적용) W3C WCAG 2.0 국제표준을 국내실정에 맞게 선별적으로 적용(중요도 1항목은 모두 적용, 중요도 2항목 일부 적용)※ WCAG(Web Content Accessibility Guidelines) 2.0은 12개 지침으로 구성, 검사항목 중요도에 따라 중요도 1, 2, 3으로 구분. 미국과 호주 등에서는 중요도 2까지 준수 의무화 (적용 및 이해도 향상) 지침별 검사항목(22개) 및 실 적용사례를 구체적으로 제공(코딩방법 등) (기존 지침과의 연계) 1.0과 동일한 원칙을 활용하였으며, 최대한 기존의 표준과의 연계성을 높이도록 구성하여 혼란을 최소화 16 현 준 호
  18. 18. 3. 한국형 웹 콘텐츠 접근성 지침 2.0 – 1.0과 비교 1.0과 웹 접근성 2.0 개요 : POUR 인식의 용이성(Perceivable) 운용의 용이성(Operable) 대체 텍스트 키보드 이용보장 캡션 및 대체 수단 충분한 시간 보장 명료성(색상대비, 배경음 등) 깜빡임 배제 검색 가능성 제고(skip, page title 등)이해의 용이성(Understandable) 견고성(Robust) 가독성 및 이해 용이성 현재와 미래 예측가능성 기기에서의 오류 예방 및 정정 호환성 최대화 17 현 준 호
  19. 19. 4. 인식의 용이성 지침(3개) 검사항목(6개)1.1(대체 텍스트) 텍스트 아닌 콘텐츠에 1.1.1(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의는 대체 텍스트를 제공해야 한다. 미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.1.2(멀티미디어 대체 수단) 동영상, 음 1.2.1(자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수성 등 멀티미디어 콘텐츠를 이해할 수 있 화를 제공해야 한다.도록 대체 수단을 제공해야 한다. 1.3.1(색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인 식될 수 있어야 한다. 1.3.2(명확한 지시사항 제공) 지시사항은 모양, 크기, 위치,1.3(명료성) 콘텐츠는 명확하게 전달되 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.어야 한다. 1.3.3(텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간 의 명도 대비는 4.5대 1 이상이어야 한다. 1.3.4(배경음 사용 금지) 자동으로 재생되는 배경음을 사용하 지 않아야 한다. 18 현 준 호
  20. 20. 4. 인식의 용이성 – 1.1 대체 텍스트점검항목 (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수1.1.1 있도록 대체 텍스트를 제공해야 한다. 시각장애인, 검색엔진 등 텍스트 아닌 콘텐츠(이미지 등)을 볼 수 없을 때 !! 19 현 준 호
  21. 21. 4. 인식의 용이성 – 1.1 대체 텍스트회원가입 등에 캡차(CAPTCHA) 등 흘려쓴 글씨 ?뉴스레터(이메일 등)의 접근성 제고 방안 ? 20 현 준 호
  22. 22. 4. 인식의 용이성 – 1.2 멀티미디어 콘텐츠점검항목 (자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.1.2.1 청각장애인 등 음성을 들을 수 없을 때 (시끄러운 환경 및 조용한 환경 !) 위반사례 : 동등하지 않은 요약정보 제공준수사례 : 동등한 자막 제공 준수사례 : 동등한 자막 및 수화 제공 http://www.google.com/support준수사례 : 동등한 원고 제공 /youtube/bin/answer.py?hl=kr&a nswer=100079 유투브 사례 : UCC 캡션 자막 서비스 안내 21 현 준 호
  23. 23. 4. 인식의 용이성 – 1.3 명료성점검항목 (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.1.3.1 22 현 준 호
  24. 24. 4. 인식의 용이성 – 1.3 명료성점검항목 (명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관 1.3.2 계없이 인식될 수 있어야 한다. 시각장애인, 청각장애인 등은 어떻게 지시사항을 인식할 수 있을까 ?- 작성한 서식을 제출하려면 빨간색 버튼을 누르시오.- 음성으로만) 시험 종료 1분남았습니다.- 다음 페이지로 이동하려면 오른쪽버튼, 이전 페이지로 이동하려면왼쪽 버튼을 누르시오 23 현 준 호
  25. 25. 4. 인식의 용이성 – 1.3 명료성 점검항목 (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 1.3.3 이상이어야 한다. http://www.fujitsu.com/downloads/US/GND/web- accessibility-guide.pdf http://www.snook.ca/tech nical/colour_contrast/colo ur.html 본문 콘텐츠로 한정 - 단순히 장식 목적으로만 사용한 텍스트, - 로고 또는 상호와 같은 텍스트 이미지,http://juicystudio.com/services/luminosit - 마우스나 키보드를 활용하여 초점을 받았을 때ycontrastratio.php 색이나 명도 대비가 변화하는 콘텐츠, 등 제외 24 현 준 호
  26. 26. 4. 인식의 용이성 – 1.3 명료성점검항목 (배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.1.3.4 25 현 준 호
  27. 27. 4. 운용의 용이성 지침(4개) 검사항목(8개) 2.1.1(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할2.1(키보드 접근성) 콘텐츠는 키보드로 수 있어야 한다.접근할 수 있어야 한다. 2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다. 2.2.1(응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을2.2(충분한 시간 제공) 콘텐츠를 읽고 조절할 수 있어야 한다.사용하는 데 충분한 시간을 제공해야 2.2.2(정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을한다. 제어할 수 있어야 한다.2.3(광과민성 발작 예방) 광과민성 발 2.3.1(깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡작을 일으킬 수 있는 콘텐츠를 제공하 이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.지 않아야 한다. 2.4.1(반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.2.4(쉬운 내비게이션) 콘텐츠는 쉽게 2.4.2(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제내비게이션할 수 있어야 한다. 목을 제공해야 한다. 2.4.3(적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해 할 수 있도록 제공해야 한다. 26 현 준 호
  28. 28. 4. 운용의 용이성 – 2.1 키보드 접근성점검항목 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.2.1.1 주소창에서 부터 Tab키와 Shift+Tab키를 이용해 볼 것 ! http://ckedi tor.com/ 27 현 준 호
  29. 29. 4. 운용의 용이성 ­ 2.1 키보드 접근성점검항목 (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구2.1.2 별할 수 있어야 한다. 키보드 초점은 논리적으로 제공되어야 함 IE 기본(테두리), Flash 기본(노란색) 등을 숨기지 말고 시각적 구분이 가능하도록! 28 현 준 호
  30. 30. 4. 운용의 용이성 ­ 2.2 충분한 시간 제공점검항목 (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.2.2.1 29 현 준 호
  31. 31. 4. 운용의 용이성 ­ 2.2 충분한 시간 제공점검항목 (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.2.2.2 30 현 준 호
  32. 32. 4. 운용의 용이성 ­ 2.3 광과민성 발작 예방점검항목 (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜박이거나 번쩍이는2.3.1 콘텐츠를 제공하지 않아야 한다. 31 현 준 호
  33. 33. 4. 운용의 용이성 ­ 2.4 쉬운 네비게이션점검항목 (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.2.4.1 32 현 준 호
  34. 34. 4. 운용의 용이성 ­ 2.4 쉬운 네비게이션점검항목 (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. 2.4.2로그인 프레임 일정 프레임광고 프레임 광고 프레임 33 현 준 호
  35. 35. 4. 운용의 용이성 ­ 2.4 쉬운 네비게이션점검항목 (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공2.4.3 해야 한다. 34 현 준 호
  36. 36. 4. 이해의 용이성 지침(4개) 검사항목(6개)3.1(가독성) 콘텐츠는 읽고 이해 3.1.1(기본 언어 표시) 주로 사용하는 언어를 명시해야하기 쉬워야 한다. 한다.3.2(예측 가능성) 콘텐츠의 기능 3.2.1(사용자 요구에 따른 실행) 사용자가 의도하지 않과 실행결과는 예측 가능해야 한다.은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다. 3.3.1(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공3.3(콘텐츠의 논리성) 콘텐츠는 해야 한다.논리적으로 구성해야 한다. 3.3.2(표의 구성) 표는 이해하기 쉽게 구성해야 한다. 3.4.1(레이블 제공) 입력 서식에는 대응하는 레이블을3.4(입력 도움) 입력 오류를 방지 제공해야 한다.하거나 정정할 수 있어야 한다. 3.4.2(오류 정정) 입력 오류를 정정할 수 있는 방법을 제 공해야 한다. 35 현 준 호
  37. 37. 4. 이해의 용이성 – 3.1 가독성점검항목 (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다. 3.1.1 언어 언어 코드 언어 언어 코드 중국어(Chinese) zh 일본어(Japanese) ja 독일어(German) de 한국어(Korean) ko 영어(English) en 러시아어(Russian) ru 불어(French) fr 스페인어(Spanish) es※ 출처 : 공식 언어 코드(ISO 630) 목록http://www.loc.gov/standards/iso639-2/php/code_list.php 36 현 준 호
  38. 38. 4. 이해의 용이성 ­ 3.2 예측 가능성점검항목 (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점 변화3.2.1 등)은 실행되지 않아야 한다. 37 현 준 호
  39. 39. 4. 이해의 용이성 ­ 3.3 콘텐츠의 논리성점검항목 (콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다. 3.3.1 < 일반 웹 사이트 > < 표현 제거시 웹 사이트> 1 위반사례 : 논리적 구성 위반사례2 3 4 38 현 준 호
  40. 40. 4. 이해의 용이성 ­ 3.3 콘텐츠의 논리성점검항목 (표의 구성) 표는 이해하기 쉽게 구성해야 한다.3.3.2 제목 영역 : <th> 내용 영역 : <td> <table class="data" summary=“부산지역의 3일간 의 일기예보로, 날씨와 예상기온과 강수확률 정보를 제공"> <caption>부산지역의 3일간 일기예보</caption> 39 현 준 호
  41. 41. 4. 이해의 용이성 ­ 3.4 입력도움점검항목 (레이블 제공) 입력 서식에는 대응하는 레이블을 제공해야 한다.3.4.1 40 현 준 호
  42. 42. 4. 이해의 용이성 ­ 3.4 입력도움점검항목 (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.3.4.2 41 현 준 호
  43. 43. 4. 견고성 지침(2개) 검사항목(2개)4.1(문법 준수) 웹 콘텐츠는 마크 4.1.1(마크업 오류 방지) 마크업 언어의 요소는 열고업 언어의 문법을 준수해야 한다. 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.4.2(웹 애플리케이션 접근성) 웹 4.2.1(웹 애플리케이션 접근성 준수) 콘텐츠에 포함된애플리케이션은 접근성이 있어야 웹 애플리케이션은 접근성이 있어야 한다.한다. 42 현 준 호
  44. 44. 4. 견고성 – 4.1 문법 준수점검항목 ((마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언4.1.1 에 오류가 없어야 한다. <p 요소를 여는 태그의 닫음 표시가 불명확한 문단입니다.</p> (X) <p>요소를 여는 태그의 닫음 표시가 불명확한 문단입니다.</p> (O) <p>중첩관계가 <strong>명확해야 한다.</p></strong> (X) <p>중첩관계가 <strong>명확해야 한다.</strong></p> (O) http://validator.w3.org/ 43 현 준 호
  45. 45. 4. 견고성 ­ 4.2 웹 애플리케이션 접근성 점검항목 ((웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 4.2.1 접근성이 있어야 한다. Flex accessibility(http://www.adobe.com/accessibility/products/flex/) UI Automation and Microsoft Active Accessibility(http://msdn.microsoft.com/en-us/library/ms788733.aspx ) Silverlight Accessibility Overview(http://msdn.microsoft.com/en-us/library/cc707824(VS.95).aspx) Java[tm] Accessibility Helper Early Access v0.8(http://java.sun.com/developer/earlyAccess/jaccesshelper/) Accessible Explorer (http://msdn.microsoft.com/en-us/library/ms696082.aspx) 44 현 준 호
  46. 46. 5. 결 론 One Web !! 별도의 시각장애인 전용 웹 사이트 45 현 준 호
  47. 47. 5. 결 론 Early Stage 기획단계에서부터 접근성 고려 필요!! 46 현 준 호
  48. 48. 5. 결 론 잊지 말자, 3개 형용사 Back to the Basic 장애인, 노인 등 모든 사람이 (Possible)Universal Design Accessibility 손쉽게 이용하며 (Easy) http://www.useit Usability .com/alertbox/원하는 것을 빨리 (Fast) 할 수 있는 웹 사이트로 Customer Satisfaction 47 현 준 호
  49. 49. 5. 결 론ü Web(IT) for everyoneü Cooperation between developer and users 같이(Together) 접근성 ≒ [ 가치 ] 가치(Value)ü Think Different à Innovation à Making $$$$ü Corporate (Individual) Social Responsibilityü Machine (Technology) helps you 48 현 준 호
  50. 50. 참고 개발자 아카이브 : 웹 접근성 구축 사례 (항목별 우수 및 미준수 사례 제공) 자문서비스 : 온라인으로 웹 접근성에 대한 궁금증을 해결할 수 있는 서비스웹 접근성 연구소 사이트 : www.wah.or.kr 49 현 준 호
  51. 51. 감사합니다 정보접근지원부 현 준 호 책임(jhyun22@nia.or.kr, 02-3660-2577) http://jhyun.wordpress.com/ 현 준 호

×