성균관대학교시스템경영공학과 (6.2) 웹접근성이해및지침소개 한국정보화진흥원 웹접근성지원부현준호

Size: px

Start display at page:

Download "성균관대학교시스템경영공학과 (6.2) 웹접근성이해및지침소개 한국정보화진흥원 웹접근성지원부현준호"

원 기
5 years ago
Views:

1 성균관대학교시스템경영공학과 (6.2) 웹접근성이해및지침소개 한국정보화진흥원 웹접근성지원부 Jhyun22@kado.or.kr

2 1. 들어가기 -1 기술이사람을도와준다!! 기술이사람을 바보로만든다!! - 리모트콘트롤, 휴대폰, 웹사이트를 부모님이, 아이들이, 선생님이어떻게이용하십니까? 1

3 1. 들어가기 -2 맹자 牛山之木 ( 우산지목 ) 성선설 우산의나무들은일찍이아름다웠다. 하지만, 사람들은우산에는나무가없다라고믿음 Tim Berners-Lee ( 웹의창시자 ) "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." u 하지만, 우리의웹은현재어떠한가? 2

4 1. 들어가기 웹접근성제고 = 인터넷상의경사로를만들어주자 다리가아플때 축구, 등산을하고난뒤 무거운짐을들고다닐때등 키보드를활용하지못할때 저사양컴퓨터, 모뎀등통신환경이좋지않을때 시끄러운환경에놓여일을때동영상보기등 웹접근성소개동영상 : 3

5 2. 인터넷웹콘텐츠접근성지침 인터넷웹콘텐츠접근성지침개요 u개발자 : 김석일교수 ( 충북대학교 ) 외 4인 & KADO u 참고지침 : 미국재활법 508조기준 & W3C WAI WCAG 1.0 TTA 단체표준으로상정하여, 2004년 12월표준채택, 2005년 12월국가표준 u 구성 : 4개지침 14개세부항목 - 인식의용이성 (Perceivable), 운용의용이성 (Operable), 이해의용이성 (Understandable), 기술적진보성 (Robust) 웹접근성향상을위한국가표준기술가이드라인 u 개발 : 2008 년 9 월 ~ 2009 년 3 월 (3 월 18 일발표 ) u 구성 : 이미지에대한대체텍스트제공등 18 개로구성 4

6 체크리스트 1 (1) 이미지의의미나목적을이해할수있도록적절한대체텍스트를제공해야한다. 의미가있는이미지의경우대체텍스트를의미나기능이동일하게제공 의미가없는이미지의경우대체텍스트를공백 (alt="") 으로제공 위반사례 5

7 부적절한사례 Recommendation 음성으로서비스제공 6

준수방안 1. 웹접근성자동평가도구를통한점검 (http://www.iabf.or.

8 준수방안 1. 웹접근성자동평가도구를통한점검 ( 다운로드 ) - KADO-WAH 이용 (100% 달성 ) 7

9 2. 수동평가 : 적절한대체텍스트제공여부 - 웹개발기관이공공기관의담당자를무시하고대체텍스트를단순히제공하는수준에머무르는경우가많음 ( 단순파일명제공, ~ 하십시요 등의경어체사용등의사례다수발생 ) - 이에소스분석, 브라우저, Firefox Web Developer Extension을통한수동점검필요 8

10 u 명쾌하고짧은대체텍스트를제공하자!! - 링크, 여기, 클릭 등의단어는사용하지말자 - ~ 하십시요, ~ 됩니다 등친절한 (?) 설명을자제하고짧게 - 사진 1, 사진 2, 사진 3 등무의미한대체텍스트를지양 - 파일명을대체텍스트로제공하지마라!! u 신규 & 이용자가올리는이미지에대한대체텍스트제공방안마련 u 보안, 메일링서비스, 회원가입인증등부가서비스에도대체텍스트제공 9

11 체크리스트 2 배경이미지가의미를갖는경우, 배경이미지의의미를이해 할수있도록대체콘텐츠를제공해야한다. 의미가있는이미지는배경이미지로사용하지않는것이바람직함 배경이미지활용 10

배경그림보기 선택 2) 정보를이미지만 으로제공하는 지의여부평가 1 스타일을제거하여배경이미지의대체정보를제공하는지여부를평가

12 준수방안 구분 평가방법 1 브라우저에서전체콘텐츠설정해보기 : Ctrl + A 1) 배경이미지 찾기 ( 이미지중에서선택되지않는영역찾기 ) 2 전체콘텐츠에서설정되지않는이미지를찾아이미지영역에서 - Firefox 브라우저오른쪽마우스클릭 배경그림보기 선택 2) 정보를이미지만 으로제공하는 지의여부평가 1 스타일을제거하여배경이미지의대체정보를제공하는지여부를평가 (Firefox 브라우저메뉴 보기 -> 문서스타일 --> 스타일제거 선택 ) --> 스타일제거후, 정보가동일하면준수 --> 스타일제거후, 정보가동일하지않으면, 미준수 11

