목 차 Ⅰ. 웹접근성의이해 11 Ⅱ. 웹접근성을고려한콘텐츠제작기법 29 원칙 1. 인식의용이성 (Perceivable): 모든콘텐츠는사용자가인식할수있어야 한다. 29 검사항목 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나 용도를이해할수있도록대체텍스트를제

- 한국형웹콘텐츠접근성지침 2.0(KICS.OT-10.0003/R1, 2010 년 12 월 31 일제정 ) 을기준으로 연구책임자 최두진단장 한국정보화진흥원정보사회통합지원단 공동연구책임자 김석일교수 충북대학교전기전자및컴퓨터공학부 참여연구원 홍경순부장 한국정보화진흥원정보접근지원부 노석준교수 성신여자대학교교육학과 윤좌진과장 신승식차장 현대자동차 신현석과장 현준호책임 한국정보화진흥원정보접근지원부 구경모주임 한국정보화진흥원정보접근지원부

목 차 Ⅰ. 웹접근성의이해 11 Ⅱ. 웹접근성을고려한콘텐츠제작기법 29 원칙 1. 인식의용이성 (Perceivable): 모든콘텐츠는사용자가인식할수있어야 한다. 29 검사항목 1.1.1 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나 용도를이해할수있도록대체텍스트를제공해야한다. 31 검사항목 1.2.1 ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고또는수화를 제공해야한다. 55 검사항목 1.3.1 ( 색에무관한콘텐츠인식 ) 콘텐츠는색에관계없이인식될수 있어야한다. 62 검사항목 1.3.2 ( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없이인식될수있어야한다. 70 검사항목 1.3.3 ( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠와배경간의명도 대비는 4.5 대 1 이상이어야한다. 77 검사항목 1.3.4 ( 배경음사용금지 ) 자동으로재생되는배경음을사용하지않아야 한다. 83 원칙 2. 운용의용이성 (Operable): 사용자인터페이스구성요소는조작가능하고 내비게이션할수있어야한다. 93 검사항목 2.1.1 ( 키보드사용보장 ) 모든기능은키보드만으로도사용할수있어야 한다. 106 검사항목 2.1.2 ( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며 시각적으로구별할수있어야한다. 115 검사항목 2.2.1 ( 응답시간조절 ) 시간제한이있는콘텐츠는응답시간을조절할수 있어야한다. 115

검사항목 2.2.2 ( 정지기능제공 ) 자동으로변경되는콘텐츠는움직임을제어할수 있어야한다. 119 검사항목 2.3.1 ( 깜빡임과번쩍임사용제한 ) 초당 3~50 회주기로깜빡이거나 번쩍이는콘텐츠를제공하지않아야한다. 123 검사항목 2.4.1 ( 반복영역건너뛰기 ) 콘텐츠의반복되는영역은건너뛸수 있어야한다. 128 검사항목 2.4.2 ( 제목제공 ) 페이지, 프레임, 콘텐츠블록에는적절한제목을 제공해야한다. 133 검사항목 2.4.3 ( 적절한링크텍스트 ) 링크텍스트는용도나목적을이해할수 있도록제공해야한다. 137 원칙 3. 이해의용이성 (Understandable): 콘텐츠는이해할수있어야한다. 140 검사항목 3.1.1 ( 기본언어표시 ) 주로사용하는언어를명시해야한다. 142 검사항목 3.2.1 ( 사용자요구에따른실행 ) 사용자가의도하지않은기능 ( 새창, 초점변화등 ) 은실행되지않아야한다. 145 검사항목 3.3.1 ( 콘텐츠의선형화 ) 콘텐츠는논리적인순서로제공해야한다. 154 검사항목 3.3.2 ( 표의구성 ) 표는이해하기쉽게구성해야한다. 165 검사항목 3.4.1 ( 레이블제공 ) 입력서식에는대응하는레이블을제공해야한다. 174 검사항목 3.4.2 ( 오류정정 ) 입력오류를정정할수있는방법을제공해야한다. 183 원칙 4. 견고성 (Robust): 웹콘텐츠는미래의기술로도접근할수있도록견고하게 만들어야한다. 201 검사항목 4.1.1 ( 마크업오류방지 ) 마크업언어의요소는열고닫음, 중첩관계 및속성선언에오류가없어야한다. 202 검사항목 4.2.1 ( 웹애플리케이션접근성준수 ) 콘텐츠에포함된웹애플리케이션은 접근성이있어야한다. 209

적용기술목차 적용기술 1) 이미지등에대한대체텍스트제공 31 적용기술 2) 버튼이미지에대한대체텍스트제공 32 적용기술 3) Java 애플릿등에대한대체텍스트제공 32 적용기술 4) 이미지맵에대한대체텍스트제공 35 적용기술 5) 텍스트이미지, 그래픽문자등에대한대체텍스트제공 35 적용기술 6) 플래시콘텐츠의대체텍스트제공 37 적용기술 7) 실버라이트콘텐츠의대체텍스트제공 38 적용기술 8) 그래프등에대한설명문제공 39 적용기술 9) 생방송콘텐츠에대한대체텍스트제공 40 적용기술 10) CAPTCHA 에대한대체텍스트제공 41 적용기술 11) 온라인시험등에대한대체텍스트제공 42 적용기술 12) 대체텍스트를빈공간 (alt="") 이나생략해서제공해야하는경우 42 적용기술 13) 열린자막제공 55 적용기술 14) 닫힌자막제공 56 적용기술 15) 대본또는원고제공 56 적용기술 16) 수화제공 57 적용기술 17) 음성이없는동영상의대체수단제공 57

적용기술 18) 색을보완하는텍스트제공 62 적용기술 19) 색을보완하기위하여글자모양을이용하는방법 63 적용기술 20) 색을보완하기위하여무늬또는모양을이용하는방법 64 적용기술 21) 시각정보를이용한지시문의보완 70 적용기술 22) 청각정보를이용한지시문의보완 71 적용기술 23) 배경과텍스트콘텐츠의색지정방법 77 적용기술 24) 배경과텍스트콘텐츠색을기본값으로지정하는방법 78 적용기술 25) 배경과텍스트콘텐츠색을변경하는컨트롤의제공 78 적용기술 26) 재생시간이 3 초미만인배경음의사용 83 적용기술 27) 배경음을정지상태로제공하는방법 84 적용기술 28) 플래시콘텐츠의배경음자동실행방지 84 적용기술 29) 실버라이트콘텐츠의배경음자동실행방지 89 적용기술 30) 키보드와마우스이벤트핸들러제공 95 적용기술 31) 마우스드래그와드롭기능에서의키보드이용보장 97 적용기술 32) 웹애플리케이션제공시키보드이용보장 98 적용기술 33) 실버라이트플러그인의키보드접근제공 101 적용기술 34) 콘텐츠화면순서와동일한키보드내비게이션순서제공 106 적용기술 35) 시각적으로표시가능한초점표시방법 107 적용기술 36) 플래시에서키보드내비게이션순서제공방법 110 적용기술 37) 실버라이트에서키보드내비게이션순서제공방법 111

적용기술 38) 제한시간연장방법제공 115 적용기술 39) 메타태그를이용한페이지재이동방법제공 116 적용기술 40) 변화하는콘텐츠를일시정지시키고, 일시정지된곳으로부터 다시시작할수있도록제공 119 적용기술 41) 전체배너를보여줄수있는방법제공 120 적용기술 42) 전체배너의리스트제공 120 적용기술 43) 사용자요구에의한업데이트방법제공 120 적용기술 44) 깜빡이는시간이 3 초이내인콘텐츠만제공 124 적용기술 45) 경고페이지제공 125 적용기술 46) 반복적인콘텐츠영역의시작부분에건너뛰기링크제공 128 적용기술 47) 건너뛰기링크의화면표시 129 적용기술 48) 웹페이지의제목제공 133 적용기술 49) 콘텐츠블록의제목제공 134 적용기술 50) 프레임제목제공 134 적용기술 51) 링크의목적을설명하는링크텍스트제공 137 적용기술 52) <html> 태그에주사용언어지정 142 적용기술 53) 초점변화에의해맥락을변화시키지말고, 해당인터페이스가 활성화 (activate) 되었을때기능을실행 145 적용기술 54) 명확한서식제출 (submit) 버튼제공 146 적용기술 55) 새창열림을사전에알림 146 적용기술 56) 콘텐츠를의미있는순서로배열 154

적용기술 57) 스타일을이용한글자간격조절 157 적용기술 58) 동적으로생성된요소는그것을유발시킨요소바로뒤에위치 158 적용기술 59) 표제목을 <caption> 으로제공 165 적용기술 60) 표의구조또는내용에대한요약을 summary 로제공 166 적용기술 61) 표의헤더셀과데이터셀의관계정의 167 적용기술 62) 입력서식과 <label> 의명시적관계제공 174 적용기술 63) <label> 을제공할수없는입력서식에 title 제공 176 적용기술 64) 여러개의유사한입력서식묶기 178 적용기술 65) 입력값또는형식에대한예시제공 183 적용기술 66) 서버측오류검사 184 적용기술 67) 클라이언트측적합성검사와본문에오류메시지표시 185 적용기술 68) 오류메시지를스크립트경고창으로제공 194 적용기술 69) 중요한서식제출시재확인절차제공 197 적용기술 70) 여는태그와닫는태그의정확한사용 202 적용기술 71) 속성이름과속성값의정확한사용 203 적용기술 72) 태그의정확한중첩관계 204 적용기술 73) 표준에부합하는태그와속성이름, 값사용 205 적용기술 74) 플러그인플랫폼이제공하는접근성 API 활용 209 적용기술 75) 웹애플리케이션의대체콘텐츠제공 210 적용기술 76) 용도, 목적지, 종류, 사용법에맞는사용자인터페이스요소사용 212

잘못된사례목차 잘못된사례 1) 의미나기능이있는텍스트아닌콘텐츠에빈문자열을대체텍스트로 제공 45 잘못된사례 2) 복잡한정보를하나의이미지로표현하고간단한대체텍스트로만 제공 47 잘못된사례 3) 주기적으로변하는콘텐츠의대체텍스트를변경하지않는경우 48 잘못된사례 4) 의미있는정보를배경이미지로제공 48 잘못된사례 5) 빈칸이미지의대체텍스트가콘텐츠의인식을방해하는경우 50 잘못된사례 6) 도와같은텍스트아닌콘텐츠에대한설명이불충분한경우 51 잘못된사례 7) 중요한정보를색으로만제공하는경우 51 잘못된사례 8) alt 속성이아닌 title 속성을이용하여대체텍스트제공 52 잘못된사례 9) QR 코드에서 URL 을대체텍스트로알려주지않는경우 53 잘못된사례 10) 자막, 원고, 수화중어느한가지도제공하지않는경우 58 잘못된사례 11) 동영상의내용을요약하여제공하는자막또는원고의경우 59 잘못된사례 12) 대체수단에대한또다른대체수단임을알려주지않는경우 60 잘못된사례 13) 열린자막이수화를가리는동영상 61 잘못된사례 14) 동영상의해상도가낮아수화를볼수없는경우 61 잘못된사례 15) CSS 로인하여링크임이구분되지않는경우 65 잘못된사례 16) 색으로만필수입력항목을표시한경우 66

잘못된사례 17) 오류메시지를색으로만구분하도록한경우 67 잘못된사례 18) 그래프를색으로만인식하도록하는경우 68 잘못된사례 19) 일정구분을색으로만구분하도록한경우 69 잘못된사례 20) 방향, 위치정보만을이용하여사용법을알려주도록구현한경우 72 잘못된사례 21) 화면위치만을이용하여객체를지정한경우 74 잘못된사례 22) 버튼모양만을이용하여사용법을알려준경우 74 잘못된사례 23) 특수기호만을이용하여사용법을알려준경우 76 잘못된사례 24) 전경색은기본값으로두고배경색만을지정한경우 79 잘못된사례 25) 배경색은기본값으로두고전경색만을지정하는경우 80 잘못된사례 26) 배경음이 3 초이상지속되도록구현한경우 91 잘못된사례 27) 마우스오버또는키보드초점을받으면자동적으로배경음이 실행되는경우 92 잘못된사례 28) 마우스로만접근가능한이미지버튼을제공하는경우 101 잘못된사례 29) 키보드로접근할수없는플래시메뉴 102 잘못된사례 30) 마우스로만접근할수있는링크를제공한경우 103 잘못된사례 31) 키보드만으로이전입력서식이동이불가능한경우 105 잘못된사례 32) 초점을일부러보이지않도록한경우 112 잘못된사례 33) 키보드이동순서가비논리적인경우 113 잘못된사례 34) 페이지재이동시회피수단을제공하지않는경우 116 잘못된사례 35) 마우스로만정지할수있는콘텐츠를제공한경우 121

잘못된사례 36) 자동으로변하는배너 122 잘못된사례 37) 깜빡이는콘텐츠가많은경우 125 잘못된사례 38) 발작가능성이있는동영상을제공한경우 126 잘못된사례 39) 번쩍임이지속되는영상을제공한경우 127 잘못된사례 40) 건너뛰기링크를제공하지않은경우 130 잘못된사례 41) 건너뛰기링크를과도하게제공한경우 131 잘못된사례 42) 콘텐츠가다른페이지에동일한제목을제공한경우 135 잘못된사례 43) 프레임제목이누락된경우 135 잘못된사례 44) 특수문자 ( ) 기호를제공한경우 136 잘못된사례 45) 목적이나용도를알기어려운링크텍스트 138 잘못된사례 46) 목록선택상자에서초점변경만으로새창이열리는경우 148 잘못된사례 47) 체크상자의선택만으로페이지가다시로드되는경우 150 잘못된사례 48) 텍스트입력서식에값을넣으면자동으로제출되는경우 151 잘못된사례 49) 페이지가로드될때자동으로팝업창이열리도록한경우 152 잘못된사례 50) 상위메뉴와하위메뉴의읽는순서가잘못된경우 160 잘못된사례 51) 배치용표를잘못사용한경우 162 잘못된사례 52) 표를이미지로표현하고, 표제목을제공하지않은경우 170 잘못된사례 53) 이메일입력서식의레이블을잘못제공한경우 180 잘못된사례 54) 오류정보를확인한후오류발생페이지로돌아가지못하는경우 199 잘못된사례 55) 아이디를중복선언한경우 206

잘못된사례 56) 태그의중첩관계에오류가있는경우 207 잘못된사례 57) 이미지링크를자바스크립트로잘못구현한경우 214 잘못된사례 58) 잘못된이미지버튼구현사례 214

Ⅰ. 웹접근성의이해 o 웹접근성의개념 웹접근성이란어떠한사용자 ( 장애인, 고령자포함 ), 어떠한기술환경에서도 전문적인능력없이웹사이트에서제공하는모든정보에비장애인과동등하게 접근 이용할수있도록보장해주는것이라정의할수있다. 월드와이드웹컨소시엄 (W3C: World Wide Web Consortium) 의웹접근성이니셔티브 (WAI: Web Accessibility Initiatives) 에서는웹접근성을 장애인도웹을인식하고, 이해하며, 내비게이션하고, 상호작용할수있으며, 그들이웹에기여할수있는것을의미한다. 웹접근성은또한나이가들어감에따라능력이변화하는고령자를포함한다른사람들도혜택이있다. (http://www.w3.org/wai/intro/accessibility.php) 라고정의하고있다. WAI에서는접근성의 4 가지핵심원리로인식의용이성 (perceivable), 운용의용이성 (operable), 이해의용이성 (understandable), 그리고견고성 (robust) 을제시하고있으며, 장애인뿐만아니라고령자, 비장애인도접근성의대상이됨을함축하고있다. o 웹접근성의필수요소들 웹접근성을준수하려면, 콘텐츠자체의접근성준수만으로는불가능하다. 즉, 콘텐츠뿐만아니라해당콘텐츠의개발자와사용자간에상호작용등을가능하도록하는여러가지필수요소들이함께작동하지않으면불가능하다. 이러한필수요소들을제시하면다음과같다 (http://www.w3.org/wai/intro/components.php). 콘텐츠 (contents): 웹페이지또는웹애플리케이션에있는정보사용자도구 : 웹브라우저 (Web browsers), 미디어플레이어등보조공학 (assistive technology): 스크린리더, 대체키보드, 스위치, 스캔소프트웨어등사용자 (users): 웹을사용하는사람들 ( 장애인등특별한기술을필요로하는사람들포함 ) - 11 -

개발자 (developers): 웹콘텐츠를개발하는사람들 ( 장애를지닌개발자와콘텐츠를제공하는사용자를포함한, 설계자, 코딩하는사람, 저자등포함 ) 저작도구 (authoring tools): 웹사이트를제작하는소프트웨어평가도구 (evaluation tools): 웹접근성평가도구, HTML 유효성검사기 (validators), CSS 유효성검사기등 출처 : http://www.w3.org/wai/intro/components.php [ 그림 1] 웹접근성필수요소들간의관계 o 웹접근성준수의필요성 그렇다면우리는왜웹접근성을준수해야하는가? 우리가웹접근성을준수해 야하는대표적인이유를크게네가지로나누어보면, 다음과같다. 첫째, 장애인, 고령자등을포함한웹이용자의확대를들수있다. 장애인의경우 2000년에는 958천명으로전체인구의 2.01%, 2005년에는 1,777천명으로전체인구의 3.64% 를차지하였으나, 2010년에는 2,517천명으로전체인구의 5.18% 를차지하고있는것으로나타났고, 고령자의경우 2000년에는 3,395천명으로전체인구의 7.11%, 2005년에는 4,366천명으로전체인구의 8.95% 를차지하였으나, 2010년에는 5,357천명으로전체인구의 11.0% 를차지함을알수있다. 이러한통계치들을보면, 장애인뿐만아니라고령자수가매년지속적으로증가하고있음을알수있다. - 12 -

한편, 보건복지가족부와한국보건사회연구원의 2008년장애인실태조사결과에따르면, 지체장애, 시각장애, 청각장애등대표적인장애유형별휴대폰, 컴퓨터, 인터넷보유율과사용률이우리가생각하고있는것보다는훨씬높음을알수있다 (< 표 1> 참조 ). 바로이러한사람들이웹을보다많이이용하면할수록웹접근성을제대로준수하지않으면그들이겪는접근성의문제또한증가할수밖에없다. < 표 1> 장애유형별휴대폰, 컴퓨터, 인터넷보유율및사용률 구분 지체뇌병변시각청각언어지적장애장애장애장애장애장애 전체 휴대폰 보유율 77.4 50.0 74.4 59.5 58.0 27.1 67.1 사용률 77.0 49.2 74.4 59.3 55.8 27.2 66.7 컴퓨터 보유율 55.3 52.2 48.8 48.5 57.0 55.7 53.0 사용률 30.2 13.8 21.4 20.1 29.9 35.4 26.7 인터넷 보유율 53.8 50.6 48.1 45.6 55.2 53.7 51.4 사용률 29.7 13.7 21.2 19.3 27.4 28.9 25.7 출처 : 보건복지가족부, 한국보건사회연구원. 2008 년장애인실태조사, p. 230. 둘째, 웹접근성을준수하는것이법률로서의무화되었다. 이는웹접근성을준수하지않을시법률적인처벌을받게됨을의미한다. 아직까지우리나라에서는웹접근성미준수로인해법률적인처벌을받은경우는없다. 그러나 Target을상대로 NFB(National Federation of the Blind) 의회원인 Bruce Sexton( 시각장애인학생 ) 이대체텍스트를제공하지않고, 마우스가아닌키보드만으로구매가불가능하는등미국장애인법 (ADA) 을위반했다는이유로 2006년에제소해 2008년 8월 27일에 Target이 6백만달러 ( 한화 60억원 ) 를지불 ( 소송참가개인당최대 $7,000 지급 ) 하도록한판결, Ramada.com과 Priceline.com 등에대한판결등외국의경우를보면이는언제든지그리고특정분야가아닌모든분야에걸쳐일어날수있음을알수있다. - 13 -

Target 홈페이지 (http://www.target.com/) (http://www.nfb.org/nfb/default.asp) Ramada.com 홈페이지 (http://www.ramada.com/) Priceline.com 홈페이지 (http://www.priceline.com/) 셋째, 웹접근성을준수하게되면디자인및설계등에대한효율성을제고함으로써비용절감효과도있다. Henry(2006) 에의하면, 일반적으로 한웹사이트에서웹접근성해결책을실행하면종종기술적인향상을가져올수있다 고한다. 접근성을준수하지않은불필요한이미지나동영상자료등을올리면접근성을준수할수없기때문에꼭필요한이미지나자막, 수화등이포함된동영상만을올리게된다. 그결과, 서버에대한부하량이감소하게되며, 이는다운로드속도의증가를가져올수있다. 또한단한가지의장치나브라우저가아닌여러장치또는다양한브라우저에서도접근할수있기때문에상호작용성과장치독립성을증진할수있으며, CSS(Cascading Style Sheets) 를사용함으로써사이트개발시간을단축하고유지관리시간이나비용도절감할수있다. 넷째, 공공기관및기업의이미지제고와이윤을창출하기위해접근성을준수할필요가있다. 그것이공공기관이든민간기업이든어떤조직이웹사이트를접 - 14 -

근가능하게만들기위해노력을하면할수록해당기관은긍정적인투자대비회수율과비용효율성을가져올수있다. 웹의중요한혜택들중한가지는융통성과웹이제공하는서비스에대한접근의용이성에기인한다. 실제로, 이것은전화, 면대면또는우편과같은다른수단을통해공공서비스나다른서비스들과상호작용하는데필요한시간, 노력, 비용의절감을의미한다. 접근성의결여는많은사람들이대안적인채널들을사용함으로써보다높은처리비용을지속적으로지출해야함을의미한다. 특히, 공공기관이웹접근성을준수함으로써얻을수있는투자대비회수율또는비용효율성은최근 EU 의연구결과를보면보다명확하게알수있다 (< 표 2> 참조 ). 대상집단도달율경제적비용효과성범주 웹사이트접근성을달성하기위한추가적인비용 2% 5% 15% 30% 전자접근성을위한정부투자비용 -24,256,800-60,641,999-181,925,997-363,851,994 5% 10% 20% < 표 2> 접근가능한전자정부를위한비용 - 효과성모형 - 연간순수비용절감액 정부의처리비용절감액 158,223,882 158,223,882 158,223,882 158,223,882 순수정부비용대비이익 133,967,082 97,581,883-23,702,115-205,628,112 국민의이익 153,112,707 153,112,707 153,112,707 153,112,707 전체비용대비이익 287,079,790 250,694,590 129,410,592-52,515,405 전자접근성을위한정부투자비용 -24,256,800-60,641,999-181,925,997-363,851,994 정부의처리비용절감액 316,447,764 316,447,764 316,447,764 316,447,764 순수정부비용대비이익 292,190,964 255,805,765 134,521,767-47,404,230 국민의이익 306,225,415 306,225,415 306,225,415 306,225,415 전체비용대비이익 598,416,379 562,031,180 440,747,181 258,821,184 전자접근성을위한정부투자비용 -24,256,800-60,641,999-181,925,997-363,851,994 정부의처리비용절감액 632,895,528 632,895,528 632,895,528 632,895,528 순수정부비용대비이익 608,638,729 572,253,529 450,969,531 269,043,534 국민의이익 612,450,829 612,450,829 612,450,829 612,450,829 전체비용대비이익 1,221,089,558 1,184,704,358 1,063,420,360 881,494,363 출처 : European Commission, 2008, p. 10. < 표 2> 를보면, 웹사이트를이용하는사람 ( 장애인, 노인 ) 들의비율을높일수록 접근성을위한비용추정치가내려가전반적인비용대비회수율은더높아짐을 알수있다. 즉, 이웹접근성에관한투자대비비용효과성모형은전자정부서 - 15 -

비스등에대한접근성준수율이높아질수록또는국민들이웹을통해정보에접 근할수있는비율이높아질수록정부와국민들은다른수단들을통해정보에접 근하는데드는처리비용을현격하게절감할수있음을잘보여주고있다. 마지막으로, googlebot과같은검색엔진에서찾는정보들을명시적으로제시함으로써, 즉검색엔진에최적화함으로써자신의홈페이지를홍보하기위해별도의비용을지출하지않고도사이트를홍보할수있어궁극적으로웹사이트의활용률을증가시킬수있다. 또한이미살펴본바와같이, 접근성을준수하지않은것으로인해소송을당하게되면높은법률비용을지출해야하지만접근성을준수하면그러한비용을지출할필요가없으며, 하나의접근가능한콘텐츠를통해다양한특성을지닌사용자들의요구를수용할수있기때문에장애유형별로별도의자료를제작 배포할필요가없게된다. - 16 -

< 참고 > 웹접근성 vs 웹사용성 웹사용성전문가인 Nielsen(1993) 은웹사용성의다섯가지구성요소로학습가능성 (learnability), 사용의효율성 (efficiency of use), 기억가능성 (memorability), 오류허용한계 (error tolerance) 또는효과성 (effectiveness), 그리고주관적만족 (subjective satisfaction) 을제시하였다. 학습가능성이란버튼의레이블이나용어등이간단명료해쉽게학습할수있는가의여부를말하며, 사용의효율성이란복잡하고여러단계를거쳐수행해야하는작업을한두번의조작만으로, 커다란노력이나비용을들이지않고도, 신속하게처리할수있어야함을의미한다. 또한기억가능성이란한두번의학습만으로도특정기능이나내용을쉽게기억할수있어야함을의미하며, 오류허용한계또는효과성이란사용자가사소한실수나부주의, 착오등으로인해실수를범할지라도해당실수를복구할수있도록해주며, 그러한수정과정을통해당초계획했던행동이나목표를보다성공적으로달성할수있도록해주는것을말한다. 또한주관적만족이란사용자가특정웹사이트를이용하는데있어색상등이자신의취향이나선호도에맞게배열되어보다편안한분위기에서웹서핑을함으로써궁극적으로만족감을얻는것을의미한다. 일반적으로, 웹접근성은 Nielsen(1993) 이말한다섯가지구성요소중처음네가지요소들, 즉학습가능성, 사용의효율성, 기억가능성, 오류허용한계또는효과성과밀접한관련이있는반면, 주관적만족은포함되지않는다. 예를들어, 접근성에서는전경색과배경색이충분한정도의가독성에만초점을맞춘다. 사용자가검정색바탕에노란색글씨를선호하지만검정색에흰색글씨를사용하였다고제시되는문제는사용성관련문제이다. 이처럼, 사용성은사용자들이기능성 (functionality) 을얼마나잘사용할수있는가에관한문제, 즉웹사용성은사용자가애플리케이션의작동, 목적, 콘텐츠를얼마나잘이해할수있도록할것인가를나타내는척도 (Mueller, 2003) 인반면, 접근성은사용성을위해필요하지만모든사용성설계원리들이접근성에적용되지는않는다. 한마디로, 접근성은사용자가애플리케이션과얼마나잘상호작용할수있는가를나타내는척도 (Mueller, 2003) 라할수있다. 따라서접근성은사용성을위한필요조건이지충분조건은아니며, 바로이점에서접근성은사용성과차이가있다. o 장애인의웹사용시애로점 우리나라의장애인복지법시행령 [ 별표 1] 에는동법시행령제2조 ( 장애인의종류및기준 ) 에근거해장애인의종류와기준을구체적으로명시해놓고있다. 이시행령에명시된장애인은지체장애, 뇌병변장애, 시각장애, 청각장애, 언어장애, 지적장애, 자폐성장애, 정신장애, 신장장애, 심장장애, 호흡기장애, 간장애, 안면장애, 장루 요루장애, 간질장애의총 15가지장애중하나이상의장애를지닌 - 17 -

사람을말한다. 한편, 이들장애인의종류와기준은해당장애인의특성에따라보다세분화될수있다. 예를들어, 시각장애인의경우전맹, 약시, 색각장애등으로나눌수있다. 웹접근성을고려할때는일반적으로이러한세분화된특성들을고려하는것이일반적이다. 이미언급한바와같이, 웹접근성을준수하면다양한특성을지닌장애인들뿐만아니라고령자, 비장애인모두에게혜택을준다. W3C는웹에서접근성장애를겪을수있는대상별로시나리오를작성한후각대상별접근성준수방안을제시하고있다. W3C에서제시한장애유형별대표적인웹접근성장애를요약 제시하면다음과같다 (http://www.w3.org/wai/eo/drafts/pwd-use-web/). 1) 시각장애 대체텍스트를가지고있지않은이미지 적절하게기술되지않은복잡한이미지 ( 예 : 그래프나차트 ) 텍스트나오디오로기술되지않은비디오순차적으로 ( 셀단위로또는 선형화된 모드로 ) 읽을때의미를알수없는표 NOFRAME 대체수단을가지고있지않거나의미있는이름들을가지고있지않는프레임논리적인순서로탭을할수없거나부적절하게레이블된서식모든명령어들에대한키보드지원이되지않는브라우저와저작도구들기반이되는운영체제의표준애플리케이션프로그래밍인터페이스를사용하지않은브라우저와저작도구들화면낭독프로그램 (screen reader) 이해석하기어려운비표준문서서식쉽게변경되지않는 ( 크게하거나작게할수없는 ) 절대글자크기가사용된웹페이지일관성없는배열로인해확대했을경우주변의콘텐츠를잃어버려내비게이션하기가어려운웹페이지 - 18 -

부적절한명도대비로인해명도대비를사용자가자신의스타일시트로대체하거나 (override) 쉽게변경할수없는웹페이지나웹페이지상의이미지확대했을경우다음줄로자동변경되는것을차단한이미지로된텍스트웹사이트에있는텍스트를강조하기위해독특한표시물 (marker) 로사용된색상배경색이나패턴과부적절하게대비된텍스트 2) 청각장애및언어장애 웹방송 (webcasts 등을포함 ), 웹상의오디오에관한자막이나원고가없는경우제1언어가문어나구어가아닌수화인사람들이이해하기어려운텍스트로꽉찬페이지에서콘텐츠관련이미지가없는경우간단명료한언어가제공되지않는경우웹사이트에서음성입력을요구하는경우음성기반상호작용을요하거나어떠한대체입력모드도가지고있지않은웹사이트 3) 지체장애 웹페이지상의시간제한반응옵션 마우스명령어에대한키보드대체물을지원하지않는브라우저와저작도구들 논리적인순서로탭 (tab) 할수없는서식 4) 지적및신경장애 시각을보완하기위해오디오로변환할수있는대체텍스트를제공하지않거나오디오에대한자막을제공하지않는경우와같이, 웹사이트에있는정보에대한대체유형 / 포맷을제공하지않는경우쉽게끌수없도록된, 주의를산만하게하는시각또는비디오요소 - 19 -

