제정일 : 2010 년 12 월 31 일 한국형웹콘텐츠접근성지침 2.0 Korean Web Content Accessibility Guidelines 2.0 방송통신위원회
서 문 1. 표준의목적 본표준은장애인이비장애인과동등하게웹콘텐츠에접근할수있는웹콘텐츠를제작하는방법에관하여기술하고있다. 이표준에포함된지침들은웹콘텐츠저자, 웹사이트설계자및웹콘텐츠개발자들이관련된지침을준수하여접근성 (Accessibility) 높은웹콘텐츠를쉽게만들수있도록돕기위하여기획되었다. 즉, 본표준은웹콘텐츠저작자및개발자, 웹사이트설계자등이웹콘텐츠를접근성을준수하여콘텐츠를쉽게제작할수있는지침들을제공하는데그목적이있다. 2. 주요내용요약 한국형웹콘텐츠접근성지침 2.0(Korean Web Content Accessibility Guidelines 2.0) 은웹콘텐츠의접근성을향상시키기위한기술적규격을포함하고있다. 본표준은그동안우리나라에서웹접근성표준으로사용되어온정보통신단체표준인 한국형웹콘텐츠접근성지침 1.0 (TTAS.OT-10.0003, 2004.12.23) 과이를바탕으로제정된국가표준인 인터넷웹콘텐츠접근성지침 (KICS.OT-10.0003, 2005.12.21) 에해외웹관련표준및기술동향을최대한반영하여개정했다. 이는학계, 연구계, 장애인단체, 웹관련기업등의전문가들로웹접근성표준화위원회를구성하여연구한결과를토대로개정한것이다. 특히, 본표준은 2008년 12월에제정된웹접근성관련국제표준인월드와이드웹컨소시엄 (W3C: World Wide Web Consortium) 의 웹콘텐츠접근성가이드라인 2.0(WCAG 2.0: Web Content Accessibility Guidelines 2.0) 을국내실정에맞게반영하였다. 본표준에포함된지침들은시각장애, 약시, 청각장애, 지체장애, 학습장애, 지적장애, 뇌병변장애, 광과민성발작등과같은개별적인장애를가진사용자들이쉽게접근할수있는웹콘텐츠를구축하는데필요한방법을소개하고있다. 그러나중복된장애를가지고있는사용자의경우에는본표준에서제시하는방법만을이용하여구현한웹콘텐츠에는접근하기어려운경우도발생할수있다. i
본표준에서는웹접근성의준수여부를평가할수있는요구조건과지침들을준수하면얻을수있는기대효과를소개하고있다. 그러나가능한한, 지침들을준수하기위해서특정한기술이사용되어야함은전제하지않도록하였다. 그이유는이표준에포함되는지침들을제정하는시점에서일반적으로사용되는기술만으로한계를정하기보다는앞으로개발될기술을최대한수용할수있도록하였기때문이다. 이로인하여향후개발될여러가지기술을적용하기위해이표준이전면적으로수정되어야하는점을피할수있을것이다. 개정된웹접근성표준은원칙 (Principle), 지침 (Guideline), 검사항목 (Requirement) 의 3단계로구성되었다. 각각의내용은웹접근성제고를위한 4가지원칙과각원칙을준수하기위한 13개지침및해당지침의준수여부를확인하기위해 22개의검사항목으로구성되어있다. 3. 표준적용산업분야및산업에미치는영향 이표준은국내웹관련산업및정책전반에영향을미칠것이며, 장애인이비장애인과동등하게인터넷을이용할수있는환경조성에기여할것이다. 또한, 국가정보화기본법, 장애인차별금지및권리구제등에관한법률 에의거의무화된웹접근성부문의표준으로활용될것이다. 4. 참조표준 ( 권고 ) 4.1 국외표준 ( 권고 ) - W3C Recommendation, "Web Content Accessibility Guidelines 1.0", May. 1999. - W3C Recommendation, "Web Content Accessibility Guidelines 2.0", Dec. 2008. - U.S Section 508 Amendments subpart B -Technical Standards, "Web-based intranet and Internet information and application", Dec. 2000 ii
4.2 국내표준 - TTA, TTAS.OT-10.0003, " 한국형웹콘텐츠접근성지침 1.0", 2004.12.23 -, KICS.OT-10.0003, " 인터넷웹콘텐츠접근성지침 ", 2005.12.21 5. 참조표준 ( 권고 ) 과의비교 5.1 참조표준 ( 권고 ) 과의관련성 본표준은 W3C가장애인등이웹사이트에접근하는것을보장하기위한목적으로개발한 웹콘텐츠접근성지침 을참고하여개발하였다. W3C의웹접근성표준은 1999년 5월에제정되었으며, 웹관련다양한기술에서접근성에대한지침을준수하게하게하기위해 2008년 12월에개정하였다. 이표준은 W3C 웹콘텐츠접근성가이드라인 2.0(2008.12) 의 12개가이드라인과이의준수를위한성공기준의중요도 1 항목을중심으로국내여건을고려하여개발하였다. 5.2 참조한표준 ( 권고 ) 과본표준의비교표 iii
KICS.KO-10.0003 비고 1.1 대체텍스트 1.1 텍스트아닌콘텐츠의인식동일 1.2 멀티미디어대체수단 1.2 영상매체의인식동일 1.3 명료성 1.3 색상에무관한인식 2.1 키보드접근성 2.4 키보드만으로운용가능 유사 ( 추가 ) 2.2 충분한시간제공 2.6 반응시간의조절기능동일 2.3 광과민성발작예방 2.4 쉬운내비게이션 2.3 깜빡거리는객체사용제한 2.2 프레임의사용제한 2.5 반복내비게이션링크 3.1 가독성추가 3.2 예측가능성추가 3.3 콘텐츠의논리성 3.1 데이터테이블구성 3.2 논리적구성 3.4 입력도움 3.3 온라인서식구성추가 4.1 문법준수 4.2 웹애플리케이션접근성 4.1 신기술의사용 동일 동일 동일 동일 축소 2.1 이미지맵기법사용제한삭제 4.2 별도웹사이트구성삭제 6. 지적재산권관련사항 - 2010 년 9 월까지확인된지적재산권없음 - 본표준의 ' 지적재산권확약서 ' 제출현황은 TTA 웹사이트에서확인할수있다. 7. 적합인증관련사항 - 해당사항없음 7.1 적합인증대상여부 - 해당사항없음 7.2 시험표준제정여부 ( 해당시험표준번호 ) - 해당사항없음 8. 표준의이력 iv
판수제 개정일제 개정내역 제 1 판 2004.12.23. 제정 제 2 판 2010. 12. 31. 개정 ( 개정내역 : 국제표준반영등 ) v
Preface 1. The Purpose of Standard This document describes the methods of developing web content which all the people including persons with disabilities and older people can access. Especially, this document helps web content developers, designers and content providers make web content accessible. 2. The Summary of Contents This standard contains how to make websites accessible in order to people with disabilities can use internet appropriately. This standard based on Korean Web Content Accessibility Guidelines (TTAS.OT-10.0003, Dec., 2004), Internet Web Accessibility Guidelines (KICS.OT10.0003, Dec., 2005) and Web Content Accessibility Guidelines 2.0 (W3C Recommendation, Dec., 2008). This standard has three layers; principles, guidelines and requirements. It consist of 4 principles, 13 guidelines and 22 requirements. 3. The Applicable Fields of Industry and its Effect This standard will provide web content developers, designers, operators with practical accessibility guidelines and help them find new opportunities in domestic and foreign markets that require the basic functions for the disabilities in their web development. 4. The Reference Standards(Recommendations) vi
4.1 International Standards(Recommendations) - W3C Recommendation, "Web Content Accessibility Guidelines 1.0", May. 1999. - W3C Recommendation, "Web Content Accessibility Guidelines 2.0", Dec. 2008. - U.S Section 508 Amendments subpart B -Technical Standards, "Web-based intranet and Internet information and application", Dec. 2000 4.2 Domestic Standards - TTA, TTAS.OT-10.0003, "Korean Web Content Accessibility Guidelines 1.0", 2004.12.23 - MIC, KICS.OT-10.0003, "Internet Web Content Accessibility Guidelines", 2005.12.21 5. The Relationship to Reference Standards(Recommendations) 5.1 The relationship of Reference Standards(recommendations) This standard has been developed to use WCAG 2.0 and Internet Web Content Accessibility Guidelines. 5.2 Differences between Reference Standard(recommendation) and this standard vii
KICS.KO-10.0003 비고 1.1 Alternative text 1.1 Alternative text 1.2 Multimedia 1.2 Multimedia same (trans) same (trans) 1.3 Clarity 1.3 Color similar 2.1 Keyboard Access 2.4 Keyboard 2.2 Enough time 2.6 Enough time 2.3 Seizures 2.4 Easy navigation 2.3 Blinking and Flickering 2.2 Frame 2.5 Skip navigations same (trans) same (trans) same (trans) same (trans) 3.1 Readable added 3.2 Predictable added 3.3 Logical order 3.1 Table 3.2 Logical order same (trans) 3.4 Input assistance 3.3 Online form added 4.1 Markup 4.2 Web application accessibility 4.1 Compatible modified 2.1 Image-map deleted 4.2 Alternative page deleted 6. The Statement of Intellectual Property Rights - As of December 2010, any IPR related to this standard cannot be found. - IPRs related to the present document may have been declared to TTA. The information pertaining to these IPRs, if any, is available on the TTA Website. 7. The Statement of Conformance Testing and Certification - None. 7.1 The Object of Conformance Testing and Certification - None. 7.2 The Standards of Conformance Testing and Certificatione - None viii
8. The History of Standard Edition Issued date Contents The 1st edition 2004.12.23. Established The 2nd edition 2010. 12. 31. Revised (W3C WCAG 2.0) ix
목 차 1. 개요 1 2. 표준의구성및범위 2 3. 웹접근성을고려한콘텐츠제작방법 4 원칙 1. 인식의용이성 (Perceivable) 4 지침 1.1 대체텍스트 5 지침 1.2 멀티미디어대체수단 8 지침 1.3 명료성 9 원칙 2. 운용의용이성 (Operable) 13 지침 2.1 키보드접근성 13 지침 2.2 충분한시간제공 16 지침 2.3 광과민성발작예방 18 지침 2.4 쉬운내비게이션 19 원칙 3. 이해의용이성 (Understandable) 24 지침 3.1 가독성 24 지침 3.2 예측가능성 25 지침 3.3 콘텐츠의논리성 27 x
지침 3.4 입력도움 29 원칙 4. 견고성 (Robust) 31 지침 4.1 문법준수 31 지침 4.2 웹애플리케이션접근성 32 부록 I. 한국형웹콘텐츠접근성지침 2.0 개요 35 부록 Ⅱ. 한국형웹콘텐츠접근성지침 2.0 검사항목과 W3C WCAG 2.0 중요도 1 성 공기준비교표 37 부록 Ⅲ. 한국형웹콘텐츠접근성지침 2.0 검사항목 (22 개 ) 사례 40 xi
Contents 1. Introduction 1 2. Constitution and Scope 2 3. Web Content Accessibility Guidelines 4 Principle 1. Perceivable 4 Guideline 1.1 Alternative Text 5 Guideline 1.2 Multimedia 8 Guideline 1.3 Clarity 9 Principle 2. Operable 13 Guideline 2.1 Keyboard Access 13 Guideline 2.2 Enough time 16 Guideline 2.3 Seizures 18 Guideline 2.4 Easy Navigation 19 Principle 3. Understandable 24 Guideline 3.1 Readable 24 Guideline 3.2 Predictable 25 Guideline 3.3 Logical order 27 xii
Guideline 3.4 Input assistance 29 Principle 4. Robust 31 Guideline 4.1 Markup 31 Guideline 4.2 Web application accessibility 32 Appendix I. Overview of Korean Web Content Accessibility Guidelines 2.0 35 Appendix Ⅱ. Korean Web Content Accessibility Guidelines 2.0 vs W3C WCAG 2.0 37 Appendix Ⅲ. Examples of Korean Web Content Accessibility Guidelines 2.0 40 xiii
한국형웹콘텐츠접근성지침 2.0 Korean Web Content Accessibility Guidelines 2.0 1. 개요 본표준은장애인이나, 노인과같은사람들이비장애인, 젊은이와동등하게웹에접근할수있도록하기위해웹콘텐츠를제작할때준수해야하는여러가지지침들에관하여기술하고있다. 본표준에서지칭하는접근성이높은웹콘텐츠란시각장애, 약시, 청각장애, 지체장애, 학습장애, 인지장애, 뇌병변, 광과민성장애등과같은장애또는일부중복장애에도불구하고접근이가능한웹콘텐츠를말한다. 본표준의지침을만족하는웹콘텐츠는장애인들에게높은웹접근성을제공할뿐만아니라노인들이쉽게웹을사용할수있도록하는데에도도움이될것이다. 또한웹접근성지침을준수하면조용하거나시끄러운환경, 저사양의인터넷환경등다양한환경에서웹콘텐츠에접근하는비장애인에게도도움이되며, 이미지나동영상검색등검색엔진을최적화 (Search engine optimization) 하는데에도도움이된다. 그러나일부중복된장애가있는사람인경우, 본표준에서제시하는지침만으로는높은접근성을보장한다고할수는없다. 지금까지우리나라에서는웹접근성표준으로정보통신단체표준인 한국형웹콘텐츠접근성지침 1.0 (TTAS.OT-10.0003, 2004.12. 23) 및이를바탕으로제정된인 인터넷웹콘텐츠접근성지침 (KICS.OT-10.0003, 2005.12. 21) 을적용하여왔다. 그러나우리나라도보조기술분야가괄목할만한발전을이루었으며, 국가정보화기본법 ( 제32조제1항 : 국가기관등의웹접근성준수의무화 ) 장애인차별금지및권리구제등에관한법률 ( 08.4월부터 ~ 15년 4월까지단계적으로웹접근성준수의무화 ) 등의법률이제정되었고, 웹접근성에대한인식이크게제고되어그동안적용되어온을개정할필요가있었다. 이에정보통신접근성향상표준화포럼산하웹접근성분과위원회가주축이되어학계, 연구계, 장애인단체, 웹관련기업등의관련전문가로소위원회를구성하여본개정안을마련 제시하게되었다. 소위원회는개정안을개발및연구하는과정에서다음의자료를참고하였다. -Web Content Accessibility Guideline 1.0(1999 년 5 월 ) - 1 -
-Web Content Accessibility Guideline 2.0(2008 년 12 월 ) - 미국재활법 508 조 (2000 년 12 월 ) - 인터넷웹콘텐츠접근성지침 (2005.12 월 ) - 일본정보통신접근성표준 (JIS X8341-3, 2004 년 ) 본표준에서제시한지침에따라웹콘텐츠를제작하면보조기술을사용하는장애인 등도해당콘텐츠에충분히접근할수있을것이다. 웹문서를설계함에있어고려해야 하는웹사이트이용자의유형은다음과같다. - 시각을통해정보를인지할수없는시각장애가있는경우 - 청각을통해음향정보를인지하지못하는청각장애가있는경우 - 신경계의마비, 근골격계의마비또는선천성기형등으로신체의움직임에제한이 있는지체장애가있는경우 - 읽기나문장이해력이떨어지는언어장애가있는경우 - 키보드나마우스를사용할수없는장애가있는경우 - 시각, 청각또는손을사용하고있어해야하는일을할수없는경우 : 운전중이거나 소음이많은곳에서일하는경우등장애라기보다는웹사용자가처한환경에따라 제한받는경우 본표준에서는지침을준수하는방법과지침을준수하는경우의장점을소개하고있다. 그러나이표준에서는웹브라우저의종류, 컴퓨터의종류, 운영체제의종류등은고려하지않았다. 그이유는지침을개발하는과정에서적용할기술은현시점의기술만을고려할필요가없으며, 향후개발될기술을최대한수용할수있어야하고, 기술발전에따라표준의내용이빈번하게수정또는개정되는일을피할수있기때문이다. 2. 표준의구성및범위 본표준은웹사이트운영자, 정책입안자, 교사, 학생, 콘텐츠제작자, 보조기술개발 자, 프로그램개발자를포함하는기관과개인이, 신체적인제약이나환경적제약에구애 - 2 -
받지않고이용자가웹사이트에접근할수있는콘텐츠를제작할수있도록돕는데그 목적이있다. 다양한수요자의요구를만족시키기위해, 본표준은다음과같은 3 개의구 조로구성되었다. 가. 원칙 (Principle): 웹접근성의근간을이루는것으로, 다음과같이 4가지로구성되어있다. 여기서제시되는원칙에맞추어웹콘텐츠를제작하면, 기술적인환경에구애받지않고모든사용자가웹콘텐츠의내용을동등하게인식하고, 자신에게적합한방법으로이를운영하여이해할수있게된다. 가-1. 인식의용이성 (Perceivable): 모든콘텐츠는사용자가인식할수있어야한다. 가 -2. 운용의용이성 (Operable): 사용자인터페이스구성요소는조작가능하고내비 게이션할수있어야한다. 가 -3. 이해의용이성 (Understandable): 콘텐츠는이해할수있어야한다. 가 -4. 견고성 (Robust): 콘텐츠는미래의기술로도접근할수있도록견고하게만들 어야한다. 나. 지침 (Guideline): 각각의원칙은지침으로구성되며, 이들지침은웹제작자가웹 콘텐츠를제작할때웹접근성을준수하기위하여완수해야하는기본적인목표 이다. 본표준에서는총 13 개의지침을제시하였다. 다. 검사항목 (Requirement): 각지침별로웹접근성준수여부를확인할수있도록제시한검사항목을말한다. 검사항목은웹콘텐츠상에해당검사항목이적용되는요소가존재하는경우로한정된다. 즉, 해당검사항목을적용할구성요소가존재하지않으면, 해당검사항목은만족한것으로간주한다. 본표준에서는총 22개의검사항목을제시하였다. 본표준에서제시한지침을준수하는웹콘텐츠는위에기술한총 22개의검사항목들을모두만족해야한다. 만약어떤웹콘텐츠가 22개항목중어느하나라도만족하지못하면해당웹콘텐츠는 웹접근성이없다 또는 웹접근성지침을준수하지못하는웹콘텐츠 라고할수있다. 즉, 본표준에제시된모든검사항목들은필수적으로준수해야하는것이다. - 3 -
3. 웹접근성을고려한콘텐츠제작방법 한국형웹콘텐츠접근성지침 2.0 은원칙, 지침, 검사항목의 3단계로구성되어있다. 본지침을준수할경우, 비장애인, 노인등이장애인, 젊은이등과동등하게웹사이트에서제공하는콘텐츠를인식하고, 이를운영하고이해할수있게되는것이다. 그러나본지침을모두준수한경우에도학력, 장애유형과정도 ( 중복장애, 중증장애등 ), 컴퓨터및인터넷경험, 보조기술이용능력등에따라웹콘텐츠에대한접근이불가능한경우가발생할수도있다. 이를해결하기위해서는정보화교육이나맞춤형보조기술등이필요할것이다. 다만, 본표준을준수할경우에는대부분의웹접근성과관련된문제를해결할수있을것으로예상된다. < 표 3-1 > 한국형웹콘텐츠접근성지침 2.0 개요 원칙지침검사항목 4 개 13 개 22 개 원칙 1. 인식의용이성 (Perceivable): 모든콘텐츠는사용자가인식할수있어야한다. 인식의용이성은사용자가장애유무등에관계없이웹사이트에서제공하는모든콘 텐츠를동등하게인식할수있도록콘텐츠를제공하는것을의미한다. 인식의용이성은 대체텍스트, 멀티미디어대체수단, 명료성의 3 가지지침으로구성되어있다. < 표 3-2 > 인식의용이성관련지침및검사항목 - 4 -
지침 (3개) 검사항목 (6개) 1.1.1( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠 1.1( 대체텍스트 ) 텍스트아닌콘텐츠에는는그의미나용도를이해할수있도록대체텍스트를대체텍스트를제공해야한다. 제공해야한다. 1.2( 멀티미디어대체수단 ) 동영상, 음성 1.2.1( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고등멀티미디어콘텐츠를이해할수있도또는수화를제공해야한다. 록대체수단을제공해야한다. 1.3.1( 색에무관한콘텐츠인식 ) 콘텐츠는색에관계없이인식될수있어야한다. 1.3.2( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없이인식될수있 1.3( 명료성 ) 콘텐츠는명확하게전달되어어야한다. 야한다. 1.3.3( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠와배경간의명도대비는 4.5대 1 이상이어야한다. 1.3.4( 배경음사용금지 ) 자동으로재생되는배경음을사용하지않아야한다. 지침 1.1 ( 대체텍스트 ) 텍스트아닌콘텐츠에는대체텍스트를제공해야한다. 가. 용어설명 1) 텍스트아닌콘텐츠 (Non-text contents): 그림, 이미지등으로제작된텍스트, 애니메이션, 아스키 (ASCII) 그림문자, 기호 (Bullet) 이미지, 그래픽버튼, 이모티콘 (Emoticon), 릿스피크 (Leetspeak) 등과같이표준문자 ( 부호 ) 체계가아닌시각적또는청각적정보가포함된콘텐츠를의미한다. 한글부호의경우, 유니코드, 조합형또는완성형부호체계를사용하여작성된텍스트이외의모든경우를포함한다. 2) 공백문자 (Blank text): 아무런정보도가지고있지않은문자열을의미한다. HTML 등의문법에서공백문자는 을나타낸다. 공백문자를화면낭독프로그램 (Screen reader) 을사용하여읽으면아무런소리도나지않는다. 3) 대체텍스트 (Alternative text): 텍스트가아닌콘텐츠를대신하기위해제공되는부가적인텍스트를의미한다. 동영상의경우에는지침 1.2( 멀티미디어대체수단 ) 에서제시하는대체수단을제공한다. 4) 대체미디어 (Alternative media): 텍스트콘텐츠를오디오, 비디오또는오디오 - 비디 - 5 -
오형식으로변환하여제공하는미디어콘텐츠를말한다. 예를들어, 어떤텍스트 콘텐츠를수화로번역하여제공하는비디오파일은대체미디어라고할수있다. 5) 보조기술 (Assistive technology): 장애가있는사용자의요구조건을만족시키는기능을추가하여제공하는하드웨어또는소프트웨어를의미한다. 대표적으로화면낭독프로그램 (Screen reader), 화면확대프로그램, 특수키보드등을들수있다. 보조기술은보조공학이라는용어로사용되기도한다. 나. 검사항목 1.1.1 ( 적절한대체텍스트제공 ) 텍스트가아닌콘텐츠는그의미나용도를이해할 수있도록대체텍스트를제공해야한다. 이미지등텍스트가아닌콘텐츠를이용할경우, 그의미나용도를해당이미지와동등하게인식할있도록적절한대체텍스트를제공해야한다. 텍스트로제공할수있는콘텐츠를이미지등텍스트아닌콘텐츠로제공하는것은바람직하지않은방법이므로지양해야한다. 또한대체텍스트는간단명료하게제공해야한다. 1) 구체적인정보를제공해야하는경우 : 이미지링크, 이미지버튼등은용도가매우명확하므로간단히이미지링크나이미지버튼의핵심기능에대한설명을대체텍스트로제공해야한다. 이경우링크나버튼의대체텍스트로 이동하기, GO 등과같이그목적지를구체적으로알려주지않는대체텍스트는피해야한다. 2) 충분한정보가필요한경우 : 데이터차트와같이그내용을자세히설명해야함에도불구하고대체텍스트로충분히설명하지못하는경우, 보조기술을사용하는사용자가그내용을충분히파악할수없게된다. 따라서사용자가해당내용을충분히파악할수있도록필요한내용을대체텍스트로제공해야한다. 다음과같은경우에는대체텍스트를제공하지않거나제한적으로제공할수있다. 1) 대체텍스트가아닌형태로만정보를제공해야하는경우 : 컨트롤 (Control) 또는사 용자입력 (Input) 의경우, 보조기술에만정보를제공하는명칭 (Name) 또는레이블 (Label) 을제공할수있다. - 6 -
2) 대체미디어로정보를제공해야하는경우 : 텍스트콘텐츠의내용을수화로제공하는비디오파일의경우, 해당비디오파일에대한별도의대체텍스트를제공하는것이바람직하지만, 이것을반드시제공할필요는없다. 이와같이텍스트콘텐츠의대체수단으로제공하는오디오, 비디오또는오디오-비디오콘텐츠에대해서는대체텍스트를반드시제공할필요는없다. 3) 콘텐츠의내용을설명하는대체텍스트를제공할수없는경우 : 생방송콘텐츠와같이그내용을설명하기어려운경우, 해당콘텐츠에대한간략한용도를알려주는대체텍스트만으로도충분하다. 또한색맹검사, 청각검사, 시력검사, 받아쓰기등과같은검사또는시험의경우에도콘텐츠의간략한용도를알려주는대체텍스트만으로충분하다. 4) 특정감각기관을위한콘텐츠인경우 : 플루트독주나시각적예술작품등의경우, 해당콘텐츠에대한간략한용도를알려주는대체텍스트만으로충분하다. 5) 불필요한설명을제공하는경우 : 단순히장식이나시각적인형태를위해사용되는 콘텐츠의경우, 보조기술을통해해당설명을제공받을때오히려혼란을일으킬 가능성이있으므로대체텍스트를공백빈문자로제공하는것이바람직하다. 다. 기대효과 1) 시각장애또는인지장애등으로인해시각적으로정보를습득하는데어려움을 겪는사용자들이화면낭독프로그램과같은보조기술을사용하면해당콘텐츠를 음성을통해들을수있으므로최소한의접근권을보장받을수있게된다. 2) 사용자들을위해텍스트아닌콘텐츠를텍스트로표시하거나수화로번역함으로써 해당콘텐츠에접근할수있다. 3) 시각장애인은물론시각장애와청각장애를함께갖고있는시청각장애인들역 시텍스트아닌콘텐츠에대응하는대체텍스트를점자로변환하는보조기술을이 용하여해당콘텐츠에대한접근권을보장받을수있다. 4) 콘텐츠에적절한대체텍스트를제공하는경우제공받는정보가불충분하여사용자 가콘텐츠의핵심내용을인지할수없거나불필요한정보를제공받음으로써겪게 되는불필요한혼동을줄일수있다. - 7 -
5) 대체텍스트를제공함으로서검색을통하여텍스트아닌콘텐츠에접근할수있게 된다. 지침 1.2 ( 멀티미디어대체수단 ) 동영상, 음성등멀티미디어콘텐츠를이해할수있 도록대체수단을제공해야한다. 가. 용어설명 1) 멀티미디어 (Multimedia): 시간에따라변화하는정보를제공하기위하여오디오또는비디오콘텐츠를또다른포맷과동기화하여제공하도록만들어진콘텐츠혹은콘텐츠재생과정의특정시점에서사용자와의상호작용또는대화가필요한매체를말한다. 2) 자막 (Captions): 영상매체에포함된말, 음향및주변소리등을텍스트로표현한매체를의미한다. 따라서자막은영상매체의진행에따라해당이벤트와동기화되어야한다. 자막은크게닫힌자막 (Closed caption) 과열린자막 (Open caption) 이범용적으로활용된다. 닫힌자막은사용자의필요에따라자막을끄거나켤수있는데반해, 열린자막은비디오콘텐츠에자막정보가함께녹화되어있으므로사용자가임의로자막을끄거나켤수없다. 3) 대체수단 : 멀티미디어콘텐츠의대체수단으로는자막, 구술된내용을글로옮긴 원고 (Transcript), 수화 (Sign language) 등이있다. 나. 검사항목 1.2.1 ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고또는수화를제공해야 한다. 멀티미디어콘텐츠를장애인도비장애인과동등하게인식할수있도록제작하기위해서는자막, 원고또는수화를제공해야한다. 대체수단에서가장중요한요소는멀티미디어콘텐츠와동등한내용을제공하는것이다. 가장바람직한방법은닫힌자막 (Closed caption) 을오디오와동기화시켜 (Synchronized) 제공하는것이다. 대사없이영상 (Video) - 8 -
만제공하는경우에는화면해설 ( 텍스트, 오디오, 원고 ) 을제공하고, 음성만제공하는경 우에는자막, 원고또는수화를제공해야한다. 1) 자막 (Caption) 을제공하는멀티미디어콘텐츠 : 멀티미디어콘텐츠를재생시킬때마다자동적으로자막이제공되거나전용재생장치 (Player), 별도의자막재생장치또는현존하는보조기술을이용하여자막을인식할수있는멀티미디어콘텐츠는이검사항목을만족하는것으로간주할수있다. 만약자막으로인해중요한음향효과나음성이끊기게되면이검사항목을준수하지못한것이된다. 2) 원고 (Transcript) 를제공하는콘텐츠 : 자막과는달리멀티미디어가재생되는과정에서 원고또는대본 (Scenario) 을제공하는경우도이검사항목을만족하는것으로간 주한다. 3) 수화를제공하는콘텐츠 : 비디오콘텐츠에수화를중첩하여녹화한콘텐츠도이검 사항목을만족하는것으로간주한다. 다. 기대효과 1) 청각장애인은자막을통해음성이나음향정보에접근이가능하게된다. 또한자 막을활용하면해당콘텐츠에대한색인을작성하거나내용을검색할때에도유용 하게사용될수있다. 수화를제공하는콘텐츠도청각장애인의접근이용이하다. 2) 장애인이아닌경우에도영상매체와함께동기화되는대체매체가제공되는경우에는보다편리하게콘텐츠를활용할수있다. 예를들어, 자막은소란한환경이나오디오재생기능이갖추어져있지않은경우에그내용을파악하는데유용하며, 외국어습득과같이언어능력이나읽기능력을향상시키는데활용될수있다. 지침 1.3 ( 명료성 ) 콘텐츠는명확하게전달되어야한다. 가. 용어설명 1) 명도대비 : 색의밝고어두운정도를말한다. - 9 -
2) 경조 ( 硬調 )(High contrast): 경조 ( 硬調 ) 란전경과배경간의명도대비를강조표시하여해당항목을보다뚜렷하고쉽게식별될수있도록하는것이다. 검정색배경에하얀색으로텍스트를표시하는경우와같이대비차가많이나도록조정하여화면에표시하는방식을경조 ( 硬調 ) 모드라고하며, 최신운영체제에서는기본적으로이기능을지원하고있다. 3) 장식을위한글자 : 정보제공이나콘텐츠이용에필요한기능과는무관하게웹페 이지의시각적인표현만을위해사용된콘텐츠의글자를말하는것으로, 로고등이 이에해당된다. 나. 검사항목 1.3.1 ( 색에무관한콘텐츠인식 ) 콘텐츠는색에관계없이인식될수있어야한다. 콘텐츠에서제공하는모든정보는특정한색을구별할수없는사용자나흑백디스플레이사용자, 흑백인쇄물을보는사용자가색을배제하여도해당콘텐츠를인식할수있도록제공해야한다. 1) 색에의한정보제공 : 차트나그래프등을색으로구분하여표시하면경조 ( 硬調 ) 모드로화면을전환하였을경우, 모든색이회색으로표시되므로사용자는색을구분할수없게된다. 따라서이경우에도콘텐츠가제공하는정보를인식할수있도록색으로만정보를구분하지않아야한다. 2) 무늬를이용한정보제공 : 서로다른정보를무늬로구분하여표시하면흑백디스 플레이사용자, 흑백인쇄물의사용자도충분히그정보를인지할수있다. 무늬와 색을동시에이용하면색각장애가있는사용자도접근이가능하다. 1.3.2 ( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에 관계없이인식될수있어야한다. 본검사항목은특정요소를가리키거나지시사항을전달하는콘텐츠에한정해적용하는것으로, 시각이나청각등과같은특정감각에만의존하여제공해서는안된다는것이다. 즉, 다른감각을통해서도지시사항을인식하는데문제가없도록제공해야한다. 텍스트콘텐츠와대체텍스트가제공된텍스트아닌콘텐츠는보조기기를통해다른감각으로의전환이가능하기때문에이들콘텐츠를음성콘텐츠로변환하여제공할 - 10 -
필요는없다. 1) 색, 크기, 모양또는위치와같은정보에대한인식 : 웹콘텐츠는콘텐츠에접근하는사용자들이색, 크기, 모양또는위치에관한정보를인식하지못하더라도원하는콘텐츠에접근할수있도록제작되어야한다. 예를들어, 특정요소를 동그란버튼을누르시오 또는 오른쪽버튼을누르시오 라고가리킬때, 그대상이되는버튼이 동그란버튼 또는 오른쪽버튼 이라는대체텍스트를포함하고있지않을경우시각장애를지닌사용자는어떤요소를지칭하는지알수없다. 따라서이러한경우, 가리키고자하는요소의실제명칭이나그요소가포함하고있는대체텍스트를사용해지칭하거나, 불가피하게색, 크기, 모양, 위치와같은정보를사용해특정요소를가리킬때는이를보완할수있는다른정보를제공해야한다. 2) 음성이나음향정보의인식 : 사용자에게음성이나음향을사용해지시사항을전달하는경우사용자가소리를들을수없더라도전달하고자하는지시사항을인식할수있어야한다. 예를들어, 온라인시험진행중사용자에게비프음 (Beep sound) 으로정답인지오답인지를사용자에게알려주면, 청각장애사용자나스피커가설치되어있지않은환경에있는사용자는정답과오답여부를확인할수없다. 따라서이경우에비프음과함께정답과오답여부를시각적으로확인할수있는수단을제공하면더많은사용자가지시사항을인지할수있게된다. 1.3.3 ( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠와배경간의명도대비는 4.5대 1 이상이어야한다. 웹페이지에서보이는핵심텍스트콘텐츠와배경간의충분한대비를제공하여, 저시력자, 색각이상자, 노인등도콘텐츠를인식할수있도록제공해야한다. 다만, 본문콘텐츠에단순히장식목적으로만사용한글자, 마우스나키보드를활용하여초점 (Focus) 을받았을때명도대비가커지는콘텐츠는예외로한다 ( 지침 2.1.2 참조 ). 1) 핵심콘텐츠의명도대비 : 웹페이지가제공하려는핵심적인콘텐츠를구성하고있 는텍스트와배경간의명도대비는 4.5 대 1 이상이어야한다. 2) 폰트크기에따른명도대비 : 콘텐츠를구성하고있는텍스트폰트를 18pt 이상또는 14 pt 이상의굵은폰트를사용하는경우에는명도대비를 3:1 까지낮출수있다. 1.3.4 ( 배경음사용금지 ) 자동으로재생되는배경음을사용하지않아야한다. - 11 -
웹페이지에서자동으로재생되는배경음 ( 동영상, 음성, 음악등 ) 으로인해콘텐츠를인식하는데방해받지않아야한다. 단, 3초미만의배경음은예외로한다. 3초이상재생되는배경음을사용할경우, 반드시배경음을제어할수있는수단 ( 멈춤, 일시정지, 음량조절등 ) 이나배경음제어로이동하는바로가기링크를웹페이지의첫부분에제공해야한다 (2.4.1 참조 ). 또한콘텐츠가제공하는배경음의음량을조절하더라도화면낭독프로그램의음량에는영향을주지않아야한다. 다. 기대효과 1) 색상의차이가정보의다름을나타내지않으므로색을인지하는데장애가있는사 용자도혼동을일으킬염려가없게된다. 2) 흑백스크린또는경조 ( 硬調 ) 모드를사용할수밖에없는사용자들도콘텐츠의내용 이나구조를손쉽게이해할수있다. 3) 시각장애인은콘텐츠의모양이나위치에의한정보를이해할수없기때문에추가 적인정보를제공하거나모양이나위치정보에만의존하지않을경우콘텐츠를이 용할수있게된다. 4) 멀티미디어콘텐츠가자동적으로실행되어시각장애인이사용하고있는화면낭독프로그램이읽어주는소리를방해한다면큰혼란을야기할수있다. 따라서 3초이후에는이들멀티미디어콘텐츠가자동적으로만들어내는소리가멈추어야시각장애인은이페이지를사용할수있다. - 12 -
원칙 2. 운용의용이성 (Operable): 사용자인터페이스구성요소는조작가능하고내 비게이션할수있어야한다. 운용의용이성은사용자가장애유무등에관계없이웹사이트에서제공하는모든기 능들을운용할수있게제공하는것을의미한다. 운용의용이성은키보드접근성, 충분한 시간제공, 광과민성발작예방, 쉬운내비게이션의 4 가지지침으로구성되어있다. < 표 3-3 > 운용의용이성관련지침및검사항목지침 (4개) 검사항목 (8개) 2.1.1( 키보드사용보장 ) 모든기능은키보드만으로도사용 2.1( 키보드접근성 ) 콘텐츠는키보할수있어야한다. 드로접근할수있어야한다. 2.1.2( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며시각적으로구별할수있어야한다. 2.2.1( 응답시간조절 ) 시간제한이있는콘텐츠는응답시간 2.2( 충분한시간제공 ) 콘텐츠를읽을조절할수있어야한다. 고사용하는데충분한시간을제공 2.2.2( 정지기능제공 ) 자동으로변경되는콘텐츠는움직임해야한다. 을제어할수있어야한다. 2.3( 광과민성발작예방 ) 광과민성 2.3.1( 깜빡임과번쩍임사용제한 ) 초당 3~50회주기로깜발작을일으킬수있는콘텐츠를제빡이거나번쩍이는콘텐츠를제공하지않아야한다. 공하지않아야한다. 2.4.1( 반복영역건너뛰기 ) 콘텐츠의반복되는영역은건너뛸수있어야한다. 2.4( 쉬운내비게이션 ) 콘텐츠는쉽 2.4.2( 제목제공 ) 페이지, 프레임, 콘텐츠블록에는적절한게내비게이션할수있어야한다. 제목을제공해야한다. 2.4.3( 적절한링크텍스트 ) 링크텍스트는용도나목적을이해할수있도록제공해야한다. 지침 2.1 ( 키보드접근성 ) 콘텐츠는키보드로접근할수있어야한다. 가. 용어설명 1) 키보드 (Keyboard): 사용자가텍스트를입력하기위하여사용하는입력장치를의미 한다. 여기에는키보드의자판입력을해독하기위하여사용되는소프트웨어도포 함된다. 예를들어, 키보드의형태를가지지않았지만기능적으로키보드를대신하 - 13 -
는입력장치 ( 예 : 노트북및개인휴대정보단말기 (PDA: Personal Digital Assistant) 등의터치패드, 음성입력장치등 ) 등도키보드로간주한다. 2) 위치지정도구 (Pointing device): 마우스나터치패드와같이컴퓨터화면의특정 지점을직접지정할수있는장치를의미한다. 3) 음성입력장치 : 음성으로컴퓨터를제어하거나텍스트를입력할수있도록구성된 시스템또는이러한시스템을구성하는데사용되는프로그램을의미한다. 4) 초점 (Focus): 웹페이지안에서프로그램에의해또는사용자의행위 ( 예 : 탭키를이용한이동 ) 에의해하나의요소 (Element) 가사용가능 (Enabled) 한상태로되었을때초점이그요소에있다고말한다. 대부분의웹브라우저에서는초점을받은요소를시각적으로다른요소와구분할수있게밑줄을보이게하거나, 또는테두리를씌우거나색을변경하기도한다. 나. 검사항목 2.1.1 ( 키보드사용보장 ) 모든기능은키보드만으로도사용할수있어야한다. 웹페이지에서제공하는모든기능을키보드만으로도사용할수있도록제공해야한다. 다만, 사용자의반응속도나지속성이중요한요소인붓질 (Painting), 헬리콥터나비행기등의훈련에사용되는시뮬레이션콘텐츠등과시각적인방법으로만접근이가능한지리정보콘텐츠, 가상현실콘텐츠등은예외로할수있다. 1) 키보드인터페이스와기능 : 콘텐츠의모든기능은키보드로사용이가능하여야한 다. 이경우, 해당기능을사용하는데필요한키보드의조작횟수의많고적음은고 려대상이아니다. 2) 예외사항 : 위치지정도구의커서궤적이중요한역할을하는콘텐츠 ( 붓질기능이필요한콘텐츠, 시뮬레이션콘텐츠, 지리정보콘텐츠, 가상현실콘텐츠등 ), 움직임측정센서 (Motion sensor) 를이용하는콘텐츠는이검사항목의예외로할수있다. 그러나이경우에도위치지정도구나움직임측정센서가필요한기능을제외한나머지사용자인터페이스는키보드만으로사용할수있어야한다. - 14 -
2.1.2 ( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며, 시각적으로구별할 수있어야한다. 웹페이지에서제공하는모든기능을키보드만으로사용하여운용할경우에도초점이 논리적인순서에따라이동하도록제공해야하며, 조작이불가능한상태가되거나갑작 스러운페이지의전환등이일어나지않아야한다. 또한저시력자, 지체장애인들이초점을받은콘텐츠를시각적으로인지할수있도록시각적으로표현하여야한다. 1) 초점이동순서 : 사용자가키보드를이용하여초점을이동하는경우이동순서가다르면사용자에게혼란을주기때문에초점이동순서는사용자가예측하는이동순서와일치하여야한다. 2) 논리적인순서 : 사용자가키보드를이용하여커서를이동할때, 제시되는콘텐츠내용의논리적인순서에따라진행하는것을의미한다. 예를들어, 제시되는콘텐츠내용이논리전개상 A B C 순으로전개되어야해당내용을적절히이해할수있다면, 화면상의배열은약간다를지라도 ( 가급적화면배열도일치시키는것이바람직함 ) 키보드를이용한커서이동순서도 A B C 순으로진행되어야한다. 3) 함정또는오류 : 웹콘텐츠는더이상키보드조작이불가능한상태로이동하여빠 져나올수없거나이전페이지로이동이불가능한상태가되어서는안된다. 4) 초점의시각화 : 특정영역 ( 컨트롤, 사용자입력등 ) 이위치지정도구 ( 마우스 ) 나키보드조작을통해초점을받았을때, 해당영역이초점을받았음을시각적으로인지할수있도록나타내주는방법을의미한다. 대표적인예로키보드조작을통해버튼이나링크가초점을받았을때초점을받았음을시각적으로알수있도록하기위해해당요소의주변에점선으로된테두리가표시되는것을들수있다. 위치지정도구에의한초점과키보드에의한초점의표시방법이다른것도허용한다. 다. 기대효과 1) 위치지정도구를사용할수없는시각장애인의경우, 키보드만으로웹콘텐츠나 웹사이트의기능을사용할수있다. - 15 -
2) 전통적인키보드를사용할수없는지체장애인의경우, 키보드대신음성입력장치 를이용하여웹콘텐츠를사용할수있다. 3) 화면낭독프로그램을이용하여웹콘텐츠에접근하는사용자의경우, 커서주변의상하좌우에위치한콘텐츠에대한정보를기억하지못하므로일정한순서로이동하지않으면커서주변의상황에대한정보를잃어버리기쉽다. 따라서웹콘텐츠는커서가논리적인순서 ( 일반적으로, 좌측상단에서우측하단방향으로 ) 에따라이동할수있도록구성해야한다. 4) 마우스나키보드조작을통해특정영역으로컨트롤을이동하였을경우에해당영 역이초점을받았음을시각적으로알려준다면약시, 노인, 지체장애인뿐만아니라 비장애인들도어느영역을활성화시킬수있는지쉽게인지할수있다. 지침 2.2 ( 충분한시간제공 ) 콘텐츠를읽고사용하는데충분한시간을제공해야한다. 가. 용어설명 1) 시간제한이있는콘텐츠 : 시간을통제할수없이실시간으로제공되는콘텐츠를 말한다. 2) 시간제한이있는콘텐츠로는다음과같은콘텐츠가있다. 2-1) 자동갱신되도록구성된콘텐츠 2-2) 몇초후에다른페이지로이동하도록구성된콘텐츠 2-3) 자동적으로스크롤 (Scroll) 되는콘텐츠 2-4) 짧은기간동안나타났다일정시간후에사라져버리는대화창 2-5) 일정시간동안사용하지않으면웹페이지에대한접근이강제로차단되거나 사용할수없게되는콘텐츠 나. 검사항목 - 16 -
2.2.1 ( 응답시간조절 ) 시간제한이있는콘텐츠는응답시간을조절할수있어야한 다. 웹콘텐츠제작시시간제한이있는콘텐츠는가급적제공하지않는것이바람직하 며, 보안등의사유로시간제한이반드시필요할경우에는이를회피할수있는수단을 제공해야한다. 1) 반응시간조절 : 웹콘텐츠에대해반응시간을지정한경우, 사용자가반응시간에제한없이웹콘텐츠를이용할수있도록하기위해반응시간이종료되기이전, 사용자가다음중한가지방법을선택하여조절할수있는기능을제공해야한다. 또한반응시간조절기능은충분한시간 ( 최소 20초이상 ) 을두고사전에알려주어야한다. 1-1) 시간제한을해제할수있어야한다. 1-2) 시간제한을연장할수있어야한다. 2) 예외사항 : 시간제한이있는온라인경매, 실시간게임등과같이반응시간의조절이원천적으로허용되지않는경우에는개별적인반응시간조절이불가능하다. 따라서이러한웹콘텐츠의경우에는본검사항목의적용을받지않는다. 다만, 이경우에도사용자에게시간제한이있다는것을미리알려주고, 종료되었을경우에도이를알려주어야한다. 2.2.2 ( 정지기능제공 ) 자동으로변경되는콘텐츠는움직임을제어할수있어야한다. 웹콘텐츠에서스크롤및자동갱신되는콘텐츠를장애인사용자가이용할수있도록 일시정지할수있는방법을제공해야한다. 1) 이동하거나스크롤되는콘텐츠 : 저시력자나지적장애인등은이동하거나스크롤되는콘텐츠를인지하기어려우므로, 웹콘텐츠는사용자가이동이나스크롤을일시정지시키거나, 지나간콘텐츠또는앞으로나타날콘텐츠의사용이가능하도록 앞으로이동, 뒤로이동, 정지 등의컨트롤을제공한다. - 17 -
다. 기대효과 1) 비장애인보다문서를읽고이해하는데더많은시간이필요한지적장애, 학습장 애등을지닌사용자도시간에관계없이콘텐츠를이용할수있게된다. 2) 배너 (Banner) 와같이빠르게변화하는콘텐츠를이용하기어려운지체장애인, 노인, 뇌병변장애인들도콘텐츠를이용할수있다. 3) 스크롤되는뉴스에서와같이이미지나간콘텐츠를손쉽게확인할수있는기능이 제공되므로콘텐츠의사용이편리하다. 지침 2.3. ( 광과민성발작예방 ) 광과민성발작을일으킬수있는콘텐츠를제공하지않 아야한다. 가. 용어설명 1) 광과민성증후 : 빛의깜빡거림에의해발작을일으키는증상을말한다. 나. 검사항목 2.3.1 ( 깜빡임과번쩍임사용제한 ) 초당 3~50 회주기로깜빡이거나번쩍이는콘텐 츠를제공하지않아야한다. 깜빡이거나번쩍이는콘텐츠로인해발작을일으키지않도록초당 3~50 회주기로깜 박이거나번쩍이는콘텐츠를제공하지않아야한다. 1) 번쩍이는 (Flashing) 콘텐츠 : 번쩍임이초당 3~50회 ( 텔레비전방송을위해영국등의주요국가에서사용하는기준으로, 기준화면해상도는 1024 768임 ) 인콘텐츠를지칭하는것으로, 이러한콘텐츠를웹페이지에포함시키지않아야하는이유는광과민성발작증세가있는사용자도안심하고웹콘텐츠에접근할수있기때문이다. - 18 -
2) 깜빡이는콘텐츠 (Blinking contents): 장식목적으로깜빡거리게만든콘텐츠는그깜빡임을정지시킬수있어야한다. 만일웹브라우저의자체기능또는운영체제가제공하는기능을통하여깜빡임을정지시킬수있는경우에는이검사항목을적용할필요가없다. 3) 번쩍이는시간제한 : 웹페이지에포함되는콘텐츠의번쩍이는시간을 3 초미만으 로제한하면지속적인번쩍임으로인한사용자 ( 예 : 광과민성증후환자, 학습장애 자, 저시력자등 ) 의발작을예방하면서도콘텐츠의중요성을알릴수있다. 다. 기대효과 1) 광과민성발작증상이있는사람들은빛이번쩍거리는것에민감하게반응하여발작을일으킬수있다. 특히 3Hz에서 50Hz 사이의번쩍거림은발작을일으키는원인이되며, 20Hz 부근이발작을가장잘일으키는주파수로알려져있다. 따라서본검사항목을준수한콘텐츠는광과민성발작증세가있는사용자도접근가능하다. 2) 정신이산만한사람의경우, 지속적으로번쩍거림이있는콘텐츠를집중하여응시 하기가매우어렵다. 따라서본검사항목을만족하는콘텐츠는정신이산만한사 람도접근이가능하다. 지침 2.4 ( 쉬운내비게이션 ) 콘텐츠는쉽게내비게이션할수있어야한다. 가. 용어설명 1) 반복영역 (Repetitive block): 메뉴, 링크모음과같이동일한내용이같은위치에여러웹페이지에걸쳐나타나는영역을의미한다. 글로벌내비게이션 (Global navigation) 및로컬내비게이션 (Local navigation) 등도반복영역의하나이다. 모든페이지에걸쳐존재하는광고영역등도그내용의변화에관계없이반복되는영역에포함된다. 2) 건너뛰기링크 : 반복영역의내비게이션을생략하고웹페이지의다른영역 ( 예 : 뉴 스포털의헤드라인, 핵심콘텐츠가있는곳등 ) 으로이동할수있는버튼, 텍스트 - 19 -
링크를의미한다. 3) 적절한제목 (Appropriate title): 콘텐츠의내용을쉽게파악할수있도록해당주제 나목적을간단명료하게나타낼수있는명칭을의미한다. 4) 콘텐츠블록 (Content blocks): 특정내용에관해설명하거나기술하고있는정보의 묶음혹은영역을의미하며, 일반적으로하나의주제를설명혹은기술하고있는 장 (chapter) 이나절 (section) 등을들수있다. 나. 검사항목 2.4.1 ( 반복영역건너뛰기 ) 콘텐츠의반복되는영역은건너뛸수있어야한다. 화면낭독프로그램을이용하는사람들은반복되는메뉴등을페이지마다다시듣게된 다. 이러한불편을막기위해, 메뉴등과같이페이지마다공통되며반복되는영역을사 용자가바로건너뛰어핵심콘텐츠로이동할수있도록건너뛰는방법을제공해야한다. 1) 반복되는영역을건너뛸수있는방법 : 웹페이지가제공하는핵심콘텐츠가위치한곳으로직접이동하는건너뛰기링크를제공한다. 건너뛰기링크는시각장애인에게반드시필요한기능이다. 이기능은지체장애인에게도효과적인웹콘텐츠운용을위해필요한기능이므로, 메뉴건너뛰기링크는화면에보이도록구현하는것이좋다. 2) 여러개의건너뛰기링크제공 : 건너뛰기기능은웹페이지의가장앞에위치해야한다. 여러개의건너뛰기링크를제공하는경우에는핵심콘텐츠로이동하기위한건너뛰기링크를가장앞에위치시킨다. 만일배경음바로가기링크 (1.3.4참조) 가있는경우에는그다음에위치시킨다. 2.4.2 ( 제목제공 ) 페이지, 프레임, 콘텐츠블록에는적절한제목을제공해야한다. 페이지, 프레임, 콘텐츠블록에적절한제목을제공하여사용자가웹콘텐츠를운용하기 쉽게도와주어야한다. 제목은간단명료해야하며, 해당페이지, 프레임, 콘텐츠블록을 - 20 -
유추할수있도록제공해야한다. 1) 웹페이지제목제공 : 모든웹페이지가해당내용을간단명료하게기술한제목을포함하고있을경우여러개의웹페이지가열려있더라도사용자 ( 예 : 시각장애인, 인지장애인, 심각한지체장애인등 ) 는해당제목을통해초점이주어진웹페이지가어떠한내용을담고있는지를알수있기때문에, 모든웹페이지에는해당페이지를간단명료하게설명한제목을제공해야한다. 또한, 웹페이지제목은서로배타적이어야한다. 2) 프레임제목제공 : 모든웹페이지의프레임에는각프레임을설명하는간단명료한제목을제공해야한다. 모든프레임에간단명료한제목이부여되면사용자 ( 예 : 시각장애인, 인지장애인, 심각한지체장애인등 ) 는해당프레임의제목을통해초점이주어진프레임이어떤프레임인지를쉽게알수있다. 아무런내용이없는프레임에는 빈프레임 등으로제목을제공한다. 3) 콘텐츠블록 : 콘텐츠블록에는적절한제목을제공해야한다. 콘텐츠블록에제목을 제공하는경우에 <h1>, <h2> 태그를부여하면제목과본문을구분할수있으며, 제목간이동이가능하다. 4) 특수기호사용제한 : 웹페이지, 프레임또는콘텐츠블록의제목은문장의하나로 간주하여불필요한특수기호를반복하여사용하지않는다. 2.4.3 ( 적절한링크텍스트 ) 링크텍스트는용도나목적을이해할수있도록제공해 야한다. 링크의용도나목적지를명확하게이해할수있도록링크텍스트를제공해야한다. 1) 맥락과무관한링크 : 링크의용도나목적지를주변의맥락과관계없이이해할수있도록링크텍스트를제공해야한다. 예를들어, 여기 나 더보기 등과같은링크텍스트를제공하는것보다 한국정보화진흥원홈페이지로이동 혹은 공지사항더보기 와같이해당링크를클릭했을때목적지에관한정보나어떤내용을볼수있는지를보다구체적으로제시해야한다. 또한모든링크정보는사용자가쉽게이해할수있도록간단명료하게제공해야한다. - 21 -
2) 이미지링크 : 아이콘 (Icon) 으로링크텍스트를대신하여표현한경우 ( 예를들어, 홈페이지로이동하기위한링크를링크텍스트가아닌집모양의아이콘이미지로대신하고해당아이콘에홈페이지로의링크를걸어놓은경우 ), 해당아이콘은그자체의이미지만으로도링크의용도나목적지, 내용등을충분히이해할수있도록직관적이고명료해야한다. 아이콘에대체텍스트를제공하는방법은검사항목 1.1.1( 적절한대체텍스트제공 ) 을참고하라. 3) 적절한링크제공방법은다음과같다. 3-1) 텍스트중에서 URL 에관한정보를제공하는부분을링크로연결해야한다. 3-2) 텍스트중에서 URL 에관한정보를제공하는부분의바로뒷부분을링크로연결 해야한다. 3-3) URL 에관한정보를제공하는텍스트와 URL 로이동하는아이콘을하나의링크 로구성하는것이바람직하다. 이경우, 아이콘이미지에제공해야하는대체 텍스트는빈글자로구성해야한다. 3-4) 동일한제품을서로다른관점에서설명한페이지로이동하는링크들은링크 텍스트의제목을서로다르게구성하는것이바람직하다. 다. 기대효과 1) 웹페이지의상단이나좌측프레임에링크목록이반복되는영역이위치하고있으면화면낭독프로그램은이링크목록을순서대로읽어준후에야필요한부분을읽어주므로매우불편하다. 그러나이웹페이지의첫부분에콘텐츠의핵심부분으로이동할수있는건너뛰기링크를제공하면필요한위치로빠르게이동할수있다. 2) 하나의긴문장으로구성된콘텐츠의경우, 사용자가원하는부분을찾기위해서는처음부터모두읽어야한다. 따라서색인이없는긴문장의경우에콘텐츠의특정영역으로이동하는것이매우불편하다. 그러나문장의시작부분에색인을제공하면필요한부분으로직접이동할수있어보다쉽고빠르게내비게이션할수있다. 장, 절, 소절의제목을 h1, h2, h3 등의태그를이용하여구성하면이들태그간을빠르게이동할수있다 - 22 -
3) 여러페이지로구성된웹사이트의경우, 사이트맵을제공하면사용자는이를이 용하여필요한정보가위치한페이지로보다쉽고빠르게이동할수있다. 4) 모든웹페이지에서로다른제목을제공하면동시에여러개의웹페이지가열려있더라도사용자 ( 예 : 시각장애인, 인지장애인, 지체장애인등 ) 는해당웹페이지의제목을통해초점을받은웹페이지가무엇에관한페이지인지를쉽게파악할수있어열려있는웹페이지간을편리하게이동할수있다. 이를위해, 각페이지는해당페이지만의유일하고배타적인 (Unique and Exclusive) 페이지제목을가져야한다. 5) 웹페이지를구성하는프레임에각프레임을설명하는제목을제공하면사용자 ( 예 : 시각장애인, 인지장애인, 심각한지체장애인등 ) 는초점을받은프레임을프레임제목을통해파악할수있으므로웹페이지의프레임을매우편리하게이동할수있다. 이를위해, 페이지의경우와마찬가지로, 동일한페이지에있는프레임은해당프레임만의유일하고배타적인프레임제목을가져야한다. 6) 텍스트에링크를연결할때, 여기를클릭하세요. 와같이애매모호한표현을사용하여링크를연결한경우, 시각장애인이나인지장애인들뿐만아니라비장애인들도클릭했을때어떤일이일어날것이며무슨내용이제시될것인지를알수없다. 그러나링크텍스트가직관적으로주어졌을경우, 장애인들은해당링크를클릭했을때무슨내용이제시될것인지를분명하게알수있다. 7) 링크텍스트를직관적이고의미있게구성하면사용자가링크의용도나목적지를명확히알수있다. 이경우, 지체장애인은원하지않는링크를방문하기위해키보드를여러차례입력하는수고를덜수있으며, 지적장애인은원하지않는콘텐츠로이동하거나이동해오는혼란을겪지않는다. 또한시각장애인은링크의제목만듣고도링크의용도나목적지를알수있다. - 23 -
원칙 3. 이해의용이성 (Understandable): 콘텐츠는이해할수있어야한다. 이해의용이성은사용자가장애유무등에관계없이웹사이트에서제공하는콘텐츠를 이해할수있도록제공하는것을의미한다. 이해의용이성은가독성, 예측가능성, 콘텐 츠의논리성, 입력도움의 4 가지지침으로구성되어있다. < 표 3-4 > 이해의용이성관련지침및검사항목지침 (4개) 검사항목 (6개) 3.1( 가독성 ) 콘텐츠는읽고이해하 3.1.1( 기본언어표시 ) 주로사용하는언어를명시해야한기쉬워야한다. 다. 3.2( 예측가능성 ) 콘텐츠의기능과 3.2.1( 사용자요구에따른실행 ) 사용자가의도하지않은기실행결과는예측가능해야한다. 능 ( 새창, 초점변화등 ) 은실행되지않아야한다. 3.3.1( 콘텐츠의선형화 ) 콘텐츠는논리적인순서로제공해야 3.3( 콘텐츠의논리성 ) 콘텐츠는논한다. 리적으로구성해야한다. 3.3.2( 표의구성 ) 표는이해하기쉽게구성해야한다. 3.4.1( 레이블제공 ) 입력서식에는대응하는레이블을제공 3.4( 입력도움 ) 입력오류를방지하해야한다. 거나정정할수있어야한다. 3.4.2( 오류정정 ) 입력오류를정정할수있는방법을제공해야한다. 지침 3.1 ( 가독성 ) 콘텐츠는읽고이해하기쉬워야한다. 가. 용어설명 : 없음 나. 검사항목 3.1.1 ( 기본언어표시 ) 주로사용하는언어를명시해야한다. 1) 웹페이지의언어명시 : 웹브라우저는웹페이지를구성하는텍스트콘텐츠의언 어정보를바탕으로텍스트콘텐츠를화면에표시하거나보조기기로제공한다. 화 - 24 -
면낭독프로그램을사용하는경우, 텍스트콘텐츠의언어정보를화면낭독프로 그램으로제공하여정확한발음이가능하도록화면낭독프로그램을제어하기도한 다. 따라서웹페이지를구성하는기본언어는정확히명시해야한다. 다. 기대효과 1) 화면낭독프로그램과같이텍스트를음성으로전환 (TTS: Text to Speech) 하는보조기술이나텍스트를점자로번역하는점역프로그램은콘텐츠를구성하는기본언어를인식하여자동적으로음성을변환하거나해당언어에적합한점역을할수있는편리함이있다. 지침 3.2 ( 예측가능성 ) 콘텐츠의기능과실행결과는예측가능해야한다. 가. 용어설명 1) 온라인서식 (Online form): 온라인서식은사용자의입력을통해값을수정하여전 달할수있는여러가지컨트롤 ( 예 : 텍스트입력상자, 드롭다운선택메뉴, 라디오 선택메뉴, 누르는버튼등 ) 과그것의레이블을말한다. 2) 마우스오버 (Mouseover): 웹페이지안의어떤요소에마우스포인터를올려놓았지 만아직마우스버튼을누르지않아활성화되지않은상태를지칭한다. 펜입력장 치와같은특정한위치지정도구에서는이러한상태를지원하지않는다. 3) 마우스클릭 : 마우스포인터를특정객체나요소를가리킨다음마우스의버튼을 누르는행위를뜻한다. 마우스클릭이벤트가발생하면보통은해당객체가활성화 (Activate) 되며다음동작이나기능을실행하는맥락의변화가일어난다. 4) 새창, 팝업창 : 새로운페이지를보여주기위해현재의창이아닌별도의창또는탭으로열리는경우, 이를새창또는팝업창이라고부른다. 단, 스크립트언어의고유한기능을이용해생성되는경고 (Alert), 확인 (Confirm), 입력프롬프트 (Prompt) 등의메시지대화상자는새창이나팝업창의범주에포함되지않는다. 5) 레이어팝업 (Layer popup): 대부분의최신브라우저에서는새창과팝업창이무분별하게생성되어사용자에게불편을주거나보안의위협을가하는것을막기위해팝업창차단기능을제공하고있다. 그러나일부웹페이지제작자가이것을피하기위해시각적으로팝업창과같은효과를내도록같은페이지내에서기존콘텐 - 25 -
츠를가리고그위의새로운층에팝업창처럼보이는콘텐츠영역을보이도록한 경우, 이를통상적으로레이어팝업이라고부른다. 6) 드롭다운메뉴 (Drop-down menu): 여러개의항목중하나를선택하기위해목록을다나열하지않고첫번째항목만보이다가사용자가메뉴확장버튼을활성화시키면나머지목록의전부또는일부가아래로펼쳐져나타나는방식의온라인입력서식컨트롤을드롭다운메뉴또는드롭다운목록이라한다. 하이퍼텍스트생성언어 (HTML: HyperText Markup Language) 과같은마크업언어나플래시와같은플러그인방식의응용프로그램에서는드롭다운메뉴를표시하기위해내장된컨트롤을제공한다. 7) 풀다운메뉴 (Pull-down menu): 일반적으로가로로늘어진메뉴바 (Menu bar) 에서특정항목을선택 ( 마우스오버, 키보드를이용한초점, 마우스클릭이나엔터키를이용한활성화에의해선택이이루어질수있음 ) 하면하위메뉴항목들이선택한항목의아래쪽으로펼쳐져나타나는방식의메뉴를말한다. 나. 검사항목 3.2.1 ( 사용자요구에따른실행 ) 사용자가의도하지않은기능 ( 새창, 초점변화등 ) 은실행되지않아야한다. 컨트롤이나사용자입력은초점을받았을때에의도하지않는기능이자동적으로실행되지않도록콘텐츠를개발해야한다. 사용자가마우스로클릭하거나키보드를이용하여입력한후기능이실행되어야하며, 사용자가예측할수없는상황에서정보를제공하지않아야한다. 특히사용자가인지하지못한상황에서새창, 팝업창등을제공하지않아야한다. 1) 초점 (Focus) 에따른변화 : 웹콘텐츠를구성하는컨트롤이초점을받았을경우, 사용자가의도하지않은기능이실행되지않아야한다. 단, 기능의실행이아니라초점을받은요소의색깔이반전되거나테두리가생기는것과같은시각적인변화, 또는사용자제어가이동하지않은상태에서나타나는추가정보등은초점변화에따른기능의실행으로간주하지않는다. 잘못된예는다음과같다. 1-1) 온라인서식이자동적으로제출됨 1-2) 새창이열림 1-3) 드롭다운메뉴나풀다운메뉴를사용하는경우에해당메뉴가실행됨 - 26 -
1-4) 사용자제어가다른컨트롤로이동하거나사라지거나예측할수없음 2) 입력에따른변화 : 사용자가선택할수있는컨트롤 ( 예 : 콤보박스, 라디오박스, 체크박스등 ) 과같이어떤항목을선택하는경우, 특정항목을선택 ( 초점을받음 ) 하는것으로해당항목이의미하는기능이실행되지않아야한다. 실제로해당기능이실행되는것은사용자선택컨트롤과함께제공되는실행버튼을클릭하거나활성화하였을때비로소실행되어야한다. 3) 새창 / 팝업창 / 레이어팝업 : 사용자가예측할수없는상황에서새창또는팝업창이열리고이를통해정보나기능을전달하면안된다. 레이어팝업이시각적으로는맨앞이지만키보드로접근하는경우맨뒤인경우가있기때문에, 사용자가예측할수없는상황에서레이어팝업창으로정보나기능을전달해서는안된다. 4) 새창 / 팝업창 / 레이어팝업의닫음 : 사용자가열려있거나화면에나타난새창 / 팝업창 / 레이어팝업을닫거나종료하도록버튼을클릭하거나활성화시켰을경우, 해당창또는팝업등이종료되어야한다. 사용자가화면에나타난새창 / 팝업창 / 레이어팝업을닫거나종료하도록요구하였음에도불구하고해당창또는팝업등이종료되지않으면사용자는매우당황하게된다. 특히레이어팝업의경우에이러한혼란이가중될수있다. 다. 기대효과 1) 시각장애, 지적장애그리고지체장애가있는사람들도초점및문맥의변화를 이해할수있게된다. 2) 시력이전혀없는상태인전맹 (Achromatopsia) 이나저시력자는새창이갑자기뜨는것과같이문맥의변화가발생하는것을인지하기어렵다. 새창열기가불가피하게필요한경우, 사용자에게미리새창열림을경고하여뒤로가기버튼이더이상예상처럼동작하지않는다는사실을알려주면혼란을줄일수있다. 지침 3.3 ( 콘텐츠의논리성 ) 콘텐츠는논리적으로구성해야한다. 가. 용어설명 1) 배치용테이블 (Layout table): 실제표형식의자료를담고, 제목행과제목열이있 - 27 -
는데이터용테이블 (Data table) 과는달리, 콘텐츠블록을한페이지안에서원하는 곳에원하는크기로배치하고다른블록과구분하기위해사용한테이블을말한다. 2) 스타일시트 (Style sheet): 문서의표현형태를규정하는일련의명령문을의미한다. 스타일시트는콘텐츠제공자가마련한것, 사용자가마련한것, 웹브라우저에내장된형태등의세가지가있다. 종속형시트 (CSS: Cascading Style Sheets) 레벨 2가스타일시트의대표적인규정이다. 3) 콘텐츠의선형화 기본구조 : 웹페이지에있는콘텐츠는 2차원공간에상하좌우로배치되어있으며, 시각적으로원하는곳을바로찾아가거나원하는기능을바로수행할수있다. 콘텐츠를순서대로나열한것을선형화된콘텐츠라고한다. 비시각적음성브라우저나화면낭독프로그램과같은보조기기에서는선형화된방식으로콘텐츠에접근하기때문에선형화된콘텐츠의순서는논리적이어야한다. 시각적인브라우저에서는스타일시트를제거하고테이블을제거하여테이블안의요소를순서대로펼쳐놓음으로써선형화된콘텐츠를얻을수있다. 나. 검사항목 3.3.1 ( 콘텐츠의선형화 ) 콘텐츠는논리적인순서로제공해야한다. 콘텐츠는보조기기등을통해서도논리적인순서로이해할수있도록제공해야한다. 1) 콘텐츠의선형화 : 웹페이지를구성하는콘텐츠는선형화하여순서대로나열하였을 경우에도그내용을논리적으로이해할수있도록작성되어야한다. 2) 내용, 표현및기능 : 브라우저화면에표시되는콘텐츠의순서는웹페이지에수록된콘텐츠의나열순서와항상동일하지않다. 예를들어스타일시트를사용하면웹페이지를구성하는콘텐츠의순서를변경하지않고도화면에나타나는콘텐츠의순서를임의로변경할수있다. 따라서웹페이지를구성하는콘텐츠의나열순서는논리적으로이해할수있도록작성하고, 필요할경우에화면에표시되는순서를변경해서제공해야한다. 3.3.2 ( 표의구성 ) 표는이해하기쉽게구성해야한다. - 28 -
표를제공할경우, 시각장애인등도이해할수있도록표의이해를돕기위한내용및구조에대한정보를제공해야한다. 1) 표의구성 : 데이터를표로구성할경우, 표의내용, 구조등을이해할수있도록구성해야한다. 표에는그내용을요약한정보를제목또는요약으로제공하여표의내용을예측할수있도록한다. HTML의경우, CAPTION 요소를사용하여표의제목을제공한다. 2) 셀의구성 : 표의손쉬운내비게이션을위하여표의셀은제목 (<th>) 과내용 (<td>) 을 구분할수있는태그를이용해야한다. 다. 기대효과 1) 논리적으로구성된콘텐츠는인지, 언어, 학습장애가있는사용자들이콘텐츠를이 해하는데도움을준다. 또한화면확대프로그램을사용할때맥락을찾기어려운 시각장애인에게도매우유용하다. 2) 논리적으로구성된웹콘텐츠는스타일시트 (Style sheet) 를바꾸거나기능을제거 하더라도그내용을순서대로읽어문서의의미를이해하기가쉽다. 지침 3.4 ( 입력도움 ) 입력오류를방지하거나정정할수있어야한다. 가. 용어설명 1) 레이블 : 온라인서식에서사용되는각컨트롤 ( 예 : 텍스트입력상자, 라디오선택버튼, 체크상자, 드롭다운메뉴등 ) 의역할을설명해주는제목텍스트를레이블이라한다. 나. 검사항목 3.4.1 ( 레이블제공 ) 입력서식에는대응하는레이블을제공해야한다. 입력서식을사용할경우, 시각장애인등이해당서식을이해할수있도록레이블을 제공해야한다. 1) 레이블 : 온라인서식에서사용자가입력하는컨트롤의근처에어떤데이터를어떻 게입력해야하는지를알려주는레이블을컨트롤과대응하여제공해야한다. 레이 - 29 -
블을서식컨트롤과프로그램이인식할수있도록대응시키지않고단순히텍스트 로만제공할경우, 보조기기를통해서해당컨트롤의레이블을인식할수없다. 3.4.2 ( 오류정정 ) 입력오류를정정할수있는방법을제공해야한다. 입력서식작성시, 사용자의실수로잘못된오류가발생할경우이를정정할수있는 방법을제공해야한다. 1) 사용자입력오류 : 온라인서식에서오류가발생하는경우, 사용자에게오류가발생한위치와오류를유발하게된이유등에관한정보를알려주어야한다. 예를들어, 이름, 주소, 전화번호, 이메일주소를필수적으로입력하도록구성한온라인서식에서일부항목을기입하지않고제출하였을경우, 해당항목의입력이누락되었음과누락된내용을함께알려주어야한다. 시스템적인오류는해당되지않는다. 다. 기대효과 1) 레이블을서식컨트롤가까이에프로그램이인식할수있도록대응시키면시각장 애인에게해당컨트롤이어떤용도로사용되는지를알려줄수있으므로잘못된데 이터의입력을방지할수있다. 2) 입력오류를수정할수있는방법에대한정보를텍스트로자세하게제공하는것은학습장애가있는사용자들이서식을성공적으로작성할수있도록도와준다. 오류가있는곳에만오류표시를하면전맹이나저시력자는오류가난곳에도달하기전까지는어디에오류가있는지알기어렵지만, 오류의내용을먼저텍스트로설명해주거나, 프로그램을통해오류가난위치에도달하도록하고, 오류의내용을설명해주면입력오류를더쉽게정정할수있다. 3) 실수로인해빚어지는심각한결과또는과실을피하기위해오류정정에필요한정 보나수단을제공하는것은실수가능성이높은대부분의장애인들에게도움을준다. - 30 -
원칙 4. 견고성 (Robust): 웹콘텐츠는미래의기술로도접근할수있도록견고하게만 들어야한다. 견고성은사용자가기술에관계없이웹사이트에서제공하는콘텐츠를이용할수있도 록제공하는것을의미한다. 견고성은문법준수, 웹애플리케이션접근성의 2 가지지침 으로구성되어있다. < 표 3-5 > 견고성관련지침및검사항목지침 (2개) 검사항목 (2개) 4.1( 문법준수 ) 웹콘텐츠는마크업 4.1.1( 마크업오류방지 ) 마크업언어의요소는열고닫음, 언어의문법을준수해야한다. 중첩관계및속성선언에오류가없어야한다. 4.2( 웹애플리케이션접근성 ) 웹애플 4.2.1( 웹애플리케이션접근성준수 ) 콘텐츠에포함된웹리케이션은접근성이있어야한다. 애플리케이션은접근성이있어야한다. 지침 4.1 ( 문법준수 ) 웹콘텐츠는마크업언어의문법을준수해야한다. 가. 용어설명 1) 마크업언어 (Markup language): 마크업언어는텍스트의각부분에의미를나타내 는정보를기술할수있게제작된언어를말한다. 확장성생성언어 (XML:Extensible Markup Language), HTML 등이이에해당한다. 나. 검사항목 4.1.1 ( 마크업오류방지 ) 마크업언어의요소는열고닫음, 중첩관계및속성선언에 오류가없어야한다. 마크업언어의요소를사용할경우, 해당마크업의문법을최대한준수하여제공하는 것이바람직하다. 특히태그의열고닫음, 중첩관계의오류가없도록제공해야한다. - 31 -
1) 태그의열고닫음 : 마크업언어로작성된콘텐츠는표준에서특별히정한경우를 제외하고는시작태그와끝나는태그가정의되어야한다. 2) 태그의중첩 : 열고닫는태그가나타내는요소는포함관계가어긋나지않아야한다. 또한마크업언어의속성을사용할경우, 해당마크업의문법을최대한준수하여 제공하는것이바람직하다. 3) 중복된속성 : 하나의요소안에서마크업언어의속성이중복되어선언될경우, 중 복된속성중하나는무시될수있으므로같은속성이중복선언되지않도록제공 해야한다. 4) id 속성값 : 하나의마크업문서에는같은 id 값을가진요소가존재해서는안되므 로, id 값을중복되지않도록사용해야한다. 다. 기대효과 1) 시작태그와끝나는태그가잘대응되고태그의포함관계가어긋나지않도록웹페 이지를구성하면, 웹브라우저나보조기술이작동을멈추지않고콘텐츠를명확히 전달할수있다. 2) 마크업언어에사용된속성이나중복이금지된속성값이중복된경우를없애일부 기능이누락되지않도록할수있다. 지침 4.2 ( 웹애플리케이션접근성 ) 웹애플리케이션은접근성이있어야한다. 가. 용어설명 1) 웹애플리케이션 : 웹애플리케이션 : 웹콘텐츠에포함되어특정한기능을수행하도록구성된소프트웨어의일종으로, 리치인터넷애플리케이션 (RIA: Rich Internet Application) 이라고도한다. 본표준이적용되는웹애플리케이션은웹콘텐츠에내장되어복수의웹브라우저에서공통적으로사용할수있는것으로한정한다. 따라서적용대상은플러그인 (Plug-in) 콘텐츠와자바스크립트로제작된프로그램등이다. - 32 -
2) 플러그인 (Plug-in): 웹콘텐츠내에삽입되는별도의프로그램을의미한다. 예를들 어, 플래시 (Flash), 플렉스 (Flex), 실버라이트 (Microsoft Silverlight) 등이이에해당 한다. 나. 검사항목 4.2.1 ( 웹애플리케이션접근성준수 ) 콘텐츠에포함된웹애플리케이션은접근성이 있어야한다. 웹콘텐츠에포함된부가애플리케이션또는웹페이지의기능을실행하는데필요한 웹애플리케이션은웹페이지를사용하거나접근하는것을방해하지않아야한다. 웹애 플리케이션은본지침에서설명한모든지침들을적용하여제작하여야한다. 1) 접근성 API 사용 : 웹애플리케이션은운영체제에서제공하는접근성 API 기능을사 용하여제작되어야한다. 그렇지않으면보조기기가웹애플리케이션의접근성기 능을지원하지못하는경우가발생할수있다. 2) 사용자 API 사용 : 웹애플리케이션이운영체제와호환되지않는접근성 API 기능을사용하는경우, 웹애플리케이션이제공하는기능의명칭, 역할, 상태에관한정보가보조기기에게제공될수있어야한다. 그렇지않으면보조기기가웹애플리케이션의접근성기능을지원할수없게된다. 3) 국내의보조기기로접근이불가능한웹애플리케이션은가능한한사용하지않는 것이좋으며, 꼭사용해야하는경우에는대체수단을제공해야한다. 다. 기대효과 1) 웹애플리케이션이접근성을제공할경우보조기기가웹애플리케이션과상호작용 이가능하므로보조기기사용자가웹애플리케이션의활용할수있다. 2) 웹애플리케이션의자체적인접근성을평가하는방법으로본지침을적용할수있 게되어접근성을준수하는, 특색있는웹애플리케이션의개발이가능할것이다. - 33 -
3) 새로운기술의경우에자체적인접근성제공방법이개발되지않았다고하더라도대 체수단을제공할수있다면적용이가능하다. - 34 -
부록 Ⅰ 한국형웹콘텐츠접근성지침 2.0 개요 원칙 (4 개 ) 지침 (13 개 ) 검사항목 (22 개 ) 인식의용이성 (Perceivable) 1.1( 대체텍스트 ) 텍스트아닌콘 1.1.1( 적절한대체텍스트제공 ) 텍스트아닌텐츠에는대체텍스트를제공해야콘텐츠는그의미나용도를이해할수있도록대한다. 체텍스트를제공해야한다. 1.2( 멀티미디어대체수단 ) 동영상, 음성등멀티미디어콘텐츠를이해 1.2.1( 자막제공 ) 멀티미디어콘텐츠에는자할수있도록대체수단을제공해막, 원고또는수화를제공해야한다. 야한다. 1.3( 명료성 ) 콘텐츠는명확하게전달되어야한다. 1.3.1( 색에무관한콘텐츠인식 ) 콘텐츠는색에관계없이인식될수있어야한다. 1.3.2( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없이인식될수있어야한다. 1.3.3( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠와배경간의명도대비는 4.5 대 1 이상이어야한다. 1.3.4( 배경음사용금지 ) 자동으로재생되는배경음을사용하지않아야한다. 운용의용이성 (Operable) 2.1( 키보드접근성 ) 콘텐츠는키보드로접근할수있어야한다. 2.1.1( 키보드사용보장 ) 모든기능은키보드만으로도사용할수있어야한다. 2.1.2( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며, 시각적으로구별할수있어야한다. 2.2.1( 응답시간조절 ) 시간제한이있는콘텐 2.2( 충분한시간제공 ) 콘텐츠를읽츠는응답시간을조절할수있어야한다. 고사용하는데충분한시간을제공해야한다. 2.2.2( 정지기능제공 ) 자동으로변경되는콘텐츠는움직임을제어할수있어야한다. 2.3( 광과민성발작예방 ) 광과민 2.3.1( 깜빡임과번쩍임사용제한 ) 초당성발작을일으킬수있는콘텐츠 3~50회의주기로깜빡이거나번쩍이는콘텐를제공하지않아야한다. 츠를제공하지않아야한다. 2.4( 쉬운내비게이션 ) 콘텐츠는쉽게내비게이션할수있어야한다. 2.4.1( 반복영역건너뛰기 ) 콘텐츠의반복되는영역은건너뛸수있어야한다. 2.4.2( 제목제공 ) 페이지, 프레임, 콘텐츠블록에는적절한제목을제공해야한다. 2.4.3( 적절한링크텍스트 ) 링크텍스트는용도나목적을이해할수있도록제공해야한다. - 35 -
원칙지침 (13개) 검사항목 (22개) 3.1( 가독성 ) 콘텐츠는읽고이해 3.1.1( 기본언어표시 ) 주로사용하는언어하기쉬워야한다. 를명시해야한다. 3.2( 예측가능성 ) 콘텐츠의기능 3.2.1( 사용자요구에따른실행 ) 사용자가과실행결과는예측가능해야의도하지않은기능 ( 새창, 초점변화등 ) 은한다. 실행되지않아야한다. 이해의 3.3.1( 콘텐츠의선형화 ) 콘텐츠는논리적인용이성순서로제공해야한다. 3.3( 콘텐츠의논리성 ) 콘텐츠는 (Understand 논리적으로구성해야한다. able) 3.3.2( 표의구성 ) 표는이해하기쉽게구성해야한다. 3.4.1( 레이블제공 ) 입력서식에는대응하는 3.4( 입력도움 ) 입력오류를방레이블을제공해야한다. 지하거나정정할수있어야한다. 3.4.2( 오류정정 ) 입력오류를정정할수있는방법을제공해야한다. 견고성 (Robust) 4.1( 문법준수 ) 웹콘텐츠는마 4.1.1( 마크업오류방지 ) 마크업언어의요크업언어의문법을준수해야한소는열고닫음, 중첩관계및속성선언에다. 오류가없어야한다. 4.2( 웹애플리케이션접근성 ) 웹 4.2.1( 웹애플리케이션접근성준수 ) 콘텐츠애플리케이션은접근성이있어야에포함된웹애플리케이션은접근성이있한다. 어야한다. - 36 -
부록 Ⅱ 한국형웹콘텐츠접근성지침 2.0 검사항목과 W3C WCAG 2.0 중요도 1 성공기준 원칙 (4 개 ) 한국형웹콘텐츠접근성 2.0 검사 항목 (22개) 1.1.1( 적절한대체텍스트제공 ) 텍스트아 W3C WCAG 2.0 중요도 1 성공기준 (25 개 ) 닌콘텐츠는그의미나용도를이해할수 1.1.1 Non-text Contents 있도록대체텍스트를제공해야한다. 1.2.1 Audio-only and Video-only(Prerecorded) 1.2.1( 자막제공 ) 멀티미디어콘텐츠에는 1.2.2 Captions(Prerecorded) 자막, 원고또는수화를제공해야한다. 1.2.3 Audio Description or Media Alternative 인식의 1.3.1( 색에무관한콘텐츠인식 ) 콘텐츠는 1.3.1 Info and relationships 용이성색에관계없이인식될수있어야한다. 1.4.1 Use of Color (Perceivable) 1.3.2( 명확한지시사항제공 ) 지시사항 운용의 용이성 (Operable) 은모양, 크기, 위치, 방향, 색, 소리등 1.3.3 Sensory Characteristics 에관계없이인식될수있어야한다. 1.3.3( 텍스트콘텐츠의명도대비 ) 텍스트 콘텐츠와배경간의명도대비는 4.5대 1 1.4.3 Contrast( 중요도 2 항목 ) 이상이어야한다. 1.3.4( 배경음사용금지 ) 자동으로재생 1.4.2 Audio Control 되는배경음을사용하지않아야한다. 2.1.1( 키보드사용보장 ) 모든기능은키 2.1.1 Keyboard 보드만으로도사용할수있어야한다. 2.1.2( 초점이동 ) 키보드에의한초점은논 2.1.2 No keyboard trap 리적으로이동해야하며, 시각적으로구 2.4.2 Focus Order 별할수있어야한다. 2.2.1( 응답시간조절 ) 시간제한이있는 콘텐츠는응답시간을조절할수있어야 2.2.1 Timing Adjustable 한다. 2.2.2( 정지기능제공 ) 자동으로변경되는 콘텐츠는움직임을제어할수있어야한 2.2.2 Pause, Stop, Hide 다. 2.3.1( 깜빡임과번쩍임사용제한 ) 초당 2.3.1 Three Flashes or Below 3~50회의주기로깜박이거나번쩍이는 Threshold 콘텐츠를제공하지않아야한다. 2.4.1( 반복영역건너뛰기 ) 콘텐츠의반복 2.4.1 Bypass Blocks 되는영역은건너뛸수있어야한다. 2.4.2( 제목제공 ) 페이지, 프레임, 콘텐츠블 2.4.2 Page Titled 록에는적절한제목을제공해야한다. 2.4.3( 적절한링크텍스트 ) 링크텍스트는 용도나목적을이해할수있도록제공해 2.4.4 Link Purpose 야한다. - 37 -
원칙 (4 개 ) 한국형웹콘텐츠접근성 2.0 검사 항목 (22개) 1.1.1( 적절한대체텍스트제공 ) 텍스트아 W3C WCAG 2.0 중요도 1 성공기준 (25 개 ) 닌콘텐츠는그의미나용도를이해할수 1.1.1 Non-text Contents 있도록대체텍스트를제공해야한다. 1.2.1 Audio-only and Video-only(Prerecorded) 1.2.1( 자막제공 ) 멀티미디어콘텐츠에는 1.2.2 Captions(Prerecorded) 자막, 원고또는수화를제공해야한다. 1.2.3 Audio Description or Media Alternative 인식의 1.3.1( 색에무관한콘텐츠인식 ) 콘텐츠는 1.3.1 Info and relationships 용이성색에관계없이인식될수있어야한다. 1.4.1 Use of Color (Perceivable) 1.3.2( 명확한지시사항제공 ) 지시사항 운용의 용이성 (Operable) 은모양, 크기, 위치, 방향, 색, 소리등 1.3.3 Sensory Characteristics 에관계없이인식될수있어야한다. 1.3.3( 텍스트콘텐츠의명도대비 ) 텍스트 콘텐츠와배경간의명도대비는 4.5대 1 1.4.3 Contrast( 중요도 2 항목 ) 이상이어야한다. 1.3.4( 배경음사용금지 ) 자동으로재생 1.4.2 Audio Control 되는배경음을사용하지않아야한다. 2.1.1( 키보드사용보장 ) 모든기능은키 2.1.1 Keyboard 보드만으로도사용할수있어야한다. 2.1.2( 초점이동 ) 키보드에의한초점은논 2.1.2 No keyboard trap 리적으로이동해야하며, 시각적으로구 2.4.2 Focus Order 별할수있어야한다. 2.2.1( 응답시간조절 ) 시간제한이있는 콘텐츠는응답시간을조절할수있어야 2.2.1 Timing Adjustable 한다. 2.2.2( 정지기능제공 ) 자동으로변경되는 콘텐츠는움직임을제어할수있어야한 2.2.2 Pause, Stop, Hide 다. 2.3.1( 깜빡임과번쩍임사용제한 ) 초당 2.3.1 Three Flashes or Below 3~50회의주기로깜박이거나번쩍이는 Threshold 콘텐츠를제공하지않아야한다. 2.4.1( 반복영역건너뛰기 ) 콘텐츠의반복 2.4.1 Bypass Blocks 되는영역은건너뛸수있어야한다. 2.4.2( 제목제공 ) 페이지, 프레임, 콘텐츠블 2.4.2 Page Titled 록에는적절한제목을제공해야한다. 2.4.3( 적절한링크텍스트 ) 링크텍스트는 용도나목적을이해할수있도록제공해 2.4.4 Link Purpose 야한다. 비교표 - 38 -
원칙 한국형웹콘텐츠접근성 2.0 검사 W3C WCAG 2.0 중요도 1 항목 (22개) 성공기준 (25개) 3.1.1( 기본언어표시 ) 주로사용하는언 3.1.1 Language of Page 어를명시해야한다. 3.2.1( 사용자요구에따른실행 ) 사용자 3.2.1 On Focus 가의도하지않은기능 ( 새창, 초점변화 3.2.2 On Input 등 ) 은실행되지않아야한다. 이해의 3.3.1( 콘텐츠의선형화 ) 콘텐츠는논리적용이성 1.3.2 Meaningful Sequence 인순서로제공해야한다. (Understand able) 3.3.2( 표의구성 ) 표는이해하기쉽게구성 1.3.1 Info and relationships 해야한다. 3.4.1( 레이블제공 ) 입력서식에는대응 3.3.2 Labels or Instructions 하는레이블을제공해야한다. 3.4.2( 오류정정 ) 입력오류를정정할수 3.3.1 Error Identification 있는방법을제공해야한다. 견고성 (Robust) 4.1.1( 마크업오류방지 ) 마크업언어의요소는열고닫음, 중첩관계및속성 4.1.1 Parsing 선언에오류가없어야한다. 4.2.1( 웹애플리케이션접근성준수 ) 콘텐츠에포함된웹애플리케이션은접근 4.1.2 Name, Role, Value 성이있어야한다. - 39 -
부록 Ⅲ 한국형웹콘텐츠접근성지침 2.0 검사항목 (22 개 ) 사례 본한국형웹콘텐츠접근성표준검사항목사례는 웹콘텐츠접근성표준 을기반으로웹개발자및운영자들이웹사이트구축 운영시웹접근성준수여부를쉽게평가할수있도록도움을주기위해제공하는것이다. 본표준에포함된총 22개검사항목에대한대표적인기술구현방법, 구축사례 ( 올바른적용, 잘못된적용 ) 를제공한다. 1 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나용도를이해할수 있도록대체텍스트를제공해야한다. 관련 : 원칙 1 인식의용이성, 지침 1.1 대체텍스트 기술구현방법 o 의미가있는이미지의경우, 의미나기능이동등한대체텍스트를제공해야한다. o 의미가없는이미지의경우 ( 예 : 글머리기호, 테두리, 장식용이미지, 공백이미지등 ), 대체텍스트를빈공간 (alt="") 으로제공해야한다. o 웹애플리케이션또는리치인터넷애플리케이션 (RIA: Rich Internet Application) 의경우, 해당저작도구에서제공하는접근성기능을활용하여대체텍스트를제공해야한다. - 실버라이트의경우, 키보드를사용해서접근이가능하게제작하면 UIA(UI Automation) 를통해서접근성기능을제공할수있다. - 플래시의경우, 액세스가능성패널 (Accessibility Panel) 에서이름 (Name) 이나설명 (Description) 으로제공해야한다. 구축사례 가. 올바른적용 : 이미지에적절한대체텍스트제공 - 40 -
가 -1) 로고등의미가있는이미지 < 올바른적용 ( ): 이미지에대한대체텍스트제공 > <img src="logo.png" alt=" 행정안전부 " > 가 -2) 이미지맵에대한대체텍스트제공 < 올바른적용 ( ): 이미지맵에대한대체텍스트제공 > <img alt="language" src="languge.gif" 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> 이미지맵의경우, 맵자체에대한대체텍스트 (alt="language") 도제공해야함 가 -3) 서식버튼이미지에대한대체텍스트제공 < 올바른적용 ( ): 서식전송 (submit) 버튼에대한대체텍스트제공 > <input type="image" src="btn write.gif" alt=" 실명확인및글쓰기 "> - 41 -
가 -4) 막대그래프이미지에대한대체텍스트제공 < 올바른적용 ( ): 막대그래프이미지에대한대체텍스트제공 > <img alt="2008년 10월 62,983( 억원 ) : 수도권지역좌수 1,751, 기타지역좌수 931, 2008년 11월 63,777( 억원 ) : 수도권지역좌수 1,745, 기타지역좌수 920, 2008년 12월 63,732( 억원 ) : 수도권지역좌수 1,724, 기타지역좌수 904" src="http://img1.kbstar.com/img/house/graph joiner 090123.gif"/> 가 -5) 플래시에서의대체텍스트제공방법 < 올바른적용 ( ): 플래시에서의대체텍스트제공 > < 플래시제공화면 > < 플래시액세스가능성패널이용 - 대체텍스트제공사례 > - 42 -
나. 잘못된적용 : 의미있는이미지에부적절한대체텍스트제공 나 -1) 의미있는이미지에무의미한대체텍스트 (alt="") 제공 < 잘못된적용 ( ): 의미있는이미지에잘못된대체텍스트제공 > <ol> <li><img src="text1.gif" alt=""></li> <li><img src="text2.gif" alt=""></li> <li><img src="text3.gif" alt=""></li> </ol> o 의미있는이미지임에도불구하고대체텍스트를무의미하게제공 (alt="") 하고있어 시각장애인등은올바른정보를인식할수없음 해결방안 ) 이미지에적절한대체텍스트 ( 예를들어 alt= 보다효율적이고편리한맞춤형 One-Stop 서비스조회 등 ) 를제공해야함 나 -2) 의미있는이미지에의미를파악하기어려운대체텍스트제공 < 잘못된적용 ( ): 의미있는이미지에잘못된대체텍스트제공 > - 43 -
o 조직의미션, 비전, 혁신목표등많은정보를포함하고있는이미지임에도불구하고 대체텍스트를단지 alt=" 이미지 " 라고만제공하고있어올바른정보를인식할수 없음 해결방안 ) 이미지의의미를모두파악할수있도록충분한설명이제공되는대체텍스 트를제공해야함 나 -3) 이미지업데이트시대체텍스트미수정 < 잘못된적용 ( ): 이미지업데이트시대체텍스트를수정하지않은사례 > o 참여광장 이라는이미지를 국민광장 이라고업데이트하였으나, 대체텍스트는기 존의 alt=" 참여광장 으로남아있음 - 44 -
해결방안 ) 이미지업데이트시대체텍스트도이미지의내용과동일하게제공해야함 나 -4) 의미가없는이미지에무의미한대체텍스트제공 < 잘못된적용 ( ): 무의미한대체텍스트제공 > o 윗줄, 옆줄등경계영역표시를위해이미지를사용한사례로, 불필요한대체텍스 트인 alt="bg top", alt="bg lefttop" 등을제공하고있어무의미한정보를얻게 되는문제가발생함 해결방안 ) 의미가없는이미지 ( 글머리기호, 테두리, 장식용이미지, 공백이미지등 ) 에 대한대체텍스트는공백 (alt="") 으로제공해야함 나 -5) 의미가있는이미지를제대로파악할수없는대체텍스트제공 < 잘못된적용 ( ): 의미를제대로파악할수없는대체텍스트제공 > o 이미지를통해반도체산업의수출액및생산규모에대한정보를제공하고있으나, 대체텍스트의경우에는 alt= 그래프 - 수출주도형반도체산업, alt= 그래프 - 생산규 - 45 -
모 등단순제목만을제공하여실제사용자가얻고싶은 2004 년과 2005 년의반도 체수출액, 세계생산규모, 국내생산규모등의정보를얻지못함 해결방안 ) 의미를동등하게인식할수있도록대체텍스트제공필요 (alt="2004 년반 도체수출액 2,538 억원, 수입액 265 억원, 2005 년반도체수출액 2,847 억원, 수입액 302 억원 ) 나 -6) 대체텍스트를 title 속성만으로제공한경우 < 잘못된적용 ( ): 대체텍스트를 title 속성만으로제공하는경우 > <img src= logo.gif" title=" 한국정보화진흥원로고 /> o 이미지에대한대체텍스트를 alt 로제공하지않고 title 만으로제공하는것은잘못 된방법임. 이미지에대한대체텍스트는반드시 alt 속성으로제공해야함 해결방안 ) 이미지에대한대체텍스트는반드시 alt 태그를이용해서제공해야함. 자 세한설명이필요하지않는경우에는제목 (Title) 속성을사용할필요가없음 2 ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고또는수화를제공해야한다. 관련 : 원칙 1 인식의용이성, 지침 1.2 멀티미디어대체수단 기술구현방법 o 동영상, 음성등멀티미디어콘텐츠제공시에는청각장애인등이해당콘텐츠를 이해할수있도록자막, 원고또는수화를제공해야한다. - 46 -
실시간방송이라도대체수단을제공하는것이원칙이나예외로인정할수있으며, 음성이없는음악 방송의경우에는예외로인정 구축사례 가. 올바른적용 : 동영상, 음성등에대한대체수단 ( 자막, 원고또는수화 ) 제공 가 -1) 동영상에대한동기화된자막과수화제공 < 올바른적용 ( ): 동영상, 음성등멀티미디어콘텐츠에대한동기화된자막과수화제공 > 가 -2) 동영상에대한원고제공 < 올바른적용 ( ): 동영상콘텐츠에대한원고제공 > 가 -3) 음성만제공 (Audio-only) 되는멀티미디어콘텐츠에대한대본제공 < 올바른적용 ( ): 음성만제공되는멀티미디어콘텐츠에대한대본제공 > - 47 -
o 음성만제공되는멀티미디어콘텐츠의경우에는음성을들을수없는사람이나환경 을대비하여반드시대본을제공해야함 나. 잘못된적용 : 동영상, 음성등에대체수단을제공하지않음 나 -1) 동영상에대한자막및원고미제공 < 잘못된적용 ( ): 동영상, 음성등멀티미디어콘텐츠에대한자막및원고미제공 > - 48 -
해결방안 ) 동영상, 음성등멀티미디어콘텐츠에대한대체수단 ( 자막, 원고또는 수화 ) 을제공해야함 나 -2) 동영상에대한요약자막제공 < 잘못된적용 ( ): 동영상, 음성등멀티미디어콘텐츠에대한요약정보만제공 > 나 -3) 영상만제공 (Video-only) 되는멀티미디어콘텐츠의인식불가능 < 잘못된적용 ( ): 영상에대한인식불가능사례 ( 화면해설제공필요 ) > - 49 -
해결방안 ) 영상에대한상황을인식할수있도록화면해설필요 ( 대한민국의사계절 의아름다움을표현한영상 ) 3 ( 색에무관한콘텐츠인식 ) 콘텐츠는색에관계없이인식될수있어야한다. 관련 : 원칙 1 인식의용이성, 지침 1.3 명료성 기술구현방법 o 콘텐츠가제공하는텍스트나그래픽정보는색상을제거하더라도그내용을인지할 수있어야한다. 흑백프린터및흑백모니터로출력할경우, 콘텐츠를구분하지못하면준수하지못한것으 로판단 구축사례 가. 올바른적용 : 정보를색이아닌패턴이나명암으로인식 < 올바른적용 ( ): 정보를색이아닌화살표등을통해인식 > 나. 잘못된적용 : 콘텐츠를색만으로구분 < 잘못된적용 ( ): 콘텐츠를색만으로구분할수있도록제공 > - 50 -
< 잘못된적용 ( ): 콘텐츠를색만으로구분할수있도록제공 > 해결방안 ) 색상을배제하고서라도구분할수있도록,,,,,,, 등으 로표현하여색상이외로도구분할수있도록제공해야함 < 잘못된적용 ( ): 회원가입등에서필수항목을색상만으로구분 > - 51 -
해결방안 ) 색상을배제하고서라도구분할수있도록, * 등을색상과함께제공하여색상이 외로도구분할수있도록제공해야함 - 52 -
4 ( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없 이인식될수있어야한다. 관련 : 원칙 1 인식의용이성, 지침 1.3 명료성 기술구현방법 o 모양, 크기, 위치, 방향, 색, 소리등에의존적이지않은명시적인설명이나안내문 을제공하여야한다. 구축사례 가. 잘못된적용 : 위치, 모양, 색에의존적인버튼설명 < 잘못된적용 ( ): 지시사항을위치 ( 왼쪽 ), 모양 ( 동그란 ), 색 ( 빨간 ) 만으로제공한사례 > o " 윈도우를닫으려면왼쪽상단에있는동그란빨간버튼을클릭 " 한다는지시문의경우구체적 인설명이부족하여이를이용하지못할우려가있음 - 53 -
해결방안 ) 지시사항에대한명시적인설명제공 : 왼쪽상단의첫번째동그란빨 간버튼인창닫기버튼을선택하시면, 윈도우를종료하실수있습니다. - 54 -
5 ( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠와배경간의명도대비는 4.5 대 1 이상이어 야한다. 관련 : 원칙 1 인식의용이성, 지침 1.3 명료성 기술구현방법 o 텍스트콘텐츠와배경간의명도대비를높게제공해야한다. 구축사례 가. 잘못된적용 : 명도대비가부족한텍스트콘텐츠사례 < 잘못된적용 ( ): 명도대비가부족한텍스트콘텐츠사례 > 해결방안 ) 텍스트콘텐츠와배경간의명도대비를높게제공해야한다. 흰색배경에글꼴의크기가 12px 이라면 #777777 색상을적용했을때 '4.48:1' 수준의명암대비가되어충분하지않다. 흰색배경이고글꼴크기가 12px 이라면적어도 #767676 색이적용되어야 '4.5:1' 이상의충분한명암대비가나온다. - 55 -
< 명도대비평가도구 > 1) Colour Contrast Check(snook.ca) http://www.snook.ca/technical/colour contrast/colour.html 2) Colour Contrast(Juicy Studio) http://juicystudio.com/services/luminositycontrastratio.php 3) Colour Contrast Analyzer(Colors on the web) http://www.colorsontheweb.com/colorcontrast.asp 4) Contrast Analyser(The Paciello Group) http://www.paciellogroup.com/resources/contrast-analyser.html Application. Windows/MAC - 56 -
6 ( 배경음사용금지 ) 자동으로재생되는배경음을사용하지않아야한다. 관련 : 원칙 1 인식의용이성, 지침 1.3 명료성 기술구현방법 o 콘텐츠는배경음에의해방해받지않아야한다. 구축사례 가. 잘못된적용 : 배경음을제공하는사례 < 잘못된적용 ( ): 배경음을제공한사례 > o 자동으로배경음악이생성되는사례로화면낭독프로그램이용자등에게불편을 줌 - 57 -
해결방안 ) 배경음이자동으로재생되지않고, 사용자의선택에의해배경음이제공되도록제공해야함. 화면낭독프로그램 (Screen reader) 을사용하는사람들은화면낭독프로그램에서의음성과배경음간의충돌로인해웹사이트이용에애로를느낌 - 58 -
7 ( 키보드사용보장 ) 모든기능은키보드만으로도사용할수있어야한다. 관련 : 원칙 2 운용의용이성, 지침 2.1 키보드접근성 기술구현방법 o 키보드만으로도웹콘텐츠가제공하는모든기능을수행할수있어야한다. 마우스이벤트와키보드이벤트를동일하게적용하여키보드 (Tab 키, Shift+Tab 키, 상, 하, 좌, 우방향키등 ) 로도마우스로사용하는기능과동일하게제공할수있게하는경우해당검사 항목을준수한것으로판단 구축사례 가. 올바른적용 : 키보드만으로모든기능이용가능 가 -1) 키보드만으로모든기능이이용가능한콘텐츠 o 기본적으로는장치 ( 마우스 ) 종속적인이벤트핸들러 (onmouseover, onmouseout 등 ) 를사용할때키보드장치독립적인이벤트핸들러 (onfocus, onblur 등 ) 를동일하게 제공하며, 키보드로작동되어야함 단, HTML 상에서이벤트핸들러가동일하다고반드시같은동작을하는것은아니기때문 에실제키보드로작동되는지여부를점검해야함 < 올바른적용 ( ): 장치독립적인이벤트핸들러제공 > <a href="/woopuns/woopuns main.jsp" onmouseover="swapimageon(1)" onfocus="swapimageon(1)" onmouseout="swapimageoff(1)" onblur="swapimageoff(1)"> - 59 -
나. 잘못된적용 : 마우스로만콘텐츠이용이가능하며, 키보드로는콘텐츠이용이불가능 나 -1) 키보드로모든콘텐츠를이용하지못하는콘텐츠 o 키보드로주요메뉴는이용하지못하고건너뛰며, 바로아이디와비밀번호로이동하 는경우 < 잘못된적용 ( ): 키보드로메뉴를이용할수없는사례 > < 잘못된적용 ( ): 키보드로처음부터끝까지이동하지못하는사례 > 해결방안 ) 키보드만으로모든기능을이용할수있도록제공해야함 나 -2) 키보드로초점이되지않는콘텐츠 o 링크가적용된이미지의테두리를없애기위해 onfocus="this.blur()" 를제공한경우키 보드로초점을이동할수없으므로, 이러한경우준수하지못한것으로판단 < 잘못된적용 ( ): 키보드로초첨이이동되지않는사례 > <input type="submit" onfocus="this.blur()"> <a onfocus="this.blur()" href="page.html"> 공지사항 </a> - 60 -
해결방안 ) 키보드만으로초점을이동할수있도록제공해야함 8 ( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며, 시각적으로구별할수 있어야한다. 관련 : 원칙 2 운용의용이성, 지침 2.1 키보드접근성 기술구현방법 o 키보드로조작할경우에도초점의이동순서가논리적으로제공되어야한다. o 초점을받은콘텐츠는시각적으로인지할수있도록제공해야한다. 구축사례 가. 올바른적용 : 키보드만으로초점순서가논리적으로제공된사례 가 -1) 키보드만으로초점순서가논리적으로제공된사례 o 초점순서 ( 아이디 비밀번호 로그인 ) 가키보드만으로도논리적으로제공해야함 < 올바른적용 ( ): 키보드만으로초점순서가논리적인경우 > - 61 -
가 -2) 초점을받은콘텐츠를시각적으로표현한경우 < 올바른적용 ( ): 초점을받은콘텐츠를시각적으로표현한경우 > 인터넷익스플로러브라우저의경우, 초점을받을때검은색테두리로시각적으로보여줌 < 올바른적용 ( ): 초점을받은콘텐츠를시각적으로표현한경우 (Flash) > 플래시콘텐츠중특정내용이초점을받을경우, 초점을받은콘텐츠를노란색테두리로시 각적으로보여줌 나. 잘못된적용 : 초점순서가논리적이지못한경우 나 -1) 키보드로초점순서가논리적이지못한경우 < 잘못된적용 ( ): 키보드로초점순서가논리적이지못한경우 > - 62 -
나 -21) 초점구분이불가능한경우 : 자바스크립트오용 < 잘못된적용 ( ): 초점구분이불가능한경우 > <a href="destination.html" onfocus="this.blur()"> 자바스크립트오용사례 </a> 나 -3 2) 초점구분이불가능한경우 : CSS outline 속성오용 < 잘못된적용 ( ): 초점구분이불가능한경우 > HTML <a href="destination.html">css outline 오용사례 </a> CSS a { outline:none; } 나 -3) 초점구분이불가능한경우 : CSS overflow 속성오용 < 잘못된적용 ( ): 초점구분이불가능한경우 > HTML <li><a href="destination.html">css overflow 속성오용사례 </a></li> - 63 -
CSS li { overflow:hidden; width:200px; height:30px;} a { display:inline-block; width:200px; height:30px;} 해결방안 ) 자바스크립트, CSS 등을활용하여초점을없애지말고, 브라우저나 플러그인등에서제공하는초점을그대로표현될수있도록제공해야함 < 웹애플리케이션의키보드초점이동구현방법 > o 실버라이트또는플래시콘텐츠에서는디자인과상관없이초점순서를조절할수있는 TabIndex 속성을사용해서논리적인순서로변경해야함 ( 아래그림은실버라이트의 TabIndex 설정패널의모습임 ). - 64 -
9 ( 응답시간조절 ) 시간제한이있는콘텐츠는응답시간을조절할수있어야한다. 관련 : 원칙 2 운용의용이성, 지침 2.2 충분한시간제공 기술구현방법 o 실시간이벤트나제한된시간에수행해야하는활동등은사용자가시간에구애받 지않고읽거나, 상호작용을하며응답할수있어야한다. 예외사항 : 경매, 실시간게임등과같이시간제한이필수적인콘텐츠 구축사례 가. 잘못된적용 : 시간제한에따라자동으로페이지가변경되어인식하기어려운경우 가 -1) 시간제한에따라자동으로페이지가변경되어해당내용을인식하기어려운경우 < 잘못된적용 ( ): 사용자의의도에상관없이시간제한 (3 초이후 ) 에따라 자동으로페이지가변경되는사례 > - 65 -
해결방안 ) 자동으로해당페이지로이동하기보다는시간제한을해제하고 쇼핑몰로 이동 이라는버튼이나링크를제공하는것이바람직함. 10 ( 정지기능제공 ) 자동으로변경되는콘텐츠는움직임을제어할수있어야한다. 관련 : 원칙 2 운용의용이성, 지침 2.2 충분한시간제공 기술구현방법 o 사용자가이동하거나, 깜빡이거나, 스크롤및자동갱신되는콘텐츠를일시정지할 수있는방법을제공해야한다. 구축사례 가. 올바른적용 : 시간제한이있는콘텐츠에대한시간제어기능제공 가 -1) 시간제한이있는콘텐츠에대한시간제어기능제공 o 자동으로갱신되는콘텐츠의경우, 사용자가이를제어하고콘텐츠를확인할수있 는수단을제공하면준수한것으로판단 ( 이전이나다음항목선택및정지기능을활 용할수있음 ) < 올바른적용 ( ): 사용자의제어기능제공 > - 66 -
나. 잘못된적용 : 사용자가시간제한을제어를할수없는콘텐츠 나 -1) 시간제한이있는콘텐츠에대한시간제어불가능 o 마우스를올리거나키보드초점을받으면정지하는경우에도사용자가이미지나간 콘텐츠를확인할수있는수단이없으면준수하지못한것으로판단 < 잘못된적용 ( ): 움직이는배너를제공하였으나제어수단이없는경우 > 해결방안 ) 움직이는배너를사용자가선택할수있도록앞으로가기 (forward), 뒤로가 기 (backward), 정지등의기능제공 - 67 -
11 ( 깜빡임과번쩍임사용제한 ) 초당 3~50 회주기로깜박이거나번쩍이는콘텐츠를 제공하지않아야한다. 관련 : 원칙 2 운용의용이성, 지침 2.3 광과민성발작예방 기술구현방법 o 깜빡이거나번쩍이는콘텐츠를제공할경우에는사전에경고하고깜빡임이나번쩍임을 회피할수있는수단을제공해야한다. 깜박이거나번쩍이는콘텐츠 : 주파수의범위가 3Hz 에서 50Hz 사이인콘텐츠 구축사례 가. 올바른적용 : 깜빡임이나번쩍임이전혀없는웹사이트 가 -1) 깜빡임이나번쩍임이없는웹사이트 ( 공공기관 ) < 올바른적용 ( ): 깜빡임이나번쩍임이전혀없는청와대웹사이트 - 68 -
- 69 -
가 -2) 깜빡임이나번쩍임이없는웹사이트 ( 방송국 ) < 올바른적용 ( ): 깜빡임이나번쩍임이전혀없는외국방송사웹사이트 > o 국내방송국사이트와는달리, 영국 BBC 방송국은깜빡이거나번쩍이는콘텐츠를전혀 사용하지않아, 광과민성발작증세를가진사람들도무리없이웹사이트를이용 할수있음 나. 잘못된적용 : 사전에경고하지않고깜빡이거나번쩍이는콘텐츠사용 나 -1) 깜빡임이거나번쩍이는이미지를사용한경우 < 잘못된적용 ( ): 사전에경고하지않고깜박이거나번쩍이는이미지를사용한사례 > - 70 -
해결방안 ) 깜박이거나번쩍이는콘텐츠를사용하지않는것이바람직하며, 깜빡이거나 번쩍이는콘텐츠를사용할경우에는사용자가이를회피할수있도록사전에경고해야함 나 -2) 깜빡임을사용한동영상사례 ( 플래시 ) < 잘못된적용 ( ): 깜빡임을사용한동영상사례 > 해결방안 ) 파란색고리와흰색고리가빠르게교차되며확대되어화면이깜빡이는효 과가발생하여광과민성발작을일으킬수있음 - 71 -
o 메인페이지에서깜빡임이있는콘텐츠를사용할경우에는사전에경고할수없음으로잘못적용된것으로판단 o 깜빡이는콘텐츠여부를자동평가도구 (Flickering and Photosensitive Epilepsy, http://tools.webaccessibile.org/test/check.aspxv) 등을활용하여판단 - 72 -
12 ( 반복영역건너뛰기 ) 콘텐츠의반복되는영역은건너뛸수있어야한다. 관련 : 원칙 2 운용의용이성, 지침 2.4 쉬운내비게이션 기술구현방법 o 반복적인내비게이션링크를뛰어넘어페이지의핵심부문으로직접이동할수있도록건너뛰기링크를제공해야한다. - 실버라이트로개발한콘텐츠에서는 Focus( ) 매소드 (Method) 를사용해서건너뛰기링크를제공할수있다. 구축사례 가. 올바른적용 : 건너뛰기링크제공 가 -1) 건너뛰기링크제공 o 반복적인내비게이션링크를뛰어넘을수있도록본문바로가기등을제공 ( 해당웹페이지의특성에따라여러개의건너뛰기링크를제공할수있으나, 최소한 1개 ( 본문바로가기 ) 는반드시제공해야함 ) < 올바른적용 ( ): 메뉴를건너뛸수있게건너뛰기링크를제공한경우 > < 올바른적용 ( ): 화면에보이지않지만키보드로접근하면펼쳐지는 메뉴건너뛰기링크예제 > - 73 -
HTML <div id="skiptocontent"><a href="#content"> 메뉴건너뛰기 </a></div> CSS #skiptocontent { position:relative; } #skiptocontent a { display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; text-align:center; color:#000; white-space:nowrap; } #skiptocontent a:focus, #skiptocontent a:active { height:auto; width:100%; padding:5px; margin-bottom:10px; } < 올바른적용 ( ): 메뉴를건너뛸수있게건너뛰기링크를화면상에제공한경우 > o 반복적인내비게이션링크 ( 본문바로가기등 ) 를숨기지않고화면상에제공하는것 이가장바람직함 - 74 -
o CSS를제거한경우또는 HTML 코드상에건너뛰기링크가있는지확인하며, 키보드로접근이가능한지, 건너뛰기링크를제공하면서, 건너뛰기링크가제대로작동할경우에준수한것으로판단 - 파이어폭스브라우저를사용하여, 보기 (View) > 문서스타일 (Page Style) > 스타일제거 (No Style) 에서 CSS를제거함 - 75 -
13 ( 제목제공 ) 페이지, 프레임, 콘텐츠블록에는적절한제목을제공해야한다. 관련 : 원칙 2 운용의용이성, 지침 2.4 쉬운내비게이션 기술구현방법 o 사용자가페이지를이해할수있도록페이지별로적절한제목 (<title>) 을제공해야한다. URL 을고정하기위해의미없는프레임을사용한경우, 포함페이지들의제목이적절하게제공되었 다하더라도실제사용자가보게되는브라우저화면에보이는페이지제목은고정되기때문에준 수하지못한것으로판단 구축사례 가. 올바른적용 : 페이지별간단명료한제목제공 가 -1) 각페이지를구분할수있는간단명료한제목제공 o 해당페이지를구분할수있도록청와대, 청와대뉴스, 대변인브리핑, 대통령일 정등으로제시함 < 올바른적용 ( ): 페이지를구분할수있는제목을제공함 > 가 -2) 각프레임을구분할수있는간단명료한제목제공 o 각프레임을구분할수있도록로그인프레임, 광고프레임, 일정프레임등을제 공해야함, 해당페이지의소스에서 <frame> 과 <iframe> 요소를찾아, title 속성을 이용하여프레임제목을제공하고있으면준수한것으로판단 - 76 -
- 프레임제목은프레임의내용을인식할수있도록짧고간결하게제목 (title) 을제공해야함 - 내용이없는빈프레임의경우에도 title=" 빈프레임 또는 title=" 내용없는프레임 등과같이제공해야함 < 올바른적용 ( ): 페이지를구분할수있는제목을제공함 > 프레임 1. 로그인 <iframe id="loginframe" name="loginframe" src="http://static.nid.naver.com/login2.nhn" title=" 로그인 " width="200" height="100" marginheight="0" marginwidth="0" scrolling="no" frameborder="0"> 로그인 : <a href="http://static.nid.naver.com/login2.nhn">http://static.nid.naver.com/login2.nhn</a></ifra me> 나. 잘못된적용 : 페이지별로동일한제목제공 나 -1) 페이지별로동일한제목제공 o 해당페이지를구분할수없도록모든페이지제목을 oo 기관을방문해주셔서감 사합니다. 라고제시한경우에는잘못된사례임 나 -2) 불필요한기호의과도한사용 o 페이지제목에특수기호를불필요하게많아사용하면화면낭독프로그램의오류를 발생하게하거나특수기호를읽어주지못하므로잘못된사례로판단 - 77 -
14 ( 적절한링크텍스트 ) 링크텍스트는용도나목적을이해할수있도록제공해야한다. 관련 : 원칙 2 운용의용이성, 지침 2.4 쉬운내비게이션 기술구현방법 o 링크텍스트만으로도링크의목적이나목표를이해할수있도록의미있는링크 텍스트를사용한다. 구축사례 가. 올바른적용 : 적절한링크텍스트제공 가 -1) 링크의용도나목적을이해할수있도록적절한링크텍스트제공 < 올바른적용 ( ): 적절한링크텍스트제공 > 보다자세한 <a href="guide.html"> 사이트이용방법 </a> 을확인하세요. 나. 잘못된적용 : 용도나목적을이해할수없는링크텍스트 나 -1) 용도나목적을이해할수없는링크텍스트 : 여기 등과같이명확하지 않는링크사용 < 잘못된적용 ( ): 링크텍스트만으로목적을알수없는경우 > 보다자세한내용을보시려면 <a href="here.html"> 여기 </a> 를클릭하세요. - 78 -
3.1.1( 기본언어표시 ) 주로사용하는언어를명시해야한다. 관련 : 원칙 3 이해의용이성, 지침 3.1 가독성 기술구현방법 o 웹페이지에서주로사용하는언어를명확히표시해야한다. 구축사례 가. 올바른적용 : 웹페이지에서주로사용하는언어를명확히표시한경우 가 -1) 웹페이지에서주로사용하는언어를명확히제공한경우 o HTML 4.01 표준에서의언어표시 ( 한국어 ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ko"> <head> o XHTML 1.0 표준에서의언어표시 ( 한국어 ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xml:lang="ko"> <head> < 언어별언어표시 (ISO 표준 ) > - 79 -
언어 언어코드 언어 언어코드 중국어 (Chinese) zh 일본어 (Japanese) ja 독일어 (German) de 한국어 (Korean) ko 영어 (English) en 러시아어 (Russian) ru 불어 (French) fr 스페인어 (Spanish) es 출처 : 공식언어코드 (ISO 630) 목록 http://www.loc.gov/standards/iso639-2/php/code list.php ( 사용자요구에따른실행 ) 사용자가의도하지않은기능 ( 새창, 초점변화등 ) 은 실행되지않아야한다. 관련 : 원칙 3 이해의용이성, 지침 3.2 예측가능성 기술구현방법 o 사용자의의도와관계없이초점을받았을때의도하지않는기능이실행되지않아 야한다. o 사용자의제어없이새창 ( 팝업창 ) 을제공하지않아야한다. 구축사례 가. 잘못된적용 : 초점변화에따른활성화 가 -1) 초점변화에따른활성화 < 잘못된적용 ( ): 초점변화에따른자동활성화 > - 80 -
o 닉네임입력박스를클릭하면로그인새창이자동으로발생함 가 -2) 사용자에게새창이열리는것을명시적으로알려줌 < 올바른적용 ( ): 사용자의입력으로발생하는팝업창을사전에알려줌 > 가 -3) 사용자에게새창이열리는것을알려줌 < 올바른적용 ( ): 사용자에게미리새창이제공되는것을알림 > - 81 -
가 -4) 선택상자등에이동버튼제공 o 사용자가명시적으로클릭이나엔터키를입력할때페이지가이동하도록이동버튼 을제공해야함 < 올바른적용 ( ): 이동버튼제공사례 > 나. 잘못된적용 : 사용자에게새창을미리알리지않는사이트 나 -1) 메인페이지에서팝업창을과도하게사용한경우 < 잘못된적용 ( ): 메인페이지에서팝업창을 3 개사용한경우 ( 좌 ), 팝업창의기능을하는레이어를사용하였으나키보드등으로접근이불가능 ( 우 ) > 해결방안 ) 메인페이지에서팝업창을사용하지않아야함 나 -2) 사용자의입력으로발생하는팝업창에대한경고없음 < 잘못된적용 ( ): 사용자의입력으로발생하는팝업창을사전에알려주지않음 > - 82 -
해결방안 ) title= 새창에서열림, 새창아이콘 등을사용하여사전에사용자에게알려야 함. 나 -3) 키보드를이용할때자동으로페이지가변경되는콘텐츠 o <select> 요소와 onchange 이벤트핸들러로페이지이동기능을만드는경우, 키보드로접근하면항목이변경될때마다페이지가이동할수있기때문에준수하지못한것으로판단 < 잘못된적용 ( ) : 키보드사용시페이지가자동으로이동하여하위항목을선택할수없는사례 > 해결방안 ) 키보드만으로도하위항목을선택할수있어야하며, 이동버튼을제공해야함 ( 콘텐츠의선형화 ) 콘텐츠는논리적인순서로제공해야한다. 관련 : 원칙 3 이해의용이성, 지침 3.3 콘텐츠의논리성 기술구현방법 o 콘텐츠의의미를제대로인식할수있도록콘텐츠를논리적인순서로구성해야한다. 구축사례 - 83 -
가. 잘못된적용 : 논리적인순서로구성되지않은사이트 o 콘텐츠를사용자가웹사이트이용할생각하는논리적인순서로구성하지않을경 우, 잘못된사례로판단 - 장애인등이사용하는정보통신보조기기도일반적인순서에따라콘텐츠를이해 할수있도록설계해야함 < 잘못된적용 ( ): 논리적인순서가잘못된사이트 > o 일반적인순서 (1 메뉴 2 왼쪽링크 3 본문 4 오른쪽링크 ) 가아니라 기계적으로접근하였을때 3 본문 이먼저나오는잘못된사례 > - 84 -
( 표의구성 ) 표는이해하기쉽게구성해야한다. 관련 : 원칙 3 이해의용이성, 지침 3.3 콘텐츠의논리성 기술구현방법 o 데이터테이블의내용을이해할수있도록제목 (summary 속성, <caption> 태그 ) 을 제공해야한다. o 데이터테이블은데이터셀별로대응되는모든헤더를확인할수있도록제목셀 (<th>) 과내용셀 (<td>) 을구분할수있는태그를제공해야한다. 구축사례 가. 올바른적용 : 테이블내용이해를위한정보제공 가 -1) 요약정보 (summary 속성 ), 제목 (<caption> 태그 ) 을제공하는테이블 < 올바른적용 ( ): 데이터테이블에제목제공 > <table class="data" summary="1 월부터 12 월까지의평균강우량을나타낸표, 장마기간이있는 6~7 월에강수량이가장많고, 11~2 월사이의강수량이가장낮다."> <caption> 한국의월별강수랑 </caption> <!- 하략 --> < 올바른적용 ( ): 데이터테이블에제목제공 > - 85 -
<table class="data" summary= 부산지역의 3 일간의일기예보로, 날씨와예상기온과강수확률정보를제공 "> <caption>3 일예보 </caption> 가 -2) 1 행이제목셀인테이블에서제목과내용구분 < 올바른적용 ( ): 1 행이제목셀인테이블 > <table> <thead> <tr> <th> 번호 </th> <th> 제목 </th> <th> 파일 </th> <th> 작성자 </th> <th> 작성일 </th> <th> 조회 </th> </tr> </thead> <tbody> <tr> <td>160</td> <td><a href="contentview.asp"> 웹접근성기술동향및향상방안세미나 : Accessibility의미래 (...</a></td> - 86 -
<td><a href="filename.pdf"><img src="/images/board/iconattach.gif" alt=" 첨부 " title="( 기조연설1) Inclusive Innovation - The key to creating accessible solutions.pdf"></a></td> <td> 관리자 </td> <td>2008-01-01</td> <td>254</td> </tr> <!-- 하략 --> ( 레이블제공 ) 입력서식에는대응하는레이블을제공해야한다. 관련 : 원칙 3 이해의용이성, 지침 3.4 입력도움 기술구현방법 o 온라인서식작성에필요한정보를제공해야한다. <label> 태그의 for 와서식의 id 가동일하여야함 구축사례 가. 올바른적용 : 온라인서식에대한적절한레이블제공 가 -1) 온라인서식에레이블제공 < 올바른적용 ( ): 서식에서레이블을제공한경우 > <label for="uid"> 아이디 </label> <input type="text" id="uid" > <label for="upw"> 비밀번호 </label> <input type="password" id="upw" > - 87 -
< 올바른적용 ( ): 서식에대한자세한정보제공 > <label for="uname"> 성명 </label> <input type="text" id="uname"> <label for="unum1"> 주민번호 </label> <input type="text" id="unum1" title=" 주민번호앞자리 "> <input type="password" id="unum2" title=" 주민번호뒷자리 "> ( 오류정정 ) 입력오류를정정할수있는방법을제공해야한다. 관련 : 원칙 3 이해의용이성, 지침 3.4 입력도움 기술구현방법 o 오류가발생할경우사용자가오류를쉽게정정할수있는방법을제공해야한다. 구축사례 가. 올바른적용 : 오류정정기능제공 가 -1) 오류정정기능제공 o 사용자의실수로반드시입력해야하는 아이디 를입력하지않은경우, 사용자가 실수한부문을알려주어 (' 아이디를입력하세요 ) 이를해결할수있도록도와주는 기능제공 - 88 -
< 올바른적용 ( ): 오류정정기능 > - 89 -
( 마크업오류방지 ) 마크업언어의요소는열고닫음, 중첩관계및속성선언에 오류가없어야한다. 관련 : 원칙 4 견고성, 지침 4.1 문법준수 기술구현방법 o 마크업언어는열고닫음, 중첩관계에오류가없어야한다. o 마크업언어의속성을중복선언하지않고제공해야한다. 구축사례 가. 올바른적용 : 중첩관계를올바르게사용한경우 가 -1) 중첩관계를올바르게사용한경우 < 올바른적용 ( ): 중첩관계가잘되어있는경우 > <p> 마크업언어의속성은 <strong> 중복선언하지않아야 </strong> 한다.</p> 나. 잘못된적용 : 중첩관계를잘못사용한경우 나 -1) 중첩관계가잘못된경우 < 잘못된적용 ( ): 중첩관계가잘못된경우 > <p> 마크업언어의속성은 <strong> 중복선언하지않아야 </p> 한다.</strong> - 90 -
나 -2) 중복선언된속성을사용한경우 o 속성을중복사용하면두번째선언된속성 (style) 은무시되기때문에중복선언을피해야 한다. < 잘못된적용 ( ): 중복된속성이사용된경우 > <p style="font-size: 0.8em" style="color: #000"> 마크업언어의속성은 <strong> 중복선언하지 않아야 </strong> 한다.</p> 해결방안 ) 속성을중복선언하지않아야한다. <p style="font-size: 0.8em; color: #000"> 마크업언어의속성은 <strong> 중복 선언하지않아야 </strong> 한다.</p> - 91 -
( 웹애플리케이션접근성준수 ) 콘텐츠에포함된웹애플리케이션은접근성이있어 야한다. 관련 : 원칙 4 견고성, 지침 4.2 웹애플리케이션접근성 기술구현방법 o 애플릿, 플러그인 (ActiveX, 실버라이트, 플래시등 ) 등부가애플리케이션을제공 할경우, 해당애플리케이션을최신보조기기수준에서사용할수있도록아래 2 가지조건중한개를충족하여제공해야한다. a) 자체적인접근성을준수하여제공해야함 b) 대체콘텐츠를제공하여사용자가이를이용할수있어야함 예외사항 : 공공목적상필수적인플러그인 ( 예를들어공인인증서, 보안결재등 ) 의경우에는접 근성을제공하는애플리케이션이개발될때까지한시적으로예외처리 구축사례 가. 올바른적용 : 자체적접근성또는대체콘텐츠제공 가 -1) 플러그인을사용하지않을때, 기능을사용할수있는대체콘텐츠제공 a) 플러그인을사용한경우 b) 플러그인을사용할수없는경우 ( 대체콘텐츠제공사례 ) - 92 -
가 -2) 사용자가플래시버전과플래시없는버전 ( 대체콘텐츠제공 ) 의사이트 를선택할수있는인터페이스를제공 a) 게임사이트 ( 스타크래프트 2; http://www.starcraft2.com/) 플래시를사용할수있는경우플래시를사용할수없는경우 b) 애리조나주립대학교농업생활과학 (http://ag.arizona.edu/) c) 영국자연역사박물관 (http://www.nhm.ac.uk/) < 플래시버전, 플래시없는버전을선택하는기능 > - 93 -
플래시를사용할수있는경우 플래시를사용할수없는경우 d) 여성효과 (Girl Effect; http://www.girleffect.org/) 플래시를사용할수있는경우 플래시를사용할수없는경우 나. 잘못된적용 : 자체적인접근성 ( 키보드이용등 ) 을준수하지못하거나또는대체콘 텐츠를제공하지않는콘텐츠 < 잘못된적용 ( ): 플래시로구현된내비게이션의메뉴이동순서가올바르지않음 ( 자체적접근성미준수사례 ) > - 94 -
o 자체적인접근성준수점검방법 - ActiveX 보안프로그램, 플래시등의부가애플리케이션및플러그인이용시키보 드이용보장, 서식에대한레이블제공, 이미지에대한대체정보제공등을평가 - 플러그인을설치하고화면낭독프로그램등보조기술을사용할때에키보드의이상현상, 보조기술의이상현상이발생하면해당플러그인은자체적인접근성을만족하지않는것으로분류함 o 오페라브라우저를이용한플러그인대체콘텐츠확인방법 - 환경설정 (Preference) > 고급설정 (Advanced) > 콘텐츠 (Content) > 해당플러그인사용 (Enable plug-ins) 에서체크를해제하면플러그인기능을사용할수없게되어웹페이지의기능을사용할수있는지또는대체콘텐츠를제공하고있는지를확인할수있음. < 오페라브라우저에서플러그인사용해제방법 : 영문 ( 왼쪽 ), 국문 ( 오른쪽 ) > - 95 -