13 동영상, 음성등멀티미디어콘텐츠를이해할수있도록대체체크리스트수단 ( 자막, 원고또는수화 ) 를제공해야한다. 3 * 실시간방송이라도대체수단을제공하여야하나, 예외로인정할수있음 위반사례 12

14 Best Practices

15 준수방안 동영상에대한자막, 원고또는수화제공여부점검 * UCC 에대한유투브사례 ( 14

16 체크리스트색상을배제하여도원하는내용을전달할수있도록, 색상이 4 외에도명암이나패턴으로콘텐츠구분이가능해야한다. 사례 1 : ** 청홈페이지 ( 색깔만으로정보제공 ) 사례 2 : Jim Thatcher 홈페이지 ( 색깔과특수문자 (*) 동시제공 ) X 15

17 부적절한사례 16

준수방안 후지쯔 Color Doctor ( 색맹시험 ) http://design.fujitsu.

18 준수방안 후지쯔 Color Doctor ( 색맹시험 ) Vischeck 흑백프린터로출력할경우콘텐츠인식에문제가없는지? 17

19 서버측이미지맵을제공할경우, 해당내용및기능을사용할체크리스트수있는대체콘텐츠를제공해야한다. 5 * 지리정보시스템 (GIS) 은예외로인정할수있음 18

20 준수방안 1) 가능한서버측이미지맵을사용하지말고클라이언트측이미지맵사용 2) 서버측이미지맵사용여부점검 : 페이지소스에서 ismap 사용여부를점검 3) 서버측이미지맵을사용할경우 - 키보드로이용이가능한대체수단이있는지점검 19

21 체크리스트프레임을제공할경우, 프레임의내용을이해할수있도록적절 6 한제목 (title 속성 ) 을제공해야한다. 20

22 준수방안 1) 웹접근성자동평가도구를통한점검 - KADO-WAH 이용 (100% 달성 ) 2) 적절한프레임제목을부여하였는지평가할것!! - 개발사에서자동평가도구만을통과하도록많이제작함 - 페이지소스에서 <frmae> 또는 <iframe> 등을찾아, 프레임에적합한 <title> 을제공하는지파악할것!! 3) 프레임은한페이지에서가급적최소한으로사용하는것이바람직 21

23 깜빡이는콘텐츠를제공할경우, 사전에경고하고깜빡임을체크리스트회피할수있는수단을제공해야한다. 7 깜박임기준 : 초당 3~49번을깜박이는콘텐츠 22

24 체크리스트 8 모든기능을키보드로이용할수있어야한다. 23

25 준수방안 o tab 키를이용하여모든기능에접근할수있는지를파악!! - <shift> + <tab> 로거꾸로이동할수있는지를파악!! 부적절한사례 24

26 체크리스트반복되는링크를건너뛸수있도록건너뛰기링크 9 (skip navigation) 를제공해야한다. 웹콘텐츠는반복적인네비게이션링크를뛰어넘어페이지의핵심부문으로직접이동할수있도록구성하여야한다 웹콘텐츠상에반복적네비게이션링크 사례 1 : CNN 홈페이지 ( 뉴스로바로이동 ) 개체가포함되어있으며, 이링크객체가콘텐츠의핵심부문보다먼저읽어주도록구성된경우에는이들링크들의읽기를생략하고직접콘텐츠의메인부문으로직접이동할수있도록링크를제공 25

27 준수방안 26

28 체크리스트 시간제한이있는콘텐츠를제공할경우, 시간제어기능을 10 제공해야한다. 예외사항 : 경매, 실시간게임등과같이시간제한이필수적인콘텐츠 27

29 체크리스트 새창 ( 팝업창포함 ) 을제공할경우, 사용자에게사전에알려야 11 한다. 28

30 체크리스트데이터테이블을제공할경우, 테이블의내용을이해할수있는 12 정보 ( 제목, 요약정보등 ) 를제공해야한다. <table class="data" summary= 부산지역의 3 일간의일기예보로, 날씨와예상기온과 강수확률정보를제공 "> <caption> 부산지역의 3 일간일기예보 </caption> B A 29

31 체크리스트 13 데이터테이블을제공할경우, 제목셀과내용셀을구분할수 있어야한다. 제목영역 : <th> <table> <thead> <tr> <th> 번호 </th> <th> 제목 </th> <th> 파일 </th> <th> 작성자 </th> <th> 작성일 </th> <th> 조회 </th> 내용영역 : <td> 30

32 체크리스트해당페이지를잘이해할수있도록페이지제목 (<title>) 을제공 14 해야한다. 준수사례 31

33 체크리스트콘텐츠는논리적인순서로구성되어야한다. 15 평가사항 : 콘텐츠간의배치순서, Tab 이동의논리적순서, 서식 (form) 간의 이동순서

34 체크리스트온라인서식을제공할경우, 레이블 (<label>) 을제공해야한다

35 애플릿, 플러그인 (ActiveX, 플래시 ) 등부가애플리케이션이제공체크리스트하는경우, 해당애플리케이션이자체적인접근성을준수하거나 17 또는사용자가대체콘텐츠를선택하여이용할수있어야한다. 34