웹사이트가명료하고일관성있게조직되지않은경우불필요하게복잡한언어를사용한경우절대글자크기를사용한웹페이지발작을촉발할수있는시각적또는오디오주기사용 한편, W3C는몇가지대표적인장애유형별웹접근성문제를준수했을때장애등으로인한콘텐츠의접근문제는더이상문제가되지않는다고주장한다. W3C가제시한대표적인장애유형별접근성준수사례들을제시하면 < 표 3> 과 같다 (http://www.w3.org/ WAI/bcase/soc). < 표 3> 대표적인장애유형별웹접근성준수사례 장애유형시력이감퇴하고있는고령자민첩성이떨어지거나미세운동조절을하기어려운고령자청각이손상된고령자문해능력이낮은사람과언어가유창하지않은사람저대역인터넷접속이나오래된테크놀로지를사용하는사람 준수사례전경색과배경색간의충분한명도대비약간의시각장애를지닌사람들이화면확대기와같은보조공학을사용할필요없이직접읽을수있도록, 읽기쉬운글꼴과줄간격을늘릴수있는것과글자크기를크게할수있는텍스트정보를전달하기위해텍스트의비트맵이미지를사용하는것대신에더나은브라우저기반확대를할수있는스타일이맞추어진텍스트사용자들을산만하게하거나발작을유발하지않는방식으로깜빡거리거나번쩍이거나움직이지않는텍스트와다른요소객체의클릭가능한영역을늘릴수있는기능모든웹사이트의상호작용 ( 장치독립성 ) 을위해마우스를사용하는것대신에키보드를사용할수있도록한것오디오콘텐츠에대한원고와자막오디오의전경 정보 와배경 소음 간의대비간단명료한언어보충적인설명명료하고일관성있는디자인, 내비게이션, 링크그룹으로나누어진정보묶음너무많이깜빡거리거나번쩍이거나움직이지않는텍스트사용자들에게콘텐츠를읽고사용할수있는충분한시간제공이미지, 멀티미디어, 그리고다른비텍스트객체들에대한대체텍스트색상으로전달되는정보를위한풍부한 (redundant) 코딩과전경색과배경색간의충분한명도대비상대값으로정의된텍스트크기 - 20 -

신규사용자와웹을빈번하게사용하지않는사용자 정보를전달하기위해텍스트의비트맵이미지대신에다운로드속도를높여줄수있는스타일에맞춘텍스트 콘텐츠를프레젠테이션으로부터분리하기위해효과적으로사용된, 그렇게함으로써파일크기와파일다운로드요구조건들을줄여다운로드속도를증가시킬수있는스타일시트 몇몇오래된테크놀로지는스타일시트를처리할수없기때문에, 스타일시트없이도읽을수있고이해할수있도록조직화된사이트 타당한 W3C 테크놀로지를사용하며오래된테크놀로지에서도작동할가능성이높은사이트 사용자들이원하는페이지들을열수있도록도와주고잘못된경로를거쳐가는것을막아줌으로써낭비되는페이지로딩시간을절약할수있도록도와주는, 명료하고일관성있는디자인, 내비게이션, 그리고링크 명료하고일관성있는디자인, 내비게이션, 그리고링크 이미지맵에대한풍부한텍스트링크제공 새로운브라우저창이열리기전에사용자에게공지 o 웹접근성관련국내외법률과표준 웹접근성관련국내외법률이나표준등에는어떠한것들이있는지살펴보고, 특히웹접근성에관해보다구체적으로명시해놓은 장애인차별금지및권리구제등에관한법률 ( 이하 장애인차별금지법 ) 과 장애인차별금지법시행령 에대해좀더구체적으로살펴보면다음과같다. 먼저, 웹접근성관련국내법률과정책, 지침으로서는 장애인 노인 임산부등의편의증진에관한법률 제4조 ( 접근권 ), 장애인복지법 제20조 ( 정보에의접근 ), 2005년 12월에국가표준으로승인된 인터넷웹콘텐츠접근성지침 (IWCAG 1.0), 2008년 4월 11일부터시행되고있는 장애인차별금지법 제21조 ( 정보통신 의사소통에서의정당한편의제공의무 ), 그리고 2009년 5월 22 일공포된, 기존 정보화촉진기본법 의전부개정법인 국가정보화기본법 제32조 ( 장애인 노인등의정보접근및이용보장 ) 등을들수있다. - 21 -

제32조 ( 장애인ᆞ고령자등의정보접근및이용보장 ) 1 국가기관등은인터넷을통하여정보나서비스를제공할때장애인 고령자등이쉽게웹사이트를이용할수있도록접근성을보장하여야한다. 2 정보통신망이용촉진및정보보호등에관한법률 제2조제3호에따른정보통신서비스제공자 ( 이하 " 정보통신서비스제공자 " 라한다 ) 는그서비스를제공할때장애인 고령자등의접근과이용의편익을증진하기위하여노력하여야한다. 3 정보통신관련제조업자는정보통신기기및소프트웨어 ( 이하 " 정보통신제품 " 이라한다 ) 를설계, 제작, 가공할때장애인 고령자등이쉽게접근하고이용할수있도록노력하여야한다. 4 국가기관등은정보통신제품을구매할때장애인 고령자등의정보접근과이용편의를보장한정보통신제품을우선하여구매하도록노력하여야한다. 5 행정안전부장관은장애인 고령자등의정보접근및이용편의증진을위한정보통신서비스및정보통신제품등의종류 지침등을정하여고시하여야한다. 특히, 장애인차별금지법 제21조와 장애인차별금지법시행령 제14조 ( 정보통신 의사소통에서의정당한편의제공의단계적범위및편의의내용 ) 는공공및민간웹사이트에대한웹접근성준수를단계적으로의무화하고있다. 이를좀더구체적으로살펴보면, 다음과같다. 먼저, 장애인차별금지법 제 21 조는장애인이비장애인과동등하게전자정보에 접근, 이용하는데필요한수단, 즉웹접근성을보장하는웹사이트를보장받아 야한다고명시하고있다. 제21조 ( 정보통신ᆞ의사소통등에서의정당한편의제공의무 ) 1 제3조제4호 제6호 제7 호 제8호가목후단및나목 제11호 제18호 제19호에규정된행위자, 제12호 제14호부터제16호까지의규정에관련된행위자, 제10조제1항의사용자및같은조제2항의노동조합관계자 ( 행위자가속한기관을포함한다. 이하이조에서 " 행위자등 " 이라한다 ) 는당해행위자등이생산 배포하는전자정보및비전자정보에대하여장애인이장애인아닌사람과동등하게접근 이용할수있도록수화, 문자등필요한수단을제공하여야한다. 이경우제3조제8 호가목후단및나목에서말하는자연인은행위자등에포함되지아니한다. 2공공기관등은자신이주최또는주관하는행사에서장애인의참여및의사소통을위하여필요한수화통역사 문자통역사 음성통역자 보청기기등필요한지원을하여야한다. 3 방송법 제2조제3호에따른방송사업자와 인터넷멀티미디어방송사업법 제2조제5호에따른인터넷멀티미디어방송사업자는장애인이장애인아닌사람과동등하게제작물또는서비스를접근 이용할수있도록폐쇄자막, 수화통역, 화면해설등장애인시청편의서비스를제공하여야한다. - 22 -

4 전기통신사업법 에따른기간통신사업자 ( 전화서비스를제공하는사업자만해당한다 ) 는장애인이장애인아닌사람과동등하게서비스를접근 이용할수있도록통신설비를이용한중계서비스 ( 영상통화서비스, 문자서비스또는그밖에방송통신위원회가정하여고시하는중계서비스를포함한다 ) 를확보하여제공하여야한다. 5 다음각호의사업자는장애인이장애인아닌사람과동등하게접근 이용할수있도록출판물 ( 전자출판물을포함한다. 이하이항에서같다 ) 또는영상물을제공하기위하여노력하여야한다. 다만, 도서관법 제18조에따른국립중앙도서관은새로이생산 배포하는도서자료를점자, 음성또는확대문자등으로제공하여야한다. 1. 출판물을정기적으로발행하는사업자 2. 영화, 비디오물등영상물의제작업자및배급업자 6 제1항에따른필요한수단을제공하여야하는행위자등의단계적범위및필요한수단의구체적인내용과제2항에따른필요한지원의구체적인내용및범위와그이행등에필요한사항, 제3항과제4항에따른사업자의단계적범위와제공하여야하는편의의구체적내용및그이행등에필요한사항은대통령령으로정한다. 이를보다구체적으로실현하기위해, 장애인차별금지법시행령 에는각행위주체별로접근성준수의무화단계를설정해놓고있다. < 표 4> 에서보는바와같이, 국가및지방자치단체, 대통령령으로정한공공기관의경우 1년이내, 즉 2009년 4월 11일까지, 그외대상은 1년에서 5년내, 즉 2013년 4월 11일까지단계적으로웹접근성을준수하도록하고있으며, 장애인에게정당한편의제공규정을위반할경우최고 3,000만원의과태료가부과되고, 행위가악의적인경우 3년이하징역이나 3,000만원이하의벌금을부과할수있도록규정하고있다. < 표 4> 장애인차별금지법시행령에명시된웹접근성준수의무화단계별대상기관 년도 공공기관 09.4.11 공공기관 10.4.11 국 공립유치원 초 중등교육법 11.4.11, 고등교육 법 에따른국 공 사립각급 교육기관 ( 책임자 ) 국 공 사립특수 학교 특수학급이 설치된 국 공 립각급학교 장애전담 보 육시설 일반병원, 치 과, 한방병원 ( 입원 30인 이상 ) 의료기관 복지시설 문화 예술 체육 법인 사회복지시설 상시 300명 ( 사회복지관 이상의 근로 종합병원 등 ) 자사용사업 장애복지시설장과국가및 ( 요양및재활 지방자치단체 시설등 ) * 국립문화예술 단체, 박물관, 미술과 국립중앙도서 관, 공공도서관 상 시 100-300 명의 근로자사용사업장 * - 23 -

학교 영재학교, 영 재교육원 보육시설 (100 12.4.11 13.4.11 15.4.11 인이상 ) 사립유치원 평생교육시설, 연수기관 직업훈련기관 (1,000 m2이상 ) 국 공립보육시설및법인설립보육시설 그외병원 ( 입 원 30 인이 하 ) 민간종합공연 장 체육관련 행 위자 민간 종합공 연장및소공 연장 ( 3 0 0 석 미만 ) 영화관 (300석 미만 ) 사립박물관 미 술관 모든법인 법인인사용자가사용자의지위에서제공하는정보 ( 예 : 직원의모집 채용, 임금및복리후생등의정보 ) 가아닌경영공시및제품판매를위한정보의경우예외 특히, 여기에서주목할사항은현재단계적웹접근성준수대상이아니더라도 직원의모집 채용, 임금및복리후생등에관한정보와같이법인인사용자가사 용자의지위에서제공하는정보는접근성을준수해제공해야한다는점이다. 다음으로, 웹접근성관련대표적인국외법률이나표준을살펴보면다음과같다. 먼저, 웹접근성에대해서는호주의장애차별금지법 (Disability Discrimination Act: DDA), 브라질의접근성에관한법 (Law on Accessibility, L. 10.098), 벨기에의차별금지법 (Anti-Discrimination Law), 핀란드의 JHS 129 공공행정에서웹서비스를설계하기위한지침 (JHS 129 Guidelines for Designing Web Services in the Public Administration), 독일의무장애정보기술에관한법령 (Ordinance on Barrier-Free Information Technology), 영국의장애인차별금지법 1995(Disability Discrimination Act 1995), 일본의기본 IT법 (Basic IT Law), 미국의재활법제508조 (Section 508 of the Rehabilitation Act) 등을포함해전세계의상당히많은나라들이웹설계에관한법률이나정책, 지침등을가지고있다. 특히, 웹접근성에관한법률과지침들을마련하고이를체계적으로잘수행하 - 24 -

고있는국가들중대표적인두국가를예를들어살펴보면다음과같다. 먼저, 미국은 2000년 12월에 W3C의지침중우선순위 (Priority) 1과 2를기초로 16개항목에대한웹접근성표준 (Section 508 Standards) 제정하였으며, 2001년 6월부터 재활법제508조 (Section 508 of the Rehabilitation Act) 에의거연방정부및소속기관에서제공하는모든웹사이트에웹접근성준수를의무화하였다. 또한 2006년 7월부터 W3C의 WCAG 2.0 개정에발맞추어해당표준의개정을진행중에있다. 영국은 2004년 10월에 장애인차별금지법(Disability Discrimination Act, 1995년제정 ) 에의거해모든웹사이트이용에웹접근성을준수할것을의무화하여시행하고있다. 영국정부는이를보다체계적으로지원하기위해 2006년부터 W3C의 WCAG 1.0을활용해 PAS(Publicly Available Specification) 78 이란웹접근지침해설, 평가방법등을포함한가이드라인을마련 제공하고있다. 또한웹접근성에관한국제표준화기구인 W3C 역시웹접근성에관한여러가지가이드라인을마련 제공하고있는데, 그대표적인것이바로 1999년 5월 5일에제정 공표된웹콘텐츠접근성지침 (Web Content Accessibility Guidelines: WCAG) 1.0이다. 이 WCAG 1.0은총14개의가이드라인과각가이드라인에따라한개에서 7개까지의체크포인트들 (checkpoints) 로구성되어있다. 또한이들체크포인트각각은 1부터 3까지의우선순위 (Priority) 을가지고있는데, 1은반드시준수해야하며 (must), 2는가급적준수해야하고 (should), 3은준수하면좋음 (may) 을의미한다. 이 WCAG 1.0은많은나라들이그대로채택활용하거나수정해사용하고있다. 한편, W3C는 2008년 12월에 WCAG 2.0을발표하였다. - 25 -

< 그림 2> W3C 의 WCAG 1.0 홈페이지 (http://www.w3.org/tr/wcag10/) < 그림 3> W3C 의 WCAG 2.0 홈페이지 (http://www.w3.org/tr/wcag20/) 우리나라도 W3C의 WCAG 1.0 중우선순위 1과 2 중일부를토대로 인터넷웹콘텐츠접근성지침 (IWCAG 1.0) (2005. 12. 국가표준으로승인 ) 을마련해시행하고있다. 또한다른나라들과마찬가지로, 우리나라도 W3C의 WCAG 2.0 의개정에발맞추어 WCAG 2.0 및미국의 Section 508 개정내용등을수용해한국형웹콘텐츠접근성지침 (KWCAG) 2.0을개정하였으며, 2010년 12월 31 일에이를국가표준으로지정하였다. - 26 -

[ 참고문헌 ] 보건복지가족부, 한국보건사회연구원 (2009). 2008 년장애인실태조사. w European Commission (2008). Accessibility of ICT products and services to Disabled and Older People: Evidence-based analysis for a possible co-ordinated European approach to web accessibility. 2010. 12. 20일접속. http://ec.europa.eu/ information_society/newsroom/cf/itemdetail.cfm?item_id=4722. w Henry, S. L. (2006). Understanding Web accessibility. In Thatcher, J. et al. (2006). Web accessibility: Web standards and regulatory compliance. w Mace, R. L. (1985). Universal design: Barrier free environments for everyone. Designers West, 33(1), 147-152. w Mueller, J. P. (2003). Accessibility for everybody: Understanding the Section 508 accessibility requirements. New York: Apress. w w Nielsen, J. (1994), Usability Engineering. Boston, MA: AP Professional. Vanderheiden, G., & Tobias, J. (2000). Universal design of consumer production: Current industry practice and perceptions. 2002. 7. 16일접속. http://trace.wisc.edu/docs/ud_consumer_products_hfes2000/ [ 참고할만한자료 ] 웹접근성관련법률, 표준, 지침정보 w w w w 국가정보화기본법및시행령 ( 국가법령정보센터 (http://www.law.go.kr/main.html) 에서검색가능 ) 장애인차별금지및권리구제등에관한법률및시행령 ( 국가법령정보센터 (http://www.law.go.kr/main.html) 에서검색가능 ) 장애인 노인 임산부등의편의증진보장에관한법률및시행령 ( 국가법령정보센터 (http://www.law.go.kr/main.html) 에서검색가능 ) 장애인복지법및시행령 ( 국가법령정보센터 (http://www.law.go.kr/main.html) 에서검색가능 ) w 장애인등에대한특수교육법및시행령 ( 국가법령정보센터 (http://www.law.go.kr/ main.html) 에서검색가능 ) w w 한국형웹콘텐츠접근성지침 2.0 : http://www.wah.or.kr/example2.0/kwcag2.0.pdf Section 508 of the Rehabilitation Act: http://www.section508.gov/ w Guide to good practice in commissioning accessible websites(pas 78: 2006): http://www.equalityhumanrights.com/uploaded_files/pas78.pdf w Common Look and Feel Standards 2.0 Canada: http://www.tbs-sct.gc.ca/ clf2-nsi2/ w Disability and the Equality Act 2010 UK: http://www.direct.gov.uk/en/ DisabledPeople/RightsAndObligations/DisabilityRights/DG_4001068 w w W3C 의웹접근성지침 1.0(WCAG 1.0): http://www.w3.org/tr/wcag10/ W3C 의웹접근성지침 2.0(WCAG 2.0): http://www.w3.org/tr/wcag20/ - 27 -

웹사용성 (Web Usability) 관련정보 w w w w w The Usability Professional's Association: http://www.usabilityprofessionals.org/ Usability.gov: http://www.usability.gov/ Jakob Nielsen's Alertbox: http://www.useit.com/alertbox/ Webusability: http://webusability.com/ Web Usability: http://www.usability.com.au/ 보편적설계 (Universal Design) 또는보편적학습설계 (Universal Design for Learning: UDL) 관련정보 w Center for Applied Special Technology(CAST): http://www.cast.org/index.html w The Center for Universal Design: http://www.ncsu.edu/www/ncsu/design/ sod5/cud/index.htm - 28 -

Ⅱ. 웹접근성을고려한콘텐츠제작기법 원칙 1. 인식의용이성 (Perceivable): 모든콘텐츠는사용자가 인식할수있어야한다. o 인식의용이성 웹사이트에서제공하는콘텐츠를이용하기위해서는해당콘텐츠를정확히인식할수있어야한다. 시각장애인은시각을이용하여인식하도록만들어진이미지를인식할수없다. 여기에서텍스트는화면낭독프로그램을이용하면읽어줄수있으므로시각장애인이인식할수있는콘텐츠로간주한다. 약시자와고령자는통상적인크기의폰트로표시된텍스트콘텐츠를인식하기 어렵다. 색각장애인은특정한색으로표시된콘텐츠의구별이어렵다. 청각장애인 은동영상의음성, 오디오등과같은청각콘텐츠를인식할수없다. 콘텐츠를인식하기어려운경우는비단장애인에게만국한된것이아니다. 다음 과같은특별한환경에서의콘텐츠는비장애인이인식하는경우도어려움을준다. 직사광선이내려쪼이는장소에설치된모니터에표시되는콘텐츠매우작은폰트를사용한콘텐츠흑백모니터에표시되어색의차이가드러나지않는콘텐츠소음이매우심한환경에서제공되는청각을이용하는콘텐츠 이와같이장애또는주변여건등으로인하여인식이불가능하거나어려움을겪는콘텐츠는사용자가그내용을동일하게인식할수있도록추가적인정보를함께제공해야한다. 따라서이원리에따라제작된콘텐츠는특정감각을이용할수없거나특별한환경에서콘텐츠에접근하는사용자들도그정보를다양한방법 ( 예 : 보조공학이용 ) 으로인식할수있게된다. 또한동영상의오디오트랙, 음성이나사운드와같은멀티미디어콘텐츠는청각 - 29 -

장애인이그내용을인식하기어렵다. 따라서멀티미디어콘텐츠는그내용을인 식할수있도록자막, 원고, 화면해설과같은대체콘텐츠를제공해야한다. 시각을이용하여콘텐츠를인지하는사용자의경우도비슷한채도의사물이나 명도대비가낮은사물을구분하기어렵다. 그러므로콘텐츠를명료하게전달하기 위해서는명도대비와채도대비가뚜렷해야한다. o 관련지침 인식의용이성은사용자가장애유무등에관계없이웹사이트에서제공하는모 든콘텐츠를동등하게인식할수있도록제공하는것을의미한다. 인식의용이성 은대체텍스트, 멀티미디어대체수단, 명료성의 3 가지지침으로구성되어있다. < 표 5> 인식의용이성관련지침및검사항목 지침 (3 개 ) 검사항목 (6 개 ) 1.1( 대체텍스트 ) 텍스트아닌콘텐츠에는대체텍스트를제공해야한다. 1.2( 멀티미디어대체수단 ) 동영상, 음성등멀티미디어콘텐츠를이해할수있도록대체수단을제공해야한다. 1.1.1( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나용도를이해할수있도록대체텍스트를제공해야한다. 1.2.1( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고또는수화를제공해야한다. 1.3.1( 색에무관한콘텐츠인식 ) 콘텐츠는색에관 계없이인식될수있어야한다. 1.3( 명료성 ) 콘텐츠는명확하게전달되 어야한다. 1.3.2( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없이인식될수있어야한다. 1.3.3( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠와배경간의명도대비는 4.5대 1 이상이어야한다. 1.3.4( 배경음사용금지 ) 자동으로재생되는배경음 을사용하지않아야한다. - 30 -

검사항목 1.1.1 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐 츠는그의미나용도를이해할수있도록대체텍스트를제공 해야한다. o 개요 이미지등텍스트가아닌콘텐츠를이용할경우, 해당이미지가제공하는의미나용도를가급적동일하게인식할있도록적절한대체텍스트를제공해야한다. 텍스트로제공할수있는콘텐츠를이미지등텍스트아닌콘텐츠로제공하는것은바람직하지않은방법이므로지양해야한다. 또한대체텍스트는간단명료하게제공해야한다. o 적용기술 적용기술 1) 이미지등에대한대체텍스트제공 웹페이지에이미지를포함시키기위하여 img 태그를사용하는경우, alt 속성 을이용하여짧은대체텍스트를제공한다. 이미지에대한대체텍스트는이미지의시각적인특징보다는이미지가표현하 려는의미나기능에중점을두어야한다. 예를들어, 1988 서울올림픽웹사이트로연결되는이미지링크를제공할경우이이미지에대한대체텍스트를 "1988 서울올림픽 " 또는 "1988 서울올림픽에대해알아보기 " 등과같이제공한다. <img src="1988seoul_olympic.gif" alt="1988 서울올림픽 " 1) /> < 참고 > 적절한대체텍스트작성방법 1) 이하에서 은개선전소스와개선후소스의비교부분또는수정된부분을나 타냄 - 31 -

특정감각만을이용해서인식할수있는콘텐츠는해당감각이없는사용자들도인식할수있어야한다. 예를들어, 오디오파일은청각장애인이이용할수없다. 시각적이미지는시각장애인이인식할수없다. 따라서오디오파일이나이미지는각각청각장애인과시각장애인이인식할수있는대체수단을제공해야한다. 대체텍스트는대체수단의한가지방법이다. 텍스트아닌콘텐츠에대한대체텍스트의적절성을판단하기위해서는대체텍스트가다음질 문에대한답을제시하는가를살펴보아야한다. 1) 텍스트아닌콘텐츠를이곳에제공하는이유가무엇인가? 2) 텍스트아닌콘텐츠로제공하려는정보는무엇인가? 3) 텍스트아닌콘텐츠가의미하는내용이무엇인가? 4) 텍스트가아닌콘텐츠가제공하는기능이나정보를어떻게설명할것인가? 예를들어, 미술품 ' 모나리자 ' 의사진에대한대체텍스트로는 " 레오나르도다빈치작모나리자 " 가적절하다. 장한나가연주하는 ' 브람스첼로소나타 No. 1' 의 MP3 파일에대한대체텍스트 로는 " 장한나연주, 브람스첼로소나타 1 번 " 이적절하다. 위에열거한방법은 HTML 기반의콘텐츠뿐만아니라, 자바스크립트, 플래시, 실버라이트등과 같은리치인터넷애플리케이션 (Rich Internet Application: RIA) 을구성하는모든텍스트아닌 콘텐츠에도적용된다. 적용기술 2) 버튼이미지에대한대체텍스트제공 이미지를이용한입력버튼은 input 태그를사용하여구현할수있다. 이경우, 버튼에사용된이미지의대체텍스트는 alt 속성을이용하여제공한다. <form action="http://sample.co.kr/submit/test" method="post"> <input type="image" name="submit" src="button.gif" alt=" 확인 " /> </form> 적용기술 3) Java 애플릿등에대한대체텍스트제공 웹콘텐츠를이용하여 Java 애플릿등을제공하는방법은 applet 태그를사용 하는방법, embed 태그를사용하는방법, object 태그를사용하는방법이있다. - 32 -

applet 태그의사용 Java 애플릿을웹페이지에포함시켜제공하기위하여 applet 태그를사용하는 경우, alt 속성을이용하여애플릿에대한대체텍스트를제공할수있다. <applet code="tictactoe.class" width=120 height=120 alt="tic tac toe 게임 "> tic tac toe 게임 </applet> < 참고 > 1) applet 태그는 HTML 4.0 이후에는사용하지않도록권고하는방법임 2) 웹브라우저는 applet 태그내의대체텍스트를읽어주나웹브라우저에따라서 alt 속성을읽어주는경우도있으므로위의예와같이두곳에동일한대체텍스트를제공하는것이바람직함 3) 우리나라에서통용중인센스리더와 Jaws for Windows 는 applet 태그내의대체텍스트를읽어줌 embed 태그의사용 Java 애플릿을웹페이지에포함시켜제공하기위하여 embed 태그를사용하는 경우 alt 속성을이용하여대체텍스트를제공한다. <embed type="application/x-java-applet" code="tic.class" </embed> width=120 height=120 alt="tic tac toe 게임 "> 참고로, 대체텍스트가아니라 Java 애플릿에대한대체수단을제공하고자하 는경우 noembed 태그를사용하여대체수단을제공한다. <embed type="application/x-java-applet" code="tic.class" width=120 height=120 alt="tic tac toe 게임 "> <noembed> <a href="tac_tac_toc.htm">tic Tac Toe 게임 </a> </noembed> </embed> - 33 -

noembed 태그는다음과같이 embed 태그밖에제공해도된다. <embed type="application/x-java-applet" code="tic.class" width=120 height=120 alt="tic tac toe 게임 "> </embed> <noembed> <a href="tic_tac_toc.htm">tic Tac Toe 게임 </a> </noembed> < 참고 > 1) embed 태그는광범위하게사용되나 HTML 4.01 표준에정의되지않은요소임. 최근에제안된 HTML5에는표준에포함되었음 2) 우리나라에서통용중인화면낭독프로그램은 embed에대한대체텍스트를지원하지못하므로 embed 태그를사용하기위해서는화면낭독프로그램 (screen reader) 의지원여부를먼저확인해야함 object 태그의사용 object 태그를이용하여웹페이지에표시하는 java 애플릿은 title 속성을이용 해서도대체텍스트를제공할수있다. title 태그대신 object 태그내에대체텍 스트를포함시킬수도있다. <object type="application/x-java-applet" data="tic.class" width=120 height=120 title="tic tac toe 게임 "> <param name="code" value="tic.class"> tic tac toe 게임 </object> 대체수단을제공할경우 object 태그를중첩하여구현할수있다. 예를들어, java 애플릿을제공하지못하는경우이미지 (tic_tac_toc.gif) 를제공하는방법은 다음과같다. <object type="application/x-java-applet" data="tic.class" width=120 height=120 title="tic tac toe 게임 "> <param name="code" value="tic.class"> <object data="tic_tac_toc.gif" type="image/gif"> - 34 -

</object> Tic Tac Toc 게임 </object> < 참고 > 1) 웹브라우저에따라 object 태그의 title 속성을읽어주지못하고 object 태그내의대체텍스트를읽어주므로두곳에모두제공하는것이좋음 2) 우리나라에서통용중인센스리더와 Jaws for Windows는 object 태그내에제공한대체텍스트만을읽어줌 적용기술 4) 이미지맵에대한대체텍스트제공 이미지맵 (image map) 은이미지를여러개의선택가능한영역으로구분하고각영역을링크로연결한콘텐츠이다. 이경우, 선택가능한영역은 area 태그로구현한다. 이때 area 태그별로 alt 속성을이용하여해당영역의용도나목적을대체텍스트로제공한다. 다음의예는이미지를두개의영역으로나누고, 각영역에각각 "ENGLISH" 와 "KOREAN" 이라는대체텍스트를제공하도록구현한경우다. 여기에서전체이미 지 (language.gif) 에대해서도대체텍스트 ("language") 를제공하고있다. <language.gif> <img src="languge.gif" alt="language" usemap="#language"> <map name="language"> <area alt="english" shape="rect" coords="10,5,66,19" href="/en/"> <area alt="korean" shape="rect" coords="10,17,66,32" href="/ko/"> </map> 적용기술 5) 텍스트이미지, 그래픽문자등에대한대체텍스트제공 한글이나영문자를형상화한로고등과같은텍스트이미지는해당이미지에 포함된단어또는문장을대체텍스트로제공한다. 텍스트이미지에대한대체텍 - 35 -

스트는이미지에표시된텍스트에서불필요한기호를제거하거나문장을가다듬 어제공하는것을허용한다. ACSII 심벌기호를이용하여얼굴형상을표현하거나한글자음또는모 음을나열하여감정을표현하는문자이모티콘 (emoticon) 은다음세가지 방법중에서선택하여사용한다. 1) 이모티콘텍스트를병기 (^(oo)^) ( 웃는돼지 ) 2) 이미지로표현하고대체텍스트를제공 <img src="smile_pig.gif" alt=" 웃는돼지 "/> 3) abbr 태그의사용 <abbr title=" 웃는돼지 ">(^(oo)^)</abbr> < 참고 > 1) 우리나라에서통용중인화면낭독프로그램인센스리더는 ' 툴팁읽기 ' 를설정해야 abbr 태그의 title 속성을읽어줌 2) 웹브라우저나보조기술에따라서 abbr 태그에대한지원이불가능한경우도있다. 따라서위의예에서 1) 과 2) 의사용을권장함 한 / 영문자모를이용하여구성한 ASCII 아트의경우이를건너뛸수있는링 크를제공한다. < 참고 > ASCII 아트 (art) 란문자또는특수기호등의글자체나글자간격을조합하여작성한그림으로 SMS 와같은문자통신시에주로이용됨 ASCII 아트예 : ASCII art of Merry Christmas <a href="#skipmerrychristmas"> 이모티콘건너뛰기 </a> <pre> MERRY CHRISTMAS _Π / / \ 田田門 Merry Christmas and a Happy New Year </pre> <div id="skipmerrychristmas"></div> - 36 -

적용기술 6) 플래시콘텐츠의대체텍스트제공 플래시 (Flash) 를이용한콘텐츠구현시콘텐츠에대한대체텍스트는액세스가능성 (Accessibility) 패널의 ' 객체를액세스가능하게만들기 (Make object accessible)' 항목을체크하고, ' 이름 (N)' 항목에대체텍스트를제공한다. 설명 (D) 항목은보다자세한설명문을제공하는경우에사용한다. 다음의예는달이지구를공전하는플래시애니메이션으로액세스가능성 패널의이름항목을이용하여대체텍스트를제공하고있다. 플래시는스크립트언어를이용한코딩시대체텍스트를제공할수있다. 예를들어, ActionScript 2.0를이용하여프로그램을개발하는경우무비클립 (MovieClip) 에대한 _accprops 객체의속성을설정해야한다. // ActionScript 2.0 Example // Let 'samplemovieclip' is a MovieClip instance placed on the movie's main timeline _root.samplemovieclip._accprops = new Object(); _root.samplemovieclip._accprops.name = " 지구를공전하는달 "; 마찬가지로, ActionScript 3.0 을이용하여프로그램을개발하는경우무비클 립에대한 accessibilityproperties 객체의속성을설정한다. // ActionScript 3.0 Example // Let 'samplemovieclip' is a MovieClip instance placed on the movie's main timeline samplemovieclip.accessibilityproperties = new AccessibilityProperties(); samplemovieclip.accessibilityproperties.name = " 지구를공전하는달 "; - 37 -

< 참고 > 플래시, 실버라이트콘텐츠의대체텍스트평가방법 플래시, 실버라이트등의웹애플리케이션을구성하고있는사용자인터페이스자동화요소들 의대체텍스트는 UIA Verify 와같은평가도구를이용하여확인할수있다. 이들평가도구는웹애플리케이션뿐만아니라웹콘텐츠를구성하는사용자인터페이스요소 에대한레이블, 단축키니모닉, 도움말, 해당요소에할당된값등을알려준다. 적용기술 7) 실버라이트콘텐츠의대체텍스트제공 실버라이트 (Silverlight) 에서텍스트아닌콘텐츠에대한대체텍스트는 AutomationProperties.Name 속성또는 AutomationProperties.LabeledBy 속성을이용하여제공한다. 콘텐츠또는컨트롤에대한설명문이나도움말은 AutomationProperties.HelpText 속성을이용하여제공한다. AutomationProperties.Name 속성이용방법 AutomationProperties.Name 속성은주로사용자인터페이스자동화클라이언 트에서선택할수있는자동화속성으로대체텍스트를제공하는데사용된다. 다음예는상품이미지 (smt_case_12.png) 에대한대체텍스트를제공하는코 드이다. <Image Source="smt_case_12.png" - 38 -

AutomationProperties.Name=" 스마트폰케이스 "/> AutomationProperties.LabeledBy 속성이용방법 AutomationProperties.LabeledBy 속성은다른사용자인터페이스요소에서 정의된텍스트를바인딩을통하여대체텍스트로제공할경우에사용하며그역 할은 AutomationProperties.Name 과동일하다. 다음예는텍스트입력상자의대체텍스트 ( 레이블 ) 를 " 실버라이트설명 " 이라고 제공하는코드이다. <TextBlock x:name="silverlightlabels"> 실버라이트설명 </TextBlock> <TextBox x:name="silverlightone" Width="25" AutomationProperties.LabeledBy="{Binding ElementName=SilverlightLabels}"/> 적용기술 8) 그래프등에대한설명문제공 그래프나사진과같이그의미하는바를간단한대체텍스트로충분한설명이 불가능할경우추가적인설명을제공해야한다. 자세한설명을제공하는텍스트 아닌콘텐츠의경우도대체텍스트를제공해야한다. 설명을제공하는방법은다음과같은네가지방법이있다. longdesc 속성제공 텍스트아닌콘텐츠 (chart.gif) 에대한자세한설명을 longdesc 속성을이용하 여제공할수있다. 다음의예는 longdesc 속성을이용하여복잡한그래프에대 한설명을제공하는웹페이지 (dest_chart.html) 로이동하도록구현한경우다. <p><img src="chart.gif" alt=" 중앙기관웹접근성조사결과 " longdesc="dest_chart.html"/> </p> 설명문제공 텍스트아닌콘텐츠의내용에관한자세한설명을해당콘텐츠의전후에제공 - 39 -

함으로써콘텐츠에대한추가적인설명을제공하는것이다. 이방법은 longdesc 속성의경우와같이설명페이지로이동하는불편함을해결할수있다. 다음의예는이미지 (chart.gif) 에이어서이미지에대한자세한설명을함께제 공하는구현방법이다. <p><img src="chart.gif" alt=" 중앙기관웹접근성조사결과 "/></p> <P>2008년도중앙기관의웹접근성조사결과에따르면...... <p> 이미지링크제공 텍스트아닌콘텐츠또는그주변에설명문으로이동하는링크를제공하는방 법이다. 이방법은설명문으로이동하는링크의위치와모양을다양하게제공할 수있는장점이있다. 다음의예는이미지에링크를걸어설명문으로이동하도록구현한것이다. <p> <a href="chartdesc.html"> <img src="chart.gif" alt=" 중앙기관웹접근성조사결과 "/> </a> </p> 링크버튼제공 이미지옆에링크버튼을제공하고, 이버튼을클릭하면같은페이지의해당이미지에대한추가적인설명을제공하는영역으로이동하도록구현할수있다. 이경우버튼레이블은 ' 그래프설명문 ' 또는 ' 그래프설명문으로이동 ' 등이가능하다. 여기에링크버튼제공예시제시필요!!! 적용기술 9) 생방송콘텐츠에대한대체텍스트제공 - 40 -

실시간오디오와실시간동영상콘텐츠에대한대체텍스트는콘텐츠의내용이시시각각으로변화한다. 이경우, 대체텍스트를콘텐츠의내용변화에따라동적으로제공하는것은매우어려운일이다. 따라서실시간오디오또는동영상콘텐츠의대체텍스트로는해당콘텐츠의용도를알려주는것으로도충분하다. 다음은그일례이다. 한국도로공사가제공하는경부고속도로서울방향서초나들목에설치된 CCTV 실시간영상의링크에대한대체텍스트를 " 경부선서울방향서초나들목실시간영상 " 이라고제공한다. 인터넷을통하여중계되는생방송 KBS FM 라디오콘텐츠로이동하는이미지링크의대체텍스트를 "KBS FM 라디오생방송 " 이라고제공한다. 적용기술 10) CAPTCHA 에대한대체텍스트제공 < 참고 > CAPTCHA 예를들어, 다음그림과같이의도적으로글자모양을비틀어만든이미지에대하여컴퓨터는그내용의정확한판단이불가능하나인간은그내용을파악할수있다. 이러한방법으로사용자가컴퓨터인지인간인지를구별하기위해사용하는방법을 CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart) 라고한다. CAPTCHA에는다음그림과같은시각적인방법이일반적이나오디오로제공되는청각적인방법도있다. CAPTCHA는사용목적상그내용을대체텍스트로제공한다면 CAPTCHA가의도하는본래목적을달성할수없다. 따라서 CAPTCHA에대한대체텍스트는그용도를알려주는것으로충분하다. 다음은 CAPTCHA에대한대체텍스트의예다. 텍스트로제공되는 CAPTCHA 에대한대체텍스트로는 " 숫자이미지용 CAPTCHA" 가적절하다. 오디오로제공되는 CAPTCHA 에대한대체텍스트로는 " 오디오 - 41 -

CAPTCHA" 등이적절하다. CAPTCHA를제공하는웹콘텐츠는반드시대체수단을제공해야한다. CAPTCHA에대한대체수단을제공하는방법은다음과같다. < 참고 > CAPTCHA의대체수단 1) 두가지이상의감각, 예를들어시각적 CAPTCHA와청각적 CAPTCHA를동시에제공 2) 사용자에게문제를텍스트콘텐츠로제시하고문제에대한답을입력하도록하는문제풀이방식의 CAPTCHA 제공 3) 상담원을이용하여 CAPTCHA가제공하는역할을대신할수있는서비스제공 4) 기타 CAPTCHA의이용을우회할수있는방법제공 보다다양한방법은 W3C WAI에서제공하는 Inaccessibility of CAPTCHA (http://www.w3.org/tr/turingtest/) 을참고하기바람 적용기술 11) 온라인시험등에대한대체텍스트제공 검사 ( 색맹검사, 청각검사, 시력검사등 ) 또는시험 ( 듣기평가예문, 단어받아쓰기등 ) 을위하여제공되는텍스트아닌콘텐츠는검사의결과또는시험의정답을유추할수있는내용을대체텍스트로제공할수없다. 따라서이들콘텐츠에대한대체텍스트는콘텐츠의간략한용도를알려주는대체텍스트를제공해야한다. 다음은올바른사례들이다. 색맹검사용콘텐츠에대하여 " 색맹검사용이미지 1" 등과같이대체텍스트를제공한다. 토플 (TOEFL) 듣기평가용예제의오디오콘텐츠에대하여 " 토플문항 5번용오디오 " 등과같이대체텍스트를제공한다. 시력검사용이미지에대하여 " 시력검사용이미지 " 등과같이대체텍스트를제공한다. 적용기술 12) 대체텍스트를빈공간 (alt="") 이나생략해서제공해야하 는경우 - 42 -