36 체크리스트마크업언어로구현할수있는기능 ( 링크, 서식, 버튼, 페이지 18 제목 ) 을자바스크립트로만구현하지말아야한다 Firefox Web Developer extension u Disable 메뉴 : Disable JavaScript 를설정 à 신기술사용 ( 지침 13 번 ) 점검가능 35

37 4. 웹접근성평가방법 u 평가전략 1 : IE 외의브라우저를다운로드받자!! 한국모질라프로젝트 오페라브라우저 36

4. 웹접근성평가방법 u 평가전략 2 : 인터넷웹콘텐츠접근성지침을알아보자!! - 지침에대한대략적인이해 ( 정보통신접근성향상표준화포럼 (http://www.iabf.or.kr ) 웹사이트자료실에서다운로드가능 http://www.iabf.or.kr/pds/walvi ew.asp?

38 4. 웹접근성평가방법 u 평가전략 2 : 인터넷웹콘텐츠접근성지침을알아보자!! - 지침에대한대략적인이해 ( 정보통신접근성향상표준화포럼 ( ) 웹사이트자료실에서다운로드가능 ew.asp?board=wal&pg=3&bseq =2230&md=&sf=&ss= /StandardView.asp?boar d=relatstand&pg=2&bseq =632&md=&sf=&ss= View.asp?board=notice&bs eq=

39 4. 웹접근성평가방법 u 평가전략 3 : 자동평가도구를활용하자!! 정보통신접근성향상표준화포럼 Firefox Web Developer extension 38

40 4. 웹접근성평가방법 Firefox Web Developer extension u Disable 메뉴 : Disable JavaScript 를설정 à 신기술사용 ( 지침 13 번 ) 점검가능 u CSS 메뉴 : Disable Style à All style 지정 -> 페이지의논리적구성 ( 지침 11) 점검가능 u Image 메뉴 : Display alt attributes, Outline image à images without alt attributes à 대체텍스트제공 ( 지침 1) 여부점검가능 u Tools 메뉴 : Validate HTML, Section 508, WAI à 웹접근성관련표준준수여부자동평가 39

41 4. 웹접근성평가방법 q 웹접근성 Toolbar 이용 o AIS : o WAVE : 40

42 4. 웹접근성평가방법 q 기타웹접근성평가프로그램 - 현재한국어제품으로는한국정보문화진흥원에서제공하는 KADO- WAH, A-Prompt 한국어버전, 우리인터넷 Coolcheck 등이있음 * 기타해외관련프로그램은 참고 41

43 5. 결론 Back to the Basic 장애인, 노인등모든사람이 (Possible) Universal Design Accessibility 손쉽게이용하며 (Easy) Usability 원하는것을빨리 (Fast) 할수있는웹사이트로 Customer Satisfaction 42

44 5. 결론 ü 장애인, 노인등도우리사회의구성원으로생각하는인식의 전환이필요 ü 기술이사람을편리하게도와주는세상만들기! - 사람이기술에적응하는일이더이상발생하지않도록!! ü 장애인, 노인등은배려및시혜의대상 ( 생색내기 ) 이아니라 à 새로운고객으로인식을전환할필요!! 3E( 모두가손쉽게원하는것을얻을수있는 )-Based IT Everyone Easy of use Effectiveness 43

45 5. 결론 묻자, 묻자, 묻자!! (Just Ask) & 1명, 2명, 4명, 8명...( 다단계 ) (Amway s way) 함께해요!! If I can get another 10 engineers motivated to work on accessibility, he said, it is a huge win. - Google T.V Raman, New York Times( ) 44

46 5. 결론 CSR (Corporate Social Responsibility) u IT 회사의바람직한사회공헌? à자사의제품과서비스를접근성있게제공 u IT 개발자의멋있는사회공헌? à 접근성표준을준수한제품과서비스개발 45

47 5. 결론 My Web My Way 46

48 6. 결론 ü Web(IT) for everyone ü Cooperation between developer and users 같이 (Together) 접근성 [ 가치 ] 가치 (Value) ü Think Different à Innovation à Making $$$$ ü Corporate (Individual) Social Responsibility ü Machine (Technology) helps you 47

49 참고 웹접근성연구소사이트개편 : ü 웹접근성자문 : Q&A ( 웹접근성관련어떤질문이라도가능 ) ü 웹접근성품질마크소개 ( 인증 ) ( 품질마크기준등제공 ) ü 제작기법소개등 48

50 감사합니다 문의처 : ( ) jhyun22@kado.or.kr

1. 들어가기 축구 웹 축구를잘하려면, 기본은? 체력이좋아야지요!! 1

HTML 5 오픈컨퍼런스 (2010. 7. 2) 웹콘텐츠접근성지침 2.0 개요 한국정보화진흥원책임 (jhyun22@nia.or.kr, Twitter : @jhyun22 http://jhyun.wordpress.com/) 1. 들어가기 축구 웹 축구를잘하려면, 기본은? 체력이좋아야지요!! 1 1. 들어가기 축구 웹 좋은웹이될려면, 기본은? 표준과접근성을지켜야지요!!