이미지에는반드시대체텍스트를제공해야한다. 다만, 이미지에대체텍스트 를제공함으로써사용자에게혼란을주는경우대체텍스트를빈공간 (alt="") 으 로제공해야한다. 대체텍스트를빈공간으로제공하는경우는다음과같다. 장식용으로사용하는이미지등 텍스트설명이함께제공되는이미지또는의미가없는글머리표등과같은이미지에는대체텍스트를빈공간으로제공해야한다. 이미지에대한대체텍스트의 alt 속성을빈문자열 (alt="") 로설정한다. 여기서 alt 속성을빈문자열로제공한다는것은 alt 속성을제공하되그값을 null로제공한다는의미이다. 다음의예는이미지글머리표의대체텍스트를빈문자열로제공하는경우다.... <p><img src="blit.gif" alt=""/> 화면낭독프로그램 </p> <p><img src="blit.gif" alt=""/> 화면확대프로그램 </p>... < 참고 > title 속성과 alt 속성을모두제공하면일부화면낭독프로그램은두속성을모두읽어주어혼란을줄수있다. 따라서대체텍스트는반드시 alt 속성으로제공하며, alt 속성을제공하지않는태그의경우에만 title 속성으로제공한다. 배경이미지 배경이미지는정보제공의목적보다는시각적인장식효과를내기위하여사 용되는이미지이다. 따라서배경이미지에대한대체텍스트는보조기술이무시하 도록제공되어야한다. CSS 를이용하여배경이미지를제공하면대체텍스트를보조기술로전달하지 않는다. 다음 CSS 코드는웹페이지의배경이미지를지정하는예다.... <style type="text/css"> body { background: #ffe url('/images/home-bg.jpg') repeat; } </style> - 43 -

</head> <body>... 플래시콘텐츠 플래시콘텐츠를구성하는무비클립또는버튼등에대체텍스트를제공함으로써사용자에게혼란을주게될경우대체텍스트를제공하지않아야한다. 장식용으로사용되는무비클립또는텍스트설명이함께제공되는무비클립등이여기에해당된다. 어떤무비클립에대한대체텍스트를제공하지않기위해서는액세스가능성 (Accessibility) 패널을열고, 무비클립을선택한후에액세스가능성패널의 ' 객체를액세스가능하게만들기 (Make object accessible)' 항목을체크해제 (uncheck) 한다. 이항목을체크해제하면이무비클립의이름 (N) 항목이나설명 (D) 항목에대체텍스트나설명문을제공하더라도보조기술은이무비클립에대한대체텍스트를무시하게된다. 플래시콘텐츠를 ActionScript 2.0으로개발하는경우무비클립 (movieclip) 에대한 _accprops 객체의 silent 속성을 true 로설정해야한다. // ActionScript 2.0 Example // 'decorative_mc' is an instance placed on the movie's main timeline _root.decorative_mc._accprops = new Object(); _root.decorative_mc._accprops.silent = true; ActionScript 3.0으로개발하는경우무비클립에대한 accessibilityproperties 객체의 silent 속성을 true 로설정한다. // ActionScript 3.0 Example // 'decorative_mc' is an instance placed on the movie's main timeline decorative_mc.accessibilityproperties = new AccessibilityProperties(); decorative_mc.accessibilityproperties.silent = true; 실버라이트콘텐츠 실버라이트콘텐츠를구성하는콘텐츠에대체텍스트를제공함으로써사용자에 게혼란을주게될경우대체텍스트를제공하지않아야한다. 장식용으로사용되 - 44 -

는배경이미지, 글머리표등이여기에해당된다. 대체텍스트를제공하지않아야하는실버라이트객체는 Automation Properties 클래스를이용한 Name 속성및 LabeledBy 속성등을제공하지않는다. o 잘못된사례및개선방법잘못된사례 1) 의미나기능이있는텍스트아닌콘텐츠에빈문자열을대체텍스트로제공 대체텍스트는텍스트가아닌콘텐츠가제공하는기능이나정보를동등하게전달할수있도록제공해야한다. 예를들어, 어떤이미지에대한대체텍스트로이미지파일명인 "image.jpg" 등과같이제공하거나 " 이미지 1", " 이미지 2" 등과같이이미지에대한일련번호를제공하거나그냥 " 이미지 " 라고하는것은부적절하다. 다음의예는의미를지닌세개의이미지에무의미한대체텍스트를제공 (alt="") 하여보조기술이이미지와동등한정보를인식할수없는경우다. <ol> <li><img src="text1.gif" alt=""/></li> <li><img src="text2.gif" alt=""/></li> <li><img src="text3.gif" alt=""/></li> </ol> 개선방법 이를해결하기위해서는 alt 속성을이용하여각각의이미지에적절한대체텍 스트를제공하며, ol(ordered list) 방식으로구현해야한다. - 45 -

< 개선사례 1> <ol> <li><img src="text1.gif" alt="1. 보다효율적이고편리한맞춤형 One-Stop 서비스조회 "/></li> <li><img src="text2.gif" alt="2. 대상별생애별욕구정보를통한주민서비스안내 "/></li> <li><img src="text3.gif" alt="3. 공공및민간시설 / 단체의서비스정보제공 "/></li> </ol> - 46 -

잘못된사례 2) 복잡한정보를하나의이미지로표현하고간단한대체텍 스트만제공 다음예는기관의경영이념을표방하는정보를제목이미지와내용이미지로제작한경우다. 이예에서제목이미지는빈문자열의대체텍스트를제공하고있으며, 내용이미지는 " 이미지 " 라는부적절한대체텍스트를제공하여그의미를제대로전달하지못하고있다. 개선방법 조직도, 경영이념등과같이많은정보를하나의이미지로구성하여정보를제공하는콘텐츠는설명문을제공해야한다. 또한이미지자체에대한적절한대체텍스트도제공해야한다. <img src="vision.gif" alt="oo 행정혁신비전과목표 " longdesc="vision_goal.html"/> 더바람직한방법은내용이미지를 ' 단계별혁신목표성과 ' 부분과 ' 추진 전략로드맵 ' 의두가지이미지로구분하고각각의이미지에대하여 alt 속성과 longdesc 속성을제공하는것이다. - 47 -

잘못된사례 3) 주기적으로변하는콘텐츠의대체텍스트를변경하지않는경우 텍스트아닌콘텐츠가갱신되는경우대체텍스트도동시에갱신되어야한다. 매출자료를토대로월매출실적을제공하도록웹애플리케이션을제공하는경우달이변경되었음에도불구하고월매출실적이변경되지않는대체텍스트는잘못된구현예다. 계절에따라소개페이지 (intro page) 의사진이주기적으로변경됨에도불구하고사진에대한대체텍스트가동시에변경되지않는다면잘못구현된예다. 몇개의상품소개이미지가 2초에한번씩주기적으로변화하도록플래시로구현한콘텐츠에서이미지가바뀔때마다대체텍스트가갱신되어야함에도불구하고플래시콘텐츠전체에대한대체텍스트를 " 상품보기 " 로제공한것은잘못구현한경우다. 개선방법 위에열거한잘못을개선하기위해서는플래시콘텐츠전체에대한대체텍스트를제공하지않고, 플래시콘텐츠를구성하고있는모든이미지를무비클립으로변환하며, 각무비클립별로액세스가능성패널의 ' 객체를액세스가능하게만들기 (Make object accessible)' 항목을체크 (check) 하고, 이름 (N) 항목에각이미지별로적절한대체텍스트를제공하면된다. 잘못된사례 4) 의미있는정보를배경이미지로제공 의미있는이미지를 CSS 만으로표현함으로써이미지가표현하려는중요한의미 나정보를사용자에게제공할수없도록구현하지않아야한다. ' 연이율 5.5%!' 라는텍스트이미지 (rate.png) 를배경이미지로구현하고은 행이제공하는금리를텍스트로제공하지않아정작중요한이자율을보조 기술사용자가인식할수없다. - 48 -

CSS 코드 : p#anual_interest { padding-left: 200px; background: transparent url(./rate.png) no-repeat top left; } HTML 코드 : <p id="anual_interest"> 당은행은가장높은금리를보장합니다! </p> 개선방법 이문제를해결하기위해서는이미지를배경이미지가아닌 img 태그를사용하 여구현하고 alt 속성을제공한다. <p><img id=""src="./rate.png" alt =" 연이율 5.5%!"/> </p> 당은행은가장높은금리를보장합니다! 다음사례는온라인음반매장에서 CD 타이틀별로 ' 신규입고 ', ' 재고없음 ', ' 구입가능 ' 등으로재고를구분하여목록을보여주는콘텐츠로재고여부를배경이미지로표현한경우다. 이경우타이틀의재고여부를보조기술사용자가인식할수없다. CSS 코드 : ul#cdlist li { padding-left: 20px; } ul#cdlist li.new { background: transparent url(new.png) no-repeat top left; } ul#cdlist li.instock { background: transparent url(instock.png) no-repeat top left; } ul#cdlist li.outstock { background: transparent url(outstock.png) no-repeat top left; } - 49 -

HTML 코드 : <ul id="booklist"> <li class="new">cd Title #1</li> <li class="instock">cd Title #2</li>... <li class="outstock">cd Title #n</li> </ul> 개선방법 이문제를해결하기위해서는 ' 신규입고 ', ' 구입가능 ', ' 재고없음 ' 을의미하는세 가지이미지 (new.png, instock.png, outstock.png) 를 img 태그로표현하고 alt 속성을이용하여대체텍스트를제공한다. <ul id="booklist"> <li><img src="new.png" alt=" 신규입고 "/> CD Title #1</li> <li><img src="instock.png"/> alt=" 구입가능 "/> CD Title #2</li>... <li><img src="outstock.png" alt=" 재고없음 "/> CD Title #n</li> </ul> 잘못된사례 5) 빈칸이미지의대체텍스트가콘텐츠의인식을방해하는경우 보조기술사용자에게혼란을줄수있는대체텍스트를제공하는것은잘못된경우다. 다음사례는콘텐츠에빈칸이미지 (spacer.gif) 를삽입하여간격을조절하고있다. 화면낭독프로그램은이콘텐츠를 " 나무종류 : ' 빈칸 ' 상수리나무 " 라고읽어주므로빈칸이미지 (spacer.gif) 에대한대체텍스트가도리어콘텐츠의인식을방해하게된다. <div> 나무종류 : <img src="spacer.gif" width="100" height="1" alt=" 빈칸 "/> 상수리 나무 </div> 개선방법 이를방지하기위하여빈칸이미지에대한대체텍스트를빈문자열 (alt="") 로 설정한다. - 50 -

<div> 나무종류 : <img src="spacer.gif" width="100" height="1" alt=""/> 상수리 나무 </div> 잘못된사례 6) 지도와같은텍스트아닌콘텐츠에대한설명이불충분한경우 텍스트아닌콘텐츠에대한대체텍스트또는설명 (longdesc) 은이콘텐츠가 가진기능이나용도를잘이해할수있도록설명해야한다. 예를들어, 다음그림과같이지하철역주변의주요건물을소개하는지도에서 설명문이건물의이름또는상호만을제공하는것은충분하지않다. <map.gif> <img src="./map.gif" alt=" 등촌역주변 " /> <p> 등촌역근처주요건물 </p> 강서생복요리전문, 미래에셋, OO주유소 ( 로드뷰제공 )... 그린월드호텔, 북두칠성. 개선방법 지도의용도가지하철출구와건물들과의상관관계를나타내고있으므로이지 도에대한설명 (longdesc) 은지하철역의출구번호별로각건물까지의도달거 리, 접근방법등에대한내용을포함해야한다. <img src="./map.gif" alt=" 등촌역주변 " /> <p> 등촌역주변주요건물 </p> 1번출구 : 강서생복요리전문, 우측 30m 전방 ; 2번출구 : 미래에셋, 좌측 10m 전방 ; 북두칠성, 좌측 100m 전방 ; OO주유소 ( 로드뷰제공 ), 150m 전방... 8번출구 : 그린월드호텔, 정면 50m 전방. 잘못된사례 7) 중요한정보를색으로만제공하는경우 대체텍스트에는색, 위치, 모양등을묘사하는단어를사용하지않고그차이 - 51 -

를직접문장으로표시해야한다. 다음예는영업직원별연간매출액을표시한막대그래프이다. 이그래프에대해다음대체텍스트와같이문장중에색을표시하는경우색을인식할수없는사용자에게충분한정보를제공하지못한다. 즉, 다음그림에보인바와같이... 그래프에서빨간색막대는... 의문장에서시각장애인은그림중의빨간색막대와관련한정보를알수없다. 매출 달성미달액 4.5 4 3.5 3 2.5 매출 ( 억 ) 2 1.5 1 0.5 0 홍길동이철수최상규문성남 직원명 <img src="char.png" alt=" 영업직원의연간매출액그래프로, 홍길동매출 3.5억 ; 이철수매출 4.2억 ; 최상규매출 3.7억 ; 문성남매출 2.6억. 그래프에서빨간색막대는연간매출예정액과의차이를나타냄."/> <char.png> 개선방법 대체텍스트가색으로인한차이를구체적으로설명하도록수정할필요가있다. 매출 달성미달액 4.5 4 3.5 3 2.5 매출 ( 억 ) 2 1.5 1 0.5 0 홍길동이철수최상규문성남 직원명 <img src="char.png" alt=" 영업직원의연간매출액그래프로, 홍길동매출 3.5억 ; 이철수매출 4.2억 ; 최상규매출 3.7억 ; 문성남매출 2.6억. 문성남씨는연간매출예정액 (3억) 에서 0.4억이미달함."/> <char.png> 잘못된사례 8) alt 속성이아닌 title 속성을이용하여대체텍스트제공 이미지에대한대체텍스트를 alt 속성으로반드시제공해야한다. 다음예는 alt 속성대신 title 속성을이용하여대체텍스트를제공하고있다. - 52 -

<img src="logo.gif" title=" 한국정보화진흥원로고 "/> 개선방법 이미지에대한대체텍스트는반드시 alt 속성을이용하여제공해야한다. <img src="logo.gif" alt=" 한국정보화진흥원 " /> 잘못된사례 9) QR 코드에서 URL 을대체텍스트로알려주지않는경우 웹페이지의일부콘텐츠에편리하게접속할수있도록하기위하여제공되는 QR 코드, 바코드등의이미지에는 QR코드나바코드의용도를대체텍스트로제공해야한다. 예를들어, 어떤웹사이트로이동하기위한 QR코드의대체텍스트는접속할수있는웹사이트주소를대체텍스트로제공해야한다. 다음예는 QR 코드이미지에대한대체텍스트를제공하나접속할주소를알려 주지않은경우다. <QR_code.jpg> <h2>ddos 공격우수대응사례 </h2> <p>ddos 공격우수대응사례에대하여... <p> <img src="qr_code.jpg" alt="ddos 공격우수대응사례 QR 코드 "/> 개선방법 QR 코드이미지에저장된주소정보등을대체텍스트또는설명으로제공하거 나링크를제공하여 QR 코드가알려주는웹페이지로직접이동이가능하도록 한다. <h2>ddos 공격우수대응사례 </h2> <p>ddos 공격우수대응사례에대하여... <p> <img src="qr_code.jpg" alt="ddos 공격우수대응사례 QR 코드 " - 53 -

longdesc="ddos_1200034.html/> - 54 -

검사항목 1.2.1 ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원 고또는수화를제공해야한다. o 개요 멀티미디어콘텐츠를동등하게인식할수있도록제작하기위해서는자막, 원고 또는수화를제공해야한다. 대체수단에서가장중요한요소는멀티미디어콘텐 츠와동등한내용을제공하는것이다. 가장바람직한방법은닫힌자막 (Closed caption) 을오디오와동기화시켜 (Synchronized) 제공하는것이다. 대사없이영상 (Video) 만제공하는경우화면해설 ( 텍스트, 오디오, 원고 ) 을제공하고, 음성만제공하는경우자막, 원고또는수화를제공해야한다. 생방송콘텐츠의경우자막또는수화의제공을이검사항목의예외로인정한 다. 그러나생방송콘텐츠의경우에도자막또는수화를제공하는것이바람직하 다. 생방송콘텐츠의경우에도검사항목 1.1.1, 적용기술 9) 에의거한콘텐츠에대 한대체텍스트를반드시제공해야한다. o 적용기술 적용기술 13) 열린자막제공 청각장애인은시청각콘텐츠에포함된대화를청취할수없으므로이를시각정보로제공해야한다. 열린자막 (Open caption) 이란동영상의오디오트랙에포함된대화및중요한음향정보를텍스트자막으로표시하도록비디오트랙에포함시켜만드는것을말한다. 따라서열린자막을제공하는동영상은자막이항상화면에표시되므로특별한동영상플레이어를사용할필요가없다. - 55 -

적용기술 14) 닫힌자막제공 닫힌자막은사용자가필요에따라자막을화면에표시하지않거나표시하도록 제작하는방법이다. 닫힌자막의내용은동영상의대화와중요한음향정보를포 함해야한다. 닫힌자막은동영상과동기화되어야하며, 이를위해서는닫힌자막을제공할 수있는동영상플레이어를사용해야한다. 대화나음향효과가제공되지않는동영상은 ' 이동영상은음성을제공하지않음 ' 이라는메시지를닫힌자막방식을이용하여수시로제공할필요가있다. < 참고 > 자막제공방법 SMIL 1.0: http://www.w3.org/tr/2010/note-wcag20-techs-20101014/sm11 SMIL 2.0: http://www.w3.org/tr/2010/note-wcag20-techs-20101014/sm12 플래시 : http://www.w3.org/tr/2010/note-wcag20-techs-20101014/flash9 실버라이트 : http://www.silverlight.net/learn/quickstarts/accessibility/#mediaandcaptioning 적용기술 15) 대본또는원고제공 오디오를제공하는콘텐츠는포함하고있는대화또는음향정보를사용자가 접근할수있도록텍스트대본을제공한다. 대본은오디오내용과일치해야한다. 대본의양이많아상하스크롤이필요한경우동영상또는오디오와동기화되 어스크롤되는것이바람직하다. 대본을제공하는방법은다음중한가지방법을적용한다. < 참고 > 대본제공방법 l l 동영상콘텐츠바로옆에대본을텍스트로제공 동영상콘텐츠또는동영상콘텐츠주위에대본으로이동하는링크제공 - 56 -

적용기술 16) 수화제공 빠르게변화하는자막을인식하기어려운청각장애인을위하여동영상의자막을수화로통역하는영상을함께제공한다. 함께제공되는수화동영상과원래의동영상은서로다른영역에표시될수있다. < 참고 > 수화동영상의제공방법 SMIL 1.0: http://www.w3.org/tr/2010/note-wcag20-techs-20101014/sm13 SMIL 2.0: http://www.w3.org/tr/2010/note-wcag20-techs-20101014/sm14 수화동영상을원래의동영상과같은비디오트랙에포함시켜제공하는경우 동영상의해상도가낮을경우수화를알아보기어려운문제가있으므로동영상의 해상도를적절히유지해야한다. 수화와함께자막을제공하는경우자막으로인하여수화가가리지않도록닫 힌자막으로구현하여사용자가자막을화면에서삭제할수있어야한다. 적용기술 17) 음성이없는동영상의대체수단제공 대화나독백, 설명등과같은음향정보가없는동영상은애니메이션, 동영상을통한텍스트나그래픽정보제공, 사람이나동물들의행동을묘사하는경우많이사용된다. 따라서이러한동영상은콘텐츠가이야기하고자하는바를시각장애인이인지하기위해서는동영상의내용을충실히묘사할수있는대체수단을제공해야한다. 1) 대체텍스트또는설명으로제공 동영상의내용을텍스트문서로작성하고이를대체텍스트또는설명문으로 제공한다. 여기에서중요한점은대체텍스트또는설명만으로도동영상이의도하 는바를사용자가충분히이해할수있도록정보를제공해야한다는점이다. 대체텍스트또는설명을제공하는방법은다음과같다. < 참고 > 대체텍스트또는설명제공방법 - 57 -

w w w w alt 속성으로제공 longdesc 속성으로제공동영상콘텐츠주위에설명문제공동영상콘텐츠또는동영상콘텐츠주위에설명문으로이동하는링크제공 2) 오디오해설제공 동영상의내용을설명해주는해설을오디오파일로제공하는방법이다. 이방 법은첫번째방법에서작성한텍스트문서를읽어주는경우로간주할수있다. 예를들어, 종이접기동영상에대한오디오해설은 " 첫째, 정사각형의종이를 준비한다. 두번째, 종이를반으로접어이등변삼각형을만든다. 세번째는이등 변삼각형의... ' 와같이단계별로접는방법을설명해야한다. 오디오해설은동영상의오디오트랙을이용하여제공한다. 만일동영상장면에대한오디오해설이장면의지속시간보다길어오디오해설이종료되기전에동영상의장면이바뀌는경우동영상의해당장면이바뀌기직전에동영상을일시정지시키고오디오해설이완료된다음동영상이계속이어지도록하는것이바람직하다. o 잘못된사례및개선방법 잘못된사례 10) 자막, 원고, 수화중어느한가지도제공하지않는경우 1) 대화나음향정보를제공하는다음멀티미디어콘텐츠는청각장애인이접근 할수없다. - 58 -

개선방법 이콘텐츠에는청각장애인이인식할수있도록자막, 원고또는수화중하나를 제공해야한다. 2) 다음예와같이우리나라자연의사계절아름다움을표현한동영상에서잔 잔한배경음악을함께제공하는콘텐츠는시각장애인이인식할수없다. 개선방법 시각장애인이접근할수있도록영상의변화를화면해설방식으로제공할필 요가있다. 만일화면에텍스트를제공한다면화면해설과함께텍스트를읽어주 어야한다. 잘못된사례 11) 동영상의내용을요약하여제공하는자막또는원고의경우 자막, 대본등을제공하는동영상콘텐츠의경우자막또는대본이동영상의 모든내용을포함해야한다. 다음과같은동영상콘텐츠는잘못된사례에속한다. 동영상의대화를요약하여제공 내용이해에필수적인음향정보누락 동영상의일부대화에대한대본생략 다음은요약정보를제공하는경우이므로잘못된사례이다. - 59 -

개선방법 멀티미디어콘텐츠의자막, 대본또는수화는요약정보를제공하지않고동영 상의대화, 중요한음향정보를충실히제공해야한다. 잘못된사례 12) 대체수단에대한또다른대체수단임을알려주지않는경우 사용자는멀티미디어콘텐츠가제공되는경우항상대본등의대체수단을함께제공할것으로예측한다. 그런데멀티미디어콘텐츠가텍스트콘텐츠또는여타의콘텐츠에대한대체수단으로제공되는경우대본을중복해서제공할필요가없다. 이경우, 멀티미디어콘텐츠가대체수단임을명시해야한다. 예를들어, 종이접기절차를텍스트로제공하는웹페이지의한부분에종이접기절차를시연하는동영상또는오디오콘텐츠를제공하는경우이콘텐츠에대본이나긴설명문등을제공하기보다는 " 종이접기에대한대체수단 " 이라는대체텍스트를제공하는것으로충분하다. 멀티미디어콘텐츠주변에종이접기본문으로이동하는링크를함께제공하는 것도바람직하다. - 60 -

잘못된사례 13) 열린자막이수화를가리는동영상 수화와자막을제공하는동영상콘텐츠에서자막으로인하여수화를가리는콘 텐츠는수화를인식할수없게하므로바람직하지않다. 개선방법 이를개선하기위해서는수화와자막을동시에제공할때다음과같이대체수 단을제공해야한다. 수화와자막중에서최소한한가지대체수단을닫힌방법으로제공하여 사용자가대체수단을선택할수있도록함 수화와자막을동시에제공하는경우수화를전면에나타나게함 잘못된사례 14) 동영상의해상도가낮아수화를볼수없는경우 웹페이지를통하여제공하는동영상콘텐츠에수화를제공하는경우동영상을 확대하지않으면수화를인지하기어렵다. 1) 동영상의해상도가낮으면화면을확대하더라도수화를인식하기어렵다. 개선방법 이를개선하기위해서는수화를제공하는동영상은확대를하더라도수화를인 식할수있도록충분한해상도의동영상을제공해야한다. 2) 수화통역사와배경간의명도대비가작은콘텐츠는청각장애인이인식하기 어렵다. 개선방법 수화통역사의손과얼굴과배경간의명도대비는 3:1 이상이어야한다. 수화동 영상의명도대비에관한검사는검사항목 1.3.3( 텍스트콘텐츠의명도대비 ) 을 만족해야한다. - 61 -

검사항목 1.3.1 ( 색에무관한콘텐츠인식 ) 콘텐츠는색에관 계없이인식될수있어야한다. o 개요 콘텐츠에서제공하는모든정보는색을배제하여도특정한색을구별할수없 는사용자나흑백디스플레이사용자, 흑백인쇄물을보는사용자가해당콘텐츠 를인식할수있도록제공해야한다. o 적용기술 적용기술 18) 색을보완하는텍스트제공 색을이용하여서식의용도를나타내는경우와같이정보를제공하는수단으로 색을사용한다면보완방법을함께제공하여색의의미를전달할수있어야한다. 가장쉬운방법은색의의미를텍스트로제공하는것이다. 다음예와같이예약이마감되었음을 ' 완 ' 이라는글자를병기하고색으로표 시한다. - 62 -

입력서식에서필수입력항목임을알려주기위하여해당항목의레이블에 '*' 표시를추가하고색으로강조하는것도좋은방법이다. <label for="name" class="required"> * 이름 : </label> <input id="name" type="text" size="25" value=""/> <style type="text/css">.required { color=red; } </style> 입력서식에서필수입력항목임을알려주기위하여해당항목의레이블에 ' ( 필수 )' 표시를추가하고색으로강조할수도있다. <label for="name" class="required"> 이름 ( 필수 ): </label> <input id="name" type="text" size="25" value=""/> <style type="text/css">.required { color=red; } </style> 이미지와대체텍스트를사용하는것도가능하다. 예를들어, 온라인쇼핑몰에서새로입고된상품임을알려주기위하여상품주위에신규상품임을알려주는이미지를함께제공한다. 물론이이미지에대해서는 new 라는대체텍스트를제공해야한다. 적용기술 19) 색을보완하기위하여글자모양을이용하는방법 - 63 -

색을구분할수없거나약시사용자를위하여텍스트의표시방법을달리하는방법을사용할수있다. 글자모양을이용한방법으로는다른글꼴의사용, 밑줄 (underline) 표시, 굵은글씨체또는이탤릭체, 글자크기의변경, 명도대비차이를이용한방법등이있다. 대표적인방법은다음과같다. 링크텍스트를색을이용할뿐만아니라밑줄표시를하거나이탤릭체로표시온라인쇼핑몰에서새로입고된상품임을알려주기위하여색과함께상품명을크고굵은글씨체로표시텍스트콘텐츠의일부를링크텍스트로이용하는경우링크텍스트의색을밝은파란색 (#3366CC) 으로표시하고나머지텍스트를검정색 (#000000) 으로표시하면색을구분하지못하는경우도링크텍스트와나머지텍스트간의명도대비를이용하여링크임을알려줄수있음 적용기술 20) 색을보완하기위하여무늬또는모양을이용하는방법 색을구분할수없거나약시사용자를위하여무늬또는모양을이용하여콘텐 츠를표시한다. 1) 무늬사용 지역별아파트매매가변동률을막대그래프로표시할때주별막대를무늬를 이용하여표시할경우범례도무늬를이용하여표시한다. - 64 -

2) 형상이용어떤지역의전세값과매매값변동추이를꺾은선그래프로나타낼때전세값과매매값의월별변동추이를각각다른모양 ( 다이아몬드, 네모 ) 으로표시하여그래프를구분할수있도록한다. 3) 점선과실선사용어떤프로세스를완성하기위하여반복적인단계를알려주는플로차트에서조건에따른처리과정을빨간점선의화살표와파란실선의화살표로구분하여표시한다. 점선과실선을이용한사례예시제시할것!!! o 잘못된사례및개선방법 잘못된사례 15) CSS 로인하여링크임이구분되지않는경우 다음예와같이 CSS를이용하여링크텍스트의밑줄을사라지게하는경우는잘못된것이다. <head> <style type="text/css"> p a:link {text-decoration: none} p a:visited {text-decoration: none} p a:active {text-decoration: none} p a:hover {text-decoration: underline; color: red;} - 65 -

</style> </head> <body>... <p> 웹접근성에서 <a href="./criteria.html/#criteria_1_3_1"> 색에관한검사항목 </a> 에관한잘못된사례및개선방법은다음과같다. </p>... </body> 개선방법 이를해결하려면위 CSS 코드에서 link 의표시방법을다음과같이수정해야 한다. 이때링크텍스트는파란색으로표시되며, 밑줄이표시된다. p a:link {text-decoration: underline; color: blue;} 잘못된사례 16) 색으로만필수입력항목을표시한경우 사용자서식의필수항목을색과함께시각적인추가수단을제공해야한다. 예 를들어, 다음의회원가입서식에서필수항목을꽃분홍색으로표시하고필수항 목임을알려주는것은잘못된경우다. - 66 -

개선방법 색을배제하고서라도구분할수있도록, 다음그림과같이 '*' 등을색과함께 제공하여색이외의방법으로도구분할수있도록제공해야한다. 잘못된사례 17) 오류메시지를색으로만구분하도록한경우 오류가발생한서식부위를색으로만표시하면시각장애인이나색을구분할수 없는사용자는오류가발생한서식의위치를인식할수없다. 예를들어, 온라인서식을작성하여제출할때어떤항목을채우지않아오류가 발생하였을경우오류가발생한서식의레이블을빨간색으로만표시하는것은잘 못된것이다. 개선방법 이를개선하기위해서는오류가발생한서식의레이블을빨간색굵은글꼴로표현하거나밑줄을이용하여표시하는등색이외의추가적인인지수단을제공해야한다. 이외에도다음그림과같이오류메시지에테두리를제공하는것도좋은방법이다. - 67 -

잘못된사례 18) 그래프를색으로만인식하도록하는경우 년도에따른통신서비스별가입자수추이를나타낸왼쪽의잘못된사례에해 당하는색을이용하여통신서비스를구분하고있어색을구분할수없는사용자 는인식할수없다. 개선방법 이를개선하려면색이외에추가적인인지수단을제공해야한다. 다음그림에서 오른쪽의개선사례는통신서비스별로가입자수의변화와범례를다른형상으로 표시한것이다. < 잘못된사례 > < 개선사례 > - 68 -

잘못된사례 19) 일정구분을색으로만구분하도록한경우 다음그림의왼쪽에보인잘못된사례는월별예약현황을분홍색과하늘색으로 표시한경우다. 색을구분할수없는사용자는예약가능또는예약마감여부를 알수없다. 개선방법 이를개선하려면색을배제하고서라도내용을구분할수있도록무늬를이용하여구분할수있도록한다. 오른쪽그림의개선사례는예약가능과예약마감을무늬를이용하여구분한경우로, 색을구분하지못하는사용자도예약현황을구분할수있다. < 잘못된사례 > < 개선사례 > - 69 -

검사항목 1.3.2 ( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없이인식될수있어야한다. o 개요 본검사항목은특정요소를가리키거나지시사항을전달하는콘텐츠에한정해적용하는것으로, 시각이나청각등과같은특정감각에만의존하여제공해서는안된다는것이다. 즉, 다른감각을통해서도지시사항을인식하는데문제가없도록제공해야한다. 본검사항목은화면에표시되는텍스트콘텐츠와대체텍스트가제공된텍스트아닌콘텐츠의경우보조기술을통해다른감각으로의전환이가능하기때문에화면에표시되는텍스트를음성으로다시출력해주는것을의미하지는않는다. o 적용기술 적용기술 21) 시각정보를이용한지시문의보완 시각적인지시나위치를사용하면시각장애인이나화면의일부를확대하여사용하는약시자는지시하는콘텐츠를찾아내기어렵다. 또한페이지레이아웃은폰트나브라우저의크기변경등으로달라질수있어콘텐츠의상대적인위치도변경될수있으므로주의해야한다. 색, 크기, 모양또는위치를이용하여어떤컨트롤이나콘텐츠를지시하는경우 시각장애인이인식할수있도록대체수단을제공해야한다. 다음경우는그일례 이다. 웹페이지에둥근모양의빨간색버튼과초록색버튼을제공하고각버튼의레이블을각각 ' 확인 ' 과 ' 취소 ' 로구성한콘텐츠에서 " 작성한서식을제출하려면빨간색확인버튼을누르시오." 라는지시문이지정하는버튼을시각장애인도사용할수있다. 웹페이지에두개의크기가다른둥근모양버튼을제공하고각버튼의레이블을 ' 확인 ' 과 ' 취소 ' 로제공하는콘텐츠에서 " 작성한서식을제출하려면 - 70 -

큰확인버튼을누르시오." 라는지시문이지정하는버튼을시각장애인도사 용할수있다. 웹페이지에둥근모양, 네모모양및오각형모양의버튼을제공할경우버튼별로텍스트레이블을제공하면모양과텍스트레이블을이용하여지시하는버튼을인식할수있다. 예를들어, " 작성한서식을제출하려면둥근색의확인버튼을누르시오." 라고하면시각장애인도지시하는버튼을확인하여사용할수있다. 웹페이지에서방향을이용하여콘텐츠를지시하는경우도방향과함께콘텐츠의레이블을함께제시하면지시하는콘텐츠를쉽게인식할수있다. 예를들어, " 오른쪽상단의 ' 요약보기 ' 를클릭하시오." 라는지시문이지시하는콘텐츠를시각장애인도사용할수있다. 더좋은방법은그냥 "' 요약보기 ' 를클릭하시오." 라고하는것이다. 적용기술 22) 청각정보를이용한지시문의보완 청각정보를이용하여지시문을제공하는웹콘텐츠는청각정보를인식할수 없는사용자를위한대체수단을제공해야한다. 예를들어, 온라인시험을제공하는웹페이지에서제한시간이종료되기 1분전임을알려주기위한방법으로 ' 시험종료 1분전 ' 이라는음성을들려주는콘텐츠는 ' 시험종료 1분전 ' 이라는메시지를화면에출력하도록하면청각장애인도그내용을보고상황을인식할수있게된다. 더좋은방법은 ' 시험종료 1분전 ' 이라는메시지를화면에출력함과동시에화면을몇차례깜빡이도록하는 ' 소리탐지 (Sound Alert)' 기능을활성화시키면청각장애인도경고음을시각적으로인지할수있다. < 참고 > 소리탐지 (Sound Alert) 컴퓨터가주의또는경고를위한음향효과를제공하는대신화면을깜빡임으로시각적으로주의또는경고할수있는방법을소리탐지 (Sound Alert) 라고하며, 대부분의운영체제가이기능을제공함 - 71 -

o 잘못된사례및개선방법 잘못된사례 20) 방향, 위치정보만을이용하여사용법을알려주도록구현한경우 시각적인위치나방향을이용하도록지시하는내용이포함된콘텐츠는페이지 레이아웃의변화가예상되는경우또는화면의레이아웃을시각적으로인식하기 어려운사용자가사용하기어렵다. 따라서다음사례는잘못된경우들이다. 1) 웹페이지의내비게이션방법을다음페이지로이동하려면오른쪽버튼, 이 전페이지로이동하려면왼쪽버튼을누르시오 " 와같이제공하는것은시각 장애인이사용할수없으므로잘못된콘텐츠이다. 개선방법 이를개선하기위하여지시문을 " 다음페이지로이동하려면 ' 다음 ' 버튼, 이전페이지로이동하려면 ' 이전 ' 버튼을누르시오 " 와같이수정해야한다. < 참고 > 컨트롤이나입력서식등을웹페이지내의상대적인위치를이용하여지시하는경우실제웹콘텐츠의위치와웹페이지표현위치가다르면혼란을줄수있으므로주의해야함 2) 다음코드는 ' 미리보기 ' 버튼이화면상의오른쪽하단에표시하고위치와버튼레이블을이용하여버튼을선택하도록지시하는콘텐츠이다. 이경우, 시각장애인은콘텐츠를선형화하여읽을수있으므로 ' 오른쪽하단 ' 의의미가불분명하다. 따라서위치에대한정보를이용하기보다그냥해당버튼의레이블을이용하여지시하는것이좋다. 개선전 : <table> <tbody> <tr> <td colspan="2"> 오른쪽하단의 [ 미리보기 ] 버튼을누르시오.</td> <td> <span style="background: ButtonFace; color: ButtonText; border: medium outset ButtonShadow; - 72 -

width: 5em; display: block; font-weight: bold; text-align: center;"> 인쇄 </span> </td> </tr> <tr> <td> <span style="background: ButtonFace; color: ButtonText; border: medium outset ButtonShadow; width: 5em; display: block; font-weight: bold; text-align: center;"> 취소 </span> </td> <td> <span style="background: ButtonFace; color: ButtonText; border: medium outset ButtonShadow; width: 5em; display: block; font-weight: bold; text-align: center;"> 확인 </span> </td> <td> <span style="background: ButtonFace; color: ButtonText; border: medium outset ButtonShadow; width: 5em; display: block; font-weight: bold; text-align: center;"> 미리보기 </span> </td> </tr> </tbody> </table> 개선방법 고령자나약시자의경우브라우저의글자체를확대시켜콘텐츠를표시하면콘 텐츠의표시위치가지시하는위치와달라져혼란을줄수있다. 따라서가급적 위치정보를이용하여지시하지않도록콘텐츠를구현하는것이좋다. 즉, 다음과같이위치정보를제공하지않고버튼레이블을이용하여지시하도록 수정한다. 개선후 : <table> <tbody> <tr> <td colspan="2"> [ 미리보기 ] 버튼을누르시오.</td> - 73 -

... <td> <span style="background: ButtonFace; color: ButtonText; border: medium outset ButtonShadow; width: 5em; display: block; font-weight: bold; text-align: center;"> 인쇄 </span> </td> 잘못된사례 21) 화면위치만을이용하여객체를지정한경우 검색포털에서어떤단어에대한검색결과에대하여관련링크를제공하는경우검색페이지의콘텐츠중 ' 더많은결과는좌측의관련링크를참고하시오.' 라는텍스트를제공한다면시각장애인은관련링크가어느곳에위치하는지를인식할수없으므로관련링크로의접근이불가능하다. 개선방법 이를개선하기위해서는검색페이지내에관련링크로직접이동할수있는 링크를제공한다. 잘못된사례 22) 버튼모양만을이용하여사용법을알려준경우 온라인서식을작성하는페이지의마지막에세개의버튼을위치시킨경우를생각해보자. 작성과정에서작업을종료하고제출하기위한지시문을 " 작업을저장하지않고종료하려면네모버튼, 현재까지작업을저장하고종료하려면세모버튼, 작성을계속하려면둥근버튼을누르시오." 라고제시한다면모양을구별하지못하는화면낭독프로그램사용자는필요한작업을수행할수없다. 개선방법 이를개선하기위해서는버튼에텍스트를제공하는등의추가적인정보를제공하고지시문에이를반영해야한다. 위의예에서세개의버튼에각각 ' 종료 ', ' 저장 ', ' 계속 ' 이라는레이블을제공하고, 지시문을 " 작업을저장하지않고종료하려면 ' 종료 ' 버튼, 현재까지작업을저장하고종료하려면 ' 저장 ' 버튼, 작성을계속하려 - 74 -

면 ' 계속 ' 버튼을누르시오." 와같이수정한다. - 75 -

잘못된사례 23) 특수기호만을이용하여사용법을알려준경우 그래픽심벌을조합한단어는사용자가이해하기어려우므로사용하지않아야한다. 여기에서그래픽심벌은이미지, 텍스트이미지, 장식용문자등으로발음할수없는문자들이다. 예를들어, 웃는모습 ( ), 화살표 ( ), 체크표시 ( ) 등은의미가있는심벌들이나보조기술은이들그래픽심벌의의미를파악하기어렵다. 따라서보조기술이인식할수있기위해서는그래픽심벌을이미지로표현하고이미지에대한대체텍스트를제공하도록한다. 1) 온라인쇼핑몰에서상품이름앞에그래픽심벌 와 를이용하여각각 해당상품이 ' 구입가능 ' 또는 ' 구입불가 ' 임을알려주는예는화면낭독프로그 램사용자는상품이구입가능여부를알수없으므로잘못된경우다. 개선방법 이를개선하기위해서는그래픽심벌을이미지로제공하고이미지에대체텍스 트를제공하여해결한다. 2) 다음그림은공인인증서저장매체선택목록이다. 그림에서그래픽심벌 ' ' 는 이동식디스크목록을열기위한버튼이다. 그러나이그래픽심벌은보조 기술이의미없는문자로취급하므로보조기술사용자는그의미를알수없다. 개선방법 이를개선하려면그래픽심벌 ' ' 을이미지로구현하고이이미지에대체텍스 트를제공한다. 이이미지에대한대체텍스트로는 " 이동식디스크선택 " 이한가 지예가될수있다. - 76 -

검사항목 1.3.3 ( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠 와배경간의명도대비는 4.5 대 1 이상이어야한다. o 개요 웹페이지에보이는핵심텍스트콘텐츠와배경간의충분한대비를제공하여, 저시력자, 색각이상자, 고령자등도콘텐츠를인식할수있도록제공해야한다. 이를위하여보통크기 (18pt 미만, 또는굵은 14pt 미만 ) 의텍스트는 4.5:1을만족해야한다. 그이상의텍스트 (18pt 이상, 또는굵은 14pt 이상 ) 의텍스트는 3:1을만족해야한다. 본문콘텐츠에단순히장식목적으로만사용한텍스트, 로고또는상호와같은텍스트이미지, 마우스나키보드를활용하여초점을받았을때색이나명도대비가변화하는콘텐츠, 사용할수없음을표시하기위하여명도대비를낮춘회색의컨트롤이나입력서식등은이검사항목의적용을받지않는다. < 참고 > 이검사항목은웹페이지가처음로드된상태의페이지에적용됨. 평가에사용하는웹브라우저의확대배율은기본또는 100% 로지정함 o 적용기술 적용기술 23) 배경과텍스트콘텐츠의색지정방법 배경과텍스트콘텐츠간의명도대비를만족하기위한구현방법은다음과같다. 1) 단색배경의경우텍스트간의명도대비를만족하도록배경색과텍스트색 을선정한다. 2) 배경과텍스트에무늬를주는경우상대적인명도대비가 4.5:1 이상이되도록한다. 예를들어, 문자의아랫부분을어둡게하고윗부분을밝게표시하는경우명도대비를만족하기어렵다. 이경우, 문자의배경을위쪽은검게하고아래쪽은밝은색으로디자인하면이검사항목을만족할수있다. - 77 -

3) 배경색과텍스트를같은계열의색을사용하여명도대비를만족할수없을 경우텍스트를구성하는문자에테두리 (halo) 를표시하여테두리와문자간 의명도대비차이를이용하여텍스트의구분이가능하도록구현한다. 적용기술 24) 배경과텍스트콘텐츠색을기본값으로지정하는방법 배경과텍스트색을지정하지않으면웹브라우저가제공하는배경색과전경색 이적용된다. 이경우, 사용자는웹브라우저가제공하는배경과텍스트색을자 신의필요에맞는 CSS 를이용하여사용할수있다. 적용기술 25) 배경과텍스트콘텐츠색을변경하는컨트롤의제공 웹페이지에배경과텍스트색을변경하는버튼을제공하고버튼을누를때마다 배경색과전경색을변경하는기능을제공하는웹페이지를제공할수있다. 이경우에도기본확대배율로설정된웹브라우저에처음로딩된웹페이지의명도대비는이검사항목을만족해야한다. < 참고 > 명도대비평가도구배경과텍스트간의명도대비를검사할수있는평가도구는다음과같음 1) Colour Contrast Check(snook.ca) http://www.snook.ca/technical/colour_contrast/colour.html 2) Colour Contrast Analyzer(Colors on the web) http://www.colorsontheweb.com/colorcontrast.asp 3) Contrast Analyser(The Paciello Group) http://www.paciellogroup.com/resources/contrast-analyser.htmlwindows/macapplication 4) Colour Contrast(Juicy Studio) http://juicystudio.com/services/luminositycontrastratio.php - 78 -

o 잘못된사례및개선방법 잘못된사례 24) 전경색은기본값으로두고배경색만을지정한경우 웹콘텐츠에서전경색과배경색을지정하지않으면웹브라우저가제공하는전 경색과배경색을조합을이용하여명도대비를조절할수있다. 웹콘텐츠의배경 색을지정하면웹브라우저의배경색변경설정기능이적용되지않는다. 1) 다음예는 body 태그의속성을이용하여배경색은지정하였으나전경색을지정하지않은잘못된경우다. 이사례는약시자가선호하는설정 ( 검정색배경, 흰색전경표시등 ) 을적용할수없다. 이를개선하기위해서는전경색과배경색을모두지정하거나모두지정하지않는것이좋다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title> 웹사용성소개 </title> </head> <body bgcolor="white"> <p>... document body...</p> </body> </html> - 79 -

개선방법 전경색과배경색은항상함께지정하거나함께지정하지않도록한다. 2) 다음예는 CSS를이용하여배경색을지정하였으나전경색을지정하지않은경우다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title> 배경색의지정 </title> <style type="text/css"> body {background-color:white} </style> </head> <body> <p> 배경색을흰색으로표시합니다.</p> </body> </html> 개선방법 전경색과배경색은항상함께지정하거나함께지정하지않도록수정한다. 잘못된사례 25) 배경색은기본값으로두고전경색만을지정하는경우 잘못된사례 24) 와유사한경우로, 웹콘텐츠의전경색을지정하고배경색을 지정하지않은경우다. 1) 다음은배경색은지정하지않고전경색만을지정한잘못된사례이다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" - 80 -

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title> 웹사용성소개 </title> </head> <body color="white"> <p>... document body...</p> </body> </html> 개선방법 전경색과배경색은항상함께지정하거나함께지정하지않도록변경한다. 2) 다음은 CSS를이용하여전경색을지정하였으나배경색은지정하지않는잘못된경우다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title> 전경색의설정 </title> <style type="text/css"> body {color:white} </style> </head> <body> <p> 전경색은항상흰색입니다.</p> </body> </html> 개선방법 전경색과배경색은항상함께지정하거나함께지정하지않도록변경한다. - 81 -

< 참고 > 배경이미지와텍스트배경과전경색의명도대비가충분하지않으면약시자가텍스트를인식하기어렵다. 또한배경이미지는텍스트와간섭을일으키지않아야한다. 예를들어, 배경이미지의짙은회색부분에검정색텍스트가표시되도록한다면텍스트와배경간의명도대비가작아텍스트를인식하기어렵게된다. 마찬가지로, 배경이미지의무늬와텍스트콘텐츠가간섭을일으키는경우에도텍스트의인식을방해하게된다. 이를방지하기위해서는텍스트와텍스트가표시되는배경이미지영역간의명도대비가충분하도록제공해야한다. - 82 -

검사항목 1.3.4 ( 배경음사용금지 ) 자동으로재생되는배경 음을사용하지않아야한다. o 개요 웹페이지에서자동으로재생되는배경음 ( 동영상, 음성, 음악등 ) 으로인해화면낭독프로그램을사용하는사용자가콘텐츠를인식하는데방해를받지않아야한다. 또한콘텐츠는배경음의음량을조절하더라도화면낭독프로그램의음량에는영향을주지않도록제공되어야한다. 이검사항목을만족하기위하여다음방법중한가지를적용한다. 1) 자동적으로재생되는배경음의지속시간을 3 초미만이되도록제한함 2) 3 초이상재생되는배경음을사용할경우, 반드시배경음을제어할수있는 수단 ( 멈춤, 일시정지, 음량조절등 ) 을웹페이지의첫부분에제공함 o 적용기술 적용기술 26) 재생시간이 3 초미만인배경음의사용 이방법은웹페이지에포함되어자동적으로재생되는사운드콘텐츠의길이를 3 초미만이되도록구현하고, 반복적으로재생되지않도록제공하는것이다. 올바르게구현한사례는다음과같다. 웹페이지를로딩하면자동적으로팡파르가들린후에종료된다. 웹페이지를로딩하면대표이사가 " 세상을바꾸는기업, OOOO" 라는멘트가한번제공된다. 웹페이지를로딩하면 " 시작하려면엔터키를누르세요." 라는멘트가한번제공된다. 웹페이지를로딩하면자동적으로재생되는경고음성을한번만제공한다. - 83 -

적용기술 27) 배경음을정지상태로제공하는방법 이방법은웹콘텐츠에포함된배경음을음소거상태로제공하고, 사용자제어에 의하여배경음을들을수있도록구현하는방법이다. 따라서이방법은사용자가 화면낭독프로그램을사용하는데아무런영향을주지않는다. 고래의대화를연구하는학회가제공하는웹사이트가고래의울음소리와물이철썩이는소리를배경음으로반복해서제공해야하려고한다. 이경우, 사용자가배경음을재생할수있도록재생버튼을웹페이지의상단에제공한다. 이때버튼의레이블을배경음이정지된상태에서는 ' 배경음재생 ', 배경음이재생되는동안에는 ' 배경음멈춤 ' 이라고표시한다. 다음그림에서하단의빨간색네모표시부분과같이배경음제어버튼을제공한다. 또한음소거상태에서도동영상은계속제공하는것이허용된다. 적용기술 28) 플래시콘텐츠의배경음자동실행방지 플래시콘텐츠가로딩되면자동적으로재생되는배경음은그재생을멈출수 있는컨트롤을사용자가빨리발견할수있는위치에제공해야한다. 플래시콘텐 츠가배경음을제어할수있는컨트롤을제공하는방법은두가지가있다. 플래시콘텐츠컨트롤의사용방법 이방법은플래시콘텐츠를개발할때버튼을추가하여이버튼을누를때마다 배경음의정지또는재생을반복하도록컨트롤을제공하는것이다. - 84 -

다음코드는플래시콘텐츠가로딩될때 mp3 파일을재생하거나정지시키는버튼을제공하는예다. package wcagsamples { import flash.display.sprite; import flash.net.urlrequest; import flash.media.sound; import flash.media.soundchannel; import fl.controls.button; import fl.accessibility.buttonaccimpl; import flash.events.mouseevent; public class SoundHandler extends Sprite { private var snd: Sound = new Sound(); private var button: Button = new Button(); private var req: URLRequest = new URLRequest("http://av.adobe.com/podcast\ /csbu_dev_podcast_epi_2.mp3"); private var channel: SoundChannel = new SoundChannel(); public function SoundHandler() { ButtonAccImpl.enableAccessibility(); button.label = "Stop Sound"; button.x = 10; button.y = 10; button.addeventlistener(mouseevent.click, clickhandler); this.addchild(button); snd.load(req); channel = snd.play(); } private function clickhandler(e: MouseEvent): void { if (button.label == " 정지 ") { button.label = " 재생 "; channel.stop(); } else { channel = snd.play(); button.label = " 정지 "; } } } } - 85 -

HTML 을이용한플래시재생음제어 HTML을이용하여배경음의재생또는정지버튼을구현하고이버튼을누를때마다 Flash Player JavaScript API를이용하여플래시콘텐츠의배경음을제어할수있다. ActionScript 3.0 코드 : package wcagsamples { import flash.display.sprite; import flash.external.externalinterface; import flash.net.urlrequest; import flash.media.sound; import flash.media.soundchannel; import flash.events.mouseevent; public class SoundHandler extends Sprite { private var snd: Sound = new Sound(); private var soundon: Boolean = true; private var req: URLRequest = new URLRequest("http://av.adobe.com/podcast/\ csbu_dev_podcast_epi_2.mp3"); private var channel: SoundChannel = new SoundChannel(); public function SoundHandler() { if (ExternalInterface.available) ExternalInterface.addCallback("toggleSound", this.togglesound); snd.load(req); channel = snd.play(); } private function togglesound(enable: Boolean): void { if (! enable) { channel.stop(); soundon = true; } else { channel = snd.play(); soundon = true } } } } - 86 -

HTML 코드 : <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"/> <title> 플래시배경음재생및정지예제 </title> <script src="swfobject.js" type="text/javascript"/> <script type="text/javascript"> function $(id) { return document.getelementbyid(id); } swfobject.embedswf("html_control_to_toggle_audio_as3.swf", "flashplaceholder", "0", "0", "8"); function init() { var soundon = true; $("soundtoggle").onclick = function(event){ soundon =!soundon; $("flashplaceholder").togglesound(soundon); event.target.value = soundon? " 정지 " : " 재생 "; }; } window.onload = init; </script> </head> <body id="header"> <h1> 플래시배경음자동재생예 </h1> <p> 이페이지는오디오방송콘텐츠를자동으로재생하는플래시콘텐츠를포함하고있습니다. 오디오를정지시키려면이페이지의 ' 재생 ' 버튼또는 ' 정지 ' 버튼을누르시오. </p> <input id="soundtoggle" type="button" value="stop Sound"/> <p id="flashplaceholder"> 플래시콘텐츠를사용하려면플래시플레이어를설치하시오. </p> </body> </html> 화면낭독프로그램설치여부에따라배경음의자동재생을제어하는방법 배경음의자동재생을억제하는것은스크린사용자의조작을방해할수있기때문이다. 따라서플래시콘텐츠를구현할때화면낭독프로그램의설치여부를검사하여화면낭독프로그램이설치되지않은경우배경음을자동적으로재생되도록하고화면낭독프로그램이설치된경우배경음을정지상태로제공하는것이가능하다. 화면낭독프로그램의설치여부를검사하기위하여사용하는플래시속성은 - 87 -

flash.accessibility.accessibility.active 이다. 이속성이 true 이면화면낭독프로 그램이설치되었음을의미한다. < 참고 > 1) 센스리더는배경음자동재생방지기능을지원하지않는다. 2) 이속성은화면낭독프로그램뿐만아니라 MSAA 또는 UI 자동화를지원하는모든보조기술을화면낭독프로그램이설치된것으로간주될수있으므로주의해야한다. 3) 플래시에서화면낭독프로그램의설치여부를검사할때최소한 5 프레임동안검사할필요가있다. 다음 ActionScript 3.0 코드는 Accessibility.active 속성이 false이면자동적으로 mp3 배경음을재생하도록구현한플래시콘텐츠이다. 다음코드에서사용하는 flash.system.capabilities.hasaccessibility 속성은 MS Windows 환경에서플래시플레이어가동작하고있는가를검사할때사용한다. //ActionScript 3.0 코드 : package wcagsamples { import flash.accessibility.accessibility; import flash.display.sprite; import flash.net.urlrequest; import flash.media.sound; import flash.media.soundchannel; import flash.system.capabilities; import fl.controls.button; import fl.accessibility.buttonaccimpl; import fl.controls.label; import flash.events.mouseevent; public class SoundHandler extends Sprite { private var snd: Sound = new Sound(); private var button: Button = new Button(); private var req: URLRequest = new URLRequest( "http://av.adobe.com/podcast/csbu_dev_podcast_epi_2.mp3"); private var channel: SoundChannel = new SoundChannel(); private var statuslbl: Label = new Label(); public function SoundHandler() { snd.load(req); ButtonAccImpl.enableAccessibility(); button.x = 10; button.y = 10; statuslbl.autosize = "left"; statuslbl.x = 10; statuslbl.y = 40; addchild(statuslbl); - 88 -

button.addeventlistener(mouseevent.click, clickhandler); this.addchild(button); if (! Capabilities.hasAccessibility! Accessibility.active) { channel = snd.play(); button.label = " 정지 "; statuslbl.text = " 보조기술을사용하지않고배경음을자동적으로제공함 "; } else { button.label = " 재생 "; statuslbl.text = " 보조기술을사용중임. 배경음을정지상태로제공함 "; } } private function clickhandler(e: MouseEvent): void { if (button.label == " 정지 ") { button.label = " 재생 "; channel.stop(); } else { channel = snd.play(); button.label = " 정지 "; } } } } 적용기술 29) 실버라이트콘텐츠의배경음자동실행방지 실버라이트콘텐츠가로딩되면자동적으로재생되는배경음은그재생을멈출수있는컨트롤을사용자가빨리발견할수있는위치에제공해야한다. 실버라이트에서멀티미디어콘텐츠의배경음을제어할수있는컨트롤을제공하는방법은두가지가있다. 1) 자동재생방지 실버라이트동영상을개발할경우 MediaElement.AutoPlay 속성을이용하여동영상의자동재생여부를지정한다. 기본값은 MediaElement.AutoPlay 속성을 true로설정하며동영상을자동재생하도록한다. 따라서자동재생을방지하기위해서는 MediaElement.AutoPlay 속성을반드시 false로설정해야한다. 다음예는애니메이션동영상파일 (xbox.wmv) 을로딩하고정지상태로제공 하는실버라이트콘텐츠의코딩예다. - 89 -

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <MediaElement x:name="media" Source="xbox.wmv" AutoPlay="false" Width="300" Height="300" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" />  <Button Click="StopMedia" Grid.Column="0" Grid.Row="1" Content="Stop" />  <Button Click="PauseMedia" Grid.Column="1" Grid.Row="1" Content="Pause" />  <Button Click="PlayMedia" Grid.Column="2" Grid.Row="1" Content="Play" /> </Grid> 2) 음소거 동영상이자동적으로재생되더라도배경음을음소거상태로설정하여재생음을들리지않도록설정할수있다. 이를위하여 MediaElement.IsMuted 속성을 true로설정한다. 만일 MediaElement.IsMuted 속성을지정하지않거나 false로설정한다면항상배경음을제공하는상태가되므로화면낭독프로그램사용자에게혼란을주게된다. 다음예는애니메이션동영상파일 (xbox.wmv) 을로딩하자마자재생되나음소 거상태로제공되도록 MediaElement.IsMuted 속성을설정한실버라이트콘텐츠 의코딩예다.... <MediaElement x:name="media" Source="xbox.wmv" IsMuted="true" Width="300" Height="300" - 90 -

... Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" /> o 잘못된사례및개선방법 잘못된사례 26) 배경음이 3 초이상지속되도록구현한경우 블로그등에서배경음악을자동적으로제공하는것은잘못된경우다. 배경음악 은사용자의요구로제공여부가결정되어야한다. 1) 회사의제품을소개하는웹사이트에서제품의로고송을 3 초이상들려주는 것은잘못된경우다. 로고송의지속시간은 3 초미만으로제한해야한다. 개선방법 개선방법으로는 " 로고송을들으시려면 Control, A 를누르시오." 라는음성을출 력하도록하고 Ctrl+A 를누르면 30 초간지속되는로고송을제공할수있다. 2) 영화관련웹사이트로콘텐츠가로드되면자동적으로영화의사운드트랙 이나관객의반응을반복해서제공하는경우는잘못된사례이다. 다음웹콘 텐츠는배경음을멈출수있는컨트롤을제공하지않는다. 개선방법 배경음컨트롤을제공하거나음소거상태로웹콘텐츠를제공하도록개선한다. - 91 -

잘못된사례 27) 마우스오버또는키보드초점을받으면자동적으로 배경음이실행되는경우 초점을받거나마우스오버에의하여콘텐츠가활성화되고배경음을자동적으 로제공하는것도잘못된사례이다. 초점의변화와마우스오버에의한배경음의 자동재생은허용되지않는다. < 참고 > 마우스오버 (Mouse Over) 마우스오버란마우스포인터를어떤개체위에위치시키는것을의미한다. 마우스포인터를어떤개체위에위치시키면 OnMouseOver 이벤트가발생하고개발자가지정한특정한기능을수행할수있다. 이사례는마우스오버에의하여애니메이션플레이어를자동적으로실행하도록한경우다. 다음예는마우스오버에의하여애니메이션플레이어가자동적으로실행되고, 동영상과함께배경음을재생하는경우다. 우측그림하단의빨간색네모부분은 배경음을재생하도록설정되어있는모습을보여준다. 개선방법 개선하기위해서는마우스오버가아닌마우스클릭 ( 또는 Enter 키 ) 에의하여 애니메이션플레이어가실행되도록수정해야한다. < 참고 > 마우스오버에의하여멀티미디어플레이어가자동적으로실행되는것은검사항목 3.2.1 을위반한것이므로허용되지않는다. 이경우, 좌측의애니메이션에대한대체텍스트를 " 무한도전으로이동, 마우스 를클릭하면동영상자동재생 " 이라고제공한다. - 92 -

원칙 2. 운용의용이성 (Operable): 사용자인터페이스구성 요소는조작가능하고내비게이션할수있어야한다. o 운용의용이성 웹사이트에서제공하는콘텐츠의모든기능은어떤사용자나환경에상관없이운용할수있어야한다. 마우스를사용할수없는사용자나환경에서는키보드만으로도웹사이트의기능을이용할수있어야하며, 키보드를사용할수없는사용자를위해서는마우스만으로도웹사이트의기능을이용할수있어야한다. 키보드운용시에는시각적으로인식이가능하도록해야하며논리적으로이동할수있도록해야한다. 온라인서식을작성할경우에도충분히작성할시간이주어져야하며, 시간제한 이있거나자동으로변하는콘텐츠에대해서는사용자가제어할수있도록해야 한다. 번쩍거리는콘텐츠는제공하지않는것이좋으며, 제공할경우사용자에게미리 알려주거나회피할수있도록해야한다. 웹사이트내에서이동과내비게이션이용이하도록콘텐츠를잘준비하는것이중요하다. 그러기위해서는페이지, 프레임, 콘텐츠블록에는적절한제목을제공해야한다. 링크또한링크의용도나목적을이해할수있도록적절한정보를제공해야한다. o 관련지침 운용의용이성은사용자가장애유무등에관계없이웹사이트에서제공하는모든기능들을운용할수있게제공하는것을의미한다. 운용의용이성은키보드접근성, 충분한시간제공, 광과민성발작예방, 쉬운내비게이션의 4가지지침으로구성되어있다. - 93 -

< 표 7> 운용의용이성관련지침및검사항목 지침 (4 개 ) 검사항목 (8 개 ) 2.1( 키보드접근성 ) 콘텐츠는키보드 로접근할수있어야한다. 2.1.1( 키보드사용보장 ) 모든기능은키보드만으로도사용할수있어야한다. 2.1.2( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며시각적으로구별할수있어야한다. 2.2( 충분한시간제공 ) 콘텐츠를읽 고사용하는데충분한시간을제공 해야한다. 2.2.1( 응답시간조절 ) 시간제한이있는콘텐츠는응답시간을조절할수있어야한다. 2.2.2( 정지기능제공 ) 자동으로변경되는콘텐츠는움직임을제어할수있어야한다. 2.3( 광과민성발작예방 ) 광과민성 발작을일으킬수있는콘텐츠를제 공하지않아야한다. 2.3.1( 깜빡임과번쩍임사용제한 ) 초당 3~50 회 주기로깜빡이거나번쩍이는콘텐츠를제공하지 않아야한다. 2.4.1( 반복영역건너뛰기 ) 콘텐츠의반복되는 영역은건너뛸수있어야한다. 2.4( 쉬운내비게이션 ) 콘텐츠는쉽게 내비게이션할수있어야한다. 2.4.2( 제목제공 ) 페이지, 프레임, 콘텐츠블록에 는적절한제목을제공해야한다. 2.4.3( 적절한링크텍스트 ) 링크텍스트는용도 나목적을이해할수있도록제공해야한다. - 94 -

검사항목 2.1.1 ( 키보드사용보장 ) 모든기능은키보드만으 로도사용할수있어야한다. o 개요 웹페이지에서제공하는모든기능을키보드만으로도사용할수있도록제공해야한다. 키보드가아닌마우스나태블릿 PC와같이정교한조작을요구하는입력장치로만접근이가능할경우손이불편하거나손을자유롭게사용할수없는사용자는접근이불가능하기때문이다. 따라서사용자가키보드의버튼입력만으로도동등하게사용할수있도록해야한다. 여기서마우스로는한번으로조작이가능한기능이지만키보드를이용할경우조작횟수가늘어나는것은큰문제가되지않는다. 이검사항목이적용되지않는웹콘텐츠로사용자의반응속도나지속성이중요한요소인붓질 (Painting), 헬리콥터나비행기등의훈련에사용되는시뮬레이션콘텐츠등과시각적인방법으로만접근이가능한지리정보콘텐츠, 가상현실콘텐츠등은예외로할수있다. 이경우에도해당콘텐츠를제외한나머지인터페이스는키보드만으로사용할수있어야한다. 만약애플리케이션에대한기능일경우키보드로접근도가능해야하며기능도실행가능해야한다. < 참고 > 키보드란? 사용자가텍스트를입력하기위하여사용하는입력장치를의미한다. 여기에는키보드의자판입력을해독하기위하여사용되는소프트웨어도포함된다. 예를들어, 키보드의형태를가지지않았지만기능적으로키보드를대신하는입력장치 ( 예 : 노트북및 PDA 등의터치패드, 화상키보드, 음성입력장치등 ) 등도키보드로간주한다. 따라서 키보드만으로사용할수있어야한다 는의미는마우스를전혀사용할수없다는의미가아니라전통적인자판형태의키보드만으로사용할수있어야한다는의미이다. o 적용기술 적용기술 30) 키보드와마우스이벤트핸들러제공 마우스로접근가능기능이라면키보드로도접근이가능해야한다. 가능한한 키보드와마우스에공통적으로적용되는이벤트핸들러를이용한다. 그렇지않으 - 95 -

면두가지방식의이벤트핸들러를함께제공하도록한다. 예를들어, 마우스오버 (onmouserover) 이벤트핸들러나마우스아웃 (onmouseout) 이벤트핸들러를이용한기능이라면, 키보드초점이위치할때 (onfocus) 와초점이빠져나갈때 (onblur) 의이벤트핸들러도함께제공해야한다. 1) 마우스와키보드이벤트핸들러를동시에제공하는링크 다음예는링크에서 onmouseover 이벤트핸들러와 onmouseout 이벤트핸들 러와함께 onfocus 이벤트핸들러와 onblur 이벤트핸들러를함께사용하여마 우스와키보드가동일한기능을수행하도록구현한경우다. <a href="#" onmouseover="process('true', 'on');" onmouseout="process('false', 'off');" onfocus="process('true', 'on');" onblur="process('false', 'off');"></a> < 참고 > 마우스와키보드이벤트핸들러비교 onclick 이벤트핸들러는키보드로어떤객체를선택했을경우발생하며마우스의버튼을눌렀다놓았을경우에도발생하는이벤트핸들러이다. 따라서 onclick 이벤트핸들러를이용하여링크를사용하도록구현하면마우스또는키보드를사용하여사용자의명확한입력에의해이벤트핸들러가발생하도록제공할수있다. 다음이벤트핸들러는마우스와키보드별로구분되어있는이벤트핸들러이다. 마우스이벤트키보드이벤트 이벤트명이벤트발생시점이벤트명이벤트발생시점 mousedown 마우스버튼을눌렀을때 keydown 어떤키가눌렸을때 mouseup 마우스버튼이복귀될때 keyup 어떤키가눌렸다가놓았을때 mouseover 마우스커서가객체위에있을때 focus 어떤객체가초점을받았을때 mouseout 마우스커서가객체영역을벗어날때 blur 어떤객체가초점을벗어날때 - 96 -

2) 마우스와키보드이벤트핸들러를동시에제공하는버튼 다음예는버튼에 onmouseover 와 onmouseout 이발생하는기능을키보드로도 동일한기능을수행하도록구현한것이다. <input type="button" value=" 미리보기 " onmouseover="process('true', 'on');" onmouseout="process('false', 'off');" onfocus="process('true', 'on');" onblur="process('false', 'off');" /> < 참고 > 키보드접근이가능한링크와버튼 HTML 4.01 에서키보드접근및사용자조작으로인한이벤트핸들러가가능한태그는 <a>, <area>, <button>, <input>, <object>, <select> 이있다. 적용기술 31) 마우스드래그와드롭기능에서의키보드이용보장 마우스드래그와드롭기능은마우스로만구현이가능한기능이다. 또한콘텐츠의특성에따라유사한기능을키보드로수행할수있도록제공해야한다. < 참고 > 마우스를클릭한상태에서포인터를이동하는마우스드래그기능은마우스를클릭한항목으로부터마우스포인터가위치한곳에이르는항목을선택하는과정이다. 또한드롭기능은마우스로선택한항목을마우스포인터가지시하는곳으로이동시키는기능이다. 키보드를이용하여마우스드래그와드롭기능을동일하게수행할수는없다. 그러나키보드를이용하여잘라내기와붙여넣기를수행함으로써마우스드래그와드롭기능을대신할수있다. 1) 체크상자를이용한상품선택 쇼핑몰에서상품을선택하여장바구니에담는기능은키보드를이용하여수행할수있어야한다. 예를들어, 모든상품에장바구니에담기용체크상자를제공하고 ' 장바구니에담기 ' 버튼을클릭하면체크상자가 ' 체크된 ' 상품을장바구니에담도록구현하는것도가능하다. - 97 -

2) 상품선택버튼을이용한방법 또다른방법은상품별로 ' 장바구니에담기 ' 버튼을제공하고이버튼을누를 때마다해당상품을장바구니목록에포함되도록구현하는것도가능하다. 상기 1), 2) 방법의기능에추가하여마우스드래그및드롭기능을이용하여상품을선택하여장바구니에담는기능을함께제공하면마우스를사용할수있는사용자의사용성도함께높일수있다. 여기서중요한점은마우스드래그및드롭방법만을사용하도록구현해서는안된다는것이다. 키보드만으로모든기능을사용할수있어야할뿐만아니라마우스만으로도 모든기능을이용할수있도록구현하는것은접근성을향상시키는매우좋은방 법이다. 적용기술 32) 웹애플리케이션제공시키보드이용보장 HTML의기본기능만으로는제공이어려운다양한기능을포함한애플리케이션일수록키보드접근이떨어지는경우가있다. 최근클라우드컴퓨팅의발전으로여러가지기능의웹애플리케이션을제공하는경우가점차늘어나고있고, 대표적인예가웹에디터이다. - 98 -

웹에디터는기본적으로모든기능이키보드로이동가능해야하며실행또한 가능해야한다. 그리고기능영역과작성영역간의이동역시가능해야한다. 탭키를이용한내비게이션은기본적으로지원하는키보드내비게이션기능이다. 그러나복잡한애플리케이션에서는단축키를제공하고미리알려줄필요가있다. 단축키를지원하면웹콘텐츠나웹애플리케이션을더효과적으로사용할수있으며키보드와마우스를사용하는모든사용자에게편리함을제공한다. 단축키를제공하는경우사용자에게단축키에대한정보를제공해야한다. - 99 -

예를들어, 단축키를버튼의툴팁으로제공하거나컨트롤레이블에단축키를표시하는방법이그것이다. 이러한단축키표시방법을 access key 또는니모닉 (mnemonic) 이라고한다. < 참고 > 단축키란? 단축키를구현할경우웹브라우저와운영체제가사용하고있는다양한단축키와충돌이일어나지않도록세심한주의를기울여야한다. 특히웹브라우저는업데이트가수시로발생하기때문에새로운단축키가추가될가능성이있다. 또한사용가능한모든웹브라우저와의단축키호환성을검사하여야한다. 충돌을방지하기위해서는 CTRL, SHIFT, ALT 등의키를사용하지않는것이좋다. 그러나문자를입력해야하는경우이방법도실제적이지않다. 단축키를정의하여사용하는방법은충돌을일으킬가능성이낮은키조합, 예를들어 CTRL+SHIFT 키와숫자키의조합을이용하는것이다. 숫자키를이용한단축키는다국적용의콘텐츠나애플리케이션을구현하는경우에효과적이다. 클라우드컴퓨팅이란? 서버에애플리케이션을저장해두고사용자가필요할때이를장치로불러와서사용하는웹기반소프트웨어서비스이다. 웹에디터를온라인으로제공하는것도클라우드컴퓨팅의일종이다. 키보드이동순서키보드내비게이션순서는원칙적으로웹콘텐츠에포함된컨트롤이나사용자입력의코딩순서를따른다. 만일그순서를변경하고자할경우해당객체의 tabindex 속성값을원하는키보드내비게이션순서로제공한다. 일부태그의 tabindex 속성을 0으로설정한하면이태그의키보드내비게이션순서는코딩순서에따른다. < 참고 > 정적요소의키보드접근허용 1) 웹콘텐츠이미지와같은정적태그를마우스를이용하여상호작용이가능한컨트롤로구현하는경우초점을받아사용할수있도록구현하려면해당태그의 tabindex 속성을설정하고 onclick 이벤트 - 100 -

핸들러에의하여함수를호출하도록구현해야한다. 이과정에서 tabindex 속성을설정하더라도 다른컨트롤이나사용자입력의키보드내비게이션순서는검사항목은 2.1.2 에서제시한이동 순서를유지해야한다. 2) 실버라이트콘텐츠의경우이미지를이용하여사용자정의컨트롤을만들고 IsTabStop 값을 true로설정하여사용자정의컨트롤이키보드초점을받을수있도록한다. 사용자정의컨트롤이초점을받았음을화면상으로구분하기위해서는 VisualStateManager 클래스를사용한다. 더쉬운방법은이미지를버튼컨트롤에포함시켜이미지버튼으로구현하는것이다. 다음소스코드는이미지 (sample.jpg) 를클릭하면어떤함수 (doprocess) 를수행하는예다. <Button Click="doProcess"><Image Source="sample.jpg"/></Button> 적용기술 33) 실버라이트플러그인의키보드접근제공 실버라이트플러그인내의컨트롤이키보드접근이가능하도록만들기위해서는플러그인으로초점이이동할수있도록구현해야한다. 만일웹페이지가 HTML 콘텐츠와실버라이트플러그인으로구성되어있다면플러그인으로의초점이동이가능하므로실버라이트플러그인의키보드접근이가능하다. 그러나웹페이지를하나의실버라이트플러그인으로구성한다면플러그인이로딩될시점에초점이플러그인의첫번째컨트롤로이동하도록다음과같이구현해야한다. C# 버전 : LayoutRoot.Loaded += (sender, e) => System.Windows.Browser.HtmlPage.Plugin.Focus(); Visual Basic 버전 : AddHandler LayoutRoot.Loaded, Sub() System.Windows.Browser.HtmlPage.Plugin.Focus() End Sub o 잘못된사례및개선방법 잘못된사례 28) 마우스로만접근가능한이미지버튼을제공하는경우 tab 키로이동이가능한기능을제공할수있는태그는링크와버튼이다. 그러 나이미지나기타태그에마우스만으로이용이가능한기능을제공할경우키보 - 101 -

드를이용하는사용자는그기능을이용할수없다. 다음은이미지 (image/print.gif) 를마우스로클릭하면인쇄하도록구현한것이다. 그러나키보드를이용하여인쇄할수있는다른대체수단을제공하지않았다면이구현방법은중요한기능 ( 인쇄 ) 을가진이미지가키보드초점을받을수없으므로중요한기능에키보드접근이불가능한잘못된사례이다. <img src="image/print.gif" alt=" 인쇄 " onclick="page_print();" /> 개선방법 키보드로도접근이가능하기위해서는이미지버튼으로구현해야한다. 이미지버튼구현사례 <button onclick="page_print();"><img src="image/print.gif" alt=" 인쇄 " /></button> 위개선방법으로제공이불가능한경우라면이미지에 tabindex를설정하여키보드접근이가능하도록지정할수있다. 그러나 tabindex는다른키보드접근태그의이동순서에방해되지않는방법으로제공해야한다. < 참고 > 기본적으로 tabindex="0" 이설정되면코드상의순서에맞게키보드이동순서가설정되게된다. <img src="image/print.gif" alt=" 인쇄 " onclick="page_print();" tabindex="0" /> 잘못된사례 29) 키보드로접근할수없는플래시메뉴 플래시로메뉴를개발하는경우다음그림과같이키보드를이용하여초점을 메뉴항목으로이동시킬수없도록구현하면마우스로는사용이가능하나키보드 로는사용이불가능하다. - 102 -

마우스장치독립적인이벤트핸들러제공 개선방법 키보드로접근가능한메뉴를구현하기위해서는엑세스가능성패널에서전체무비에대한액세스가능성패널에서 ' 동영상을액세스가능하게만들기 ' 와 ' 자식객체액세스가능 ' 체크상자를모두체크상태로설정한다. 여기에서자식객체란플래시로구현한각메뉴및서브메뉴아이템을의미한다. 잘못된사례 30) 마우스로만접근할수있는링크를제공한경우 메뉴에따라서선택할수있는항목이화면에표시되고, 항목을선택할수있도 록다음과같이메뉴목록을구현하는경우메뉴선택과항목선택을마우스로만 가능하도록구현하면키보드사용자의접근이불가능하게된다. - 103 -

마우스장치독립적인이벤트핸들러제공 위그림의 ' 공지사항 ' 메뉴를다음과같이마우스용이벤트만을사용하여링크 로구현하면마우스로만접근이가능하게된다. <a href="#" onmouseover="show('show')" onmouseout="show('hide')"> <img src="tabanc_on_01.gif" alt=" 공지사항 "> </a> 이소스코드는마우스포인터를 ' 공지사항 ' 메뉴위로이동시키면메뉴의색이변화하고해당메뉴에속한선택항목이표시된다. 그러나키보드초점변화에의해서는아무런변화가일어나지않는다. 키보드초점에관한검사항목은 2.1.2를참고하라. 개선방법 위소스코드를키보드초점을받을때메뉴의색이변화하고해당메뉴에속한선택항목이표시되도록하려면다음과같이 onfocus 이벤트핸들러와 onblur 이벤트핸들러에의해서도각각 onmouseover 이벤트핸들러와 onmouseout 이벤트핸들러와동일한기능을수행하도록해야한다. <a href="#notice" onmouseover="show('show')" onmouseout="show('hide')" onfocus="show('show')" onblur="show('hide')"> <img src="tabanc_on_01.gif" alt=" 공지사항 "> </a> 더바람직한방법은마우스클릭과키보드선택에의하여공통적으로발생하는 onclick 이벤트핸들러를사용하여세부항목이나타나도록하는것이다. <a href="#notice" onclick="show('show')"> <img src="tabanc_on_01.gif" alt=" 공지사항 "> </a> - 104 -

잘못된사례 31) 키보드만으로이전입력서식이동이불가능한경우 다음은주민등록번호를입력하는예로, 주민등록번호의앞 6 자리를입력하면초 점이자동적으로주민등록번호뒷 7 자리로이동하는예다. 이경우, 주민등록번호의앞 6자리를입력하면초점이자동적으로주민등록번호뒤 7자리를입력하는입력상자로이동하도록구현되어있어두번째입력상자에초점이있을경우 shift + tab 키를이용하여초점을첫번째입력상자로이동시키더라도초점이자동적으로두번째입력상자로이동한다. 개선방법 위의사례에서주민등록번호첫번째 6자리를입력후다음입력란으로초점이자동으로이동되면첫번째 6자리입력을잘못했을경우나이름을수정해야할경우키보드로는돌아갈수없는문제가발생한다. 이를방지하려면첫번째입력상자에 6자리번호를입력하더라도자동적으로초점이두번째입력상자로이동하지않도록구현하거나이동하더라도다시뒤로돌아갈수있도록구현되어야한다. 더좋은방법은다음처럼주민등록번호정보를하나의입력필드에입력할수 있도록제공하는것이다. - 105 -

검사항목 2.1.2 ( 초점이동 ) 키보드에의한초점은논리적으 로이동해야하며시각적으로구별할수있어야한다. o 개요 키보드내비게이션과정에서키보드초점을받은링크, 컨트롤및입력서식은 초점을받지않은객체들로부터구분될수있어야한다. 또한 Tab 키와 Shift + Tab 키에의한초점의이동순서는논리적이며일관성이있어야한다. 키보드내비게이션의순서는일반적으로웹페이지의좌측상단영역에서우측하단영역으로이동하는것이원칙이다. < 참고 > 논리적인키보드내비게이션논리적이며일관성있는초점의이동순서란다음모든조건을만족하는경우다. w w w w Tab 키와 Shift + Tab 키에의한초점이동순서가순환적이며, 반복적이어야함 Tab 키와 Shift + Tab 키에의한키보드내비게이션과정에서웹페이지에포함된모든컨트롤, 링크, 사용자입력으로초점이동이가능해야함 Tab 키와 Shift + Tab 키에의한키보드내비게이션과정에서사용자가사용할수없는컨트롤, 링크, 사용자입력등의객체로초점이이동하지않아야함 Tab 키와 Shift + Tab 키에의한키보드내비게이션과정에서웹페이지를구성하는두영역사이에반복적인초점이동이일어나지않아야함 w 사용자입력이초점을받았을경우아무런정보를입력하지않아도 Tab 키또는 Shift + Tab 키를이용하여다음컨트롤, 링크또는사용자입력으로초점이동이가능해야함 o 적용기술 적용기술 34) 콘텐츠화면순서와동일한키보드내비게이션순서제공 HTML의경우, 기본적인초점순서는태그들이콘텐츠소스에서나타나는순서를따른다. HTML 소스의순서가웹페이지상에서의시각적인순서와일치한다면, Tab 키를눌러서콘텐츠를이동하는순서는시각적레이아웃순서와일치하게된다. 그러나소스순서가시각적순서와일치하지않는다면, 키보드내비게이션순서는시각적으로표시된콘텐츠와일치하지않아사용자에게혼란을줄수 - 106 -

있다. 따라서콘텐츠를디자인할때컨트롤, 링크, 입력서식등의인터랙티브요소들이기본적인탭순서를따라갈경우콘텐츠내에서의순서와관계에걸맞게위치하도록배치해야한다. 또는콘텐츠의논리적인이동순서를돕기위해 tabindex로제어하는방법도있다. < 참고 > HTML에서 tabindex 속성은두가지기능을한다. 첫번째는태그가초점을가질수있게하는것이고, 두번째는초점순서에서하나의위치를태그에할당하는것이다. tabindex="0" 값은태그가초점을가질수있도록하지만초점순서는코드상의순서를따르게된다. 초점순서는 tabindex의양수값이작은태그부터큰태그로이동한다. 문서객체모델 (DOM) 의태그순서와일치하지않는순서로 tabindex값을설정한다는것은설정한순서가보조기술사용자들에게는정확하지않다는의미일수있다. 키보드이동순서가다르게되는주된요인은콘텐츠의이동순서배치를구성태그에맞게 CSS로하지않고 HTML이나 XHTML에서 tabindex속성으로지정하기때문이다. 따라서 tabindex를설정한순서는시각적인표현순서와다를수있다. 적용기술 35) 시각적으로표시가능한초점표시방법 키보드로웹페이지를이동할때현재초점이어디에있는지알수있어야한다. 약시자나뇌병변장애인, 상지장애인등마우스와같은포인팅장치를이용하지않는사람들은키보드와같은순차적인탐색장치가매우중요한도구가된다. 또한일부모바일브라우저에서도마우스포인터가해당위치에초점이옮겨졌 다는것을표시하거나한번의손가락터치에의해초점을받았다는것을표시하 기위해해당링크나입력서식에시각적인테두리를표시하도록하고있다. 그러나이러한시각적인단서가명확하게표시되지않아실질적으로키보드를 이용하면서초점의이동내역과현재초점위치를파악하기가쉽지않다. 이경 우, 다음두가지방법으로초점위치를표현해주는것이좋다. 1) CSS 의가상클래스 :focus 제공 CSS 의 outline 속성을이용해초점위치를명확히표시해주는방법으로주로 키보드사용자들에게큰도움을준다. CSS 는주로정적인꾸미기를위해사용하지만초점받은태그에대한화면표 시를정의하기위해 :focus 를사용할수있다. 이때 :focus 와동일한기능을수행 - 107 -

하지만마우스만지원하는 :hover 도같이사용하는것이좋다. a:hover, a:focus { border:1px solid #ee6600; } < 참고 > 웹브라우저의기본적인초점표시방법 애플사파리구글크롬오페라 파이어폭스인터넷익스플로러 8 대부분의브라우저에서는초점이받은링크에대해위와같이시각적으로표시해준다. 위의그림에서많이쓰이는브라우저인인터넷익스플로러 8과파이어폭스는초점이받은곳에가는점선테두리를표시해주는데, 이것은약시자들이인식하기에충분하지않다. 따라서다음과같은 CSS 코드를적용하면초점위치가시각적으로더명확하게표시되게할수있다. 단, 인터넷익스플로러 6과 7에서는 outline 속성을지원하지않으므로적용되지않는다. :hover, :active, :focus { outline-width: 2px!important; /* outline 속성은 border와달리추가공간을차지하지않는다. */ outline-style: solid!important; -moz-outline-radius: 4px; /* 파이어폭스에서테두리를둥글게만들기 */ } - 108 -

CSS 를이용해초점을시각적으로더두드러지게만든경우 < 참고 > outline 표시문제 CSS를잘못정의하면초점받은태그의초점표시 (outline 등 ) 가화면에표시되지않는다. 대표적으로 overflow:hidden 속성을사용할경우발생할수있으며 webkit 엔진의 safari나 chrome 과같은브라우저에서임의로 outline 속성을제거하면나타나지않는다. 이경우, outline을표시하지않을때개발자가초점을표시하는방법을제공해야한다. 2) 스크립트를사용하여배경색이나경계선변경 다음방법은스크립트를이용하여링크가초점을받으면배경이노란색으로표 시되고초점을잃게되면정상적으로바뀌도록제공할수있는방법이다. <script> function togglefocus(el) { el.style.backgroundcolor = el.style.backgroundcolor=="yellow"? "inherit" : "yellow"; } </script> <a href="example.html" onfocus="togglefocus(this)" onblur="togglefocus(this)">focus me</a> 두방법모두공통적으로초점을화면에뚜렷이표시할수있는방법으로, 추가 적인 style(css) 를제공하고있다. - 109 -

적용기술 36) 플래시에서키보드내비게이션순서제공방법 플래시콘텐츠의 Tab 키에의한내비게이션순서는기본적으로콘텐츠를설계할때컨트롤을추가한순서와동일하다. 만일컨트롤의추가순서를달리하여컨트롤의키보드내비게이션순서를변경할경우키보드내비게이션순서가화면상의이동순서와동일하도록 XML코드를변경하거나모든컨트롤의 TabIndex값을사용자가설정해주어야한다. < 참고 > 플래시무비에서키보드내비게이션순서를지정하기위해서는모든정적텍스트태그를동적텍스트변환하고, 다음의두가지조건을반드시만족하도록구현해야한다. 1) 무비에포함된모든텍스트객체는입력 (input) 또는동적텍스트 (dynamic text) 로정의한다. 이경우, 글꼴외곽선이.swf 파일에포함되므로플래시무비파일의크기가커지게되므로주의해야한다. 2) 무비에포함된모든심볼객체에는객체이름을지정해주어야한다. 예를들어, 네개의입력상자 (TextInput) 를 2 열로배치하고다음그림의화살 표방향에따라신랑의이름과성, 신부의이름과성의순서로키보드내비게이션 이수행되도록 TabIndex 값을설정할수있다. <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minwidth="955" minheight="600"> <fx:declarations>  </fx:declarations> <s:label x="125" y="74" text="groom " width="49" height="17"/> <s:label x="33" y="103" text="first name" width="80" height="17"/> - 110 -

<s:label x="33" y="134" text="last name" width="80" height="17"/> <s:label x="234" y="74" text="bride" width="49" height="17"/> <s:textinput x="121" y="99" width="78" id="groomfirstname" tabindex="10"/> <s:textinput x="206" y="99" width="78" id="bridefirstname" tabindex="30"/> <s:textinput x="121" y="129" width="78" id="groomlastname" tabindex="20"/> <s:textinput x="206" y="129" width="78" id="bridelastname" tabindex="40"/> </s:application> 위소스코드에서 4 개의입력상자 (TextInput) 의 TabIndex 속성을설정하지않 으면키보드내비게이션순서는다음그림과같이입력상자의생성순서와같이 신랑의이름, 신부의이름, 신랑의성, 신부의성의순이된다. 적용기술 37) 실버라이트에서키보드내비게이션순서제공방법 실버라이트콘텐츠에서컨트롤의 Tab 키내비게이션순서는플래시콘텐츠의경우와같이콘텐츠를설계할때컨트롤을추가한순서와동일하다. 만일컨트롤의추가순서를달리하여컨트롤의키보드내비게이션순서를변경할경우키보드내비게이션순서가화면상의이동순서와동일하도록 XAML를변경하거나모든컨트롤의 TabIndex 값을사용자가설정해주어야한다. 예를들어, 플래시예와같이네개의입력상자 (TextBox) 를 2열로배치하고신랑의이름과성, 신부의이름과성의순서로입력상자간의키보드내비게이션이가능하도록구현한소스는다음과같다. 여기서 TabIndex 값을생략하면신랑의이름, 신부의이름, 신랑의성, 신부의성의순서로키보드내비게이션이일어난다.  <Grid> <Grid.RowDefinitions>...</Grid.RowDefinitions> <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions> <TextBlock Grid.Column="1" HorizontalAlignment="Center">Groom</TextBlock> - 111 -

<TextBlock Grid.Column="2" HorizontalAlignment="Center">Bride</TextBlock> <TextBlock Grid.Row="1">First name</textblock> <TextBox x:name="groomfirstname" Grid.Row="1" Grid.Column="1" TabIndex="1"/> <TextBox x:name="bridefirstname" Grid.Row="1" Grid.Column="2" TabIndex="3"/> <TextBlock Grid.Row="2">Last name</textblock> <TextBox x:name="groomlastname" Grid.Row="2" Grid.Column="1" TabIndex="2"/> <TextBox x:name="bridelastname" Grid.Row="2" Grid.Column="2" TabIndex="4"/> </Grid> o 잘못된사례및개선방법 잘못된사례 32) 초점을일부러보이지않도록한경우 웹디자이너들중일부는링크나입력필드, 버튼등에초점이가면시각적으로테두리가생기는것을일부러없애는경우가있다. 그러나시각적인테두리는키보드로웹페이지를탐색하는사람들에게는현재의초점의위치를보여주는매우중요한정보가된다. 요즈음에나온브라우저들 ( 예 : 구글크롬, 애플사파리, 오페라등 ) 에서는기존의브라우저들 ( 예 : 인터넷익스플로러, 파이어폭스 ) 보다오히려더과장되게초점의위치를보여주도록기본값이되어있다. 초점을받은위치에초점을없애게되면키보드내비게이션이전혀불가능하게되어키보드에의존하는대부분의장애인들이웹을사용할수없게될뿐만아니라일반사용자들도매우중요한단서인초점위치를잃어버려사용성을떨어뜨리는요인이된다. 서식제출버튼에초점이보이지않도록잘못제작한소스 <input type="submit" onfocus="this.blur();"> 링크가있는이미지가초점을받았다는것을알수없도록한경우 <a onfocus="this.blur()" href="page.html"><img src="myimage.gif"></a> 링크태그에 onfocus="this.blur();" 를설정한경우키보드로해당태그에접 - 112 -

근할수없을뿐만아니라마우스로접근할경우에도현재위치를시각적으로알 수없는문제가있다. 링크에 onfocus="this.blur();" 사용 <a href="accommodation.html" target="_blank" onfocus="this.blur();"> 숙박정보 </a> 개선방법 onfocus=this.blur() 를사용하면마우스로접근이가능하지만시각적으로현 초점이어디인지를알수없고키보드로해당태그에접근이되지못한다. 뿐만아니라페이지전체를키보드로내비게이션할수없는문제가발생하기 때문에 onfocus=this.blur() 은사용하지않아야한다. <a href="accommodation.html" target="_blank"> 숙박정보 </a> 잘못된사례 33) 키보드이동순서가비논리적인경우 다음예제는 tab 키로접근이가능한태그에임의의 tabindex를설정하여키보드이동순서를논리적이지못하게한경우로, 이경우임의로지정한 tabindex 속성값이 0이아닌다른값이지정되면키보드이동순서가순서대로이동하기전에 tabindex가지정된곳으로먼저이동되는문제가발생하게된다. - 113 -

1 4 5 2 3 개선방법 특정태그에 tabindex를별도로설정하게되면전체구성의키보드이동순서가화면구성순서와맞지않게된다. 따라서 tabindex는가급적사용하지않는것이좋으며, 만약 tabindex를사용해서키보드로접근이필요한경우라면 tabindex 값을 0으로설정하여전체이동순서에문제가되지않도록하는것이좋다. - 114 -

검사항목 2.2.1 ( 응답시간조절 ) 시간제한이있는콘텐츠는 응답시간을조절할수있어야한다. o 개요 시간제한이있는콘텐츠는그변화를사용자가제어할수없는콘텐츠이다. 예를들어, 일정한시간마다그내용의일부또는전체가자동적으로갱신되는콘텐츠, 일정한시간이경과하면다른웹페이지로이동하도록구성된콘텐츠, 사용자가제어하지않아도자동적으로스크롤되는콘텐츠, 일정시간후사라지거나접근이차단되는콘텐츠등이시간제한이있는콘텐츠이다. 시간제한이있는콘텐츠는시간적인제약이있음을사용자에게반드시알려주어야한다. 또한다음과같은예외의경우에해당하는콘텐츠를제외한모든콘텐츠는시간제약을회피하거나우회할수있는수단을함께제공해야한다. < 참고 > 시간제한예외콘텐츠경매나실시간게임, 듣기평가용콘텐츠등과같이원천적으로콘텐츠의이용에따르는시간조절을허용할수없는콘텐츠 o 적용기술 적용기술 38) 제한시간연장방법제공 제한시간을가진기능을제공할때사용자가제한시간을연장할수있도록 해야한다. - 115 -

이때사용자가연장할시간을직접지정하거나일정시간을반복적으로연장할 수있는방법을사용할수있다. 적용기술 39) 메타태그를이용한페이지재이동방법제공 메타 (meta) 태그를이용하여클라이언트측자동재이동 (redirect) 하는경우메타태그가설정되는페이지의 content 값이 0보다크면재이동하는페이지가브라우저의히스토리에남게되어페이지뒤로이동할경우바로이전페이지가재이동페이지로이동되는문제가있다. <meta http-equiv="refresh" content="0;url='redirect.html'" /> <p><a href="redirect.html">redirect.html</a> 페이지로이동합니다.</p> 메타태그로설정된재이동페이지는시간을연장하거나해제할수없기때문 에메타페이지는자동으로재이동이되지못한경우를위한최소한의재이동관 련정보만제공하고 content 값은반드시 0 으로설정해야한다. 메타태그를이용한페이지이동에 content 값이 0 보다크다면브라우저페이 지 history 에남기때문에이전페이지로돌아가기힘들기때문이다. 특히시각장 애인들이인지하기힘들다. o 잘못된사례및개선방법 잘못된사례 34) 페이지재이동시회피수단을제공하지않는경우 1) 쇼핑몰페이지자동이동사례 다음그림은자바스크립트를이용하여자동으로페이지를재이동하는경우로, 이경우사용자는재이동되는시간동안콘텐츠를인식하지못할수있다. - 116 -

<SCRIPT> settimeout("location.href='http://www.example.com'", 5000); </SCRIPT> 개선방법 자동으로페이지가이동하는방식은제공하지않는것이좋다. 반드시사용해야 하는경우라하더라도다음그림과같이확인버튼을이용하여사용자선택에의 해페이지를이동할수있도록제공해야한다. <p> 1. ㅇㅇㅇ표시가격은누구든지받을수있는할인쿠폰적용가격입니다. 2. 주문과정중할인전가격이표시되지만, 결제시쿠폰적용을하면할인가로나옵니다. </p>... <a href= http://shopping.co.kr/?itemld=2344679gh79 > 확인 </a> - 117 -

2) 바이러스자동체크사례 웹페이지에접속하자마자특정서비스 ( 예를들어, 온라인바이러스체크등 ) 를 수행할경우사용자는자신이이동하려했던페이지가아니라다른페이지로이 동이되어버리게되어이용에혼란을줄수있다. 개선방법 사용자가바이러스체크를시작할수있도록컨트롤을제공해주어야한다. 또한사용자가어떤서비스를선택한경우에도해당서비스를수행하는과정이복잡하고오랜시간이걸린다면서비스를중간에멈추고목적지 URL로되돌아갈수있는수단을제공해야한다. - 118 -

검사항목 2.2.2 ( 정지기능제공 ) 자동으로변경되는콘텐츠 는움직임을제어할수있어야한다. o 개요 저시력자나지적장애인등은이동하거나스크롤되는콘텐츠를인지하기가어렵다. 때문에웹콘텐츠는사용자가이동이나스크롤을일시정지시키거나지나간콘텐츠또는앞으로나타날콘텐츠를사용할수있도록 " 앞으로이동 ", " 뒤로이동 ", " 정지 " 등의컨트롤을제공해야한다. < 참고 > 자동으로변경되는콘텐츠란웹콘텐츠에서스크롤및자동갱신되는콘텐츠를말하며, 자동으로변화하는배너, 텍스트스크롤등이있다. o 적용기술 적용기술 40) 변화하는콘텐츠를일시정지시키고, 일시정지된곳으로 부터다시시작할수있도록제공 갱신되는콘텐츠를읽고있는사용자는충분한읽을시간을얻기위해일시정 지시킬수있어야한다. 또한멈추었다다시시작하면읽고있던그이후부터변 경되어야한다. 다음예를참고하라. 페이지에자동스크롤되는뉴스배너가있다. 그것을읽고자하는사용자는 ESC 키를눌러서스크롤을잠시멈출수있고, 방향키를다시누르면스크 롤이다시시작된다. - 119 -

적용기술 41) 전체배너를보여줄수있는방법제공 변화하는콘텐츠를제어할수있는방법을제공하지않는경우전체콘텐츠를 보여줄수있는방법을제공할수있다. 적용기술 42) 전체배너의리스트제공 변화하는배너의정지나이전, 다음기능을제공할수없다면사용자가개별배 너를직접선택할수있는방법을제공해야한다. 다음그림은 5 개의배너를직 접선택할수있도록 1~5 까지번호별로링크를제공하고있다. 적용기술 43) 사용자요구에의한업데이트방법제공 사용자의요구와무관하게콘텐츠가자동적으로업데이트되는기능의경우 사용자는불편함을겪게된다. 따라서업데이트를자동적으로발생시키는대신, 사용자가자신의필요에따라업데이트를요청할수있는기능을제공해야한다. - 120 -

또한자동으로업데이트되는콘텐츠를사용자는멈출수있어야한다. 이를위해 " 일시정지 " 버튼을제공하여자동으로업데이트되고있는콘텐츠를사용자가원하는만큼정지시킨뒤이용이다끝난뒤다시업데이트될수있도록해야한다. o 잘못된사례및개선방법 잘못된사례 35) 마우스로만정지할수있는콘텐츠를제공한경우 다음그림은실시간뉴스기사가상하스크롤로갱신되는경우다. 이경우, 사용자는뉴스를보던도중에내용이변경되어이전뉴스를찾게되지만사용자제어기능은단지해당기사링크에마우스를올렸을경우에만스크롤이멈추도록되어있으며, 키보드초점을받은경우스크롤이멈추지않아키보드접근이불가능한사례이다. 개선방법 링크에마우스를올렸을경우에만작동되는스크립트는키보드로접근했을경 우에도동일하게동작하도록개선되어야한다. 또한텍스트배너의변화가멈춘 다음에는지나간배너로이동하거나다음배너로이동할수있는방법도제공해 - 121 -

야한다. 잘못된사례 36) 자동으로변하는배너 다음그림은여러개의이미지배너가일정시간이지나면순서대로변경되어 보여주는경우다. 사용자가변화하는배너를멈추기위해서는해당배너위로마우스를올려두 어야만멈출수있어키보드로는멈출수없는문제가있다. 개선방법 우선마우스뿐만아니라키보드초점을받았을경우에도스크롤이멈추도록개 선해야하며, 또한사용자가배너를선택할수있는방법을함께제공해야한다. 사용자가배너를선택할수있는가능한수단은다음과같다. 앞으로이동, 뒤로이동등의스크롤제어기능제공 사용자선택이가능한배너번호와번호에동기되는배너의표시기능제공 전체배너를표시하는방법제공 - 122 -

검사항목 2.3.1 ( 깜빡임과번쩍임사용제한 ) 초당 3~50 회 주기로깜빡이거나번쩍이는콘텐츠를제공하지않아야한다. o 개요 깜빡이는콘텐츠는사용자의시선을끌기위한목적으로주로사용되는콘텐츠이다. 그러나깜빡임의주기와크기, 변화의정도에따라광과민성증후군이있는사용자에게발작이나졸도등을유발할수있으므로깜빡이는콘텐츠의사용에유의하여야한다. 광과민성발작은주로어린이들에게많이일어나며특히빛에민감한어린이들 에게일어날가능성이많다. 증상은어지럼증을유발하며, 심하면의식을잃고온 몸이경련을일으키기도한다. 그러나깜빡임이있는모든콘텐츠가위험한것은아니다. 문제가되는것은게임, 애니메이션등과같이명도대비나채도대비 ( 특히빨간색과파란색계열 ) 가큰화면이연속적으로오랜시간빠르게반복 ( 주파수초당 3~50회 ) 되는경우에만문제가된다. 초당 2회이하로깜빡이는콘텐츠는문제를야기하지않는다. 3D 애니메이션의경우깜빡임주파수와관계없이발작을일으킬가능성이있다는연구결과가있으므로웹페이지를통하여 3D 동영상을제공할경우주의하여야한다. ( 출처 : 3D 입체영상 ' 포켓몬쇼크 ' 재연될라, 이투데이 2011 년 1 월 13 일, http://kr.news.yahoo.com/service/news/shellview.htm?articleid=20110113110000417f7&linkid=4&newss etid=1352) < 참고 > 포켓몬사례 1997년일본의유명애니메이션 ' 포켓몬스터 ' 의 38번째에피소드인 ' 전능전사포리곤 ' 의한장면에서빨간색과파란색이교대로반복되는섬광장면이나오자 TV로이를시청하던어린이들이발작을일으킨사고가있었다. 이사고로어린이 685명이구급차로병원에실려갔으며이들중 150여명은병원에입원한바있다. 일본에서는어린이들의발작원인으로애니메이션의섬광이미지로인한광과민성발작현상으로결론내고관련업계와방송국에주의조치를내린바있다. - 123 -

o 적용기술 적용기술 44) 깜빡이는시간이 3 초이내인콘텐츠만제공 페이지에포함된모든콘텐츠는움직임, 번쩍임, 깜빡임이없도록한다. 사용자 의시각적인유인효과를위해서콘텐츠의움직임, 번쩍임, 깜빡임을사용하는경 우이들움직임이 3 초이내에자동적으로멈출수있도록제공한다. 콘텐츠의움직임, 번쩍임, 깜빡임이콘텐츠를사용하거나이해하는데필수적인경우사용자가그기능을활성화시키고멈출수있는컨트롤을제공한다. 이경우에도처음로드될때에는콘텐츠의움직임, 번쩍임, 깜빡임이정지상태이거나로드후그움직임이 3초이내이어야한다. 움직임, 번쩍임, 깜빡임이있는페이지경우에도 3초이내로만깜빡이는콘텐츠를제공한다면움직임, 번쩍임, 깜빡임에대한불편을줄일수있다. 이러한방법을이용해 3초이내의깜빡이는콘텐츠를제공하면사용자의시각을끌수있어팝업창을대체하는용도로사용될수도있다. <style type="text/css"> #blink_contents{width:100px;height:100px;background-color:red;visibility:visible; } </style> </head> <body> <div id="blink_contents">...</div> <script type="text/javascript"> var i = 0; function popupblink(){ var blinkcontents = document.getelementbyid("blink_contents"); if(i < 3){ blinkcontents.style.visibility = blinkcontents.style.visibility == ""? "hidden" : ""; i=i+1; }else{ blinkcontents.style.visibility = ""; window.clearinterval(blinking); } } var blinking = window.setinterval(popupblink, 500); </script> </body> - 124 -

적용기술 45) 경고페이지제공 콘텐츠의움직임, 번쩍임, 깜빡임등이페이지를사용하거나이해하는데필수적이며, 사용자가그기능을활성화시키거나멈출수있는컨트롤을제공하기어려운경우다음과같은메시지상자를이용하여사용자에게이들움직임, 번쩍임, 깜빡임이있는페이지로이동함을알리고사용자가이페이지로이동할것인가를결정할수있도록한다. o 잘못된사례및개선방법 잘못된사례 37) 깜빡이는콘텐츠가많은경우 다음그림은페이지에사용된콘텐츠중광고배너, 이미지등이과도하게움직 임이많은경우이다. 이경우, 사용자는움직이는콘텐츠가많아주위가산만해지 고집중력이떨어질수있다. 깜빡임콘텐츠가많은페이지 - 125 -

개선방법 < 개선방법 1> 가장바람직한방법은웹페이지를움직임이나깜빡임이없도록구현하는것이 다. 특히쇼핑몰에서제공하는상품이미지를플래시나 gif 애니메이션으로구성 하지않고정적이미지로제공한다. < 개선방법 2> 그러나움직임이나깜빡이는콘텐츠를제공해야하는경우콘텐츠의움직임과 깜빡임은 3 초미만이되도록한다. 만일깜빡임이 3 초이상지속되는경우해당 웹페이지에접속되기전에광과민성발작을유발할수있음을사용자에게경고 하여사용자가사전에깜빡이는콘텐츠를피할수있도록제공해야한다. < 참고 > 깜빡이는콘텐츠제공에대한참고내용 http://www.w3.org/tr/2007/wd-understanding-wcag20-20071211/seizure.html http://www.w3.org/tr/2007/wd-understanding-wcag20-20071211/seizure-three-times.html http://www.w3.org/tr/2007/wd-understanding-wcag20-20071211/seizure-does-not-violate.html 잘못된사례 38) 발작가능성이있는동영상을제공한경우 다음그림은움직이는영상을플래시콘텐츠로제공하는경우이다. 이콘텐츠의 경우파란색과흰색고리가빠르게교차되며회전되어확대되는전체화면에광 과민성발작증상을일으킬가능성이있다. - 126 -

개선방법 많은움직임이있거나화면의변화가빠른콘텐츠를제공하기전에사용자가 광과민성증후에의한발작을피할수있도록사전에경고해야한다. 또한사용자요구에의하여이콘텐츠를사용하더라도이용도중즉시중단할 수있는기능을제공해야하며, 이기능은마우스, 키보드등어느입력장치로도 접근할수있도록제작되어야한다. 잘못된사례 39) 번쩍임이지속되는영상을제공한경우 빨간색과파란색이빠른속도로주기적인반복이일어나는애니메이션, 동영상등은광과민성증후군이있는사용자에게발작증세를일으킬수있다. 다음화면은 1997년일본에서어린이들에게큰위험을제공한포켓몬스터제 38화의문제장면이다. 그림과같이빨간색과파란색이빠른속도로화면에나타남으로인하여광과민성증후군에의한발작증세를유발할수있다. 개선방법 채도대비가큰화면의반복적인변화를제공해야하는콘텐츠는초당 3 회이 상깜빡이지않도록해야한다. 또한섬광이미지가지속되는시간을 3 초미만이 되도록한다. - 127 -

검사항목 2.4.1 ( 반복영역건너뛰기 ) 콘텐츠의반복되는 영역은건너뛸수있어야한다. o 개요 웹콘텐츠는사용성을높이기위하여각페이지를내비게이션영역, 정보제공영역등으로구분하여그위치와모양을일정하게유지한다. 이중내비게이션영역은동일한콘텐츠를모든페이지에걸쳐반복적으로제공하므로반복영역이라고도한다. 내비게이션영역은주로메뉴, 링크모음등으로구성된다. 화면낭독프로그램사용자의입장에서는웹페이지를리프레시하거나리로딩할때마다페이지의앞부분에제공되는반복영역을반복적으로듣게된다. 따라서자주방문하는웹사이트의경우반복영역을반복해서듣는것이매우불편한일이다. 이러한불편을해결하기위하여웹콘텐츠는반복영역을화면낭독프로그램이읽어주기전또는읽는도중에사용자가핵심콘텐츠로이동할수있는수단을제공해야한다. o 적용기술 적용기술 46) 반복적인콘텐츠영역의시작부분에건너뛰기링크제공 콘텐츠영역을우회하는건너뛰기링크 (skip navigation) 를제공하면해당영역을건너뛰고다음영역으로사용자제어를이동시킬수있으므로키보드사용자의사용성을높일수있다. 어떤영역에건너뛰기링크를제공하려면그영역의첫번째링크의목적지를다음영역의첫번째항목으로지정해야한다. 링크, 버튼으로구현된건너뛰기링크를각페이지상단에제공할경우반복영역을건너뛰어원하는정보로이동할수있다. 건너뛰기링크는반복영역이있는모든페이지의상단의일정한곳에제공해야하며사용법과모양이모든페이지에걸쳐동일해야한다. 정보제공영역을여러개로구분하여다수의콘텐츠를제공하는경우여러개 - 128 -

의건너뛰기링크를제공할수있다. 그러나건너뛰기링크도반복영역의하나이므로여러개의건너뛰기링크를제공하면화면낭독프로그램이건너뛰기링크를읽어주어사용자에게또다른불편함을주므로그수를 3개이하로줄일필요가있다. 다음과같은경우건너뛰기링크를제공할수있다. 1) 링크목록간건너뛰기기능제공 하나의웹페이지에여러개의링크목록영역을포함하고있는경우각링크목록영역별로건너뛰기링크를제공할수있다. 예를들어, 사이트맵, 주메뉴, 기관소개, 기관연락처등으로구성된영역과소절 (subsection) 로이동하기위한링크목록을제공하는콘텐츠에서페이지의첫부분에 ' 기관소개로이동 ' 링크를제공하고, 두번째링크목록의첫부분에는 ' 소절건너뛰기 ' 를위한링크를제공한다. 2) 도서색인 색인을포함하여구성한온라인도서시스템에서페이지의좌측에색인을제공 하는경우색인의첫번째링크를 ' 색인건너뛰기 ' 로구성하면반복적으로제공하 는색인영역을우회할수있다. 3) 모든링크건너뛰기기능제공 어떤기관의웹페이지첫부분이메뉴, 내비게이션바 (navigation bar), 사이트맵 (site map), 기관에대한정보, 기관연락처등으로구성되어있을경우건너뛰기링크를메뉴시작전에제공하고링크텍스트를 ' 모든링크건너뛰기 ' 라고제공한다. 건너뛰기링크를실행시키면메뉴, 내비게이션바, 사이트맵을우회하여기관에대한정보영역으로직접이동할수있다. < 참고 > 모든페이지가반복영역건터뛰기가반드시필요하지는않는다. 콘텐츠블록마다링크의수가많거나메뉴나링크등의반복되는콘텐츠가많은복잡한페이지일경우에만반복영역건너뛰기가필요하다. 또한반복영역건너뛰기자체도너무많이제공되지않아야한다. 적용기술 47) 건너뛰기링크의화면표시 건너뛰기링크는화면낭독프로그램을사용하는시각장애인뿐만아니라키보 - 129 -

드를사용하는사용자가핵심콘텐츠로이동하기위한매우유용한수단이다. 따 라서건너뛰기링크는화면에보이도록구현하는것이좋다. 디자인의특성상건너뛰기링크를보이지않도록구현하더라도키보드내비게 이션에의하여초점을받을수있도록해야하며, 키보드초점을받으면건너뛰기 링크가표시되어야한다. 다음예는키보드초점을받으면건너뛰기링크가화면에나타나도록구현한 CSS 코드이다. 건너뛰기링크가화면에나타나는 CSS 파일을사용자에게추가 로제공하는것도좋은방법이다. <style>.contents_nav_link{visibility:hidden;position:absolute;}.contents_nav_link:focus{visibility:visible;position:static;} </style> <a href="#contents" class="contents_nav_link"> 본문바로가기 </a> o 잘못된사례및개선방법 잘못된사례 40) 건너뛰기링크를제공하지않은경우 다음그림은건너뛰기링크가제공되지않아본문의핵심콘텐츠로바로초점할수없는경우이다. 이경우화면낭독프로그램을이용하는사용자나몸이불편하여키보드만으로접근할수밖에없는사용자는페이지상단의메뉴, 왼쪽의주요사업링크등공통적으로제공되는반복되는링크를항상지나가야하기때문에불편하다. - 130 -

주요콘텐츠로바로이동이불가능한페이지 개선방법 따라서반복적으로사용되는상단메뉴와왼쪽링크를우회하여주요콘텐츠로이동할수있는링크나버튼을제공해야한다. 또한건너뛰기링크 ( 버튼 ) 는화면에표시하여키보드사용자도사용할수있도록제공하는것이바람직하다. <a href="#contents"> 본문바로가기 </a> 잘못된사례 41) 건너뛰기링크를과도하게제공한경우 다음그림은공통적인사용이라생각하여복사, 붙여넣기방식으로건너뛰기링크를제공하거나건너뛰기링크를너무작은단위로나누어제공한경우다. 이경우, 해당페이지에없는기능을제공하여사용자에게혼란을줄수있고, 많은양의링크가제공되어이영역이오히려반복영역으로인식될수있는문제가있다. - 131 -

과도한건너뛰기링크제공 개선방법 따라서건너뛰기링크는주요콘텐츠를이동하는기능이나반복되는링크를건 너뛸수있는목적으로만제공하는것이좋다. 또한핵심콘텐츠에한해서만바로이동할수있는링크를제공해야한다. < 참고 > 건너뛰기링크의용도표현건너뛰기링크에대한대체텍스트또는링크텍스트는다음예와같이어떤영역을우회하는지또는목적지가어디인지를명확히표시해야한다. 1) "oo 링크영역건너뛰기 " 2) "oo을건너뛰어ㅁㅁ으로이동 " 등 건너뛰기링크를제공할경우 건너뛰기링크를제공할경우 "OO 링크집합을건너뛰기 " 또는 "OO 을건너뛰어ㅁㅁ으로감 " 등의방식으로어떤영역을건너뛰는지어디로건너뛰는지에대해명확히알려주어야한다. - 132 -

검사항목 2.4.2 ( 제목제공 ) 페이지, 프레임, 콘텐츠블록에 는적절한제목을제공해야한다. o 개요 적절한제목은페이지, 프레임, 콘텐츠블록을유추하여사용자가웹콘텐츠를운용하기쉽게도와주기위해제공한다. 만약페이지의제목을제공하지않거나모두동일한제목으로통일될경우화면낭독프로그램을이용하는사용자나인지능력이낮은사용자는페이지가변경되어도어떤페이지인지판단하기어렵게된다. < 참고 > 적절한제목이란? 제목은불필요한특수기호를반복적으로사용하지말아야하고간단명료해야한다. 그리고해당웹사이트의어느페이지와도다른제목이어야한다. 프레임의경우아무런내용이없는프레임이라면 " 빈프레임 " 등으로제목을제공해야하고, 콘텐츠블록에대하여 <h1>, <h2> 태그등을부여하여제목과본문을구분할수있도록제공하는것이좋다. o 적용기술 적용기술 48) 웹페이지의제목제공 모든 HTML(XHTML 포함 ) 을이용하여구성한웹페이지에는문서의목적을 정의하는 title 태그를반드시제공해야한다. title 태그를제공하면본문을검색 하지않아도문서의용도를직관적으로알수있다. 다음코드는페이지제목을 'World Wide Web' 으로정의한예다. <html> <head> <title>world Wide Web</title> </head> <body>... </body> </html> - 133 -

적용기술 49) 콘텐츠블록의제목제공 헤딩태그는콘텐츠의구조를조직적으로전달하기위하여사용한다. 따라서사 용자는헤딩태그를이용해웹문서의구조를파악하거나다음헤딩에대한정보 를쉽게파악할수있다. <h2> 뉴스 </h2> <div> <ul>...</ul> <ul>...</ul> </div> <h2> 쇼핑 </h2> <div> <ul>...</ul> <ul>...</ul> </div> 만일화면상으로표시되는모습을헤딩태그를사용하여구현한것처럼꾸민다면사용자가문서의구조를파악하거나콘텐츠를탐색하는것이어려워혼란을줄수있다. 따라서글씨체속성을이용하여콘텐츠의구조를표현하는것은좋은방법이아니다. 적용기술 50) 프레임제목제공 frame 태그를사용할경우해당 frame 의 title 속성을제공하여프레임간의 내비게이션을용이하도록해야한다. 웹페이지를 frameset 으로구성하고 title 태그를제공하더라도각 frame 별로 title 속성을제공해야한다. 그이유는프레임의내비게이션시 title 태그가현재 프레임의위치를알려주는중요한정보로이용되기때문이다. < 참고 > 프레임제목 프레임제목은프레임내에포함된콘텐츠를유추할수있는간결한제목을제공해야한다. " 메 - 134 -

인메뉴 ", " 참고문서 " 등의프레임제목은프레임이제공하는콘텐츠의용도를유추할수있으 므로적절하다. 그러나 "top 프레임 ", "main 프레임 " 등과같은제목은프레임의용도가아닌 프레임의위치정보를알려줄뿐이므로바람직하지않다. o 잘못된사례및개선방법 잘못된사례 42) 콘텐츠가다른페이지에동일한제목을제공한경우 다음예는페이지마다콘텐츠가다르지만페이지 title 태그내용을동일하게제 공하는경우로, 이경우화면낭독프로그램을이용하는사용자나인지장애를가 진사용자는접근하는페이지의변화된부분을인식하기어렵게된다. 개선방법 페이지마다각각고유한 title 태그내용을제공해야한다. 신문사사이트라면 다음그림처럼신문기사의중요제목을 title 태그내용으로제공해주는것이좋 다. 잘못된사례 43) 프레임제목이누락된경우 프레임에타이틀을제공하지않은경우화면낭독프로그램을이용하는사용자 - 135 -

나인지장애를가진사용자는프레임을구별할수없으므로프레임간의이동이 어려워결과적으로해당콘텐츠를운용하기어려워진다. 개선방법 프레임제공시프레임내에서제공하는콘텐츠의용도또는목적을토대로간결한내용으로제목을제공해야한다. 또한 "top 프레임 ", "main 프레임 " 등과같이어떤콘텐츠인지알수없는내용보다는 " 로그인프레임 ", " 광고프레임 " 등과같이그의미를명확히알수있는제목을제공하면페이지를이용하기가편리하게된다. <iframe width="280" height="150" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" title=" 광고프레임 " src="http://nv2.ad.naver.com/adshow?unit=002x" name="f280150" id="f280150"> 광고 : <a href="http://nv2.ad.naver.com/adshow?unit=002x">http://nv2.ad.naver.com/adshow?un it=002x</a></iframe> 잘못된사례 44) 특수문자 ( ) 기호를제공한경우 다음예는페이지타이틀에특수문자 ( ) 를사용하여제공하는경우로, 이경우화면낭독프로그램을이용하는사용자나인지장애를가진사용자는페이지제목을명확하게이해하지못할수있다. 때에따라서는반복적인특수문자로인하여화면낭독프로그램의고장을유발할수도있으므로주의해야한다. 페이지타이틀에특수문자사용 개선방법 페이지타이틀제공시표현을위한특수문자의사용은피하고간결하고웹페 이지가제공하는콘텐츠를유추할수있도록제공해야한다. - 136 -

검사항목 2.4.3 ( 적절한링크텍스트 ) 링크텍스트는용도나 목적을이해할수있도록제공해야한다. o 개요 링크텍스트를 " 여기를클릭하세요." 나 " 여기 " 와같은애매모호한표현을사용하면 시각장애인이나인지장애인뿐만아니라비장애인들도링크를클릭했을때어떤 반응이나어떤페이지로이동될지예측하기어렵다. 따라서링크텍스트를직관적이고의미있게구성하여사용자가링크의용도나 목적지를명확히알수있게제공해야한다. 올바른링크텍스트제공은사용자가원하지않는링크를방문해보지않거나 키보드를여러번입력하지않아도되고원하는콘텐츠가있는링크를바로이용 할수있게된다. o 적용기술 적용기술 51) 링크의목적을설명하는링크텍스트제공 링크를포함하는주변문장과조합하여그목적이나용도를알수있도록제공할수있다. 이러한방법은사용자로하여금이링크가어떤목적을가지는지어떤페이지로이동하는지를구별할수있도록도와준다. 링크텍스트를단순히 URL 경로를제공하는것은사용자에게충분한설명을하지못한다. 1) 메이플라워호에대한웹페이지로이동하는링크 <p>" 미국으로의첫번째이주민들은 <a href="mayflower.html"> 메이플라워호 </a> 를타고 왔다."</p> 2) 기사에링크를걸경우 다음예와같이해당링크가사용되는웹페이지의문맥에따라목적에맞는 - 137 -

단어에링크를걸어주는경우도있다. 보도내용링크 <p>"oo 신문의 <a href="news.html"> 보도내용 </a> 에따르면 OO 교육청에서는 2012 년도연간 계획을수립하였다."</p> oo 교육청링크 <p>"oo 신문의보도내용에따르면 <a href="education_office.html">oo 교육청 </a> 에서는 2012 년도연간계획을수립하였다."</p> 2012 년도연간계획링크 <p>"oo 신문의보도내용에따르면 OO 교육청에서는 <a href="calendar.html">2012 년도연간 계획 </a> 을수립하였다."</p> < 참고 > 링크의목적을설명하는링크텍스트제공링크의목적을설명하는링크텍스트를제공하면사용자는링크를웹페이지의다른링크와구별할수있고, 그링크를따라갈지의여부를결정하는데도움을준다. 목적지의 URL 주소를링크텍스트로제공하는것은충분한설명이되지못한다. o 잘못된사례및개선방법 잘못된사례 45) 목적이나용도를알기어려운링크텍스트 다음예는페이지이동을하기위한링크를텍스트로제공한경우로, 이경우해당사이트에대한목적이나링크의용도를알기힘들어어떠한페이지인지어떠한기능을하는링크인지를클릭해서해당링크페이지로이동하기전까지는알수없게된다. < 그림 26> 목적이나용도를알기어려운링크텍스트 ( 여기를클릭해주세요 ) - 138 -

개선방법 링크텍스트를직관적이고의미있게구성하여사용자가링크의용도나목적지 를명확히알수있도록개선해야한다. 또한위예제에서는 " 여기를클릭해주세요." 보다는 다른테스트를하고싶으 시다면클릭해주세요. 라는문장전체를링크텍스트로사용하는것이좋다. 이 외추가설명이필요하다면 title 속성을사용하여제공할수있다. title 속성을사용하는사례 <div class="page"> <a href="page_prev.php?page=1" class="pre" title=" 이전검색결과페이지 "> 이전 </a> <a href="page_next.php?page=3" class="next" title=" 다음검색결과페이지 "> 다음 </a> </div> - 139 -

원칙 3. 이해의용이성 (Understandable): 콘텐츠는이해할 수있어야한다. o 이해의용이성 웹에서제공되는정보와사용자인터페이스는이해할수있게구성이되어야한다. 여기에서이해라는것은자극으로부터시각과청각등여러감각기관을통해감각을느끼고, 사물을지각 (perception) 한후에과거의경험등에견주어내용을파악하고해석하는것을말한다. 원칙 1( 인식의용이성 ) 에서는장애인들이웹콘텐츠를일차적으로잘감각하고지각할수있도록작성하는방법에대한지침을담고있는반면, 원칙 3( 이해의용이성 ) 에서는그렇게지각된웹콘텐츠가실제어떤내용이고, 어떤의미를담고있는지이해할수있도록작성하는방법을담고있다. 즉, 웹콘텐츠나인터페이스가감각적으로는인식이되었으나무슨내용인지알수가없게다른언어로되어있거나순서가뒤죽박죽이어서이해가안되거나무엇을해야할지안내가충분하지않을수있다. 이러한것을방지하기위해서원칙 3( 이해의용이성 ) 에서는네가지지침과여섯개의검사항목을제시하고있다. 우선, 제공되는내용이사용자의이해수준이나사용언어에구애받지않고쉽게읽을수있어야한다. 이를위해서는우선제공되는정보의언어가무엇인지명확히표시하여시각적으로그것을보는사람뿐만아니라보조기기나검색엔진등다른방법으로웹에접근하는경우에도내용을이해할수있어야한다. 또한제공되는내용이시각적으로는논리적인것같지만, 사실그것을표시하기위해사용된소스가논리적인순서로작성되지않았다면제공되는내용을순차적으로읽어나가는시각장애인용화면낭독프로그램에서내용을이해하기어렵게된다. 마찬가지로복잡한데이터를표형식으로제공할때그표를풀어헤치고데이터를순서대로나열해도여전히내용을이해할수있는지생각해보아야한다. 사용자인터페이스를설계할때에도그것이이해할수있는지점검해야한다. 예를들어, 사용자로부터입력을받는서식을만들때해당서식이무엇을입력해야하는것인지알수있도록레이블을잘붙여주어야한다. 또한사용자가값을실수로잘못입력했을경우에도, 그것을쉽게고칠수있는방법을제공해야한다. - 140 -

o 관련지침 이해의용이성은사용자가장애유무등에관계없이웹사이트에서제공하는콘 텐츠를이해할수있도록제공하는것을의미한다. 이해의용이성은가독성, 예측 가능성, 콘텐츠의논리성, 입력도움의 4 가지지침으로구성되어있다. < 표 8> 이해의용이성관련지침및검사항목 지침 (4 개 ) 검사항목 (6 개 ) 3.1( 가독성 ) 콘텐츠는읽고이해하기 쉬워야한다. 3.1.1( 기본언어표시 ) 주로사용하는언어를명 시해야한다. 3.2( 예측가능성 ) 콘텐츠의기능과 실행결과는예측가능해야한다. 3.2.1( 사용자요구에따른실행 ) 사용자가의도 하지않은기능 ( 새창, 초점변화등 ) 은실행되지 않아야한다. 3.3( 콘텐츠의논리성 ) 콘텐츠는논리 적으로구성해야한다. 3.3.1( 콘텐츠의선형화 ) 콘텐츠는논리적인순서로제공해야한다. 3.3.2( 표의구성 ) 표는이해하기쉽게구성해야한다. 3.4( 입력도움 ) 입력오류를방지하 거나정정할수있어야한다. 3.4.1( 레이블제공 ) 입력서식에는대응하는레이블을제공해야한다. 3.4.2( 오류정정 ) 입력오류를정정할수있는방법을제공해야한다. - 141 -

검사항목 3.1.1 ( 기본언어표시 ) 주로사용하는언어를명시 해야한다. o 개요 웹브라우저는웹페이지를구성하는텍스트콘텐츠의언어정보를바탕으로텍스트콘텐츠를화면에표시하거나보조기기로제공한다. 화면낭독프로그램을사용하는경우, 텍스트콘텐츠의언어정보를화면낭독프로그램으로제공하여정확한발음이가능하도록화면낭독프로그램을제어하기도한다. 따라서웹페이지를구성하는기본언어는정확히명시해야한다. o 적용기술 적용기술 52) <html> 태그에주사용언어지정 웹페이지에서주로사용하는언어는페이지의상단에 html 태그에 lang 속성 을이용하여다음과같이지정한다. 주로사용되는언어가영어일때 <html lang="en"> 주로사용되는언어가한국어일때 <html lang="ko"> 주로사용되는언어가일본어일때 <html lang="ja"> 주로사용되는언어가스페인어일때 <html lang="es"> - 142 -

이렇게페이지에서주로사용하는언어를지정해놓으면, 웹페이지에접근하는여러가지기계에서언어를인식하게된다. 화면낭독프로그램과같은보조기기는지정된언어에맞는 TTS(Text-to-Speech) 엔진을가동시키고, 자동으로웹의정보를수집하여검색을도와주는검색엔진로봇은해당언어의검색인덱스에페이지를분류해넣는다. 즉, 사용자가검색할때특정언어를지정한웹검색결과만나오도록할때검색엔진은 lang 속성값을여러가지판단의근거중하나로활용할수있다. 이때 lang의속성값에는 ISO 639-1에서지정한두글자로된언어코드를넣어야한다. 주의할점은한국어코드는 kr이아니라 ko다. 자세한것은 ISO 639-1에대한위키페이지 (http://en.wikipedia.org/wiki/iso_639-1) 와언어코드목록 (http://en.wikipedia.org/wiki/list_of_iso_639-1_codes) 을참고하라. 여기에서주의할것은주로사용되는언어를설정하는것은해당페이지의인코딩방식을정하는것과는다르다는것이다. 즉, <head> 의맨첫줄에 <title> 을지정하기전에 <meta> 태그를이용해서문서의인코딩방식을지정하지않으면브라우저가콘텐츠를바르게표시하지못하는경우가생긴다. 인코딩방식을지정하는문제는화면낭독프로그램과같은보조기기에서뿐만아니라시각적으로내용을표시하는브라우저에도영향을주므로반드시제공해야한다. HTML 4.01 의경우, <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 페이지의제목 </title> HTML5 의경우, <head> <meta charset="utf-8"> <title> 페이지의제목 </title> 와같이인코딩방식을지정한다. - 143 -

< 참고 > 페이지중간에언어가바뀔때지침에서는해당페이지의주요사용언어만을최소한으로지정할것을요구하고있다. 이렇게함으로써, 화면낭독프로그램이페이지의내용을해당언어로정확하게읽어주도록지시하는역할을한다. 그러나페이지안에서여러개의언어가번갈아가면서쓰이는경우, 변경되는언어가나올때마다언어를지정해주는것이좋다. <p> 중국어로는 " 안녕하세요 " 라고인사할때 <span lang="zh"> 你好 </span> 라고말합니다. </p> 만약화면낭독프로그램에중국어음성엔진이탑재되어있다면위의你好를 " 니하오 " 와같은중국어발음으로읽어주겠지만, lang 속성을지정하지않았다면그냥한국식발음으로 " 이호 " 라고읽어주게된다. 주로사용하는언어또는부분적으로쓰이는언어를바르게지정함으로써해당언어에맞는인용부호나구두점등을바르게표시할수있다. <p> 그는한국어로 <q lang="ko"> 웹은보편적으로접근가능한것입니다.</q> 라고말하였다.<br/> 그는독일어로 <q lang="de">web ist allgemein zugänglich</q> 이라고말하였다.<br/> 그는프랑스어로 <q lang="fr">web est accessible à tous</q> 이라고말하였다.</p> 위와같이해당언어가사용된부분에부분적으로또는페이지전체적으로언어를명시해주 면, 브라우저는다음과같이화면에표시해준다. 그는한국어로 " 웹은보편적으로접근가능한것입니다." 라고말하였다. 그는독일어로 Web ist allgemein zugänglich" 이라고말하였다. 그는프랑스어로 «Web est accessible à tous» 이라고말하였다. - 144 -

검사항목 3.2.1 ( 사용자요구에따른실행 ) 사용자가의도하 지않은기능 ( 새창, 초점변화등 ) 은실행되지않아야한다. o 개요 서식컨트롤이나사용자입력이초점을받았을때의도하지않는기능이자동적으로실행되지않도록콘텐츠를개발해야한다. 사용자가마우스로클릭하거나키보드를이용하여입력한후기능이실행되어야하며, 사용자가예측할수없는상황에서정보를제공하지않아야한다. 특히사용자가인지하지못한상황에서새창, 팝업창등을제공하지않아야한다. o 적용기술 적용기술 53) 초점변화에의해맥락을변화시키지말고, 해당인터페이스가 활성화 (activate) 되었을때기능을실행 보통사용자는해당요소를클릭하거나, 키보드의엔터키를누름으로서기능이실행될것으로예측한다. 즉, 단지키보드의초점을가져가거나마우스의포인터를위치시켰다고해서급격한변화가일어나리라고기대하지않는다. 사용자의편의성을높여주고마우스클릭수를줄여준다는목적으로해당인터페이스가초점을받았을때급격한맥락의변화를초래하는기능을수행하면일반사용자들도혼란스러울뿐만아니라화면확대기나키보드를위주로사용하는장애인들, 한번의클릭이초점의이동을뜻하는모바일브라우저사용자들의웹페이지탐색을어렵게만든다. 다음과같은예를생각해볼수있다. 버튼과새창을여는기능을연계시킬경우, 사용자가버튼을클릭하거나또는스페이스바를눌렀을경우에만새창을연다. 그렇지않고버튼에 onfocus 속성을이용해새창을여는이벤트를연계하면안된다. 여러개의페이지로구성된입력서식이있다고가정하면, 첫번째입력페이지에서입력을완료하고 [ 다음페이지 ] 버튼또는 [ 첫번째페이지입력 - 145 -

완료 ] 라는버튼으로탭을이동하자마자다음페이지로자동으로가도록하 면안된다. 반드시사용자가해당버튼을눌렀을때에만두번째페이지로 이동해야한다. 적용기술 54) 명확한서식제출 (submit) 버튼제공 서식을입력하고나서사용자의명확한요구와값제출에의해서만 HTTP 요구 (request) 가일어나고맥락의변화가일어나도록한다. HTML에서제공하는 submit 버튼을쓰지않고, 자바스크립트로만서식값이전송되도록하는것은잘못이다. 다음과같이명확한서식값제출버튼을제공하는것이좋다. <form action="http://www.example.com/cgi/subscribe/" method="post"> <p> 메일링리스트에가입하려면이메일주소를넣어주십시오.</p> <label for="address"> 이메일주소 :</label><input type="text" id="address" name="address" /> <input type="submit" value=" 가입 " /> </form> 마찬가지로, 목록선택상자를제공할경우반드시선택값을사용자가확인하고 제출할수있는 submit 버튼을따로제공해야한다. <form action="http://www.example.com/cgi/redirect/" method="get"> <p> 이동할사이트를고르세요.</p> <select name="dest"> <option value="/index.html"> 홈 </option/> <option value="/blog/index.html"> 블로그 </option/> <option value="/tutorials/index.html"> 사용법 </option/> <option value="/search.html"> 검색 </option/> </select> <input type="submit" value=" 페이지이동 " /> </form> 적용기술 55) 새창열림을사전에알림 링크를선택했을때아무런경고없이새창이열리게되면, 시각적인콘텐츠를잘인식하지못하는사용자들이나인지장애또는학습장애인들에게혼란을주게된다. 또한일반사용자들은새창이열림으로써앞으로가기와뒤로가기와같은일반적인브라우저의이동버튼을사용할수없게만드므로되도록이면사 - 146 -

용하지않는것이좋다. 그러나불가피하게링크를새창으로열어야한다면미리새창이열릴것이라는것을예측할수있게해주는것이좋다. 가장간결하고쉬운방법은 html의링크텍스트안 ( 이미지의경우, alt 속성값 ) 에새창이열릴것이라고표시해주거나, title 속성을이용해툴팁 ( 화면낭독프로그램의경우, title 속성값을읽어주거나읽어주지않도록설정이가능함 ) 으로새창이열릴것을알려주는방법이있다. <a href="knitting.html" target="_blank"> 뜨개질포털사이트 ( 새창으로열림 )</a> <a href="korean.html" target="_blank"><img src="korean.png" alt=" 한국어페이지 ( 새 창으로열림 )"></a> <a href="help.html" target="_blank" title=" 새창으로열림 "> 도움말 </a> CSS 를이용해해당링크에초점이이동하거나마우스포인터가위치했을때 새창이열릴것이라고알려주는방법도있다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 새창이열리는것에대한경고 </title> <style type="text/css"> body { margin-left:2em; margin-right:2em; } :focus { outline: 0; } a.info { position:relative; z-index:24; background-color:#ccc; color:#000; text-decoration:none } a.info:hover, a.info:focus, a.info:active { z-index:25; background-color:#ff0 } a.info span { position: absolute; left: -9000px; - 147 -

width: 0; overflow: hidden; } a.info:hover span, a.info:focus span, a.info:active span { display:block; position:absolute; top:1em; left:1em; width:12em; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center } div.example { margin-left: 5em; } </style> </head> <body> <h1> 새창열림경고 </h1> <p> 더자세한정보는 <a class="info" href="popup_advisory_technique.html" target="_blank"> <strong> 적용기술웹사이트 </strong><span> 새창에열림.</span></a> 에있습니다. </p> </body> </html> CSS 를이용해새창이열리는것을미리알려주는경우 o 잘못된사례및개선방법 잘못된사례 46) 목록선택상자에서초점변경만으로새창이열리는경우 - 148 -

이동버튼이없는목록선택상자 <select onchange="copyrtchgurl(this.value)"> <option value="0"> 관련회사 </option> <option value="http://www.chogwang.com/"> 조광 </option> <option value="http://golf.chosun.com/"> 골프조선 </option> </select> 2011년 11월 21일 http://www.chosun.com 에서발췌 위의예에서는이동하고자하는관련회사를선택하자마자자바스크립트함수가실행되고새창에해당사이트가열린다. 이경우, 시각장애인및지체장애인등마우스를이용하기힘든장애인뿐만아니라마우스에능숙하지않은비장애인들도자신의선택을되돌릴수없어서문제가된다. 키보드를사용할경우, 선택을포기하고다음으로이동하기위해탭키를누르는것만으로의도하지않게선택이이루어지게된다. 화면낭독프로그램을사용할경우첫번째항목을읽어주는것자체가바로선택이되어다음목록을선택할수없게된다. 따라서선택상자에서여러개의항목중에하나를선택한다음에는반드시그선택을확인하는버튼이나절차가있어야한다. 개선방법 <form action="goto_site.jsp"> <select onchange="copyrtchgurl(this.value)"> <option value="0"> 관련회사 </option> <option value="http://www.chogwang.com/"> 조광 </option> <option value="http://golf.chosun.com/"> 골프조선 </option> </select> <input type="submit" value=" 이동 "> 목록선택후별도의 [ 이동 ] 버튼을제공하여개선한사례 - 149 -

이동버튼이있는목록선택상자 <form name="selectform1" action="/gpms/view/jsp/gourl.jsp" onsubmit="goselecturl(1);return false;"> <label for="select1" style="display:none;"> 산하기관 관련단체 </label> <select name="url" id="select1" title=" 산하기관및관련단체선택 "> <option value='' selected > 산하기관 관련단체 </option> <option value='http://www.gepco.or.kr' > 공무원연금공단 </option> <option value='http://www.i-mopas.or.kr' > 공무원직장협의회 </option> </select> <input type="image" src="/gpms/resource/images/common/general/btn_go.gif" alt=" 이동 " title=" 새창으로이동 "> </form> 2010년 11월 21일 http://mopas.go.kr 에서발췌 위의예에서는산하기관및관련단체를선택한이후이동버튼을눌러최종선택을결정하게되므로, 모든항목을선택할수있고, 실수로선택을잘못했더라도되돌릴수있게된다. 이동버튼의경우도 <form> 요소의 action 속성값을이용해서버측에서이동에대한스크립트를제공하는것이바람직하다. 보조적으로 onsubmit이라는이벤트에대해서자바스크립트함수로똑같은기능을제공해도된다. 잘못된사례 47) 체크상자의선택만으로페이지가다시로드되는경우 - 150 -

쇼핑몰사이트에서구매하고자하는물건의여러가지옵션을조합해서구매의 범위를좁히고자할때, 체크상자를다선택하기전에하나의체크상자를체크 하는것만으로페이지내용이급격히바뀌면안된다. 체크상자를선택하는것만으로페이지의내용이바뀌는경우 개선전소스 <input id='d1_438' item_id='438' item_name=' 로지텍 ' section_type='1' section_id='1' onclick="cs.click_item( this.id );" type="checkbox" /> <label for='d1_438' style='cursor:pointer;' onclick='event.cancelbubble=true'><span class='checked_on'> 로지텍 </span></label> 위의페이지에서로지텍이라는제조사를선택하자마자바로로지텍마우스의목록이다음에나오게된다. 만약키보드를사용하는시각장애인이사실은로지텍과마이크로소프트, 3M을복수로선택하고싶었다고하자. 첫번째제조사를선택하자마자확인과정없이바로페이지가다시로드되어, 키보드를사용하는사람은페이지의맨위에서부터다시탐색을시작해서제조사선택하는곳에이르는과정을여러번반복해야한다. 따라서서식값을별도로제출 (submit) 하지않고자동으로내용이급격히바뀌는것이편해보일수있지만, 일부사용자들에게는엄청난불편함을초래하게된다는것을알아야한다. 개선방법 체크상자를다선택한후별도의 [ 확인 ] 이나 [ 제출 ] 버튼을누르도록하여, 사 용자의선택이전송된후상품목록이화면에나오도록한다. 잘못된사례 48) 텍스트입력서식에값을넣으면자동으로제출되는경우 - 151 -

전화번호입력필드예 개선전소스 <form method="get" id="form1"> <input type="text" name="text1" size="3" maxlength="3"> - <input type="text" name="text2" size="3" maxlength="3"> - <input type="text" name="text3" size="4" maxlength="4" onchange="form1.submit();"> </form> 2010년 11월 20일 http://www.w3.org/tr/2008/wd-wcag20-techs-20081103/f36에서발췌 전화번호와같이텍스트입력을받을때에도입력후별도의 [ 제출 ], [ 확인 ] 과 같은버튼을제공해야한다. 그렇지않고위의예처럼마지막번호를입력하자마 자값이제출이되어버리는경우, 입력오류를수정하기가매우어려워진다. 개선방법 마지막필드값에변화가생길때자동으로값이제출되는스크립트를제거하 고다음과같이별도의 [ 제출 ] 버튼을두고서식값을제출하도록한다. <form method="get" id="form1" action="http://example.com/handle"> <input type="text" name="text1" size="3" maxlength="3"> - <input type="text" name="text2" size="3" maxlength="3"> - <input type="text" name="text3" size="4" maxlength="4"> <input type="submit" value="submit" /> </form> 잘못된사례 49) 페이지가로드될때자동으로팝업창이열리도록한경우 국내웹페이지들에서는한시적인사안을홍보하거나전달할때사용자가원하지않는팝업창을많이사용한다. 그러나예측되지않은팝업은사용자를혼란스럽게할뿐만아니라시각장애인, 인지능력이떨어지는사람, 운동능력이떨어지는사람들에게웹탐색을어렵게만드는요인이된다. 또한대부분의브라우저 - 152 -

들이팝업창을차단옵션을가지고있어서실질적인광고, 홍보효과도떨어진 다. 브라우저에의해차단된팝업창 개선전소스 if ( notice_getcookie("cookiename5")!= "done" ) { window.open('http://poll.kofst.or.kr:8080/email_poll_101015_pop.aspx','cookiename 5','status=no,width=480, height=320,resizable=no,left=0,top=215,scrollbars=no') } 개선방법 팝업창을쓰지않고원래의메인페이지안에서중요한내용을방문자들이잘볼수있도록눈에잘띄거나중요한위치에배치함으로써실질적인홍보효과와접근성을높일수있다. 웹페이지기획자라면팝업창으로띄우는내용이정말로긴급하게모든방문자에게알려야하는것인지다시고려해볼필요가있다. - 153 -

검사항목 3.3.1 ( 콘텐츠의선형화 ) 콘텐츠는논리적인순서로 제공해야한다. o 개요 웹페이지에제공되는콘텐츠는시각적으로보았을때논리적인순서로보이지만, 그것을선형적으로풀어보면논리가어긋나지는않은지주의해야한다. 화면낭독프로그램과같은보조기기는전체콘텐츠를보통소스코드순서대로풀어서접근하게딘다. 이x 때시각적으로보였던순서와달리논리적인순서가흐트러질경우, 보조기기사용자들은내용을이해할수없게된다. o 적용기술 적용기술 56) 콘텐츠를의미있는순서로배열 웹페이지의콘텐츠는마크업언어 (HTML) 에서논리적으로작성되어야한다. 일단마크업언어에서구조적으로이상이없이작성이되면, 그것을시각적으로꾸미기위해서위치를재조정하거나보이는순서까지바꾸는것은 CSS에서할수있다. 따라서항상마크업언어가순서에맞게의미있게작성되어있는지주의해야한다. 다음의예는중국음식과한국음식을마크업언어로구조적으로의미있게표시한것이다. <div class="box"> <dl> <dt class="menu1"> 중국음식 </dt> <dd class="item1"> 자장면 </dd> <dd class="item2"> 짬뽕 </dd> <dd class="item3"> 탕수육 </dd> <dt class="menu2"> 한국음식 </dt> <dd class="item4"> 김치찌개 </dd> <dd class="item5"> 된장찌개 </dd> </dt> </dl> </div> - 154 -

이것은브라우저에서보통다음과같이표시된다. 중국음식 자장면 짬뽕 탕수육 한국음식 김치찌개 된장찌개 이것을시각적으로다르게보이게하려면 CSS 를적용하면된다. 예를들어, 다 음과같이중국음식과한국음식을나란히보이도록 CSS 를적용할수있다. <style type="text/css">.item1 { left: 0; margin: 0; position: absolute; top: 7em; }.item2 { left: 0; margin: 0; position: absolute; top: 8em; }.item3 { left: 0; margin: 0; position: absolute; top: 9em; }.item4 { left: 14em; margin: 0; - 155 -

position: absolute; top: 7em; }.item5 { left: 14em; margin: 0; position: absolute; top: 8em; }.menu1 { background-color: #FFFFFF; color: #FF0000; font-family: sans-serif; font-size: 120%; left: 0; margin: 0; position: absolute; top: 3em; }.menu2 { background-color: #FFFFFF; color: #FF0000; font-family: sans-serif; font-size: 120%; left: 10em; margin: 0; position: absolute; top: 3em; } #box { left: 5em; position: absolute; top: 5em; } </style> CSS 적용결과, 브라우저에는같은내용이다음과같이다르게표현된다. 그렇다고해서이내용을화면낭독프로그램을통해읽었을때중국음식 한국음식 자장면 김치찌개와같은순서로나오지는않는다. 여전히중국음식 자장면 짬뽕 탕수육과같은순서로읽어주기때문에사용자는정확히제작자가의도한내용을파악할수있게된다. - 156 -

CSS 를이용해콘텐츠의위치를지정한예 적용기술 57) 스타일을이용한글자간격조절 가끔단어의길이에비해공간이많이남아서시각적으로보기싫기때문에단어사이에강제로공백을넣어글자간격을조정해주는경우가있다. 그러나단어사이에강제로공백을넣으면단어로서의의미가달라지고, 화면낭독프로그램에서는다르게발음을하게될수도있으며, 페이지내에서해당단어를검색할수없게되고, 검색엔진이나번역엔진에서도다른단어로인식하게된다. 따라서단지단어의시각적인효과를위해단어사이에강제공백을넣어변형하면안된다. 주어진공간안에서단어의글자배치방법은 CSS의 letter-spacing 속성이나 text-align 속성을이용해조절하면된다. 예를들어, 다음표와같이비고란을표시하는칸너비에비해 " 비고 " 라는단어 는단두글자로이루어져있기때문에보통가운데여러개의공백을넣어표시 하는경우가많다. 기관주소우편번호전화번호비고 서울시중구무교동 77 번지 100-755 2131-0114 무교청사 개선전소스 <th> 비 고 </th> 개선후소스 <th style="letter-spacing:4em;"> 비고 </th> - 157 -

적용기술 58) 동적으로생성된요소는그것을유발시킨요소바로뒤에 위치 어떤경우동적으로콘텐츠를보이게하거나안보이게할필요가있다. 가장대표적인경우가풀다운메뉴다. 이때하위메뉴항목들은반드시그것의직속상위메뉴다음에나와야한다. 그렇지않고상위메뉴항목들이먼저다나온다음에하위항목들이맨나중에한꺼번에나온다면, 어떤하위항목이어떤상위항목에속하는지논리적으로파악할수없게된다. 단지시각적으로그렇게보이는것이중요한것이아니라, DOM(Document Object Model) 에서하위항목이반드시그것을불러온상위항목바로다음에위치해야한다. 이렇게함으로써웹페이지를선형화시켰을때에도내용을정상적으로의미있게이해할수있고, 탭으로이동할때에도정상적인순서로작동을한다. 다음예는 IMEI 코드가무엇인지모르는사용자를위해 IMEI 코드가무엇인지숨겨진도움말을보여주는화면이다. 도움말을보이게하는버튼물음표버튼바로밑으로실제도움말이코드상으로도위치해있고, 탭키로이동을할때에도물음표버튼다음에도움말안에있는링크로이동해정상적인순서를따르게된다. 만약도움말이페이지의맨끝에있도록소스를작성했다면, 문서의의미가훼손되었을것이고, 탭키를통한탐색도어려웠을것이다. - 158 -

숨겨진도움말을호출하는링크 ( 도움말은숨겨진상태 ) 숨겨진도움말을호출하는링크 ( 바로다음에도움말이보임 ) <p> <label for="imei">imei Code: </label> <input type="text" id="imei" /> <a href="#imeihelp"><img src="help.png" alt="what is IMEI?" /></a> </p> <div id="imeihelp"> <h3>explanation of IMEI</h3> <p>help content here...</p> <p><a href="#imei">back to IMEI input field</a>.</p> </div> 출처 : http://juicystudio.com/experiments/numbertransfer.php, 2011년 6월 21일 위의도움말제공방식에대해도움말이 IMEI Code 를입력한다음에나오기 때문에시각장애인들이도움말이있다는사실을알기어렵다는지적도있다. 그런 경우, 도움말링크를 <label> 안에넣어다음과같이표현해도된다. <p> <label for="imei"> - 159 -

IMEI Code: <a href="#imeihelp"><img src="help.png" alt="what is IMEI?" /></a> </label> <input type="text" id="imei" /> </p> o 잘못된사례와개선방법 잘못된사례 50) 상위메뉴와하위메뉴의읽는순서가잘못된경우 상위메뉴와하위메뉴배치 개선전소스 <ul id="menu"> <li class="selected"><a href="">quick Guide</a></li> <li><a href="faq.html">faq, Q&A</a></li> <li><a href="breeze.html">technical Guide</a></li> <li><a href="reports.html">reports</a></li> <li><a href="timezone_table.html">etc</a></li> </ul> <ul id="submenu"> <li><a href="introduction.html">introduction</a></li> <li class="selected"><a href="learner_guide.html">learner's Guide</a></li> <li><a href="admin_guide.html">administrator's Guide</a></li> </ul> - 160 -

선형화하면상위메뉴가다나온다음하위메뉴가나온다. 위의그림에서상위메뉴항목인 Quick Guide에대한하위메뉴항목은 Introduction, Learner's Guide, Administrator's Guide 세가지가있다. 따라서소스코드에서도 Quick Guide Introduction Learner's Guide Administrator's Guide 순서로항목이배치되어야한다. 그러나소스에서상위메뉴가모두끝난다음에하위메뉴가배치되었다. 즉, 시각적인배치를위해소스코드도논리적인순서를어기고시각적인배치순서에맞춘것이다. 이렇게하면, 논리적으로어떤것이상위메뉴이고그것의하위메뉴가무엇인지구분하기가어렵다. 개선방법 따라서다음과같이 HTML 코드를바꾸고, 그것을보여주는방식은별도로 CSS 에서조정해야한다. <ul class="menu"> <li class="selected"><a href="">quick Guide</a></li> <ul> <ul class="submenu"> <li><a href="introduction.html">introduction</a></li> <li class="selected"><a href="learner_guide.html">learner's Guide</a></li> <li><a href="admin_guide.html">administrator's Guide</a></li> </ul> <li><a href="faq.html">faq, Q&A</a></li> <li><a href="breeze.html">technical Guide</a></li> <li><a href="reports.html">reports</a></li> <li><a href="timezone_table.html">etc</a></li> - 161 -

</ul> 잘못된사례 51) 배치용표를잘못사용한경우 다음표는어떤기관의연혁을보여주기위해사용한경우다. 2007 년 2008 년 2009 년 기관설립초대원장취임홈페이지개설매출 1억원달성서초동사옥으로이전 개선전소스 <table> <tr> <td> </td> <td> </tr> </table> 2007년 <br> 2008년 <br><br> 2009년기관설림 <br> 초대원장취임 <br> 홈페이지개설 <br> 매출 1억원달성 <br> 서초동사옥으로이전 </td> 단지시각적으로보이는요소들을배치하기위해논리적으로다른콘텐츠를하나로합쳐서는안된다. 위의표에서 2007년, 2008년, 2009년은각각다른콘텐츠인데, 표를이용해한개의셀에들어가있다. 화면낭독기프로그램으로이것을펼쳐서읽으면다음과같이뜻을알아볼수없는내용이된다. 2007년, 2008년, 2009년, 기관설립, 초대원장취임, 홈페이지개설, 매출 1억원달성, 서초동사옥으로이전 - 162 -

개선방법 표를사용해야한다면다음과같이논리적인내용단위로재구성해주는것이 좋다. 2007년 기관설립 2008년 초대원장취임 홈페이지개설 2009 년매출 1 억원달성 서초동사옥으로이전 이렇게논리적인단위로표를재구성하면, 표를선형화했을때읽는순서가바르게된다. 2007년, 기관설립, 2008년, 초대원장취임, 홈페이지개설, 2009년, 매출 1억원달성, 서초동사옥으로이전 다음과같이 <th> 를써서연도를표시하고 <td> 를써서일어난사건들을구분하여데이터를담는표형식으로구성할수있다. 그러나굳이데이터형식의표를사용하지않고일반배치 (layout) 목적의표를써서 <td> 만으로구성하더라도읽는순서에는문제가생기지않는다. 개선후소스 1 <table> <caption> 기관연혁 </caption> <tr> <th>2007년 </th> <td> 기관설립 </td> </tr> <tr> <th>2008년 </th> <td><ul> <li> 초대원장취임 </li> <li> 홈페이지개설 </li> </ul> </td> </tr> <tr> - 163 -

<th>2009년 </th> <td><ul> <li> 매출 1억원달성 </li> <li> 서초동사옥으로이전 </li> </ul> </td> </tr> </table> 이러한종류의연혁을표현하기위해굳이표를쓰지않고, 정의목록 (definition list) 을사용하여용어와용어에대한정의처럼다음과같이구성할 수도있다. 개선후소스 2 <dl> </dl> <dt>2007년 </dt> <dd> 기관설립 </dd> <dt>2008년 </dt> <dd> 초대원장취임 </dd> <dd> 홈페이지개설 </dd> <dt>2009년 </dt> <dd> 매출 1억원달성 </dd> <dd> 서초동사옥으로이전 </dd> - 164 -

검사항목 3.3.2 ( 표의구성 ) 표는이해하기쉽게구성해야한다. o 개요 복잡한데이터를표로제공할경우, 시각장애인등도이해할수있도록표의이해를돕기위한내용및구조에대한정보를제공해야한다. 행과열이얽힌표에담긴정보를음성으로듣고이해하는것은쉽지않다. 따라서 HTML에서는표의실제데이터와그것의헤더 ( 제목열과제목행 ) 를짝지어주는몇가지방법을제공한다. 그렇게하면, 복잡한표를풀어서읽을때에도내용을이해할수있게된다. o 적용기술 적용기술 59) 표제목을 <caption> 으로제공 웹페이지에는제목을 <title> 요소로제공하고, 각섹션에는제목을헤딩 (h1, h2 등 ) 요소로제공하며, 서식컨트롤들을모아놓은것에는제목을 <legend> 로제공한다면, 데이터를담고있는표에도표의내용을대표하는제목을넣어주어야한다. 그냥표위쪽에텍스트로제목을넣어주면, 그것이표의제목인지아닌지기계나보조기술이판단할수없으므로, 반드시 <table> 요소안쪽에 <caption> 요소를이용해제목을넣어준다. 서울과부산의야채가격 ( 단위 : 원 ) 서울 부산 구분 상추 당근 오이 도매가 100 200 300 소매가 105 220 305 도매가 90 150 250 소매가 110 180 310 위와같은표에서 " 서울과부산의야채가격 ( 단위 : 원 )" 이라는표의제목은다 음과같이 <caption> 으로표기해야한다. - 165 -

<table> <caption> 서울과부산의야채가격 ( 단위 : 원 )</caption> 중간생략 </table> <caption> 요소를쓸경우, 브라우저에서기본적으로적용하는스타일이제작자의의도와맞지않아, 일부러 <caption> 의내용을감추고별도로제목을표시하거나 <caption> 대신그냥일반텍스트로표바깥에제목을표시하는것은잘못된것이다. <caption> 내용의글자크기, 모양, 문단배치, 색깔등을조정하는것은다음예처럼 CSS를이용해서얼마든지가능하다. <caption> 요소의스타일을지정한 CSS 예 caption { font-size: 1em; font-family: 돋움, Dotum, sans-serif; font-weight: bold; color: #fff; background-color: #603; text-align: left; } 드문경우, <caption> 을대체하여적절한제목요소 (<h1>, <h2>, <h3> 등 ) 를표제목으로사용할수도있다. 전체적인흐름속에서제목요소가표제목을나타낸다는것이비교적명확한경우사용할수있지만, <caption> 과달리표와표제목이프로그램적으로결합되지 (programmatically determined) 않으므로, 만약사용자가표정보에직접적으로접근하는경우, 표제목을파악하기어려워할수있다. 마지막으로, <caption> 이나 summary 를쓰지않고, 제목요소도사용하지않고 단지일반적인문단요소 (<p>) 를표제목으로사용하는것은좋은방법이아니 다. 적용기술 60) 표의구조또는내용에대한요약을 summary 로제공 데이터를담고있는표의내용을해체하여그것을아무리논리적인순서대로 - 166 -

나열을잘한다고하더라도복잡한표의내용을이해하기는쉽지않다. 따라서데이터를나열하기전에표에어떤데이터를담고있고, 전체적으로표의구조가어떻게되어있는지요약해서설명을해주면표의내용을파악하기가훨씬쉬워진다. <caption> 과달리표의내용과구조를요약설명해주는 summary는 <table> 요소의속성으로지정하면되고, 일반적인시각적인브라우저에서표시되지는않으므로, 자세하게표의특성을서술식으로기술해주는것이좋다. 만약다음과같은표가있다면, 서울과부산의야채가격 ( 단위 : 원 ) 서울 부산 상추 당근 오이 도매가 100 200 300 소매가 105 220 305 도매가 90 150 250 소매가 110 180 310 표의구조나내용을 summary 로요약한예 <table summary=" 서울과부산의도매와소매야채가격을비교한표로열이두단계깊이로되어있다. 즉, 서울, 부산을구분하는단계와도매가와소매가를구분하는단계가있음."> <caption> 서울과부산의야채가격 ( 단위 : 원 )</caption> 중간생략 </table> 적용기술 61) 표의헤더셀과데이터셀의관계정의 표의제목과요약설명을제공하는것만으로표의내용을정확히이해할수는없다. 중요한것은표에담긴데이터를이해할수있게하려면, 표의헤더셀과데이터셀을명확히구분해주어야한다. 헤더셀이란보통표의첫째행 ( 줄 ) 이나첫째열에표시되는다른데이터들에대한제목셀을뜻한다. HTML 마크업에서는헤더셀에대해서는일반적인 <td> 가아닌 <th> 라는특수한요소를쓰도록하고있다. 다음과같은표에서는구분, 중간고사, 기말고사가헤더셀에해당한다. - 167 -

구분중간고사기말고사 김철수 50 60 박영희 70 80 헤더셀을 <th> 로구분한표의예 <table summary=" 중간고사와기말고사성적을개인별로보여주는표 "> <caption> 개인별시험성적표 </caption> <thead> <tr> <th> 구분 </th> <th> 중간고사 </th> <th> 기말고사 </th> </tr> </thead> <tbody> <tr> <th> 김철수 </th> <td>50</td> <td>60</td> </tr> <tr> <th> 박영희 </th> <td>70</td> <td>80</td> </tr> </tbody> </table> 그러나표가복잡해지면단순히 <th> 를지정하는것으로표의헤더셀과데이 터셀을짝지을수없는경우가생긴다. 이경우다음과같은두가지방법중하 나로헤더셀과데이터셀을짝지어준다. 첫째, 헤더셀에고유한 id 속성값을준다음, 그것과연관되는내용에도 headers라는속성을통해똑같은값을갖게함으로써연관성이있다는것을나타내는방법이다. 둘째, 헤더셀이영향력을미치는범위를 scope 속성을이용해표시해주는방법이다. - 168 -

<table summary=" 중간고사와기말고사성적을개인별로보여주는표 "> <caption> 개인별시험성적표 </caption> <thead> <tr> <th> 구분 <th id="midterm"> 중간고사 <th id="final"> 기말고사 </thead> <tbody> <tr> <th id="kim"> 김철수 <td headers="midterm kim">50 <td headers="final kim">60 <tr> <th id="park"> 박영희 <td headers="midterm park">70 <td headers="final park">80 </tbody> </table>  <table summary=" 중간고사와기말고사성적을개인별로보여주는표 "> <caption> 개인별시험성적표 </caption> <thead> <tr> <th> 구분 <th scope="col"> 중간고사 <th scope="col"> 기말고사 </thead> <tbody> <tr> <th scope="row"> 김철수 <td>50 <td>60 <tr> <th scope="row"> 박영희 <td>70 <td>80 </tbody> </table> 이렇게헤더셀과데이터셀을짝지어주게되면, 화면낭독프로그램에서는보 통다음과같은순서로내용을읽어주기때문에표의내용을이해하기가수월해 진다. - 169 -

표제목 : 개인별시험성적표표머릿글 : 구분, 중간고사, 기말고사표내용 : 김철수중간고사 50, 김철수기말고사 60 박영희중간고사 70, 박영희기말고사 80 o 잘못된사례 잘못된사례 52) 표를이미지로표현하고, 표제목을제공하지않은경우 우리나라신문기사에서자주발견되는사례는데이터를담고있는표를이미지로제공하는것이다. 다음사례에서는건보정책소위개정안의개정전후변경되는주요내용을비교해서보여주는표다. 표자체도대체텍스트가전혀없는이미지로되어있고, 표제목도 <caption> 이나 summary, title, 또는제목요소 (<h1>, <h2> 등 ) 를전혀사용하지않고그냥일반문단요소를강조해서사용하고있다. <p><strong> 건보정책소위개정안 </strong></p> <div class="articlephotoc"> <div class="articlephotocarea" style="width: 500px;"> <img src="/image/2011/03/25/35867928.1.jpg" gid="35867928.1.1" alt="" height="133" width="500"> 표를이미지로표현하고, 표제목을제공하지않은사례 개선방법 - 170 -

실제데이터를 <table> 요소를사용해표현해야한다. 다음은데이터를표를이 용해다시재구성한예시다.  <style type="text/css"> * {font-family: " 맑은고딕 ", sans-serif;font-size:12px;} table {color:black;background-color:#fff;} caption {font-weight:bold;font-size:1.2em;} td {padding:0.3em;border-bottom:1px solid #ccc}.first, first th,.first td {border-top:2px solid #ccc;font-size:1.1em}.last,.last th,.last td {border-bottom:2px solid #ccc}.hospital {background-color:#ddd; color:black;border-bottom:2px solid #ccc;}.before {border-left:2px solid #ccc}.after {color:#000; background-color:inherited}.after:before {content:" "}.increase {color:red; background-color:inherited}.increase:before {content:" "}.decrease {color:#0aa; background-color:inherited}.decrease:before {content:" "} caption {text-align:left;margin-bottom:1em} caption:before {content:" "} </style>  <table> <caption> 건보정책소위개정안 </caption> <tr> <th rowspan="2" class="last first"> 구분 </th> <th colspan="3" scope="col" class="before first"> 감기환자약값본인부담액변화 </th> <th colspan="3" scope="col" class="before first">mri 환자부담금변화 </th> </tr> <tr class="last"> <th scope="col" class="before"> 인상전 </th> <th scope="col"> 인상후 </th> <th scope="col"> 인상액 </th> <th scope="col" class="before"> 현행 </th> <th scope="col">5월이후 </th> <th scope="col"> 절감액 </th> </tr> - 171 -

<tr> <th scope="row" class="hospital"> 상급종합병원 </th> <td class="before">4850원 ( 본인부담률 30%)</td> <td class="after">8080원 ( 본인부담률 50%)</td> <td class="increase">3230원 </td> <td class="before">18만7668원 </td> <td class="after">13만1843원 </td> <td class="decrease">5만5825원 </td> </tr> <tr> <th scope="row" class="hospital"> 종합병원 </th> <td class="before">3240원 ( 본인부담률 30%)</td> <td class="after">4560원 ( 본인부담률 40%)</td> <td class="increase">1140원 </td> <td class="before">15만375원 </td> <td class="after">10만5644원 </td> <td class="decrease">4만4731원 </td> </tr> <tr> <th scope="row" class="hospital"> 병원 </th> <td class="before">2550원 ( 본인부담률 30%)</td> <td class="after">2550원 ( 본인부담률 30%)</td> <td class="increase">0원 </td> <td class="before">11만5488원 </td> <td class="after">8만1134원 </td> <td class="decrease">3만4354원 </td> </tr> <tr class="last"> <th scope="row" class="hospital"> 의원 </th> <td class="before">2320원 ( 본인부담률 30%)</td> <td class="after">2320원 ( 본인부담률 30%)</td> <td class="increase">0원 </td> <td class="before">8만5181원 </td> <td class="after">5만9844원 </td> <td class="decrease">2만5337원 </td> </tr> </table>  - 172 -

이미지로된표를다시마크업으로표현한예 - 173 -

검사항목 3.4.1 ( 레이블제공 ) 입력서식에는대응하는레이 블을제공해야한다. o 개요 웹에서는서식을통해사용자로부터다양한방법으로값을입력받아웹서버에전송하고, 그결과에따라다른페이지를보여준다. 서식입력은웹에서가장일반적인상호작용방법이다. 그러나장애인들에게는서식에자료를입력하는것이그냥주어진내용을읽는것보다훨씬어려운일에속하며, 많은시간을요구한다. 따라서입력서식을사용할때현재위치에대한정확한안내, 특정한서식으로의빠른이동, 정확한맥락의제공, 입력할값의범위에대한안내, 오류를방지하거나복구할수있는방법제공, 작업을다시하거나취소할수있는방법제공, 충분한시간적여유를제공등을통해장애인의서식접근성을확보할수있도록주의해야한다. o 적용기술 적용기술 62) 입력서식과 <label> 의명시적관계제공 사용자가무엇인가를입력하거나선택하도록요구하는입력서식에는반드시무엇을입력해야하는지정확히안내해주는레이블, 즉입력서식에대한제목이있어야한다. 입력서식에대한레이블은서식가까이에제공하는것도중요하지만보다중요한것은레이블이해당서식과프로그램적으로짝지어지도록마크업언어를사용하는것이다. HTML에서는 <label> 요소를이용해서식의레이블을표시하고, 레이블과서식을짝짓기위해레이블의 for 속성과서식의 id 속성값을일치시키도록하고있다. 다음그림에서는 Last name이라는레이블을제공하고있으며, 레이블의 for="lname" 과입력서식의 id="lname" 의값이일치하도록하여해당입력서식과레이블이짝지어지도록하고있다. 이러한짝짓기는텍스트입력서식 (input type="text") 뿐만아니라목록선택 (select), 배타적인목록선택 (input type="radio"), 체크상자 (input type="checkbox"), 긴글입력서식 (textarea) - 174 -

등대부분의서식에적용된다. 서식제목을명시적인레이블로제공한예 <label for="lname">last name:</label> <input type="text" name=".ln" value="" size="30" maxlength="50" id="lname"> <label for="intl">preferred content:</label> <select name=".intl" id="intl"> < 참고 > 라디오버튼을위한레이블, id, name 부여라디오버튼은두개이상의선택옵션중하나만을선택하도록설계된입력서식이다. 따라서각각의버튼에대해고유한 id를제공하는것은물론이고, 선택시서로배타적인버튼들은공통의 name 속성을가지고있어야한다. 즉, 다음과같은라디오버튼을설계한다면, Threads와 Posts 버튼은각각 show0과 show1이라는고유한 id 값을가지고있지만, 또한 show라는공통의 name 값을가지고있다. 물론 <label> 요소의 for 속성값은버튼의고유한 id 값과일치하도록부여해야한다. 라디오버튼과레이블을짝지은예 <label for="show0"><input type="radio" name="show" value="0" id="show0" checked="checked" />Threads</label> <label for="show1"><input type="radio" name="show" value="1" id="show1" />Posts</label> < 참고 > 명시적레이블링 (explicit labeling) 과암묵적레이블링 (implicit labeling) 예전에는 <label> 요소를쓸때레이블이입력서식을감싸도록하는암묵적인레이블링을허용하거나권장하였다. 즉, <label> 주소 : <input type="text" name= address" id="address" size="50"></label> 와같이함으로써접근성을보장하도록하였다. 그러나이러한방법은 <label> 과입력서식이 - 175 -

물리적으로떨어질수밖에없는상황 ( 예를들어, 표의서로다른셀에들어가야하는상황 ) 에서쓰기어려울뿐만아니라현재의화면낭독프로그램에서제대로레이블을인식하지못하는경우가많다. 따라서 <label> 을사용할때 for 속성을사용하여어떤입력서식과짝이지어지는지명확하게표시하는명시적인레이블링방법을사용해야한다. <label for="address"> 주소 :</label> <input type="text" name= address" id="address" size="50"> 적용기술 63) <label> 을제공할수없는입력서식에 title 제공 가끔시각적인디자인을고려하여레이블을표시하기어려운때가있다. 이경우, 서식요소의 title 속성을이용하여서식의제목을넣어주면대부분의보조기술에서이것을인식할수있고, 시각적인브라우저에서도툴팁으로표시되어사용자에게도움을준다. 다음예에서와같이, 검색창옆에검색대상의종류를선택하는목록상자를 제공하는경우별도로검색대상이라고레이블을표시할공간이없으므로, 목록 상자의레이블을 title 로제공할수있다. <label for="searchterm"> 검색 :</label> <input id="searchterm" type="text" size="30" value="" name="searchterm"> <select title=" 검색대상 " id="scope"> <option value="title"> 제목 </option> <option value="keyword"> 키워드 </option> </select> 서식제목을명시적으로나타내기어려운경우 ( 검색대상 ) 전화번호를입력하는경우, 여러개의텍스트필드에값을넣게되는데, 지역 번호, 국번, 끝번호를입력하기위한필드라는것을레이블로표시해줄수없으 므로 title 속성을이용해서표시해주면된다. - 176 -

전화번호각각의번호필드에 title 을넣어준다. <fieldset style="padding:0.5em"> <legend> 전화번호 </legend> <input id="areacode" name="areacode" title=" 지역번호 " type="text" size="3" value="" >- <input id="exchange" name="exchange" title=" 국번 " type="text" size="3" value="" >- <input id="lastdigits" name="lastdigits" title=" 끝번호 4자리 " type="text" size="4" value="" > </fieldset> 불가피하게서식을표안에넣어야하는경우가있다. 예를들어, 여러개의문항으로이루어진설문을구성할때다음그림과같이표를만들고각각의셀마다하나씩라디오버튼을배치해야한다면, 각버튼마다 title을이용해정확한문항과응답이무엇인지알려주어야한다. 주의할것은데이터테이블에서제목행과제목열을표시하는마크업 (<th> 등 ) 을사용했다고하더라도일반데이터셀에서식요소를넣었을경우반드시 title을넣어주지않으면서식에무슨값을넣어야하는지알방법이없다는것이다. 다음그림에서맨윗줄왼쪽에서두번째라디오버튼의경우, title="1. 교육시설 - 중립 " 을넣어줌으로써, 사용자가해당라디오버튼을선택할경우 1번문항에대해 " 중립 " 이라고응답한다는것을알수있게한다. <table border="1"> <caption> 다음항목에얼마나만족하세요?</caption> <tr> <th> 항목 </th> <th> 매우불만족 </th> <th> 중립 </th> - 177 -

<th> 매우만족 </th> </tr> <tr> <th>1. 교육시설 </th> <td><input type="radio" name="no1" id="no1-1" value="1" title="1. 교육시설 - 매우불만족 "></td> <td><input type="radio" name="no1" id="no1-2" value="2" title="1. 교육시설 - 중립 "></td> <td><input type="radio" name="no1" id="no1-3" value="3" title="1. 교육시설 - 매우만족 "></td> </tr> <tr> <th>2. 강사실력 </th> <td><input type="radio" name="no2" id="no2-1" value="1" title="2. 강사실력 - 매우불만족 "></td> <td><input type="radio" name="no2" id="no2-2" value="2" title="2. 강사실력 - 중립 "></td> <td><input type="radio" name="no2" id="no2-3" value="3" title="2. 강사실력 - 매우만족 "></td> </tr> </table> 적용기술 64) 여러개의유사한입력서식묶기 여러개의서식컨트롤이한꺼번에나올때, 특히라디오버튼이나체크상자가같은이름을같은필드값을제출하는것이라면, 그것들을 <fieldset> 이라는요소를사용해묶어주는것이좋다. <fieldset> 요소의시작부분에는항상해당그룹의제목을 <legend> 를이용해표시해주어야한다. 서식컨트롤이매우많으며, 이것들이논리적으로몇개집단으로묶는것이전체적으로서식들을이해하는데도움이된다면, 묶어주는것이좋다. 다음예에서는사는곳과관련된입력필드들을하나로묶고, 근무지와관련된필드들을하나로묶어주었다. 이렇게해주면, 일반적인화면낭독프로그램에서는각서식의 <label> 을읽어주기전에 <legend> 값을앞에덧붙여주어, 사용자는어떤맥락에서어떤값을입력하는지잊지않고응답할수있다. - 178 -

<fieldset> 을이용해유사한서식을묶어준예 <form action="http://example.com/adduser" method="post"> <fieldset> <legend> 집주소 </legend> <label for="raddress"> 주소 : </label> <input type="text" id="raddress" name="raddress" /> <label for="rzip"> 우편번호 : </label> <input type="text" id="rzip" name="rzip" /> </fieldset> <fieldset> <legend> 회사주소 </legend> <label for="caddress"> 주소 : </label> <input type="text" id="paddress" name="caddress" /> <label for="czip"> 우편번호 : </label> <input type="text" id="czip" name="czip" /> </fieldset> </form> o 잘못된사례 잘못된사례 53) 이메일입력서식의레이블을잘못제공한경우 우리나라의많은사이트에서이메일주소를입력하도록할때사용자편의성을높이기위해이메일주소를직접입력하게하는방법과자주사용되는이메일주소의도메인을선택하는방법을함께제공하고있다. 이경우, 각입력필드에정확히 <label> 이나 title을통해알려주지않는경우가많아사용자들이전체이메일주소를입력해야하는지아니면부분적으로만입력해야하는지알수가없다. 다음한사례에서는서식컨트롤의레이블을 caption이라는잘못된속성을통해제공하고있으며, caption의값도모든입력필드가 이메일 로동일하게제공하여사용자가구체적으로이메일의어떤부분까지입력해야하는지명확하게알수없다. - 179 -

<td style="padding-left: 10px;" height="25" bgcolor="f8eded"><font color="703333">* 이메일 </font> </td> <td colspan="3" style="padding-left: 10px; padding-top: 3px;" bgcolor="ffffff"> <input name="email1" class="boxfont1" style="width: 100px;" datatype="email" caption=" 이메일 " notempty="" type="text"> @ <select name="email2" onchange="javascript:select_mail(this.form)" onfocus='checkvalue(this.form, "email1");' class="boxfont1" style="width: 120px;" datatype="email" caption=" 이메일 " notempty=""> <option value="" selected="selected"> 선택하세요 </option> <option value="hanmail.net">hanmail.net</option>  다음사례에서는텍스트입력필드에 이메일 ID 입력 " 이라는 title 을잘제공하 고있으나, 여러개의이메일서비스중하나를선택하는선택상자에는 title 이 제공되지않고있다. <strong class="title01">2. 이메일주소 </strong> <div class="pw_mail"> <input style="border: 1px solid rgb(204, 204, 204); padding: 3px 0pt 3px 5px;" name="pw_email1" id="ans_email1" value="" onfocus="infocus2(this)" onblur="outfocus2(this)" class="input_text w88" title=" 이메일ID입력 " type="text"> @ <input style="border: 1px solid rgb(204, 204, 204); padding: 3px 0pt 3px 5px;" name="pw_email2" id="ans_email2" value="" onfocus="infocus2(this)" onblur="outfocus2(this)" class="input_text w130" title=" 이메일서비스입력 " type="text"> - 180 -

<select name="pw_email_list" style="width: 107px; height: 22px;" onchange="check_pw_mail(this.form);"> <option selected="selected"> 선택하세요 </option> <option value="naver.com">naver.com</option>  <option value="self"> 직접입력 </option> </select> 개선방법 이메일주소를입력받을때다음사례처럼이메일의앞부분과뒷부분을나누지않고한꺼번에입력받는방법이제일간단하다. 이렇게했을때사용자들이이메일주소를잘못입력할가능성이있는데, 그것은실제사용자가입력한이메일로확인메일을보내서검증받도록하면간단하다. <label for="email-coldregistrationform">email:</label> <div class="fieldgroup"> <span class="error" id="email-coldregistrationform-error"></span> <input name="email" value="" id="email-coldregistrationform" maxlength="128" data-ime-mode-disabled="" type="text"> </div> 굳이이메일의앞부분과뒷부분을나누어서입력하도록하려면다음과같이명 확하게레이블을제공해줄필요가있으며, 굳이이메일서비스목록을선택상자 에서제공해주는것은혼란을가중시키기때문에삭제하였다. - 181 -

<label for="email-id"> 이메일주소 </label> <input type="text" name="email-id" id="email-id" title=" 이메일 ID (@ 앞부분 )"> @ <input type="text" name="email-domain" id="email-domain" title=" 이메일도메인 (@ 뒷부분 )"> - 182 -

검사항목 3.4.2 ( 오류정정 ) 입력오류를정정할수있는방 법을제공해야한다. o 개요 입력서식작성시오류가발생하지않도록미리어떤값을넣어야하는지안내를해주고, 만약그래도실수로오류가발생하는경우, 어디에서어떤오류가났는지사용자가알수있어야하고, 이를정정할수있는방법을제공해야한다. 오류가생겼을때많이쓰는방법은서식전체를다시보여주고, 오류가발생한필드에별도의표시를해는데, 이것만으로는충분하지않다. 화면낭독프로그램사용자의경우, 오류가생긴필드에순차적으로접근하기전까지는무엇이잘못되었는지알수가없어서식전체가작동하지않는것으로여기고입력을포기할가능성이있다. 입력에오류가생겼을때그것을보조기술사용자들이알수있게하고, 오류내용에대한설명에접근할수있도록하는것이이검사항목의목적이다. 주의할점은입력값의오류를검사하는데전적으로자바스크립트와같은클라이언트측스크립트기술에만의존해서는안된다는것이다. 클라이언트측기술은값이서버에전송되기전에유효성검사를빠르게할수있는장점이있지만, 스크립트가작동하지않는환경에서는서버에잘못된값이그대로제출되어데이터베이스에오류를야기할가능성이있다. 따라서클라이언트측오류검사기능은부가적으로사용자편의성을위해제공하는것이고, 사용자가최종적으로값을제출할때반드시서버측에서오류를검사해야한다. o 적용기술 적용기술 65) 입력값또는형식에대한예시제공 입력서식에어떤순서로무슨값을넣어야하는지정확한설명을미리해줌으로써사용자들마다다르게해석할수있는여지를줄여주어야한다. 또한 HTML5에서제공하는 placeholder 속성을이용해예제를보여주거나다양한웹폼을사용하면, 복잡한자바스크립트를쓰지않고사용자의입력오류를줄이는 - 183 -

데도움을줄수있다. 다음예에서는몇가지방법으로입력값에대한안내를제공하고있다. 이름입력을위해예 ( 홍길동 ) 를미리보여주기도하고, title 속성을통해성과이름을붙여쓰도록안내하고있다. 둘째, 이메일입력은 HTML5의이메일서식을직접이용하여 HTML5을지원하는브라우저에서는자동으로이메일형식이맞지않을경우, 값을제출하기전에경고메시지를주면서초점을이메일필드로이동시킨다. 또한 HTML5의 placeholder 속성을이용해미리어떤값을입력하는것이좋은지서식필드안에예제를보여주고있다. 마지막으로, 생년월일의경우, 날짜형식을 yyyy-mm-dd로입력하라고서식레이블에서명시적으로안내하고있다. <form> <label for="name"> 이름 ( 예 : 홍길동 ): </label><br/> <input type="text" id="name" name="name" title=" 성과이름을붙여쓰세요."/><br/> <label for="email"> 이메일 : </label><br/> <input type="email" id="email" placeholder="mailid@example.com"><br/> <label for="birthdate"> 생년월일 ( 형식 : yyyy-mm-dd): </label><br/> <input type="text" id="birthdate" name="birthdate" /><br/> <input type="submit" value=" 제출 "> </form> 적용기술 66) 서버측오류검사 서식값에대한적합성검사를순전히클라이언트측자바스크립트로만운용하는것은위험하고, 접근가능하지않다. 어떤이유이든지사용자가자바스크립트를사용하지않거나꺼놓은경우에도서버측에서하는검사를생략할수없기때문에 <form action=""> 값으로는반드시서버측 URI를넣어주어야한다. 즉, 다 - 184 -

음과같은두개의예는잘못된것이다. <form action="javascript:validateform()"> <form action="#" onsubmit="validateform()"> 대신에, 다음과같이서버측처리프로그램을지정해주되, 자바스크립트함수 도함께지정해주면된다. <form action="submit.php" onsubmit="return validateform()"> 적용기술 67) 클라이언트측적합성검사와본문에오류메시지표시 클라이언트측에서서식의적합성을검사한후오류안내메시지를어떻게보여주어야할까? 서식필드가나오기전에페이지내링크 ( 앵커, <a href>) 를이용해오류메시지를보여주고, 오류메시지의링크를따라가면해당서식필드로초점을이동시킬수있도록해야한다. 다만, 클라이언트측서식적합성검사는빠르고효율적일수있지만, 반드시서버측서식적합성검사와병행해야한다. 사용자가클라이언트스크립트기능을꺼놓았거나작동하지않았을때에도서버에잘못된데이터가들어가는것을방지하기위한서버측서식적합성검사가반드시이루어져야한다. 다음예에서는필수입력필드에값이없거나, 입력값의형식이잘못되었을때, 서식제출전에에러메시지들을문서상단에보여주고, 오류메시지링크를따라가면해당서식필드로이동하여다시입력할수있도록하고있다. (http://www.w3.org/tr/2010/note-wcag20-techs-20101014/scr32 에서인용하여변형 ) - 185 -

입력값의형식이잘못된채로제출하면문서상단에오류메시지와링크를보여준다. 필수입력필드를비워두고제출하면문서의상단에오류를안내해주고, 해당필드로갈수있는링크를제공한다. - 186 -

HTML 부분 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="validate.js"></script> <title> 서식적합성검사 </title> </head> <body> <h1> 서식적합성검사 </h1> <p> 다음서식은자바스크립트가작동할때에는서식값이제출되기전에검사가이루어지고, 그렇지않을경우는서버에서검사가이루어진다. 별도로표시되지않은모든필드값을반드시입력해야한다. 제출하는시점에서오류가나면, 서식이취소되고, 서식맨위에오류목록을표시한다.</p> <h2> 첫번째서식 </h2> <form id="personalform" method="post" action="index.php"> <div class="validationerrors"></div> <fieldset> <legend> 개인정보 </legend> <p> <label for="forename"> 이름 : </label> <input type="text" size="20" name="forename" id="forename" class="string" value=""> </p> <p> <label for="age"> 나이 : </label> <input type="text" size="20" name="age" id="age" class="number" value=""> </p> <p> <label for="email"> 이메일 : </label> <input type="text" size="20" name="email" id="email" class="email" value=""> </p> </fieldset> <p> <input type="submit" name="signup" value=" 가입 "> </p> </form> <h2> 두번째서식 </h2> <form id="secondform" method="post" action="index.php#focuspoint"> <div class="validationerrors"></div> <fieldset> <legend> 두번째서식내용 </legend> <p> - 187 -

<label for="suggestion"> 제안내용 : </label> <input type="text" size="20" name="suggestion" id="suggestion" class="string" value=""> </p> <p> <label for="optemail"> 이메일주소 ( 선택사항 ): </label> <input type="text" size="20" name="optemail" id="optemail" class="optional email" value=""> </p> <p> <label for="rating"> 제안내용에대한평가 : </label> <input type="text" size="20" name="rating" id="rating" class="number" value=""> </p> <p> <label for="jibberish"> 기타하고싶은말 ( 선택사항 ): </label> <input type="text" size="20" name="jibberish" id="jibberish" value=""> </p> </fieldset> <p> <input type="submit" name="submit" value=" 제출 "> </p> </form> </body> </html> 자바스크립트부분 (validate.js 파일 ) window.onload = initialise; function initialise() { var objforms = document.getelementsbytagname('form'); var icounter; // Attach an event handler for each form for (icounter=0; icounter<objforms.length; icounter++) { objforms[icounter].onsubmit = function(){return validateform(this);}; } } // Event handler for the form function validateform(objform) { var arclass = []; - 188 -

} } } logerror(objfield[ifieldcounter], objlabel, objlist, strlinkid); } else { logerror(objfield[ifieldcounter], objlabel, objlist, ''); } ierrors++; } break; case 'email' : if (!isemail(objfield[ifieldcounter].value, arclass)) { if (ierrors === 0) { logerror(objfield[ifieldcounter], objlabel, objlist, strlinkid); } else { logerror(objfield[ifieldcounter], objlabel, objlist, ''); } ierrors++; } break; if (ierrors > 0) { // If not valid, display error messages objerror = objform.getelementsbytagname('div'); // Look for existing errors for (icounter=0; icounter<objerror.length; icounter++) { if (objerror[icounter].classname == 'validationerrors') { objexisting = objerror[icounter]; } } objnew = document.createelement('div'); objtitle = document.createelement('h2'); objparagraph = document.createelement('p'); objanchor = document.createelement('a'); if (ierrors == 1) { objanchor.appendchild(document.createtextnode('1개의오류가있습니다.')); - 190 -

} else { objanchor.appendchild(document.createtextnode(ierrors + ' 개의오류가있습니다.')); } objanchor.href = '#' + strlinkid; objanchor.classname = 'submissionerror'; objtitle.appendchild(objanchor); objparagraph.appendchild(document.createtextnode(' 다음필드를다시확인하세요.')); objnew.classname = 'validationerrors'; objnew.appendchild(objtitle); objnew.appendchild(objparagraph); objnew.appendchild(objlist); // If there were existing error, replace them with the new lot, // otherwise add the new errors to the start of the form if (objexisting) { objexisting.parentnode.replacechild(objnew, objexisting); } else { objposition = objform.firstchild; objform.insertbefore(objnew, objposition); } // Allow for latency settimeout(function() { objanchor.focus(); }, 50); } // Don't submit the form objform.submitallowed = false; return false; } // Submit the form return true; // Function to add a link in a list item that points to problematic field control function adderror(objlist, strerror, strid, strerrorid) { var objlistitem = document.createelement('li'); var objanchor = document.createelement('a'); // Fragment identifier to the form control - 191 -

objanchor.href='#' + strid; // Make this the target for the error heading if (strerrorid.length > 0) { objanchor.id = strerrorid; } } // Use the label prompt for the error message objanchor.appendchild(document.createtextnode(strerror)); // Add keyboard and mouse events to set focus to the form control objanchor.onclick = function(event){return focusformfield(this, event);}; objanchor.onkeypress = function(event){return focusformfield(this, event);}; objlistitem.appendchild(objanchor); objlist.appendchild(objlistitem); function focusformfield(objanchor, objevent) { var strformfield, objform; // Allow keyboard navigation over links if (objevent && objevent.type == 'keypress') { if (objevent.keycode!= 13 && objevent.keycode!= 32) { return true; } } // set focus to the form control strformfield = objanchor.href.match(/[^#]\w*$/); objform = getform(strformfield); objform[strformfield].focus(); return false; } // Function to return the form element from a given form field name function getform(strfield) { var objelement = document.getelementbyid(strfield); // Find the appropriate form do { objelement = objelement.parentnode; } while (!objelement.tagname.match(/form/i) && objelement.parentnode); return objelement; } - 192 -

// Function to log the error in a list function logerror(objfield, objlabel, objlist, strerrorid) { var icounter, strerror; } // Search the label for the error prompt for (icounter=0; icounter<objlabel.length; icounter++) { if (objlabel[icounter].htmlfor == objfield.id) { strerror = objlabel[icounter].firstchild.nodevalue; } } adderror(objlist, strerror, objfield.id, strerrorid); // Validation routines - add as required function isstring(strvalue, arclass) { var bvalid = (typeof strvalue == 'string' && strvalue.replace(/^\s* \s*$/g, '')!== '' && isnan(strvalue)); return checkoptional(bvalid, strvalue, arclass); } function isemail(strvalue, arclass) { var objre = /^[\w-\.\']{1,}\@([\da-za-z\-]{1,}\.){1,}[\da-za-z\-]{2,}$/; var bvalid = objre.test(strvalue); return checkoptional(bvalid, strvalue, arclass); } function isnumber(strvalue, arclass) { var bvalid = (!isnan(strvalue) && strvalue.replace(/^\s* \s*$/g, '')!== ''); return checkoptional(bvalid, strvalue, arclass); } function checkoptional(bvalid, strvalue, arclass) { var boptional = false; var icounter; // Check if optional for (icounter=0; icounter<arclass.length; icounter++) { if (arclass[icounter] == 'optional') - 193 -

} { } boptional = true; if (boptional && strvalue.replace(/^\s* \s*$/g, '') === '') { return true; } return bvalid; } 적용기술 68) 오류메시지를스크립트경고창으로제공 서식값을제출한값을클라이언트측이나서버측에서검사한후이상이있을때오류가발생한사실을경고창 (alert) 으로보여줄수있다. 중요한것은경고창을확인한이후초점이오류가난서식필드로이동해야사용자가오류를쉽게수정할수있다. 화면낭독프로그램사용자들의경우, 초점을이동시켜주지않으면, 오류가난필드를찾기위해처음부터다시모든서식을거쳐가야한다. 이체금액을넣지않고서식을제출하니경고창으로보내는금액을입력하라고오류메시지가뜬다. - 194 -

경고창을확인한다음에는반드시오류가난서식필드로초점을이동해야한다. < 참고 > 클라이언트측스크립트를이용한실시간오류검사사용자가서식에값을입력할때잘못된값을입력하지않도록정확히안내해주어야한다. 그럼에도불구하고, 잘못된값을입력했을경우자바스크립트등을이용하여경고창을보여주거나 DOM을통해오류메시지를텍스트로보여줄수있다. 사용자가서식에서허용하는값의범위를벗어난데이터를입력했을경우, 사용자가필드를벗어나자마자경고창이뜨고, 사용자가즉시데이터를수정할수있게한다. 다음예에서는날짜입력필드에날짜를제대로입력하지않고, 다음필드로넘어가려할때자바스크립트경고창을띄워준다. isnan 함수는 Date.parse를통해숫자로변환된날짜가숫자인지아닌지를판단해서숫자가아닌경우는경고창을발생시킨다. <label for="date"> 날짜 :</label> <input type="text" name="date" id="date" onchange=" if(isnan(date.parse(this.value))) alert(' 날짜형식이맞지않습니다. 다시입력하십시오.');" /> 다음그림에서는 wordpress.com 에가입할때블로그주소를입력하면서실시간으로주소의요 구조건을만족하는지비동기식자바스크립트 (AJAX) 를이용하여검사하고사용자에게피드백을 주고있다. - 195 -

https://en.wordpress.com/signup < 참고 > 타이머를사용하여주기적으로서버측저장기능을불러오기온라인에서긴서식을작성하다네트워크가끊기거나, 서버측사정으로세션이끊어지거나, 또는사용자의실수로브라우저창을닫거나, 값을저장하거나제출하지않고다른곳으로이동하여오랫동안작성했던내용을처음부터다시작성해야하는경우가종종있다. 서버측에서타이머를이용해주기적으로서버에값을저장하는방법을사용하면이러한실수로인한데이터손실을줄일수있다. 온라인스프레드시트프로그램에서수정사항이생기면수시로자동으로서버에저장된다. 출처 : 2011 년 4 월 10 일 https://spreadsheets.google.com 역으로, 사용자가중요한정보를실수로지웠거나덮어썼을경우그것을다시되돌릴수있는방법을제공한다. 다음 < 그림 23> 과 < 그림 24> 에서는서식의값을입력하는동안에도실수로수정한내역을되돌릴수있는경우와서식의값의입력이끝난후에도수정내역을기록으로남겨두고다시과거내용으로되돌릴수있는두가지다른방식의취소 (Undo) 기능의예를보여주고있다. - 196 -

온라인연락처관리사이트에서사용자가수정한내용을되돌릴수있는기능 출처 : http://mail.google.com 많은위키프로그램들은페이지의수정내역을보관하고, 잘못수정된것은되돌릴수있는기능 출처 : http://en.wikipedia.org/w/index.php?title=public_key_infrastructure&action=history 적용기술 69) 중요한서식제출시재확인절차제공 사용자가최종적으로되돌릴수없는거래 (transaction) 를하기전에자신의입력사항이맞는지검토할기회를주어야한다. 온라인시험, 금융거래, 법적인절차에대한동의, 법적인거래등은일반적으로다시취소할수없다. 따라서사용자가지금까지입력한여러페이지에걸친내용들을다시왔다갔다하면서점검할수있도록캐시에저장된내용을보여주거나, 지금까지입력한내용들을요약해서한페이지에보여주고, 마지막으로다시최종확인하는방법을사용할수있 - 197 -

다. 최종확인할때서식의값을제출 (submit) 하는버튼외에도다시사용자가 모든값을확인했다는확인을받는체크상자 (checkbox) 를함께제공하면실수로 서식값이제출되는것을방지할수있다. 다음예에서는전자상거래사이트에서최종물품을주문하거나결제하기전에결제예정내용을요약해서다시보여주고확인을받아사용자가상품을잘못선택했거나마음이바뀌었을때취소할수있는기회를여러번에걸쳐제공하고있다. 전자상거래에서최종결제를하기전에결제내역이맞는지확인하는절차가있다. 다음그림에서는여러문항또는여러페이지로이루어진설문 ( 또는온라인시험 ) 에서최종설문을제출하기전에다시설문지로돌아가거나, 응답한내용의요약을확인해볼수있는기회를제공함으로써실수로잘못된설문내용이제출되지않도록하고있다. 설문의응답을최종제출하기전에설문지로돌아가거나 전체요약을볼수있도록제공하고있는예 출처 : 2011 년 4 월 10 일 Oracle ilearning 시스템의설문화면 - 198 -

다음그림에서는온라인메일시스템에서휴지통에있는메일을완전히지워 휴지통을비우면다시살릴수없기때문에다시한번확인하는경고창을제공 하고있다. 웹기반이메일시스템에서휴지통에있는메일을완전히삭제하기 전에확인절차를제공 (Yahoo! 메일 ) o 잘못된사례 잘못된사례 54) 오류정보를확인한후오류발생페이지로돌아가지못 하는경우 서식입력값을제출하고오류가생겼을때, 그오류를표시하는방법은, 앞서소개했듯이, 문서내부에 DOM(Document Object Model) 을이용해서하는것이좋다. 또한자바스크립트로경고창 (alert) 을이용해도좋다. 다만, 오류피드백내용을별도페이지에보여주고, 사용자가실제해당항목을수정하기위해뒤로가기를눌러야한다면, 사용자가모든오류항목들을기억해야한다는부담이생긴다. 따라서일반적으로원래페이지를다시생성해서 DOM을이용해오류메시지를문서상단에보여주는것이좋은방법이다. 또한, 서식제출후오류가생겼을때서식의모든입력값이사라지거나서식페이지로돌아가는링크가없는경우사용자는한두가지실수만수정하면될것을다시서식페이지로찾아가처음부터입력을반복해야한다. 다음그림에서는사이트에회원가입을하기위해정보를입력한후서식을제출하면, 새로운페이지로이동하여오류가났다고안내해준다. 문제는어떤오류인지에대한설명이없어무엇이잘못되었는지알수도없고, 브라우저의 [ 뒤로가기 ] 버튼을눌러서뒤로가면서식자체가사라져버려작동하지않는다. 오류안내페이지에서도원래의회원가입페이지로돌아가는링크가없이아예전체사이트의초기 ( 홈 ) 화 - 199 -

면으로가도록하고있기때문에, 회원가입페이지를다시찾아간다음, 모든정 보를처음부터다시입력해야한다. 회원가입에필요한정보를정확히입력하지않고서식을제출하면, 새로운페이지에서오류발생사실을알려줌출처 : 2011년 4월 11일 https://membership.chosun.com/join/registuser.jsp?site= 개선방법 서식을입력하는페이지내에서값을최종제출하기전에자바스크립트경고창을이용해입력이잘못되었다는것을알리고, 해당서식컨트롤로이동할수있도록한다. 서식을제출하기버튼을누르는순간입력오류를클라이언트측에서먼저검사하여오류의목록을현재문서의최상단에각각의오류에대한링크와함께제공하여오류를수정할수있도록한다. 마지막으로, 서식값을최종적으로서버에전송하기전에서버에서값의적합성검사를실시하면된다. - 200 -

원칙 4. 견고성 (Robust): 웹콘텐츠는미래의기술로도접근 할수있도록견고하게만들어야한다. o 견고성 웹콘텐츠는견고성이있어야한다. 견고성이란웹사이트에서제공하는콘텐츠가현재사용되고있는브라우저나보조기술뿐만아니라앞으로개발될브라우저와보조기술을이용하여사용이가능해야한다. 따라서견고성이있는웹콘텐츠는관련기술이새로개발되더라도아무런문제없이사용될수있다. 견고성이있는웹콘텐츠를제공하려면, 콘텐츠를구현하는과정에서사용하는기술과관련한표준을준수해야한다. 예를들어, 웹콘텐츠를구성하는일부콘텐츠를어떤프로그래밍언어를이용하여구현하려면, 반드시해당언어가정의하고있는문법을준수해야한다. 최근에는다양한기능과형태의서비스를웹을통하여제공하고있으며, 이들서비스는웹애플리케이션방식으로구현된다. 웹애플리케이션은관련콘텐츠와함께사용자컴퓨터또는장치에다운로드되며, 사용자는브라우저등을통해접근이가능하다. 따라서웹애플리케이션을포함하고있는웹콘텐츠를모든사용자가접근할수있으려면웹콘텐츠의접근성뿐만아니라웹애플리케이션의접근성도보장되어야한다. o 관련지침 < 표 9> 견고성관련지침및검사항목 지침 (2 개 ) 검사항목 (2 개 ) 4.1( 문법준수 ) 웹콘텐츠는마크업언어의문법을준수해야한다. 4.2( 웹애플리케이션접근성 ) 웹애플리케이션은접근성이있어야한다. 4.1.1( 마크업오류방지 ) 마크업언어의요소는열고닫음, 중첩관계및속성선언에오류가없어야한다. 4.2.1( 웹애플리케이션접근성준수 ) 콘텐츠에포함된웹애플리케이션은접근성이있어야한다. - 201 -

검사항목 4.1.1 ( 마크업오류방지 ) 마크업언어의요소는열 고닫음, 중첩관계및속성선언에오류가없어야한다. o 개요 콘텐츠를구성하고있는소스코드에문법적인오류가있거나모호한부분이있다면사용하는브라우저에따라오류를해석하는방법이나모호한부분을처리하는과정이달라사용자에게전달되는정보에차이가발생할수있다. 이러한차이로인하여사용자는웹콘텐츠의인식, 이해및사용에크고작은영향을주게된다. 따라서콘텐츠를개발하는과정에서마크업언어의표준을준수하고가능한한문법적오류나모호성이없도록구현되어야한다. o 적용기술 적용기술 70) 여는태그와닫는태그의정확한사용 마크업언어를이용하여마크업문서를구현할때반드시태그의열림과닫힘 이일치해야한다. 다음 HTML 코드는올바르게구현된소스다. <p> 요소를여는태그의닫음표시가불명확한문단입니다.</p> (O) 그러나다음 HTML 소스는문단을 p 태그의속성으로제공하여문법적으로잘 못된구현한예다. <p 요소를여는태그의닫음표시가불명확한문단입니다.</p> (X) 다음 HTML 소스는닫는태그대신여는태그를중복사용한경우로, 문법적인오류라기보다는논리적인오류에해당하는경우다. 이경우, 브라우저가 p 태그를두번선언한것으로간주한다. - 202 -

<p> 요소를닫는태그에슬래시 (slash) 가빠진문단입니다.<p> (X) < 참고 > HTML과 XHTML의차이점 XHTML은 HTML을 XML의형식으로구성한 XML 문서의한종류다. HTML과는달리, XHTML 은문법이엄격하여표준 XML 해석기 (parser) 로해석이가능하다. XHTML 1.0과 XHTML 1.1이현재 W3C의권고안이며, 현재 HTML5의한부분으로서 XHTML5가개발중이다. HTML과 XHTML의주요차이점은다음과같다. 1. 태그의열고닫음이명확해야한다. 2. 단독으로사용되는태그도닫는표기를해야한다. 3. 속성값은따옴표로묶어야한다. 4. 대소문자를엄격하게구분한다. 5. 축약형속성을사용하지않는다. 6. 스크립트와스타일은 CDATA로표기한다. < 참고 > 닫는태그의생략이가능한경우다음 HTML 태그는닫는태그의생략이가능하다. html, head, body, p, li, dt, dd, thead, tbody, tfoot, colgroup, tr, th, td, option 보다자세한 HTML과그밖에마크업언어에대한정보는 W3C 웹사이트에서확인할수있다. HTML 4.01 Specification: http://www.w3.org/tr/html401/ 적용기술 71) 속성이름과속성값의정확한사용 따옴표로속성값을구분하여제공할경우따옴표를누락하게되면일부정보가무시될수있다. 다음 HTML 소스는 name 다음에따옴표를누락하여 type=... 부분도 title 속성값으로인식하게된다. <input title="name type="text"> (X) 따라서다음과같이따옴표의시작과끝을정확히표시해야 type 속성이정확 하게인식이된다. <input title="name" type="text"> (O) - 203 -

다음예는속성과속성사이에공백이누락된경우다. <input title="name"type="text"> (X) 이경우도속성구분이모호하므로반드시따옴표사이를빈칸 (space) 으로구 분해야한다. 다음 HTML 소스는속성값을따옴표로구분하여제공하지않는예다. 속성값 이빈칸을포함하는경우반드시따옴표를이용하여표시해야한다. <input title= 이름을입력하세요. type=text> (X) <input title=" 이름을입력하세요." type="text"> (O) 하나의요소에서동일한속성을두번이상선언할경우중복선언한속성중 하나만적용되므로중복적으로선언하지않아야한다. <p style="color: #000" class="notice" style="width: 50em"> (X) <p class="notice" style="color: #000; width: 50em"> (O) 속성값에따옴표를사용해야할경우, 따옴표를그냥사용하면속성값의종결 문자로인식하기때문에값으로사용할때 " 로사용해야한다. <input type="text" value="" 가나다 ""> (X) <input type="text" value="" 가나다 ""> (O) 적용기술 72) 태그의정확한중첩관계 태그를사용할경우중첩관계가엇갈리지않도록해야한다. 특히이를파싱하는브라우저에따라서오류를처리하는방법이서로달라파싱결과가다른경우도종종발생한다. 무엇보다도태그를사용하는과정에서중첩관계에오류가없도록다음예와같이태그의열고닫는순서를잘지켜야한다. <p> 중첩관계가 <strong> 명확해야한다.</p></strong> (X) <p><strong> 명확해야한다.</strong></p> (O) - 204 -

적용기술 73) 표준에부합하는태그와속성이름, 값사용 브라우저에따라서는표준에명시되지않는태그나속성을허용하는경우가있다. 그러나마크업문서를작성할경우반드시표준에명시된태그와속성을사용해야이문서를어떠한브라우저와보조기술을이용하여접근할때에도정상적인접근이가능하게된다. 일부마크업언어는사용자가속성을정의하여사용할수있다. 예를들어, HTML5 언어는 'data-' 접두어를사용하여속성이름을정의하면문서작성시 사용자가정의한속성을사용할수있다. 마크업문서의오류여부를수동으로검사하는것은매우어려운일이다. 따라서이들마크업문서의문법오류를자동으로검사할수있는다양한도구가개발되어사용되고있다. < 참고 > 마크업언어의검사 W3C에서는여러가지마크업문서의오류여부를검증할수있는마크업유효성검사도구 (http://validator.w3.org/) 를제공하고있다. 현재지원하고있는마크업언어는 HTML, XHTML, XML, SMIL, MathML 등이다. CSS 나자바스크립트문법의오류는기능에직접적인영향을주기때문에마크업언어와함께 오류가발생되지않도록주의해야한다. - 205 -

o 잘못된사례및개선방법 잘못된사례 55) 아이디를중복선언한경우 한페이지를구성하는문서내에서는동일한아이디를중복하여사용할수없다. 'content' 와같이여러용도로사용될수있는경우도다음예와같이한문서에서두번사용한다면예기치못한오류가발생할수있다. 다음소스는텍스트영역 (textarea) 요소의값으로 'content' 를참조하려하였으나이미레이아웃영역에서 content라는아이디를사용하고있어의도와달리다른요소를참조하게되는사례다. <div id="header">... </div> <div id="content">... </div>... <form...>... <textarea id="content" name="content"></textarea>... </form>... </div> <script type="text/javascript"> function validateform() {... var el = document.getelementbyid('content'); if (el.value) {... }... } </script> 개선방법 아이디를중복하여선언하지않는다. 특히여러개발자가협업하여웹콘텐츠를제작할경우아이디의중복선언과같은일이종종발생한다. 따라서아이디나속성값들이충돌하지않도록사전협의와문서화가필수적이다. content영역을나타내는 div 요소의 id를충돌이발생하지않도록 'content' 를 - 206 -

'content-area' 로변경한다. <div id="header">... </div> <div id="content-area">... </div>... <form...>... <textarea id="content" name="content"></textarea>... </form>... </div> <script type="text/javascript"> function validateform() {... var el = document.getelementbyid('content'); if (el.value) {... }... } </script> 잘못된사례 56) 태그의중첩관계에오류가있는경우 다음코드는공지사항을링크목록으로구현하는과정에서각링크항목의닫는태그 (</a>) 를누락한사례다. 이경우, 공지사항뿐만아니라뒤따르는콘텐츠에도링크가제공된다. 다음코드에서는 " 사용자게시판 " 에도공지사항의 5번째항목의링크가제공된다. <div class="notice"> <h3><img src="notice.png" alt=" 공지사항 "></h3> <ul class="arw"> <li><a href="notice_list?id=899"> 시스템정기정검안내 </li> <li><a href="notice_list?id=650"> 댓글을평가해주세요!</li> <li><a href="notice_list?id=183"> 친구관계를등록할수있습니다.</li> <li><a href="notice_list?id=407"> 구독버튼오류정정안내 </li> <li><a href="notice_list?id=748"> 내글목록페이지개선 </li> </ul> </div> <div> <h3><img src="user.png" alt=" 사용자게시판 "></h3> - 207 -

개선방법 링크항목별로반드시닫는태그를제공해야한다. <div class="notice"> <h3><img src="notice.png" alt=" 공지사항 "></h3> <ul class="arw"> <li><a href="notice_list?id=899"> 시스템정기정검안내 </a></li> <li><a href="notice_list?id=650"> 댓글을평가해주세요!</a></li> <li><a href="notice_list?id=183"> 친구관계를등록할수있습니다.</a></li> <li><a href="notice_list?id=407"> 구독버튼오류정정안내 </a></li> <li><a href="notice_list?id=748"> 내글목록페이지개선 </a></li> </ul> </div> <div> <h3><img src="user.png" alt=" 사용자게시판 "></h3> - 208 -

검사항목 4.2.1 ( 웹애플리케이션접근성준수 ) 콘텐츠에 포함된웹애플리케이션은접근성이있어야한다. o 개요 자바스크립트를이용하여구현한웹콘텐츠가접근성을지원하지않는다면모든사용자가사용할수없게된다. 마찬가지로, 플러그인이나웹애플리케이션을제공하는경우도이들플러그인이나웹애플리케이션은반드시사용자의접근성을지원하도록구현해야한다. 플러그인이나웹애플리케이션을구현할때우선현재사용가능한보조기술이지원하는플랫폼이나기술을사용해야한다. 그렇지않으면이들플러그인이나웹애플리케이션을접근성있게구현하더라도현재의브라우저와보조기술로는접근이어렵기때문이다. 만일현재의보조기술을이용하면구현이불가능한플러그인이나웹애플리케이션은현재의보조기술의적용을예외로하되향후개발되는보조기술이지원할수있도록접근성을지원하여개발해야한다. 또한, 이들플러그인이나웹애플리케이션은반드시보조기술사용자가접근할수있는대체수단을함께제공해야한다. o 적용기술 적용기술 74) 플러그인플랫폼이제공하는접근성 API 활용 플러그인을이용하여콘텐츠를개발할경우플러그인플랫폼이제공하는접근 성 API 를활용하여구현한다. 플래시콘텐츠는 Adobe에서제공하는접근할수있는플래시 (Best Practices fot Accessible Flash Design; http://www.adobe.com/resources/accessibility/best_practices/best_practices _acc_flash.pdf) 문서에서제시하는방법을활용하여콘텐츠를제작한다. 다음 - 209 -

목록은웹애플리케이션을구현하는도구에대한접근성제공방법에관한 정보다. Best Practices fot Accessible Flash Design (http://www.adobe.com/resources/accessibility/best_practices/best_pra ctices_acc_flash.pdf) 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 Accessibility Helper Early Access v0.8 (http://java.sun.com/developer/earlyaccess/jaccesshelper/) Accessible Explorer (http://msdn.microsoft.com/en-us/library/ms696082.aspx) 적용기술 75) 웹애플리케이션의대체콘텐츠제공 플러그인을사용하는웹애플리케이션을제공할때웹애플리케이션과동등한 기능을수행할수있는대체콘텐츠를함께제공한다. 다음그림은플래시플러그인을사용할때플러그인사용이가능한환경 ( 좌 ) 과플러그인사용이가능하지않은환경 ( 우 ) 에서각각웹애플리케이션이어떻게제공되고있는지를보여주는예다. 플러그인사용이가능하지않은환경에서는웹애플리케이션기능과동등한기능을하는이미지로되어있는콘텐츠를제공하고있다. - 210 -

다음소스는 HTML object 구문을사용하여플래시콘텐츠에대한대체콘텐츠를제공하기위한경우다. object 요소는포함하고있는콘텐츠를대체콘텐츠로인식하여플러그인을구동할수없을때하위에포함하고있는콘텐츠를대신출력하게된다. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ver sion=7,0,0,0" width="550" height="400"> <param name="movie" value="flash_movie.swf">  <object type="application/x-shockwave-flash" data="flash_movie.swf" width="550" height="400"> <p><img src="flash_alternative.png" alt=" 환영합니다." /></p> </object>  </object> 대체콘텐츠는플러그인기술의사용가능여부에따라자동으로선택되게할수도있지만사용자에게사용여부를선택하게할수도있다. 사용자에게플러그인기술의사용여부를선택할수있게하면사용자는자신의환경과선호도에따라적합한웹애플리케이션을사용할수있게된다. 다음은사용자의선택에따라플래시버전과플래시가아닌버전을제공하는 사이트의예다. 각버전의사이트푸터에플래시버전이나플래시가아닌버전을선택하는링 크를제공하고있다. - 211 -