untitled

Transcription

1 연구보고 웹접근성을고려한콘텐츠제작기법

2 연구보고 연구책임자 : 최두진센터장 ( 한국정보문화진흥원정보격차연구센터 ) 공동연구책임자 : 김석일교수 ( 충북대학교전기전자및컴퓨터공학부 ) 참여연구원 : 홍경순팀장 ( 한국정보문화진흥원접근기술연구팀 ) 조웅희대표이사 ( 우리인터넷 ) 신승식과장 (LG 전자 ) 현준호전임연구원 ( 한국정보문화진흥원접근기술연구과 ) - 2 -

3 서문 인터넷은이제정치, 경제, 사회, 문화등모든분야에서이용되고있습니다. 개인, 기업및국가등모든분야에서인터넷을활용하여기존의산업사회에서는상상할수없었던형태의서비스가나타나고있으며, 이를통해개인들의삶의질및기업과국가는생산성을보다높이고있는실정입니다. 그러나, 이러한변화에도불구하고신체적인제약, 소수가사용하는웹브라우저, 운영체제를사용하는사람들은인터넷의정보에접근조차하지못하고있는실정입니다. 이를개선할수있는방법이웹접근성 (Web Accessibility) 준수입니다. 하지만, 웹접근성에대한표준및지침은이미제정되어활용되고있으나실제웹콘텐츠제작시참고할수있는구체적인실무기법은제공되지않고있습니다. 이에본연구에서는우리나라의웹개발자및관리자들이웹접근성을고려한웹콘텐츠제작시참고할수있는기법들을정리하고자하였습니다. 본연구를통해앞으로보다많은사람들이손쉽게웹접근성을고려한콘텐츠를제작하여장애인, 소수사용자들도인터넷의혜택을동등하게누릴수있기를기원합니다. 끝으로본연구를수행하는과정에서많은수고를아끼지않으신한국정보문화진흥원접근기술연구팀연구원여러분, 충북대학교김석일교수님, 우리인터넷조웅희대표이사, LG 전자신승식과장님께깊은감사를드립니다. 2004년 12월한국정보문화진흥원원장손연기 - 3 -

4 목 차 I. 웹접근성이란? 1 1. 웹접근성정의및효과 1 (1) 연구배경 1 2. 웹접근성정의및효과 4 (1) 접근성이란? 4 (2) 웹접근성준수의효과 5 3. 국내외웹접근성표준동향 9 (1) 미국의웹접근성표준동향 9 (2) 일본의웹접근성표준동향 12 (3) W3C 웹접근성표준동향 14 (4) 우리나라의웹접근성표준동향 15 II. 대체텍스트 대체텍스트의종류 18 (1) 텍스트이미지 18 (2) 그림과사진 21 (3) 링크가걸린이미지 23 (4) 불릿이미지등의미없는그래픽이미지 25 (5) 여러개의조각으로나누어진그림 31 (6) 여러개가합쳐진한이미지, 이미지맵 주요사례별대체텍스트제공방법 38 (1) 소제목텍스트이미지

5 (2) 공지사항등의 more( 전체보기 ) 링크 40 (3) 약도 45 (4) 조직도 47 (5) 사이트맵 53 (6) 반복적이미지 59 (7) 광고, 캠페인 61 (8) 팝업창내부 64 (9) 전화번호와주소 66 III. 동영상 동영상과멀티미디어객체 캡션 (Caption) 오디오설명 (Audio Description) 원고 / 대본 (Transcripts) 82 IV. 색상 색상을이용한정보구분 정보전달을위한올바른색의사용 100 V. 이미지맵 이미지맵이란? 클라이언트측이미지맵 서버측이미지맵

6 VI. 프레임 문서의제목붙이기 프레임제목붙이기 흔히발견되는프레임오류 128 VII. 깜박임, 움직임 134 VIII. 장치독립성 장치독립적인이벤트발생기사용 키보드탐색 144 (1) tabindex 속성 145 (2) accesskey 속성 150 (3) 자동초점이동 152 (4) 키보드를통한메뉴선택 156 IX. 링크를통한이동 건너뛰기링크 사이트맵 페이지내목차 167 X. 시간제한 페이지자동이동

7 (1) 메타리프레시 (meta refresh) 171 (2) HTTP redirects 173 (3) 단순한링크를통한이동 빠른내용의전환 새창, 팝업창 179 (1) 링크에연결된새창 179 (2) 원하지않는팝업창 184 XI. 데이터테이블 표 (table) 의종류 HTML 에서데이터테이블의바른사용법 189 XII. 콘텐츠의배치 스타일시트와테이블을이용한배치비교 스타일시트의바른사용 배치용테이블 (layout table) 217 XIII. 온라인양식 (form) 양식의접근성 각컨트롤에정확한이름붙이기 (LABEL) 유사한컨트롤의묶음 (FIELDSET) 유사한목록의묶음 (OPTGROUP) 양식의키보드접근성

8 XIV. 스크립트, 애플릿 스크립트, 애플릿삽입 241 (1) 대체적인접근방법제공 241 (2) 흔히발견되는자바스크립트오류 플래시 (Flash) PDF(Portable Document Format) 255 (1) 실제텍스트로문서를구성해야함 255 (2) 적절한태그를붙여야함 256 (3) 적절한마크업을붙여야함 257 XV. 별도페이지 대체페이지 대체페이지의갱신 271 첨부 : 한국형웹콘텐츠접근성지침

9 그림목차 < 그림 1> 텍스트이미지의예 18 < 그림 2> 대체텍스트가없는텍스트이미지 19 < 그림 3> 대체텍스트를넣어수정한텍스트이미지 19 < 그림 4> 대체텍스트가없는사진 21 < 그림 5> 대체텍스트를추가한사진 22 < 그림 6> 대체텍스트가없는링크걸린이미지 23 < 그림 7> 대체텍스트를넣은링크걸린이미지 25 < 그림 8> 불릿이미지 26 < 그림 9> 대체텍스트가없는불릿이미지 27 < 그림 10> 불릿이미지대신아예목록마크업을사용한경우 28 < 그림 11> 여러개의조각으로나누어진그림 31 < 그림 12> 대체텍스트가없는조각그림 32 < 그림 13> 대체텍스트를넣은조각그림 33 < 그림 14> 여러내용이합쳐진한개의큰이미지 34 < 그림 15> 대체텍스트가없는소제목텍스트이미지 38 < 그림 16> 대체텍스트가없는전체보기링크 40 < 그림 17> more( 전체보기 ) 링크가다수로제공되는경우 44 < 그림 18> 대체텍스트가없는약도이미지 45 < 그림 19> 대체텍스트가없는클라이언트측이미지맵으로된조직도 49 < 그림 20> 클라이언트측이미지맵을활용한조직도 49 < 그림 21> 제목에대체텍스트가없는사이트맵 54 < 그림 22> 대체텍스트가잘못지정된예

10 < 그림 23> 대체텍스트가없는그래픽사이트맵 56 < 그림 24> 대체텍스트가없이등급을이미지로나타낸경우 60 < 그림 25> 배너광고 62 < 그림 26> 대체텍스트가없는하나의이미지로된팝업창 65 < 그림 27> 대체텍스트가없이이미지로만제공되는주소와전화번호 67 < 그림 28> 캡션이나원고가전혀제공되지않는홈페이지 73 < 그림 29> 캡션미제공사례 74 < 그림 30> SMIL과 QuickTime Player을이용하여 76 < 그림 31> Real One Player에서닫힌캡션의예 (On & Off 가능 ) 77 < 그림 32> Windows Media Player에서닫힌캡션의예 78 < 그림 33> MAGpie 프로그램을이용한캡션제작화면 79 < 그림 34> MAGpie를이용해캡션을넣은비디오화면 80 < 그림 35> MakeSAMI 프로그램구동모습 81 < 그림 36> 동영상과함께원고 ( 대본 ) 를제공한사례 83 < 그림 37> 미디어형식을사용자가선택하도록한예 85 < 그림 38> 색깔만으로항목을구분하기가힘든예 89 < 그림 39> 색깔로만 예 와 아니오 를구분한사례 90 < 그림 40> 계열들을색과모양으로구분한그래프 92 < 그림 41> 색깔로만버스종류를구분해놓은사례 93 < 그림 42> 필수입력필드를색깔로만표시한잘못된경우 94 < 그림 43> 필수입력필드를색깔과문자로동시에표시한사례 95 < 그림 44> 글자의굵기만으로필수기입사항을표시한사례 96 < 그림 45> 명도 (brightness) 로그래프의막대를구분한사례 97 < 그림 46> 색깔과색이름을같이제시한사례 98 < 그림 47> 색깔만으로필수입력항목을표시한예

11 < 그림 48> 접근성을고려해필수항목을표시한사례 100 < 그림 49> 선천성색각이상의분류 103 < 그림 50> 일반인, 1색각이상, 2색각이상에게보이는색상시뮬레이션 103 < 그림 51> 전경과배경이대비가잘되지않아가독성이낮은사례 105 < 그림 52> 색상대비가잘된목록상자 105 < 그림 53> 서버측이미지맵사용예 111 < 그림 54> 대체텍스트가없는클라이언트측이미지맵 113 < 그림 55> 제목이없는문서 ( 웹페이지 ) 118 < 그림 56> 작업표시줄에나타난제목이없는문서 119 < 그림 57> 제목없는문서가검색된사례 120 < 그림 58> 제목에이상한문자를사용한사례 121 < 그림 59> 세부페이지마다정확한제목을제공한사례 122 < 그림 60> 제목이없는팝업창 123 < 그림 61> 프레임제목 (title) 을붙이지않은경우 126 < 그림 62> 깜박거림이심한국내의사이트 136 < 그림 63> 깜박임이전혀없는영국의 BBC 방송사이트 137 < 그림 64> 대부분의사진이동시에깜박거려매우혼란스러운사례 138 < 그림 65> 국내사이트들에서자주쓰이는 139 < 그림 66> 마우스로만조작가능한메뉴 143 < 그림 67> 복잡한 tabindex 사용예 148 < 그림 68> 입력순서를 tabindex 값을통해바르게지정한예 149 < 그림 69> 탭키순서가지정되지않아불편을주는사례 150 < 그림 70> 회원가입시흔히사용되는주민등록번호입력의문제점 153 < 그림 71> 키보드로이동과선택이가능한 2단계메뉴의예 156 < 그림 72> 경우에따라키보드로이동과선택이가능한 2단계메뉴

12 < 그림 73> 키보드접근성을고려하지않은플래시메뉴 158 < 그림 74> 보이지않는건너뛰기링크가제공되는사례 161 < 그림 75> 위의사이트를텍스트전용브라우저로본경우 162 < 그림 76> 너무많은메뉴를건너뛸방법이없는경우 164 < 그림 77> 사이트맵이없는홈페이지 165 < 그림 78> 위계적으로잘구성해놓은사이트맵. 166 < 그림 79> 목차바로가기가필요한경우 167 < 그림 80> 복잡한페이지에먼저제시된목차 168 < 그림 81> 자동으로다른페이지로이동하도록잘못제작된페이지의예 173 < 그림 82> 수초마다자동갱신되는뉴스 178 < 그림 83> 경고없이무조건새창으로뜨는링크 181 < 그림 84> 새창으로열릴것을미리알려준사례. 183 < 그림 85> 여러개의원하지않는팝업창이뜨는사례 186 < 그림 86> 머릿글과내용을적절하게짝지은표의예 195 < 그림 87> 머릿글이미치는범위 (scope) 를명시한표 197 < 그림 88> 표를이용한데이터의표현 199 < 그림 89> 짝짓기가안된머릿글과내용 199 < 그림 90> 표를바르게수정한예 200 < 그림 91> CSS Zen Garden: 스타일시트를제거했을때 206 < 그림 92> CSS Zen Garden: 기본스타일적용 206 < 그림 93> CSS Zen Garden: Paravion 스타일적용 207 < 그림 94> CSS Zen Garden: Golden Cut 스타일적용 207 < 그림 95> CSS Zen Garden: The hall 스타일적용 208 < 그림 96> 잘못된스타일시트의사용 208 < 그림 97> 스타일시트를빼면순서가어긋나는경우

13 < 그림 98> 스타일시트를바로잡은예 211 < 그림 99> 스타일을빼도논리적이해가가능한경우 211 < 그림 100> 잘못된스타일시트사용예 215 < 그림 101> 스타일시트를빼면어긋나는메뉴 216 < 그림 102> 양식입력시테이블을잘못사용한예 217 < 그림 103> 테이블을없애면순서가뒤바뀐예 218 < 그림 104> 테이블대신 CSS로만내용물배치를한사례 219 < 그림 105> CSS를제거했을때모습 220 < 그림 106> 라디오버튼과레이블을짝지은예 224 < 그림 107> 시각적결함을 <label> 로보완한예 225 < 그림 108> 레이블을명시하지않아장애인에게선택을어렵게한예 227 < 그림 109> <fieldset> 을사용하여유사컨트롤을하나로묶은예 229 < 그림 110> 목록상자내의유사항목을 <optgroup> 으로묶은예 231 < 그림 111> 잘못된양식사용예 233 < 그림 112> 이동버튼이따로없는잘못된목록상자 (list box) 237 < 그림 113> 이동버튼이따로있는바른목록상자 239 < 그림 114> 키보드 ( 탭 ) 를이용한이동이불가능한경우 239 < 그림 115> 접근성이떨어지는플래시메뉴 250 < 그림 116> 접근성을고려한플래시메뉴 251 < 그림 117> 플래시와텍스트메뉴를함께제공한예 ( 플래시버전 ) 252 < 그림 118> 플래시와텍스트메뉴를함께제공한예 ( 텍스트버전 ) 253 < 그림 119> 캡션을삽입한플래시무비 254 < 그림 120> 워드에서구조적으로문서를작성한예 258 < 그림 121> 파워포인트에서이미지에대체텍스트를삽입하는대화창 259 < 그림 122> 구조적인 PDF 문서

14 < 그림 123> 저속인터넷사용자를배려한 Low Graphics version 링크 264 < 그림 124> 동일한뉴스를담고있는 Low Graphics version 265 < 그림 125> 전체플래시로제작된사이트 266 < 그림 126> 전체가플래시애니메이션으로제작된사이트 267 < 그림 127> 별도장애인페이지로가는링크가없는경우 268 < 그림 128> 전혀다른인터페이스를사용하는별도의음성홈페이지 269 < 그림 129> 최신소식이올라온일반홈페이지 271 < 그림 130> 최신소식이올라오지않은시각장애인용페이지

15 I. 웹접근성이란? 1. 웹접근성정의및효과 (1) 연구배경 정보통신기술, 특히인터넷의급속한확산은개인, 기업, 국가활동을급격하게변화시키고있는실정 즉, 개인적인측면에서는인터넷을통한인터넷뱅킹, 재택근무, e-learning, 온라인게임등다양한디지털문화및경제를향유할수있게되었으며, 기업측면에서는전자상거래, 산업정보화등을통해기존의산업사회에서는보지못하던급격한변화에직면함 국가또한인터넷의발전으로전자민주주의, 전자정부등을통한정부의효율성및투명성증대를요구받고있는실정 인터넷은현대사회에서가장핵심적이고포괄적인사회변동요인으로평가되어지고있음 이러한급격한변화와더불어우리사회에서직면하고있는문제가바로고령인구의증가와장애인구의증가문제임 통계청 (2001) 인구통계에따르면, 우리나라는 2000년에들어서면서고령화사회 (Aging Society) 의문턱을넘어섰으며, - 1 -

16 - 2019년에이르면고령사회 (Aged Society) 로진입하고 2026년에는초고령사회 (Super-aged Society) 가될것이라고예측함 보건복지부 ( ) 가발표한장애인출현율예측에따르면 1997년장애인출현율이 2.51% 이었던반면, 년에는 3.69% 로증가할것이라고예측하고있으며, 2004년추정장애인수는약 170만명으로파악됨 하지만, 이러한새로운변화에발빠르게대응하는개인, 조직및국가가있는반면, 정보 지식의독점및불평등으로인하여이를향유하지못해기존의사회에서는나타나지않은불평등으로인해새로운사회적갈등이나타남 즉, 지식정보화시대에서사회생활을영위하기위한필수적인수단인컴퓨터와인터넷을활용하지못해불이익을받는정보격차 (Digital Divide) 현상이나타나고있음 이를방치할경우개인적으로는사회참여와소득창출의기회가제한되고, 사회적으로는빈부격차심화및계층간의갈등이심화될우려가있으며, 이는사회 경제적인격차를확대재생산함은물론사회통합을저해할것임 - 2 -

17 이에저소득층, 장애인, 노인등의취약계층이소득증대와삶의질을향상시킬수있는가장효과적인수단인 IT를생산적으로활용할수있도록 정보격차해소를참여복지및삶의질향상을위한핵심정책과제로채택하여추진해나가야함 정보격차문제를발생시키는신체적, 경제적, 지역적인격차등에대한논의는다소이루어져온반면, 인터넷에접근하지못하고활용하지못하는근본적인원인인웹접근성 (Web Accessibility) 부재에대한우리나라의노력은부족한실정임 이미미국, 영국, 호주등선진국에서는웹접근성부재를정보격차문제의주요한장애요인으로파악하고이에대한적극적인노력을진행중에있음 우리나라는웹접근성제고를위해권장지침제정, 표준화를위한민간포럼운영, 세미나등을진행함 그러나, 웹접근성에대한논의가이루어지고있음에도불구하고실제웹콘텐츠제작자들이참고할수있는구축실무사례는전혀제공되지않고있는실정 이에본연구에서는웹콘텐츠제작자들이접근성을고려한콘텐츠를작성할수있도록다양한사례를제공하고자함 - 3 -

18 2. 웹접근성정의및효과 (1) 접근성이란? 정보통신접근성 (Accessibility) 개념은이를정의하는학자및기관에따라다양하게나타나고있는실정 접근성에대한개념의다양성으로인한인식의부족보다는접근성에대한개념을잘못이해하고있는것이더욱문제임 - 즉, 접근성을단지장애인에게국한된문제라고잘못이해하고있는경우가대부분이라는것이문제임 - 비록접근성준수가장애인에게가장혜택이많이돌아가는것은사실이지만, 접근성이란장애인뿐만아니라모든사람이정보통신기기나서비스를손쉽게활용할수있도록만드는것을말하는것임 - 예를들어, 리모컨, 전화, 자동문등의사례에서알수있듯이, 초기에는노인 장애인들을위해개발된제품들이궁극적으로는모든사람들이편하게활용할수있다는것 이러한접근성개념은정보통신분야에서다양한제품및서비스간의호환성문제, 이동정보통신기기및서비스의확대등으로그필요성및중요성이더욱증대 - 4 -

19 < 정보통신접근성주요정의 > 구 분 정 의 장애인 노인등의정보통신기기 소프트웨어및콘텐츠와정보통 정보통신접근성향상을위한권장지침 신서비스등정보통신제품과정보통신서비스를활용하고자하는사람에게자유로운접근과이용을보장 ( 정보통신부고시 ) ISO 다양한능력, 숙련, 요구, 취향을가진개인들이 (International 정보에접근할수있도록하는글로벌요구사항 Standards (ISO 13497, 1997). Organization) 장비의 물리적 접근 (Physical access to Benyon (2001) equipment) 과모든잠재적사용자들을위한하드웨어와소프트웨어조작의적합성 (Operational suitability) (2) 웹접근성준수의효과 웹의창시자인 Tim Berners-lee에따르면, 웹의힘 (Power) 은보편성에있으며, 장애에구애없이모든사람이접근할수있는것이가장중요한요소라고설명 웹사이트에서접근성이보장되어야하는당위성으로는다음과같이 8가지를들수있다 (Thatcher et.al., 2002; Joe Clark, 2003). 1) 규정과법적요구사항에대한준수 - 5 -

20 법적인규정을통해접근성보장에대한동기를유발시키고, 이로인해웹사이트를사용할수있는이용자의범위를확대시킴 정부에서의규정과요구사항강제화를촉발시킨 2가지주요사례는호주의시드니올림픽조직위원회의소송과미국 AOL(America Online) 소송을들수있음 2) 장애인, 노인등을포함한다양한범위의이용자확대 웹접근성이확보가되면웹사이트를효과적으로이용할수있는사람의수가증가되며, 이는결국대상고객및이용환경의범위를보다확대시키는결과를얻을수있음 비즈니스측면에서볼때, 웹접근성에대한보장으로고객들의웹사이트이용을제한하는장애요인들이제거됨으로써웹사이트를통한매출이증대되는효과가나타남 3) 새로운장소, 새로운기기개발등이용상황의확대 접근성이확보된웹사이트는효과적으로이용될수있는상황들이확대됨에따라, 결국이러한경우의수가증가되어이용의확대를가져옴 - 접근성의기법을이해하고이를웹사이트에적용하게되면, 현재의최신기기뿐만아니라향후등장하게될어떤정보기기에서나큰불편없이해당웹사이트를제공할수있는장점이있음 - 6 -

21 자연환경이나주변환경에따른상황적제약은새롭게등장하는기술및기기들의디자인에영향을주며, 때로는이러한제약조건들이제품에영향을미치는데, - PDA, 휴대폰등도이제는인터넷접속을할수있게된것이그대표적예라할수있음 4) 디자인및설계에있어서의효율성제고 접근성의수준을향상시키면웹사이트의디자인및작업설계에있어서상당한효과를가져올수있음 - 이는궁극적으로검색엔진의색인과정에도편의성을도모할수있으며, 사이트개편, 다국어버전제작시에도편리하며, 다른언어버전으로사이트를추가제작할때에도편의성이확보되는장점이있음 5) 비용절감의효과 초기에는접근성의개념을이해하고이를구현하기위해많은비용과시간이투입되지만, 접근성개선으로사이트제작총비용은절감되는효과를얻을수있음 접근성향상으로유용성 (usability) 도확보될수있기때문에온라인쇼핑의매출이증가하고사이트운영에필요한비용은감소하며, - 따라서장기적인관점에서비용절감효과를거두게되며, 접근성에투자한만큼수익이증대되는효과를얻을수있음 - 7 -

22 온라인으로제품과서비스를제공함으로써오프라인에서장애인을위한별도시설을마련하기위해지출해야하는비용등을줄일수있으며, - 전화요금등의각종공과금, 신용카드비용, 은행입출금내역등을온라인으로서비스한다면, 오프라인으로청구서를발행하는비용을줄일수있으므로회사측에도유리하고, - 온라인으로편리하게청구금액등을손쉽게확인하고결제할수있으므로이용자측에도유용한것임 6) 홍보효과향상 웹접근성을고려한웹사이트라는인식이제고되면사이트의주체가되는조직이나단체의이미지에긍정적인영향을줄수있음 기업의사회적책임 (Corporate Social Responsible) 이중요하게부각되고있는시점에서웹접근성준수는홍보수단으로도큰역할을할수있을것임 7) 자발적관심유도 접근성에대한인식을확산시키기위해서는웹사이트제작담당실무자몇사람이아니라웹사이트를구축하는주체인조직이나단체에서자발적인관심을가지는것이바람직함 - 8 -

23 개인과조직이접근성확보로인해얻어지는혜택을인지한다면, 자발적으로접근성확보를위해노력할것임 8) 균등기회보장 웹접근성을고려한웹사이트를제작하게되면사용자누구에게나균등하게기회를제공하게되며, - 조직의목적과비즈니스를위하여웹사이트의활용범위와활용가능상황을확대하면보다많은이용자에게보다많은이용기회를부여하게된다는것임 - 장애인에게업무, 여가, 사회적활동에참여할기회를제공할뿐만아니라보다많은사람들이필요한일을보다쉽게처리할수있도록도와줄것임 3. 국내외웹접근성표준동향 (1) 미국의웹접근성표준동향 미국은웹접근성제고를위해다양한법 제도를마련 1996년개정된미국통신법 (The Telecommunication Act) 255조, 미국장애인법 (ADA : American with Disability - 9 -

24 Act) 등을통해장애인의정보통신접근성제고의기틀을마련함 특히 1998년개정된미국재활법 (The Rehabilitation Act) 에서는전자및정보기술을개발, 보급, 유지보수및사용하는경우 - 연방정부가무리한부담 (Undue Burden) 되지않는한장애인들이일반인과동등하게접근할수있도록보장해야한다고명시하고있음 동법은장애인들의웹접근성향상에매우큰기여를하였는데, 본법의준수를위해제정된기술표준중 인 웹기반인트라넷과인터넷정보및응용프로그램 에서 - 웹접근성제고를위해아래와같이 16개지침을제정 공포하여미국의모든연방정부홈페이지가이를준수하고있음 (2001년 6월부터 )

25 항목번호 (a) 요구조건 ( 내용 ) 텍스트가아닌요소에도해당하는텍스트요소가반드시제공되어야한다 ( alt," "longdesc" 를사용하거나요소내용안에표시한다 ). (b) 멀티미디어에는동등한대체요소가멀티미디어내부에합성되어야한다. (c) 웹문서에표시된, 색상을이용한정보는, 색상이없는상태에서도판독할수있어야한다. 예를들어문맥을통해서나마크업으로표시되어야한다. (d) 문서는연결된스타일시트를불러오지않고도읽을수있어야한다. (e) (f) 서버측의이미지맵의각활성화된부분마다별도의텍스트링크가지정되어야한다. 이미지맵의각부분을기하학적모양으로지정할수없을경우가아니면, 서버측의이미지맵대신클라이언트측의이미지맵을제공해야한다. (g) 데이터테이블의행과열헤더를반드시지정해야한다. (h) (i) (j) (k) 행과열의헤더에있어서 2 개이상의논리수준을갖는데이터테이블에서는마크업을사용하여데이터셀과헤더셀을연결해야한다. 프레임은프레임확인과이동을쉽게하기위하여텍스트로이름을지정해야한다. 웹문서는스크린이 2Hz 이상 55Hz 이하의주파수로깜빡이는일이없도록작성해야한다. 어떤웹사이트가이장의조항을준수하도록작성하기위해다른방법이없을때는, 정보와기능을동등하게제공하는, 텍스트만으로작성된별도의웹문서를함께제공해야한다. 텍스트만으로작성된웹문서의내용은원래의문서내용이업데이트될때마다함께업데이트해야한다. (l) 웹문서에서스크립트언어를사용하여내용을표시하거나인터페이스요소를사용할때는, 스크립트가제공하는정보를기능적텍스트로표시하여보조기기로판독할수있게해야한다. (m) 웹문서에서내용판독을위해애플릿, 플러그인, 기타다른응용프로그램을클라이언트시스템에요구하는경우, 해당문서에는 의 (a) 항부터 (l) 항을준수하는, 플러그인이나애플릿을제공하는주소를링크해야한다. (n) 전자양식을사용하고온라인상태에서작성하도록하는경우, 사용자가전자양식을작성및제출하고안내문및지시문을이해하는데필요한정보, 필드요소, 기능등을접근하기위해보조기술을사용할수있어야한다. (o) 반복되는이동링크를건너뛸수있는방법을사용자들에게제공해야한다

26 (2) 일본의웹접근성표준동향 일본은우리나라와마찬가지로고령화가급속히진행중이어서 2015년에는국민의 25% 가 65세이상이될것으로전망 이러한초고령화사회로의진입에대비하기위하여일본정부는고령자가사용하기쉬운제품, 서비스, 생활환경을정비할계획을수립하고정보통신기기와서비스를제공함에있어서접근성을고려하도록하고있음 이에따라일본에서는처음으로일본이의장국으로서세계각국의협력을얻어성립시킨최초의 ISO 가이드인 ISO/IEC 가이드 71 1) 를제정하였으며, 이를근간으로 2003 년 6월20일에일본공업규격 JIS Z ) 을제정 그러나 ISO/IEC 가이드 71 또는 JIS Z 8071는어디까지나규격책정을위한지침이므로이지침에의거하여제정된제품이나서비스의관련되는표준이제정되지않는다면의미가없음 - 이에따라일본규격협회에서는 2001년 4월, 협회산하의정보기술표준화센터 (INSTAC) 에 정보기술분야공통및소프트웨어제품의접근성향상에관한표준화조사위원회 를설치하고 1) ISO/IEC GUIDE 71, Guidelines for standards developers to address the needs of older persons and persons with disabilities, 2001 년 11 월제정 2) JIS Z 8071, " 고령자및장애인을위한규격작성배려지침," 2003 년 6 월 20 일제정

27 - 정보기술분야의접근성향상을위한공통지침, 정보처리장치접근성향상을위한지침및웹콘텐츠의접근성향상을위한지침등 3가지분야의규격을초안을마련하고 - 의견수렴과정을통해 2004년 5월20일에는제1부 : 공통지침 (JIS X :2004), 제2부 : 정보처리장치 (JIS X :2004) 에관한일본공업규격을제정하였으며, 년 6월20일에는제3부 : 웹컨텐츠 (JIS X :2004) 에관한일본공업규격을제정 현재웹콘텐츠접근성에관한일본공업규격은임의표준이나앞으로공공기관이나대기업체를중심으로강제표준화될것으로보임 JIS X 에서웹접근성향상을위한지침은모두 9개로구성되어있으며, 각각의지침은또다시몇개의세부검사항목으로구성되어있음 총검사항목의수는 39 개임 지침번호 제목 ( 내용 ) 검사항목의수 5.1 규격및사양 구조및표시스타일 조작및입력 텍스트아닌콘텐츠의표현 색깔및형태 글자의속성 오디오의속성 콘텐츠의움직임과깜박임의제한 언어및문장과관련한접근성

28 (3) W3C 웹접근성표준동향 미국을제외한영국, 호주, 뉴질랜드, 유럽연합, 영국등에서는국제표준화기구인 W3C(World Wide Web Consortium) 웹접근성이니셔티브 (Web Accessibility Initiatives) 의 웹콘텐츠접근성지침 (WCAG : Web Contents Accessibility Guidelines) 1.0을표준으로채택하고있음 본지침은웹접근성이니셔티브산하의웹콘텐츠접근성가이드라인워킹그룹에서 1999년 5월제정함 WCAG 1.0 지침은크게 14개의지침 (Guideline) 과 65개의검사항목 (Checklists) 으로구성되어있으며, 본지침은중요도에따라 1, 2, 3 으로구성되어있음 2004년 10월현재 WCAG 2.0 지침의 working draft ( 월제정 ) 가공개중으로일반인들을대상으로의견을수렴하고있으며, WCAG2.0 에따르면웹콘텐츠의접근성을제고하기위해반드시지켜야할원칙으로인지가능성 (Perceivable), 운영가능성 (Operable), 이해가능성 (Understandable), 견고성 (Robust) 의 4가지원칙을제시

29 (4) 우리나라의웹접근성표준동향 국내웹접근성관련표준으로는 2002년 1월정보통신부고시로제정된 장애인 노인등의정보통신접근성향상을위한권장지침 이있음 정보통신부권장지침은크게총칙, 정보통신제품과서비스의기능에대한설계지침, 웹문서에대한설계지침및보칙으로구성되어있으며, - 웹문서에대한설계지침은 10개로구성 2002년제정된정보통신부권장지침이실제홈페이지제작시참고하기에는어려우며새로운웹기술을반영하지못하고있어 정보통신접근성향상표준화포럼을중심으로 2003년 12월에 한국형웹콘텐츠접근성지침 1.0 을마련 (2004년 TTA 단체표준으로제정 )

30 지침번호 1 지침의요구조건 ( 내용 ) 텍스트아닌콘텐츠 (non-text contents) 중에서글로표현될수있는모든콘텐츠는해당콘텐츠가가지는의미나기능을동일하게갖추고있는텍스트로도표시되어있어야한다. 2 시간에따라변화하는영상매체는해당콘텐츠와동기되는대체매체를제공해야한다 콘텐츠가제공하는모든정보는색상을배제하더라도인지할수있도록구성되어야한다. 이미지맵기법이필요할경우에는클라이언트측이미지맵을사용하거나서버측이미지맵을사용할경우에는동일한기능을하는텍스트로구성된대체콘텐츠를제공해야한다. 콘텐츠를구성하는프레임의수는최소한으로하며, 프레임을사용할경우에는프레임별로제목을붙여야한다. 6 콘텐츠는스크린의깜빡거림을피할수있도록구성되어야한다 키보드 ( 또는키보드인터페이스 ) 만으로도웹콘텐츠가제공하는모든기능을수행할수있어야한다. 웹콘텐츠는반복적인네비게이션링크 (repetitive navigation link) 를뛰어넘어페이지의핵심부분으로직접이동할수있도록구성하여야한다. 실시간이벤트나제한된시간에수행하여야하는활동등은사용자가시간에구애받지않고읽거나, 상호작용을하거나응답할수있어야한다. 데이터테이블은테이블을구성하는데이터셀의내용에대한정보가충분히전달될수있어야한다. 11 콘텐츠의모양이나배치는논리적으로이해하기쉽게구성하여야한다 온라인서식을포함하는콘텐츠는서식작성에필요한정보, 서식구성요소, 필요한기능, 작성후제출과정등, 서식과관련한모든정보를제공해야한다. 스크립트, 애플릿또는플러그인 (plug-in) 등과같은프로그래밍요소들은현재의보조기술의수준에서이들프로그래밍요소들의내용을사용자에게전달해줄수있을경우에만사용하여야한다. 콘텐츠가항목 1 에서 13 에이르는 13 개검사항목을만족하도록최대한노력하였으나해결되지않는부분이남아있다면텍스트만의콘텐츠를제공하는웹페이지 ( 또는웹사이트 ) 를별도로제공해야한다

31 II. 대체텍스트 지침 1. 텍스트가아닌콘텐츠 (non-text contents) 중에서글로표 현될수있는모든콘텐츠는해당콘텐츠가가지는의미나기능을 동일하게갖추고있는텍스트모드로표시되어있어야한다. 1 텍스트아닌콘텐츠중에서글로표현될수있는콘텐츠는모 두해당콘텐츠와정확하게일치하는텍스트콘텐츠 (text contents) 와함께제공되어야한다. 2 만약, 텍스트아닌콘텐츠중에서글로표현될수없는경우는해당콘텐츠에대한설명을텍스트로제공하여야한다. 이때, 제공되는텍스트콘텐츠는설명하고자하는원래의콘텐츠의내용이나형태등의상세한정보를제공해야한다. 3 텍스트아닌콘텐츠를대체하거나설명하기위해제공되는텍 스트는콘텐츠제작자가원래의콘텐츠를사용해표현하고자했던 의미나기능도설명해야한다. 4 텍스트아닌콘텐츠를대체하거나설명하기위해제공되는텍 스트를읽어줌으로인하여의미의혼동을줄경우에는빈문자 (blank text) 를대체텍스트로사용해야한다

32 1. 대체텍스트의종류 (1) 텍스트이미지 텍스트이미지란글자나단어, 문장등간단하고짧은글자들의집합을이용해서이미지로디자인한것을말함. 이경우, 웹접근성준수를위해서는원래제공하고자했던텍스트를그대로대체텍스트에넣어주면됨. 때로이미지상으로나타난텍스트가시각적인효과를위해두번이상같은말을중복적으로나타낸경우에는, X (Bad) 대체텍스트를한번만기술해주어야함. < 그림 1> 텍스트이미지의예 출처 : 대한민국전자정부 (

33 X (Bad) < 그림 2> 대체텍스트가없는텍스트이미지 브라우저옵션에서그림을꺼놓았을때그림이무엇이었는지전혀알수없음 <img src="/img2/new_notice_01.gif" width="450" height="97"> O (Good) < 그림 3> 대체텍스트를넣어수정한텍스트이미지 브라우저옵션에서그림을꺼놓았을때에도그림이무엇을나타내는지짐작할수있음

34 <h1><img src="/img2/new_notice_01.gif" width="450" height="97" alt=" 공지사항 : 대한민국전자정부단일창구 안내 "><h1> 위의사례에서는공지사항의제목을이미지로구성하였는데, 대체텍스트가없음. 이경우대체텍스트를추가해주기위해 <img> 요소에 alt= 공지사항 :... 을추가해주어야하고, 해당문서의가장큰제목임을의미적으로나타내는 <h1> </h1> 을추가해주는것도좋은방법임

35 (2) 그림과사진 일반적인인물, 풍경, 회사로고, 상품및제품사진등에는 X (Bad) 해당인물의이름, 풍경의제목및간단한묘사, 회사이름, 상품이나제품의이름등을그대로대체텍스트로넣는것이바람직함. < 그림 4> 대체텍스트가없는사진 출처 : 청와대홈페이지 ( <IMG src="/kr/pages/president/story/images/title_030101_ img.gif">

36 O (Good) < 그림 5> 대체텍스트를추가한사진 <IMG src="/kr/pages/president/story/images/title_030101_ img.gif" alt=" 노무현대통령사진 ">

37 (3) 링크가걸린이미지 이미지에링크가걸려있을때에는그링크의성격에맞는대체텍스트를제공해야함. 추가로링크자체에도링크의성격을기술해주는 title 속성을넣어주면일반그래픽브라우저사용자들에게도풍선도움말 (tooltip) 로링크에대한설명이제공되는장점을줄수있음. 주의할것은 이미지의역할을그대로대체할수있는 대체텍스트를제공해야한다는것 즉, 이미지의모양에대해설명하는것이아니라, 이미지가제공하는의미적인내용을대체텍스트로제공해야함. X (Bad) < 그림 6> 대체텍스트가없는링크걸린이미지 출처 : 대한민국전자정부 (

38 <!--대체텍스트를빼먹은경우--> <a href=" napp&highctgcd=a01"><img src="main_data/icon_c01.gif" width="65" height="67" border="0"></a> <!-- 이미지의모양에대해설명하려고하여대체텍스트를잘못 넣은경우 --> <a href=" napp&highctgcd=a01"><img src="main_data/icon_c01.gif" width="65" height="67" border="0" alt=" 세사람의얼굴그림 "></a> 위그림의경우다음과같이대체텍스트를넣어수정할수있음

39 O (Good) < 그림 7> 대체텍스트를넣은링크걸린이미지 <!-- 이미지의성격에알맞은대체텍스트를 alt 속성값으로넣었으며, 링크에대한보다자세한설명은 title로넣었음.--> <a href=" napp&highctgcd=a01" title=" 출생신고, 주민등록관련등개인과가정에대한민원처리 "><img src="main_data/icon_c01.gif" width="65" height="67" border="0" alt=" 개인과가정 "></a> (4) 불릿이미지등의미없는그래픽이미지 의미없는이미지란불릿이미지, 단순히디자인을위해사용하는이미지를말함. 불릿 (bullet) 이미지란목록 (list) 앞에조그맣게표시하는별표, 동그라미, 사각형같은이미지를말함. 그밖에도페이지를꾸미기위해가로로늘어진선모양

40 의그림, 세로선모양의그림, 또는모서리부분을꾸미기위한그림등다양하게사용되고있음. 의미없는이미지의대체텍스트제공을위해서 그림모양을설명하는, 또는그림과비슷한모양의문자를넣는것은잘못된방법이며, X (Bad) 그렇다고대체텍스트를아예쓰지않는것도잘못된것임. 의미없는이미지에대해서는따옴표만있고아무내용도없는 (alt="" 와같은 ) 대체텍스트를반드시넣어주어야함. < 그림 8> 불릿이미지 출처 : 대한민국전자정부 (

41 X (Bad) < 그림 9> 대체텍스트가없는불릿이미지 그림을표시하는옵션을껐을때, 대체텍스트가없으므로목록앞에있는그림도깨져보임. 의미없는이미지에대해시각장애인이잘못된정보를얻게되는이유로는크게다음과같은세가지이유가있음. 대체텍스트를아예빼먹은경우 <img src="main_data/mt3_government_icon.gif" width="7" height="5"> 대체텍스트에비슷한모양의문자를붙인경우 <img src="main_data/mt3_government_icon.gif" width="7" height="5" alt=" "> 대체텍스트에이미지모양을그대로설명한경우 <img src="main_data/mt3_government_icon.gif" width="7" height="5" alt=" 화살표 ">

42 의미없는이미지에대해서도빈문자로된대체텍스트제공은반드시필요함. O (Good) < 그림 10> 불릿이미지대신아예목록마크업을사용한경우 목록을나타내는마크업 (<ul>, <li>) 을사용하였으므로, 그림표시옵션을꺼도목록을알아볼수있음. 빈대체텍스트를넣어수정한경우 <img src="main_data/mt3_government_icon.gif" width="7" height="5" alt=""> 스타일시트와목록으로대체한경우 <!-- 목록의스타일을정의함. 별도의 CSS 파일로저장할수도 있고, 같은 HTML 파일내에서 HEAD 부분에넣을수도있음.--> <STYLE type="text/css">

43 ul.news li {list-style-image: url(main_data/mt3_government_icon.gif);} /* ul.news는 ul요소중에 news라는클래스를갖는것. ul.news li는 ul.news 요소의자손으로 li가나타난경우를의미.( 자손선택자 (descendant selector)) mt3_government_icon.gif 파일이불릿이미지로쓰임. */ </STYLE> <!-- news라는클래스이름을갖는순서없는목록요소 (ul) 를사용 --> <ul class="news"> <li> 정부보도자료 <!-- 실제목록들은 li 요소를사용--> <li> 알기쉬운정책 </ul> 스타일시트를사용하여목록을나타내는방법

44 목록 (list) 을나타낼때에는그냥그림으로항목들을나열하는것보다는목록을나타내는마크업 ( 예를들면순서없는목록인 <ul>, 순서있는목록인 <ol>, 용어정의목록인 <dl>) 을사용하는것이바람직함. 각각의목록에대한불릿이미지의모양은스타일시트 (style sheet) 를통해서정의할수있으며, 스타일시트를통해정의된불릿이미지는대체텍스트를붙일필요가전혀없으며, 장애인을위한접근성도매우높아지는장점이있음. CSS(Cascading Style Sheet) 란? HTML이발전하면서새로더해진기능으로, HTML이나 XML 문서의구조또는내용과는독립적으로문서의형식 ( 문단모양, 글꼴, 색깔, 크기, 경계선모양, 배치, 줄간격등 ) 만을웹개발자나웹사용자가조정할수있도록한것 CSS 를이용해디자이너와사용자들은자기만의모양을정 의해놓고, 이것을여러웹사이트에적용시킬수있음. 대체적으로 HTML 내부에문서의모양을나타내는것보다 CSS 를통해모양을분리하면, 문서의유지보수가쉬워지고, 장애인을위한접근성도높아짐. CSS 에대한자세한사양은 를참조할것

45 (5) 여러개의조각으로나누어진그림 여러개의조각이미지란, 의미적으로는하나의이미지이지만큰그림이나사각형이아닌부정형의그림을테이블셀에집어넣기위해두개이상의이미지로잘라나눈것으로, 이러한경우에는어떤그림에대체텍스트를넣어야할지홈페이지개발자의결정이필요함. 만약하나의의미적인그림 ( 예를들어기관로고 ) 이두개의파일로나누어져있다면, X (Bad) 그중에더중요한것 ( 또는더크기가큰것 ) 에는대체텍스트를넣어주고, 나머지에는그냥공백의대체텍스트를넣어줌. < 그림 11> 여러개의조각으로나누어진그림 출처 : 정보통신연구진흥원 (

46 X (Bad) < 그림 12> 대체텍스트가없는조각그림 두개로나누어진이미지모두대체텍스트가붙어있지않아무엇을나타내는그림인지알수가없음. <img src="index_data/h_logo1.gif" width="348" height="46" border="0"> : 중략 : <img src="index_data/h_logo2.gif" width="326" height="26" border="0">

47 O (Good) < 그림 13> 대체텍스트를넣은조각그림 위에큰이미지에는정상적인대체텍스트를넣고아래이미지에는공백대체텍스트를넣었음. <img src="index_data/h_logo1.gif" width="348" height="46" border="0" alt=" 정보통신연구진흥원 (ITA, Institute of Information Technology Assessment)"> : 중략 : <img src="index_data/h_logo2.gif" width="326" height="26" border="0" alt=""> (6) 여러개가합쳐진한이미지, 이미지맵 논리적으로는여러개로나뉘어져야하지만, 한개의파일로크게그려진이미지는 ( 통상적으로통이미지로불림 ) 적합한대체텍스트를붙이기가매우어려움

48 큰그림의경우간결하게대체텍스트를넣기가쉽지않으므로, alt에는제목만넣고, title에약간자세한설명, longdesc을이용해별도로자세한설명을넣는것이바람직함. 그러나그림을영역별로나누어클라이언트측 (client-side) 이미지맵을사용하는것이더쉽고정확하게이미지가나타내고자하는의미를구현하는방법임. X (Bad) 이미지맵을사용할때에는큰이미지전체에대한대체텍스트와부분영역에대한대체텍스트를반드시넣어주어야함. < 그림 14> 여러내용이합쳐진한개의큰이미지 출처 : 국정홍보처 ( 위의그림처럼여러개가합쳐진한이미지에대해시각장애인의접근이어려운것은다음과같은 2가지이유때문에발생함

49 X (Bad) 대체텍스트를빼먹은경우 <img src="/kr/images/screensaver/info.gif"> 대체텍스트만으로부족한경우 <img src="/kr/images/screensaver/info.gif" alt=" 스크린세이버 "> 여러개가합쳐진한이미지에대해시각장애인의접근을원활히하기위해서는다음과같이대체텍스트를제공해야함. O (Good) 다단계대체텍스트를활용한경우 - 가장간단한설명은 alt를이용하고, 그것보다조금더상세한설명은 title을이용하고, 아주상세한설명은별도의파일로제작하여 longdesc에넣어줌. <img src="/kr/images/screensaver/info.gif" alt=" 스크린세이버설치방법 title=" 스크린세이버설치방법 : 다운로드, 설치, 설정방법 longdesc="ld-info.html">

50 이미지맵을활용한경우 <img src="/kr/images/screensaver/info.gif" usemap="#info-map" alt=" 스크린세이버설치방법 "> <map name="info-map"> <area shape="rect" coords="90,14,523,47" href="nohref" alt="1단계 : 원하시는화면보호기를클릭하셔서 zip 파일을다운받으십시오. 압축을푼후에 install.exe를더블클릭합니다."> <area shape="rect" coords="90,57,523,91" href="nohref" alt="2단계 : 제어판 디스플레이 화면보호기에서압축을푼화면보호기이름을선택하시고확인을누르시면됩니다."> : 중략 : </map>

51 이미지맵 (image map) 이란? 이미지나객체의영역을나누어각영역별로특정한동작을지정할수있도록한것. 예를들면, 두개의등이있는신호등을하나의그림으로그린다음, 위쪽빨간색부분에대해서는 멈추십시오 라는메시지가나오도록하고, 아래쪽초록색부분에대해서는 가셔도좋습니다 라는메시지가나오도록할수있음. 클라이언트측 (client-side) 이미지맵 : 사용자가마우스로이미지의특정부분을클릭하면, ( 사용자의클라이언트 PC에있는 ) 브라우저가그좌표를해석하여그영역과연관된동작을수행함. 일반적으로클라이언트측이미지맵의접근성이서버측이미지맵보다좋음. 서버측 (server-side) 이미지맵 : 사용자가마우스로이미지의특정부분을클릭하면, 서버에있는엔진이좌표를해석하여연관된동작을수행함. 이미지맵에대한자세한정의는 W3C의 HTML 4.01 사양중이미지맵부분 ( 6) 을참조

52 2. 주요사례별대체텍스트제공방법 (1) 소제목텍스트이미지 소제목이미지는주로텍스트로된콘텐츠의제목등을이미지로처리하여사용자가보다쉽게제목을인지할수있도록하기위해사용되는것으로, X (Bad) 아래그림에서는 일반민원신청 부분이이미지로되어있고그아래에는테이블과텍스트로구성되어있음. < 그림 15> 대체텍스트가없는소제목텍스트이미지 출처 : 통일부홈페이지, <img src="/kr/images/civil/down_bar5.gif"

53 width="205" height="29"> 이러한사례는우리나라의정부홈페이지에서아주많이찾아볼수있는것으로, - 제목을이미지로처리하는이유는심미적인이유를포함해여러이유가있겠지만무엇보다도그부분이중요하고돋보여야하기때문일것임. 그러나이렇게중요한것에대해대체텍스트속성을지정하여주지않으면 - 시각장애인들은알아볼방법이전혀없음. 그러므로, 소제목이미지에는다음과같이대체텍스트를꼭넣어주어야하며 - 추가로, 문서전체에서소제목이차지하는역할에걸맞게 <h1>, <h2>, <h3> 또는 <h4> 등을넣어주는것이좋음. O (Good) <h2><img src="/kr/images/civil/down_bar5.gif" width="205" height="29" alt=" 일반민원신청 "></h2>

54 (2) 공지사항등의 more( 전체보기 ) 링크 특정한게시판의최근목록몇개만을뽑아첫페이지에보여주는형태는국내홈페이지에서자주활용되는기법임. 이경우메인페이지에서는전체목록가운데 4~5개의최근목록만보여주며 X (Bad) more 나 전체목록 등의링크를통해전체목록을볼수있게구성되어있음. < 그림 16> 대체텍스트가없는전체보기링크 출처 : 행정자치부홈페이지, <td class="first_home_center_title_back" width="210"> <img src="/korean/images/first_home_center_title_news.gi f" alt=" 새소식 ">

55 </td> <td rowspan="2" width="95" color:#959595; font-size:11px;text-align:right;" valign="bottom"> <a href="/webapp/bbs/notice/list.action?bid=96" style="color:#999999!important!;"> <img src="/korean/images/first_home_more.gif" border="0"> </a> </td> 위의예에서 의대체텍스트는 새소식 으로지정이 되어있지만, 의대체텍스트는누락되어있음. 우선두이미지모두대체텍스트가기본적으로삽입되어야함. 그러나 more 링크와같은경우몇가지고려해야할사항이있음. 아래의예처럼텍스트와똑같은대체텍스트만을제공하는것으로는부족함

56 X (Bad) 이미지대체텍스트접근성문제점 새소식 전체보기 시각장애인이새소식의전체목록이있는것으로오인할수있음. 엄밀히따지면이새소식이라는것은새소식중최근몇개만추려놓은최근목록임. 무엇에대한전체보기인지명확하게알기어려우며, 특히여러개의최근목록과 more가존재한다면더욱혼란을줌. 또, 아래와같이서술형으로과도하게텍스트를제공하는것도오히려혼란을줌. 일반적인화면낭독프로그램에서는이미지의경우 그래픽 ~, 링크는 링크 ~ 이라는음성정보를먼저제공한다음 alt의내용이나링크의내용을읽어주므로, - 공지사항링크입니다 와같이 링크, 이미지 등을알리는단어를과도하게대체텍스트에사용할필요가없음. 따라서, 대체텍스트에 링크, 이미지, Click Here" 등의단어는사용을하지않는것이바람직함

57 X (Bad) 이미지 대체텍스트 새소식최근목록최신목록입니다. 새소식전체목록으로가시려면여기를누르십시오. O (Good) 이미지 대체텍스트 새소식최근목록 새소식전체보기 위와같이대체텍스트를제공해야시각장애인이최신목록과전체목록에대해명확하게구분하고이해할수있음. <td class="first_home_center_title_back" width="210"> <img src="/korean/images/first_home_center_title_news.gi f" alt=" 새소식최근목록 "> </td> <td rowspan="2" width="95" color:#959595; font-size:11px;text-align:right;" valign="bottom">

58 <a href="/webapp/bbs/notice/list.action?bid=96" style="color:#999999!important!;"> <img src="/korean/images/first_home_more.gif" alt=" 새소식전체목록 " border="0"> </a> </td> 아래그림은여러개의최근목록과전체보기가한페이지에있는사례로, more라는이미지가무엇을뜻하는지구분하기위해서여러개의 more마다각기다른대체텍스트를붙여주어야함. < 그림 17> more( 전체보기 ) 링크가다수로제공되는경우 출처 : 티붐홈페이지 (

59 (3) 약도 약도와같이복잡한그림의경우에는원래그림의제시목적인위치설명을위해, X (Bad) alt, title, longdesc 속성값을통해대체텍스트를제시해주는것이바람직함. 주의할것은설명이긴경우에 title이나 longdesc을활용하더라도 alt 속성값은절대빠뜨려서는안됨. < 그림 18> 대체텍스트가없는약도이미지 출처 : 교육인적자원부홈페이지 (

60 <img src="/images/map.gif" width="400" height="300"> 위의사례에서대체텍스트를제공하지않거나단순히 약도이미지 라는대체텍스트만을제공하는경우, 시각장애인은약도가주는원래의미에대해전혀정보에접근할방법이없음. 그러므로, 다음과같이대체텍스트를자세하게제공하는것이바람직함. <img src="/images/map.gif" width="400" height="300" alt=" 교육인적자원부약도 : 지하철 4호선정부과천청사역 7번출구로나오셔서나오신방향으로약 500m 앞에교육인적자원부가있습니다."> 만약, 약도를설명하는문구가그림과는별도의텍스트로제공이된다면, 그림에서는간단히 교육인적자원부약도 라고만대체텍스트를표시하여도무방함

61 O (Good) 출처 : 정보통신사이버대학 ( <img src="img/itcu_map.gif" width="466" height="390" alt=" 정보통신사이버대학사무국약도 " title=" 정보통신사이버대학사무국은지하철 3호선남부터미널역 3번출구로나와국제전자센터빌딩 24층하나로드림 ( 주 ) 에있습니다."> (4) 조직도 한기관의조직도나사이트맵은보통높은단계에서작은단계또는대분류에서소분류등으로위계적인구조를가지고있어서

62 짧은글로이런위계적인구조들을설명하기는매우복잡함. 그러므로, 시각장애인을위한대체텍스트제공은 longdesc 속성을이용해별도의파일에서자세하게설명을해야함. 별도의파일은독립적으로완전해야하며, 위계적인구조를잘표현할수있는마크업 ( 예를들면, <ul>, <dl>, <ol> 이나 <h1>, <h2>, <h3> 등 ) 을사용하는것이바람직함. longdesc 속성을사용해서별도의파일을만들경우에도, longdesc에서제공하는설명에접근하지못할경우가있으므로, 원래이미지에대한 alt 속성은빠뜨리지말고반드시넣어주어야함. 우리나라정부홈페이지들을조사한결과조직도는대부분조각나지않은하나의이미지위에클라이언트측이미지맵을사용하여조직도를링크로제공하고있음

63 X (Bad) < 그림 19> 대체텍스트가없는클라이언트측이미지맵으로된조직도 출처 : 문화콘텐츠진흥원 ( <img src="/imgs/intro/text_img01.gif" border=0> (Good) < 그림 20> 클라이언트측이미지맵을활용한조직도

64 출처 : 여성부홈페이지, <map name="fpmap0"> <area alt=" 장관 " href=" shape="rect" coords="233, 40, 340, 65"> </map> 대체텍스트를넣는것만으로이러한조직도를시각장애인에게완벽히전달할수는없으나, 대체텍스트만이라도모두넣어준다면시각장애인은대략적으로라도조직의구조를알수있을것임. 대체텍스트와더불어조직도에대한상세한설명을제공함으로써, 조직도가원래전하고자했던기능을똑같이전달할수있음. O (Good) <img src="/imgs/intro/text_img01.gif" border=0 alt=" 문화콘텐츠진흥원조직도 " longdesc="ld-org_chart.html"> alt 텍스트와더불어제공한 longdesc 파일은아래와같이

65 구성하는것이바람직함. 조직의위계적인구조를설명하기위해서 <h1>, <u1> 등위계적인마크업을사용할수있음. ld-org_chart.html 별도파일내용 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="ko"> <head> <meta http-equiv=content-type content="text/html; charset=utf-8"> <title> 문화콘텐츠진흥원조직도 </title> </head> <body> <h2> 원장 <p> 원장과는별도로이사회와검사역이있으며, 문화콘텐츠진흥원에는다음과같은 3개의본부가있다. <h3> 산업기획본부 <ul> <li> 기획홍보팀 <li> 국제마케팅팀 : 중략 :

66 </body> </html> <h1>, <h2>, <h3> 는글자를크게하는마크업인가? <h1>, <h2>,, <h6> 와같은 HTML 요소는글자크기를키울목적으로사용되는마크업이아니다. 이것들은문서내에서제목 (heading) 의수준을나타내주며, 지능적인브라우저에서는이제목들을자동으로취합하여목차를만들어주기도한다. <h1> 의모양 ( 예 : 보통보다 2배크기, 매우두껍게, 보라색바탕, 흰글자, 점선테두리, 테두리와글자간격은 2픽셀, 가운데정렬등 ) 을원하는대로바꾸고싶다면스타일시트 (style sheet) 를이용하면된다

67 (5) 사이트맵 사이트맵의경우에도조직도처럼대체텍스트제공을위한세심한배려가필요함에도불구하고 많은홈페이지의경우에는이를적용하지않고있는실정임. 전형적인홈페이지는아래의예처럼사이트의최상위메뉴이미지로구성되어있고하위메뉴들은텍스트로되어있음. 그러나이미지에대체텍스트가붙여져있지않아상위메뉴는시각장애인이알수없도록구성되어있음

68 X (Bad) < 그림 21> 제목에대체텍스트가없는사이트맵 출처 : 해양수산부홈페이지,

69 X (Bad) < 그림 22> 대체텍스트가잘못지정된예 출처 : 국회홈페이지, 위와같은경우에소제목이미지인 사이트맵 에대체텍스트를제공하고있으나, - 내용과달리 FAQ' 라는잘못된대체텍스트를제공하고있음

70 X (Bad) < 그림 23> 대체텍스트가없는그래픽사이트맵 stit09.gif txt09_01.gif txt09_02.gif 출처 : 국가보훈처홈페이지 ( X (Bad) <img src="../images/sitemap/stit09.gif" width="72" height="78" border="0"> <img src="../images/sitemap/txt09_01.gif" width="77" height="17" border="0"> <img src="../images/sitemap/txt09_02.gif" width="77" height="19" border="0">

71 위의그림에서와같은사이트맵은 09_ 유틸 이라는큰범주밑에 어린이광장, 시각장애인 과같은하위페이지들이들어가는위계적인구조를가지고있음. 따라서 HTML에서위계적인구조를나타내는마크업 (<h1>, <h2>, <h3> 등 ) 과목록을나타내는마크업 (<ul>, <ol>, <li> 등 ) 을사용하여사이트맵을표시하는것이바람직함. O (Good) <style type="text/css"> /* first-level이라는클래스를갖는 ul 요소의하위요소로오는 li 요소에대해불릿이미지를초록생원그림으로지정한다. */ ul.first-level li {list-style-image : url(circle.gif)} </style> <body> <!-- 그림에도두번째수준의제목임을나타내는 h2 마크업을 넣고, 대체텍스트를삽입하였다

72 --> <h2><img src="../images/sitemap/stit09.gif" width="72" height="78" border="0" alt="09. 유틸 "></h2> <!-- first-level 이라는클래스에속하는순서없는목록을나타내는 ul 요소를사용하였다. --> <ul class="first-level"> <li> 어린이광장 <li> 시각장애인 </ul>

73 목록을나타내는세가지마크업동등한수준의항목여러개가나열된것을목록이라고한다. HTML에서는목록을쉽게나타낼수있는구조적인마크업을지원하므로, 목록을나타낼때에그냥네모 ( ), 동그라미 ( ), 마이너스기호 (-) 와같은불릿 (bullet) 문자를직접써주는것보다는해당마크업을사용하는것이구조적으로견고한홈페이지가되며, 접근성과디자인의유연성측면에서도유리하다. HTML에서는순서가없는목록 (<ul>), 이를테면 1, 2, 3, 4와같이순서가있는목록 (<ol>), 그리고 ' 용어이름 ' 과 ' 용어풀이 ' 와같이두개씩짝지어지는정의 (definition) 목록 (<dl>) 을제공한다. 목록마크업의자세한사용법 : 목록마크업의불릿문자, 모양, 들여쓰기등을바꾸는방법 (6) 반복적이미지 흔히쇼핑몰이나커뮤니티에서볼수있는것으로, 해당제품이나해당글에대한고객의평가를시각적으로나타내기위해 과같이똑같은이미지를반복적으로사용한경우가있음

74 또, 막대그래프의적절한길이를표시하기위해,, 와같이똑같은이미지박스를반복적으로사용한경우도있음. 이경우에는이미지하나 ( ) 에대해대체텍스트를넣어주는것보다는, 별하나짜리이미지 ( ) 와별두개짜리이미지 ( ), 별세개짜리이미지 ( ) 를따로제작한다음, 이러한묶음들에대해 별하나, 별둘, 별셋 과같이대체텍스트를넣어주어등급이어떻게되는지파악할수있도록해주어야함. X (Bad) < 그림 24> 대체텍스트가없이등급을이미지로나타낸경우 출처 : Amazon.com ( b_2_1/ ), <b>average Customer Review:</b> <img

75 src=" e/common/customer-reviews/stars-4-5.gif" border="0" height="12" width="64"> 위와같은이미지는아래와같이대체텍스트를붙여주어야시각적으로보이지않더라도등급을파악할수있음. O (Good) <b>average Customer Review:</b> <img src=" e/common/customer-reviews/stars-4-5.gif" border="0" height="12" width="64" alt="4 stars and a half"> 물론, 이러한대체텍스트는개별항목에대해직접입력해주는것이아니고, 이미지종류 ( 즉, 등급의종류 ) 에따라자동으로해당하는대체텍스트가입력되도록프로그램을작성해야함. (7) 광고, 캠페인 홈페이지에서자주사용되는광고이미지는크게두가지종류로나눌수있음. 쓰이는이미지가광고의내용을직접적으로연상시키는것

76 이미지내용만으로는광고의내용이무엇인지모르게하고, 클릭을유도하는것 이런광고들에대한대체텍스트는그림에대한묘사나부가설명이아니라광고가전하고자하는목적을정확히기술해주어야함. < 그림 25> 배너광고 출처 : 한국정보문화운동협의회홈페이지 ( X (Bad) 위와같은배너광고의경우에광고의기능을대체하는텍스트를넣어주어야함. 대체텍스트를빼먹으면안됨. <img src="images/banner_web.gif" width="150" height="143" border="0"> 대체텍스트에그림설명을그대로넣어무슨광고인지알수가없음

77 <img src="images/banner_web.gif" width="150" height="143" border="0" alt=" 장애인 노인을위한웹접근성향상캠페인 : 눈, 입술, 귀, 손가락그림. 한국정보문화운동협의회 "> O (Good) <img src="images/banner_web.gif" width="150" height="143" border="0" alt=" 한국정보문화운동협의회의장애인 노인을위한웹접근성향상캠페인 "> 또, 여러프레임으로된움직이는 GIF 형식을사용하는경우에는가장대표적인프레임의광고메시지를대체텍스트로넣어줄수있음

78 (8) 팝업창내부 많은홈페이지에서는중요한정보를알리기위한수단으로팝업창을사용하고있음. 국내홈페이지의경우팝업창에전체내용모두를이미지로처리한것과텍스트위주로처리한두가지종류가주로발견됨

79 X (Bad) < 그림 26> 대체텍스트가없는하나의이미지로된팝업창 출처 : 과학기술부 대체텍스트가없이하나의이미지로처리한팝업은시각장애인이전혀정보를얻을수없음

80 팝업창의과도한사용은바람직하지않지만사용할경우에도이미지에대해서는정확한대체텍스트를넣어주어야함. 위경우시각장애인은, 제37회과학의날, 오늘은더이상열지않습니다. 닫기 만듣게됨. 따라서아래와같이대체텍스트를넣어주어야함. <img src="/images/popup.gif" alt=" 과학기술, 우리의미래를결정합니다, 제37회과학의날, 2004년 4월 21일 ( 수 ), 과학기술부 한국과학기술단체총연합회, 행사종합정보는 및 (9) 전화번호와주소 많은홈페이지하단부에는아래와같이매페이지마다주소와전화번호등연락처를넣어두고있음

81 X (Bad) < 그림 27> 대체텍스트가없이이미지로만제공되는주소와전화번호 출처 : 보건복지부홈페이지, 그러나대체텍스트를제공하지않아시각장애인에게는전화번호및주소에대한정보에접근하지못하고있는실정임. 시각적인깔끔함을목적으로텍스트대신이미지로처리된전화번호와주소의경우에는반드시적절한대체텍스트를넣어주어야함

82 O (Good) <img src="image/kor/interface_images/copy_bottom.gif" alt=" 주소 : 경기도과천시중앙동 1번지 ( ) 종합민원실, 전화 : , 팩스 : , Copyright (c) MOHW. All rights Reserved." width="617" height="80" border="0"> 특히주소를나타내는마크업인 <address> 를사용하면의미적으로해당부분이주소임을나타내줄수있음. <address><img src="image/kor/interface_images/copy_bottom.gif" alt=" 주소 : 경기도과천시중앙동 1번지 ( ) 종합민원실, 전화 : , 팩스 : , Copyright (c) MOHW. All rights Reserved." width="617" height="80" border="0"></address>

83 III. 동영상 지침 2. 시간에따라변화하는영상매체는해당콘텐츠와동기되는대체매체를제공해야한다. 1 오디오정보로부터사용자가충분한정보를얻을수없는모든영상매체는캡션을함께제공하여야한다. 2 캡션은영상매체나음향매체와동기되어야한다. 3 모든생방송 (real time broadcasting) 은캡션을실시간으로제공하여야한다. 단음성이없는음악방송의경우에는예외로한다. 4 콘텐츠는사용자가캡션과영상정보를동시에접해야그내용을이해할수있도록구성되어서는안된다. 1. 동영상과멀티미디어객체 홈페이지이용자들의홍미유발과상호작용성 (interaction) 을높이기위해동영상과음향의사용이빈번해지고있음. 동영상및멀티미디어웹콘텐츠를제작할경우에도다음과같이접근성환경에대한고려가필요함. - 청각장애인과시각장애인, 뇌병변장애인등동영상에부분적으로접근이불가능한사람들에대한접근성제공 - 또한동영상을볼수없는환경 ( 예 : 저속인터넷, 무선인터넷, 공공장소, 제한된시스템자원, 서로다른 OS 등 ) 에

84 놓인사람들을위한접근성제공 동영상및멀티미디어객체에대한접근성보장을위해브라우저자체적으로표현할수없는요소들에대한고려가필요 즉, 브라우저자체적으로표현되기어려운플래시, 동영상, 애니메이션, 애플릿프로그램등을나타내기위해서 HTML의 <object> 라는요소를사용해야하며, 현존브라우저에서 <object> 요소에포함되는모든동영상이나애플릿프로그램을정확히보여준다는보장이없으므로다음과같이계층적으로대체콘텐츠를제공해야함. 예를들어아래의 HTML 문서는 Python으로작성된우주에서본지구의모습을보여주는프로그램을포함하고있는데, 프로그램이작동되지않을경우에, 프로그램이작동하는방식의동영상 (MPEG 비디오실행 ) 을보여주고, 동영상이안될경우, 프로그램이작동하는방식을애니메이션으로처리한 GIF 그림을보여주고, 그것도안될경우에는동작방식을텍스트로설명한것을보여주도록한것임

85 O (Good) <P> <!-- 첫째, Python 애플릿을실행함. --> <OBJECT title="the Earth as seen from space" classid=" <!-- 실패할경우, MPEG 비디오를실행 --> <OBJECT data="theearth.mpeg" type="application/mpeg"> <!-- 실패할경우움직이는 GIF 를실행 --> <OBJECT data="theearth.gif" type="image/gif"> <!-- 실패할경우, 텍스트를보여줌. --> The <STRONG>Earth</STRONG> as seen from space. </OBJECT> </OBJECT> </OBJECT> 출처 : Objects, Images, and Applets, in HTML documents ( 캡션 (Caption) 캡션이란동영상비디오의오디오트랙부분에대한텍스트

86 원고가운데비디오및오디오트랙과동기화된것을말하며, 실시간으로나오는텍스트자막을캡션이라고생각하면됨. 캡션은일반적으로비디오화면위에겹쳐져서시각적으로표현되는것이일반적인경우인데, 이를통해청각장애인이나오디오를들을수없는상황의사람 ( 예를들면시끄러운방에있는사람, 듣기능력이떨어지는외국인등 ) 들의접근성을높일수있음. 하지만, 아래의사례처럼대부분의홈페이지에서동영상에대해캡션을제공하지않음

87 X (Bad) < 그림 28> 캡션이나원고가전혀제공되지않는홈페이지 출처 : KTV (

88 X (Bad) < 그림 29> 캡션미제공사례 출처 : 충청북도관광 ( p2=), 캡션이동영상과오디오자료에대해대안적으로접근성을높이는기능을제대로하려면다음의세가지조건을충족시켜야함. 동기화 (synchronized) : 오디오가나오는시간에맞추어거의동시에텍스트가제공되어야함 동일내용 (equivalent) : 오디오에서제공되는음성정보와동일한내용을텍스트에도담고있어야함 접근성 (accessible) : 캡션자체가접근가능해야함

89 캡션에는다음과같이닫힌캡션 (Closed Caption) 과열린캡션 (Open Caption) 이라는 2가지가범용적으로활용됨. 닫힌캡션은사용자의필요에따라캡션을끄거나켤수 (On & Off) 있는것으로, - 더발전된형태의닫힌캡션은사용자의개인선호도에따라캡션이나타나는위치, 글자크기, 색깔, 속도등도조절할수있으며, - 시각과청각모두중복적인장애를가진사용자를위해캡션의텍스트내용을별도의데이터로추출하여다른형식의데이터로변환이가능함. 이에반해열린캡션은일반적으로비디오에캡션정보가같이녹화되어들어있으므로사용자가임의로캡션을끄거나켤수없는것을말하며, - 또한캡션의옵션을조정하는것이나캡션의내용을텍스트로추출하여활용하는것 ( 예 : 검색, 화면낭독프로그램을통한접근등 ) 도불가능함. 미국의경우에는인터넷뿐만아니라 13인치이상의 TV 수상기에는의무적으로닫힌캡션기능을탑재토록의무화하고있으며, 대부분의녹화된프로그램의경우반드시캡션신호를송

90 출하도록법으로규정하고있음. O (Good) < 그림 30> SMIL과 QuickTime Player을이용하여닫힌캡션을구현한예 출처 : web essentials 04 - zeldman keynote captioned with quicktime SMIL (

91 O (Good) < 그림 31> Real One Player 에서닫힌캡션의예 (On & Off 가능 ) 출처 : 반지의제왕 ( 왕의귀환 ) 예고편중 ( 멀티미디어서비스를제공시접근성준수방법에대한실사례로사용자의기호에따라 캡션을끄거나켤수있으며, 내용을별도로추출하여텍스트로변환할수있어검색및기타보조기술과의호환가능성을높임

92 O (Good) < 그림 32> Windows Media Player에서닫힌캡션의예 출처 : Inside the Matirix: Making of Matrix Reloaded, ( 위와같이영화에서닫힌캡션을제공함으로보다많은사람들이정보에접근할수있게되는것임. Real Player, Windows Media Player 등다양한제품에서접근성을고려한멀티미디어객체제작이가능하며, 저작도구로 MAGPie, MakeSAMI 등이있음

93 캡션만드는프로그램 MAGpie < 그림 33> MAGpie 프로그램을이용한캡션제작화면 MAGpie는미국 CPB/WGBH National Center for Accessible Media (NCAM) 에서만든리치미디어 (rich media) 용캡션과오디오설명 (audio description) 무료저작도구로, 애플퀵타임플레이어, 리얼플레이어, 윈도우즈미디어플레이어등주요미디어플레이어를모두지원하며, 최신버전은플래시에자막을붙이는기능도지원함. 특히 W3C(World Wide Web) 의표준멀티미디어통합언어인 SMIL (Synchronized Multimedia Integration Language) 과,

94 Microsoft사의독자적인파일형식인 SAMI (Synchronized Accessible Media Interchange) 파일을쉽게만들수있도록도와줌. 자세한 MAGpie의사용법은아래홈페이지를참조할것 ( < 그림 34> MAGpie를이용해캡션을넣은비디오화면 출처 : Keeping Web Accessibility in Mind Video ( 캡션만드는프로그램 MakeSAMI MakeSAMI는우리나라에서특히많이사용되는 Microsoft 사의 Windows Media Player용자막파일인 SAMI 파일을쉽게제작하도록도와주는국내에서만들어진프로그램

95 < 그림 35> MakeSAMI 프로그램구동모습 또한 MakeSAMI 는 Real Player 에서자막에사용되는 Real Text(.rt) 파일과이것을동영상파일 (.rm) 과결합시켜주는 표준 SMIL(.smi) 파일도부가적으로지원해줌. 자세한내용은캡션월드 ( on&sc=on&select_arrange=headnum&desc=asc&no=13, ) 등국내의자막제작관련홈페이지들을검색해서찾을수있음 3. 오디오설명 (Audio Description) 오디오설명이란캡션에비해덜활용되는기법중의하나

96 로, 시각적으로나타나는비디오화면에대해해설자 (narrator) 가음성으로모든상황을설명해주는것을말함. 오디오설명에는실제비디오상황에서나오는인물들의대화가모두포함되며, 이와더불어해설자의해설이들어가서, 오디오설명만으로시각적인비디오의장면을상상할수있도록구성됨. 4. 원고 / 대본 (Transcripts) 원고 / 대본은비디오나오디오의음성부분을별도의텍스트로제공하는것을말하며, 단순한대사외에추가적인상황설명등이포함됨. 캡션 ( 특히오픈캡션 ) 은보통비디오와동시에제공되어읽는속도가느리거나이해의속도가느린사람들에게접근에제한을줄수도있으므로, 원고를같이제공해주면접근성을훨씬높일수있음

97 O (Good) < 그림 36> 동영상과함께원고 ( 대본 ) 를제공한사례 출처 : KBS 뉴스 ( 동영상뉴스의경우, 캡션을제공하는것이원칙임. 하지만, 위의그림과같이캡션을대체할수있는텍스트대본을제공함으로써, 청각장애인, 시각장애인 ( 텍스트를점자로변환가능 ) 모두의접근성을높일수있음

98 미디어형식의선택 웹에서동영상이나오디오스트리밍서비스를제공할때에는보편적인서비스 (universal service) 측면에서되도록많은플랫폼에서사용할수있도록최소두가지이상의형식으로제공하는것이바람직함 현재주요하게쓰이는 Microsoft사의 Windows Media Player는윈도우즈플랫폼 ( 구버전인 6.4 제외 ) 에서만작동하므로, - 많은사용자를확보하고있으나플랫폼간호환성은가장떨어지는문제를가지고있음 Apple사의 Quick Time Player는윈도우즈와 Mac OS 두개의플랫폼에서작동하며, W3C의표준 SMIL을지원하지만국내에서는사용빈도가낮은편임 Real Networks사의 Real Player는윈도우즈와 Mac OS, Unix/Linux 플랫폼등주요플랫폼과 W3C의최신 SMIL 2.0을지원하지만국내에서는사용빈도가낮은편임 각미디어플레이어에관한추가정보 Windows Media Player: Microsoft Windows Media ( fault.aspx), Real Player: RealPlayer

99 ( age=en&type=dlrhap_bb&pp=player&src=122604rpchoice _1_1_2_1_9_1), O (Good) Quick Time Player: Apple - Quick Time ( < 그림 37> 미디어형식을사용자가선택하도록한예

100 출처 : WGBH ( 사용자 PC, 접속환경에따라, 재생가능한미디어형식이 제한될수있으므로, 최소한두개이상의미디어형식을제공하고, 사용자가 접근가능한프로그램을선택할수있도록여러개의동 영상을제공하는것이바람직함. SMIL (Synchronized Multimedia Integration Language) SMIL( 스마일 이라고읽음 ) 은각종웹표준을제정한 W3C (World Wide Web Consortium) 에서웹에서비디오, 오디오, 텍스트와같은멀티미디어자료를효과적으로조합하여전달하기위해개발한 XML 기반의새로운언어로현재버전 2.0까지출시되었음. SMIL 은 XML 기반으로되어있으므로일반텍스트편집기 로간단히제작할수있으며, 처음부터접근성을고려하여 제작되어몇가지접근성특징을갖추고있음. 정적인요소에서동적인비디오에이르기까지다양한요 소에대해다양한방식으로대체텍스트를붙일수있음. 사용자의선호도와친숙도, 장애정도에따라멀티미디어 스타일과레이아웃, 색깔, 많은시스템설정을바꿀수있

101 음. HTML 과같은링크와탐색 (navigation) 기능을통해시간 에따라빠르게변하는콘텐츠라고해도사용자의속도에 따라원하는콘텐츠로이동할수있음. 화면크기, 시간, 속도등의단위를상대적으로작성하면, 사용자의환경변화에따라상대적으로프리젠테이션이 유연하게바뀌는장점이있음. 표준 XML 문서이므로플랫폼이나장치에상관없이비교적많은멀티미디어재생기에서 SMIL 표준을지원함. (Internet Explorer, RealOne Player, Quick Time Player, AMBULANT/X Open Source SMIL Player 등 )

102 IV. 색상 지침 3. 콘텐츠가제공하는모든정보는색상을배제하더라도인 지할수있도록구성되어야한다. 1 콘텐츠가제공하는텍스트나그래픽정보는색상을제거하더라 도그내용을인지할수있어야한다. 2 웹페이지에서보여주는정보와배경색간에는충분히대비가되어야한다. 특히웹페이지의내용을고대비 (high contrast) 모드로표시했을때에도충분히명암대비가되도록콘텐츠를설계하여야한다. 1. 색상을이용한정보구분 지침 3이웹콘텐츠제작자의색상선택에대한제한및색상을이용해강조를하지말라는것은아니며, 오직색상으로만정보를전달하는형태를피하라는것임. 웹콘텐츠제작자가색상으로만정보를전달하려한다면, 특정한색상을구별할수없는사용자 ( 색맹, 색약등 ) 들과흑백디스플레이사용자 (PDA, 휴대용웹표시장치 ), 흑백인쇄물을보는사용자에게는무용지물이될우려가있음

103 따라서, 색상으로만정보를구분하기보다는색상이외의것 -- 맥락, 마크업, 언어적인설명, 구분기호등 -- 을통해서도정보가구분되도록웹콘텐츠를제작해야함. X (Bad) < 그림 38> 색깔만으로항목을구분하기가힘든예 출처 : 통계청 ( 위의사례에서처럼색상만으로정보를제공함으로인해색상을구분하지못하면서비스업현황을파악할방법이없음

104 X (Bad) < 그림 39> 색깔로만 예 와 아니오 를구분한사례 출처 : 한국방송통신대학교 ( 위의그림에서는흐름도 (flow chart) 에서 예 와 아니오 를구분하는선이파랑색과빨강색으로표시되어있어,

105 색깔이외의다른정보로는 예 와 아니오 선을구분할수가없음. 또한, 위그림을흑백프린터로인쇄했을때에도흐름도의 예 와 아니오 를구분할수없음

106 (Good) < 그림 40> 계열들을색과모양으로구분한그래프 출처 : 영국 National Statistics Online ( 위의사례에서는색상과모양으로상이한정보를제공하고있으나, 색상과모양이유사하므로, 서로다른그래프의계열들을구분하기어려움. 따라서, 선의무늬 ( 점선, 실선 ) 를추가로다르게표시한다거나, 그래프위에직접계열명 (Passenger cars total, Passenger cars home, Passenger cars export) 을표시해주는것이바람직함

107 X (Bad) < 그림 41> 색깔로만버스종류를구분해놓은사례 출처 : 인천국제공항 ( 위의그림에서는버스의종류 ( 리무진일반, 리무진고급, 시내버스, 시외직행 ) 를오로지색깔로만구분해놓아, 일반인들도버스종류를구별하기힘들고, 색깔정보를볼수없는시각장애인들은전혀버스의종류를알수가없음

108 X (Bad) < 그림 42> 필수입력필드를색깔로만표시한잘못된경우 출처 : JimThatcher.com ( 위의그림에서와같이색깔 ( 빨간색 ) 로만필수입력필드를표시할경우에는 색깔을인식할수없는사용자들은어떤것이필수입력필드인지알수가없음

109 O (Good) < 그림 43> 필수입력필드를색깔과문자로동시에표시한사례 출처 : JimThatcher.com ( 위의그림에서는다른필드와다르게필수입력필드를색깔 ( 빨간색 ) 과특수문자 (*) 로동시에구분해주어서 색깔을지각할수없는경우 ( 색각이상자, 흑백디스플레이사용자, 화면낭독프로그램이나점자표시장치를사용하는시각장애인등 ) 에도어떤것이필수입력필드인지알수있음

110 X (Bad) < 그림 44> 글자의굵기만으로필수기입사항을표시한사례 출처 : KIEC 한국전자거래진흥원 ( 위의그림에서는필수입력필드를굵은글자체로표시하였는데, 색깔로정보를구분하는것이좋지않은것과마찬가지로글자의굵기만으로필수기입사항을구분하는것도좋지않은방법임. 이경우, 비시각적 ( 예를들면화면낭독프로그램이읽어서알수있게 ) 으로도구분이가능하도록다른구분표시 ( 예 : *, 필수, required 등 ) 를추가할필요가있음

111 (Good) < 그림 45> 명도 (brightness) 로그래프의막대를구분한사례 출처 : 미국 US Census Bureau ( 위의그림에서는, 막대들이색깔이아닌무채색 ( 흰색, 검정색, 회색등 ) 의명도 (brightness) 로만구분됨. 다행히그래프내에서계열들의나열순서 ( 좌에서우로 ) 가아래의계열명 (legend) 나열순서와일치하여이해하기쉬운편이지만, 그래프위에바로계열명 (Total, Ex Auto, Auto, Gen Mer) 을표시했으면더이해가용이했을것임

112 O (Good) < 그림 46> 색깔과색이름을같이제시한사례 출처 : 즐거운학교 ( 위의그림에서는, 색깔을고를때에고르고자하는색깔원과바로같은위치에색이름이제시되어, 색깔을지각할수없는경우에도색이름을통해서원하는색을선택할수있음

113 X (Bad) < 그림 47> 색깔만으로필수입력항목을표시한예 출처 : 한성고시학원 ( 위사례의경우화면낭독프로그램을이용하는장애인또는흑백디스플레이를사용하는사용자는어떤항목이필수입력항목인지알수없게됨으로, 따라서명확히구분될수있는기호를병행하여사용하는것이바람직함

114 O (Good) < 그림 48> 접근성을고려해필수항목을표시한사례 위의그림에서는, 필수입력항목앞에특수문자 (*) 를동시에제공하여색상을구분하기힘든사용자도필수입력항목을쉽게알수있음. 2. 정보전달을위한올바른색의사용 색깔만으로정보를제공하는웹콘텐츠를제작해서는안되며, 접근성을준수한정보전달을위해서는선모양 ( 실선, 점선, 두께등 ) 이나도형내부의패턴 ( 빗금, 세로무늬, 가로무늬, 점등 ) 으로같이구분해주는것이중요함

115 하지만, 어쩔수없이색깔로정보를구분해야하는현미경사진, 의학적인사진, 지리에따라달라지는기상정보등을표시해야하는경우에는, 매우세심한색깔의선택이반드시필요함. 웹에서는심미적인목적의일반적인그림이아니고, 정보전달을목적으로하는문자, 일러스트레이션, 메뉴, 버튼, 차트, 지도, 그래프등의경우에는 전경색 (foreground) 과배경색 (background) 이보다명확히구분될수있도록배색에도신경을써야함 피해야하는색조합 명도대비가낮은색조합 : 노란색과회색, 짙은회색과검정색, 짙은파란색과검정색, 흰색과노란색, 빨강색과검정색, 짙은빨강색과검정색, 빨강색과짙은파랑색등 녹색과빨강색 : 가장흔한색각이상인적록색각이상자들에게는녹색과빨강색의구별이잘안되므로, 빨강색대신자홍색이나보라색을사용해야함

116 색각이상이란? 흔히통칭하여색맹이라고부르는용어는사실색각이상의 일부를뜻하는말이며, 색각이상자라고해서모든색을보지못하는것은아님. 색각이상은우리눈의추상체 (cones) 라불리우는세포에서특정파장에반응하는색소가없어서일부색을구별하지못하는것으로, - 어떤파장의색소에이상이있느냐에따라 1색형색각 (protanopia), 2색형색각 (deteranopia), 3색형색각 (tritanopia) 으로나뉨. 색각이상은성염색체를통해열성유전되어여성보다남성 에게서더많이발견되며, 코카서스인종의 8%, 아시아인종의 5%, 아프리카인종의 4% 남성들이적록색각이상을가지고있어 AB 혈액형의발생빈도보다더높음. 가장흔한것이빨강과녹색을구별하지못하는적록색각이상이며, 매우드물지만파랑색과노랑색을구별하지못하는황청색각이상과추상체전체에이상이있어색깔을거의구별하지못하는전색맹 ( 전색약 ) 등이있음

117 < 그림 49> 선천성색각이상의분류 < 그림 50> 일반인, 1 색각이상, 2 색각이상에게보이는색상시뮬레이션 출처 : Barrier-free presentation for color blinds (

118 < 그림 50> 에서는일반인과 1색형색각, 2색형색각에게보이는색상을시뮬레이션한것임. 위의세줄은색각이장자들에게매우유사하게지각되어피해야하는색조합을나타낸것임. 즉, 대비되는두색깔이초록, 빨강요소만차이가있는경우에색각이상자들에게는비슷하게지각이됨. - 예를들면, 파랑색과보라색 ( 파랑 + 빨강 ) 은색각이상자들에게구분하기힘든색깔조합이됨. 아래의세줄에는세개가한조가된색깔조합이나타나있는데일반인들이대비를뚜렷이지각하는색깔의조합과그렇지않은색깔의조합이색각이상자들에게는거꾸로지각되기도하는예를보여주고있음. - 예를들면, 빨강, 초록, 청록색이있을때, 일반인들에게는빨강과초록은잘구별되고, 초록과청록은잘구별이안되는반면, - 색각이상자들에게는빨강과초록은잘구별되지않고, 녹색과청록은확실하게구분이되어보임. - 그이유는파랑색파장에반응하는추상체세포가빨강, 초록세포의기능저하에대한보상으로더민감해졌기때문임

119 X (Bad) < 그림 51> 전경과배경이대비가잘되지않아가독성이낮은사례 출처 : 2005 년발효과학딤채 ( 해당웹사이트하단에있는퀵메뉴를보면배경색과글자색이유사한색상으로이루어져있어가독성을떨어뜨려, O (Good) 색약자가구분할수없으므로, 선택해주세요, 위니아만도 등의목록을나타내는글자색을진하게수정해야함. 아래는유사한퀵메뉴를사용하는다른홈페이지로글자색을검정색으로처리하여가독성을높힌사례임. < 그림 52> 색상대비가잘된목록상자 출처 : 삼성카메라 (

120 V. 이미지맵 지침 4. 이미지맵기법이필요할경우에는클라이언트측이미지 맵을사용하거나서버측이미지맵을사용할경우에는동일한기 능을하는텍스트로구성된대체콘텐츠를제공해야한다. 1 구성하려는이미지맵의형태를클라이언트측에서기하학적으 로표현하기어려운경우가아니면서버측이미지맵을사용하지 않는다. 2 서버측이미지맵기법을사용할경우에는이미지맵의영역에 대응하는텍스트링크를별도로제공해야한다. 3 클라이언트측이미지맵을사용할경우에는이미지맵의영역 에대한충분한대체텍스트를제공하여야한다. 1. 이미지맵이란? 이미지맵이란한개의이미지의일부에한개또는여러개의링크를두는기법을말하는것으로, 용어가지칭하는것과는달리실제맵 ( 지도 ) 은아니지만, 예컨대흔히볼수있는지도찾기의그림에서특정지역

121 을클릭하면해당지역의정보가있는곳으로이동하는것이그사례임. 사용자가이미지위에서특정영역을선택 ( 또는클릭 ) 했을때, 그해석 ( 즉처리 ) 을클라이언트 ( 브라우저 ) 에서하느냐서버에서하느냐에따라클라이언트측이미지맵과서버측이미지맵으로구분됨. 클라이언트측 (client-side) 이미지맵 : 클라이언트측이미지맵의한영역을마우스로활성화시키면, 브라우저가그좌표를해석하며, 그좌표가포함된영역과연계된링크를선택하고그것을따라감. 서버측 (server-side) 이미지맵 : 서버측이미지맵의한영역을마우스로활성화시키면, <a href=> 에서지정한서버프로그램에클릭한곳의좌표가보내지고, 서버에있는프로그램이특정한동작을수행함. 2. 클라이언트측이미지맵 클라이언트측이미지맵은일반적인그림에 alt 속성을이용한대체텍스트를제공할경우 ( 지침 1 참고 ), 큰어려움없이시각장애인도이용이가능함. <area> 요소를사용한예 : 이미지전체와각각의영역

122 (area) 에대해모두 alt 속성을지정해야함. <P><IMG src="navbar1.gif" usemap="#map1" alt=" 메뉴막대 "></p> <MAP name="map1"> <AREA href="guide.html" alt=" 접속지침 " shape="rect" coords="0,0,118,28"> <AREA href="search.html" alt=" 검색 " shape="rect" coords="184,0,276,28"> <AREA href="shortcut.html" alt=" 바로가기 " shape="circle" coords="184,200,60"> </MAP> 텍스트링크를같이제공한예 : <area> 대신에 <a> 를사용하면, 이미지맵과함께별도의텍스트링크모음이제공되어접근성이더높아짐

123 그러나일부브라우저 ( 인터넷익스플로러 ) 에서아직지원하지못함. <p><img src="navbar1.gif" alt=" 메뉴막대 " usemap="#map1"></p> <MAP name="map1"> <P> 사이트탐색 <A href="guide.html" shape="rect" coords="0,0,118,28"> 접속지침 </a> <A href="shortcut.html" shape="rect" coords="118,0,184,28"> 바로가기 </A> <A href="search.html" shape="circle" coords="184,200,60"> 검색 </A> </MAP> 3. 서버측이미지맵 서버측이미지맵은그림을분할하는영역의모양이너무복잡해불가피한경우가아니라면사용하지않는것이좋으며, 서버측이미지맵을사용할경우, 마우스와같은포인팅장치가아닌입력도구 ( 예 : 키보드 ) 를사용할수없어, 접근성이떨어짐

124 또한, 서버측이미지맵은링크에대한정보가서버에있기때문에화면낭독프로그램등의보조기기가그내용을해석할수없음. 따라서이미지맵을사용할경우, 클라이언트측이미지맵쓰는것을권장하며, 부득이서버측이미지맵을쓸경우에는맵에서사용되는링크목록을별도의텍스트로제공하는것이바람직함. 사용예 : 여기에서마우스로특정한좌표를클릭하면 ( 예를들어 x=10, y=-20), href에지정된서버프로그램으로좌표가보내져새로운 URI를생성함. 아래의경우새로운 URI는 " 같은형식이됨. <P><A href=" <IMG src="game.gif" ismap alt="target"></a>

125 X (Bad) < 그림 53> 서버측이미지맵사용예 출처 : ooo 교수홈페이지연구분야페이지 <A href="_vti_bin/shtml.dll/research3.htm/map1"> <IMG src="../images/02_research/header.gif" border="0" alt="header.gif (6482 bytes)" usemap="#frontpagemap1" ismap> </A>... 중략... <MAP name="frontpagemap1"> <AREA shape="rect" coords="453, 26, 557, 41" href="mailto:oooo@aw9500.knou.ac.kr"> <AREA shape="rect" coords="309, 26, 444, 42" href="index.htm"> </MAP> 위의소스를보면 A 태그 href 속성에있는주소로사용자가마우스로클릭한좌표값을, "_vti_bin/shtml.dll/research3.htm/map1?x좌표,y좌표" 형식으로서버측에전달하는서버측이미지맵을사용하고

126 있음. 위의사례에서는단순히두개의메뉴를처리하기위해서버측이미지맵을사용하고있는데, 이미지자체가서버측이미지맵을쓸정도로기하학적인형태가아니므로클라이언트측이미지맵을사용하는것이바람직함. 또한서버측이미지맵 (ismap) 과더불어클라이언트측이미지맵의형식 (usemap) 도같이사용하고있어클라이언트측이미지맵으로작동하게됨. 따라서서버측이미지맵은사용할필요가없음. O (Good) 위의사례를클라이언트이미지맵으로수정한소스임. <IMG src="../images/02_research/header.gif" border="0" alt=" 선택메뉴 " usemap="#frontpagemap1">... 중략... <MAP name="frontpagemap1"> <AREA shape="rect" coords="453, 26, 557, 41"

127 alt=" "> <AREA shape="rect" coords="309, 26, 444, 42" href="index.htm" alt="home"> </MAP> X (Bad) < 그림 54> 대체텍스트가없는클라이언트측이미지맵 출처 : 공정거래의원회조직도 ( 위의그림에서는클라이언트측이미지맵을사용했으나, 영역별로대체텍스트를붙이지않아, 각영역에시각장애인이접근할수가없음

128 <area shape=rect coords=370,10,394,26 href="buseo_dept2.php?code=d33"> <area shape=rect coords=341,8,366,25 href="buseo_dept2.php?code=d32"> <area shape=rect coords=286,10,338,24 href="buseo_dept2.php?code=d30"> O (Good) 위의클라이언트측이미지사례에대체텍스트를첨부한사례임. <area shape=rect coords= 370,10,394,26 href="buseo_dept2.php?code=d33" alt=" 서무 "> <area shape= RECT coords= 341,8,366,25 href="buseo_dept2.php?code=d32" alt=" 경리 "> <area shape= RECT coords= 286,10,338,24 href="buseo_dept2.php?code=d30"

129 alt=" 총무과 "> 국내현실 서버측이미지맵은서버측에불필요한부하를발생시키며 구현의복잡성때문에근래에와서는거의쓰이지않고있 으나, 최근에단순이미지를이용한클라이언트측이미지맵이아닌, 플래시나애플릿을이용한이미지맵의등장으로인해이미지맵과관련한새로운접근성문제가발생하고있음

130 VI. 프레임 지침 5. 콘텐츠를구성하는프레임의수는최소한으로하며, 프레 임을사용할경우에는프레임별로제목 (title) 을붙여야한다. 1 웹콘텐츠에는가급적프레임을사용하지않아야한다. 만일 프레임을사용하는경우에도사용하는프레임의수를최소한으로 줄여야한다. 2 프레임을사용할경우에는프레임별로서로독특한 ( 중복되지 않는 ) 제목을부여하여프레임을식별할수있어야한다. 프레임에제목을넣어주는이유는, 문서를화면낭독프로그램 (screen reader) 를통해순차적으로탐색하게되는시각장애인의경우, 프레임과프레임을이동할때에해당프레임에어떤내용이들어있는지제목을통해쉽게파악할수있게되지만, 프레임제목이없을경우에는, 일반인들은한눈에쉽게알수있는프레임의내용일지라도, 시각장애인들은프레임의내용을짐작할수없으며, 프레임의내용을모두다읽어보아야하는불편함이생김

131 프레임뿐만아니라모든웹문서에는예외없이그문서의내용을가장정확히표현할수있는제목을붙이는것이매우중요함. 1. 문서의제목붙이기 모든문서 ( 팝업창, 프레임문서, 내부프레임 (iframe) 문서포함 ) 에는예외없이, 그문서의속성을가장잘대표하는제목을붙여야함. 제목은 <head></head> 태그안쪽에 <title></title> 태그를이용해붙일수있으며, 제목이없거나제목이잘못붙은문서는일반인이웹을탐색할때에도혼란을주며, - 시각장애인과같이비시각적으로웹을탐색하는사람에게는극심한혼란을초래할수있음 제목이없거나잘못매겨진문서는검색엔진이정확한문서를찾는데에도방해가되며, - 검색을성공적으로마친후에도검색자가자신이원하던

132 정보및문서인지를쉽게확인할수없음. X (Bad) < 그림 55> 제목이없는문서 ( 웹페이지 ) 출처 : 한국이러닝산업협회 ( 위의그림처럼문서에제목이없는경우, 현재열린창의제목줄에 Untitled Document 라고만표시되어일반인들도문서의특성을알기가힘들며 시각장애인들의경우, 여러개의문서들사이를구분하여이동하는것이불가능해짐

133 X (Bad) < 그림 56> 작업표시줄에나타난제목이없는문서 위의그림에서와같이제목이없는문서를사용할경우에는 여러개의프로그램을열어놓고작업표시줄에서사용자가원하는프로그램하나를선택할때에도제목이나타나지않아선택에혼란을줌. <html> <head> : </head> O (Good) <html> <head> <title> 한국이러닝산업협회 - 회원소개 </title> </head>

134 X (Bad) < 그림 57> 제목없는문서가검색된사례 출처 : 엠파스검색결과 ( C0%CC%C5%CD&qn=&m=B&n=15&ac=&rv=0&sd=0&v=33&w=cea1a2a3a4a5a6a7 a8a9aaabacadaeafb0&cs=a&ss=a&l= t&s=t&z=a&rq=&e=106), 위의그림에서와같이제목이없는문서는 검색엔진의검색결과, 검색순위에서밀릴뿐아니라, 검색결과를보고사용자가해당문서를선택하는데충분한정보를제공해주지못함

135 X (Bad) < 그림 58> 제목에이상한문자를사용한사례 출처 : 여성부 ( 위의그림에서는웹페이지의제목 ( 여성부홈페이지에오신것을환영합니다 ) 을제공하고있으나 시각적효과를위해제목에이상한문자 (+, : 등 ) 를사용하여, 음성으로읽었을때이해할수없는내용이함께나타나는문제가발생함. 따라서, 제목에는시각적인효과를나타내는문자 (*, +, :, # 등 ) 는사용하지않는것이좋음

136 O (Good) < 그림 59> 세부페이지마다정확한제목을제공한사례 출처 : 미국야후 ( 위의그림에서는가장첫페이지 (Yahoo!) 와첫번째세부페이지 (Yahoo! News), 그리고두번째세부페이지 (Yahoo! News - World) 의제목을명확히제공해주어 제목만으로도현재사용자가어떤문서를보고있는지쉽게구분이가능함

137 X (Bad) < 그림 60> 제목이없는팝업창 출처 : 행정자치부 ( 위의그림에서는원래의창과는별개로공지사항을전달하기위해팝업창을사용하였으나

138 문서에제목을붙이지않아서시각장애인들은그문서가어떤문서인지끝까지읽어보지않고는알수가없음. 팝업창에사용되는문서나프레임에사용되는프레임문서등모든문서에는반드시 <title></title> 을사용하여그문서의내용을대표할수있는정확한제목을붙여야함

139 2. 프레임제목붙이기 프레임을사용할때에는여러개의문서를모아지정해놓은프레임셋문서와각각의개별문서들로이루어짐. 프레임셋문서는 <frameset> 요소와개별문서를지정하는 <frame> 요소로이루어지며, 각각의 <frame> 요소는나중에브라우저가참조하기위한짧은이름 (name) 과더불어프레임간의이동을쉽게하기위해, 홈페이지사용자들이이해할수있는유의미한제목 (title) 을반드시제공해야함. O (Good) <frameset rows="20%,80%"> <frame name="top_frame" src="top_menu.html" title=" 메뉴프레임 "> <frame name="bottom_frame" src="body_text.html" title=" 본문프레임 "> </frameset>

140 X (Bad) < 그림 61> 프레임제목 (title) 을붙이지않은경우 출처 : 서울디지털대학교 ( 입학안내 ), <FRAMESET ROWS="99,*" BORDER="0" FRAMESPACING="0" FRAMEBORDER="NO"> <FRAME SRC="/guest_Top.asp" NAME="frame_top" SCROLLING="no" NORESIZE MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="NO"> <FRAMESET COLS="200,*" BORDER="0" FRAMESPACING="0" FRAMEBORDER="NO"> <FRAME SRC="/include/Menu_Script/g02_Entrance_Menu.asp" NAME="frame_left" MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="NO" SCROLLING="AUTO">

141 <FRAME SRC="/02_Admission/main.asp" NAME="frame_right" MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="NO" NORESIZE> </FRAMESET> </FRAMESET> 위의사례는프레임에제목 (title) 을붙이지않은사례임. 프레임셋문서에서프레임들을나눌때에는프레임소스하나마다 name= 과 title="" 을지정해주어야함. name은나중에문서를불러올위치 (target) 를지정하는것으로 frame_left 등과같이 ( 띄어쓰기없는 ) 영어및숫자문자열로지정함. (CDATA 형식 : title은사용자가프레임들을구분하기쉽도록안내해주는것으로 좌측메뉴프레임 과같이이해하기쉬운말로작성함. 아래는위의문서를 title을붙여수정한사례임. O (Good) <FRAMESET ROWS="99,*" FRAMEBORDER="0"> <FRAME SRC="/guest_Top.asp" NAME="frame_top" SCROLLING="no" NORESIZE MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="NO" title=" 로고

142 들어가는프레임 "> <FRAMESET COLS="200,*" BORDER="0" FRAMESPACING="0" FRAMEBORDER="NO"> <FRAME SRC="/include/Menu_Script/g02_Entrance_Menu.asp" NAME="frame_left" MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="0" SCROLLING="AUTO" title=" 좌측메뉴프레임 "> <FRAME SRC="/02_Admission/main.asp" NAME="frame_right" MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="0" NORESIZE title=" 본문내용프레임 "> </FRAMESET> </FRAMESET> 3. 흔히발견되는프레임오류 프레임셋문서의경우, <frameset> 요소가 <body> 요소를대체하므로 <frameset> 과 <body> 를모두사용하는것은문법에어긋나는것이며, 프레임을사용할수없을경우에대안적으로보여줄내용은 <noframes> 요소안에배치하되, <noframes> 자체는 <frameset> 요소안쪽에배치 (nested) 되어야함

143 <frameset> 요소의경우, border라는속성값은쓸수없으며대신 <frame> 요소에대해서는 X (Bad) frameborder= 1 또는 frameborder="0" 을사용하여프레임의경계선속성을지정해야함. <html> <head> <title> 대법원홈페이지에오신걸환영합니다.</title> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> </head> <frameset rows="75,1*" frameborder="no" border="0" framespacing="0"> <frame name="menu" scrolling="no" noresize src="k_menu.html"> <frame name="body" src="kc/kc_c100.html"> </frameset> <noframes> <body bgcolor="#ffffff"> </body> </noframes> </html> 출처 : 대법원홈페이지 (

144 위의대법원홈페이지에서 프레임셋문서의제목이 대법원홈페이지에오신걸환영합니다. 라고만되어있어, 다른페이지와차별성이나타나지않아홈페이지의이용자에게혼란을줄우려가있으므로, 해당페이지를정확하게표현할수있도록수정해야함. - 예를들면 대법원홈페이지 - 법원소식 과같이대법원홈페이지내에서어떤부분에있다는것을알려주어야함. 또한이문서의형식이프레임셋표준을따른다는것을 <!DOCTYPE...> 을사용하여맨앞부분에선언해주어야함. <frameset> 요소의속성으로 border와 framespacing 이라는속성은잘못된것으로, - 이속성들은 <frame> 요소로옮겨져야하며각각 frameborder와 marginwidth / marginheight로대체되어야함. - frameborder 속성값은 0 또는 1만가능함. <frame> 제목은 title 속성을사용하며, 일반홈페이지이용자들이이해하기쉬운용어로지정해야함

145 <noframes> 는 <frameset> 안쪽에배치되어야하며, - <noframes> 요소에 <body> 만있고아무것도없을경우에는프레임을지원하지못하는브라우저를사용하는사람들이아무런정보를얻지못하는결과를초래하므로, O (Good) - 별도의페이지를안내해주거나, 최소한의안내문구, 예를들면, 프레임을볼수있는브라우저가필요합니다. 라도넣어주어야할것임. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html lang="ko"> <head> <title> 대법원 - 법원소식 </title> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> </head> <frameset rows="75,1*"> <frame name="menu" title=" 메뉴부분 " scrolling="no" noresize src="k_menu.html" frameborder="0" marginwidth="0" marginheight="0"> <frame name="body" title=" 본문부분 "

146 src="kc/kc_c100.html" frameborder="0" marginwidth="0" marginheight="0"> <noframes> <p> 프레임을지원하지않는브라우저는 <a href="news_noframe.html"> 프레임없는페이지 </a> 를보십시오.</p> </noframes> </frameset> </html> X (Bad) <frameset rows="93,*" border="0" framemargin="0" framespacing="0" frameborder="0"> <frame name="_topmenu" src="_wntop.jsp" leftmargin="0" topmargin="0" scrolling="no" noresize/> <frameset cols="160,*"> <frame name="_leftmenu" src="_wnleft.jsp" leftmargin="0" marginwidth="0" marginheight="0" topmargin="0" scrolling="auto" frameborder="no"> <frame name="_body" src="/mainhome"> </frameset> </frameset> 출처 : 워크넷 (

147 O (Good) <frameset rows="93,*"> <frame name="_topmenu" title=" 위쪽메뉴부분 " src="_wntop.jsp" marginwidth="0" marginheight="0" scrolling="no" noresize> <frameset cols="160,*"> <frame name="_leftmenu" title=" 왼쪽메뉴부분 " src="_wnleft.jsp" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0"> <frame name="_body" title=" 본문 " src="/mainhome"> </frameset> <noframes> <p><a href="main-noframes.html"> 프레임없는버전의문서 </a> 를보십시오.</p> </noframes> </frameset>

148 VII. 깜박임, 움직임 지침 6. 콘텐츠는스크린의깜박거림을피할수있도록구성되어 야한다. 1 웹콘텐츠에는애니메이션등과같이깜박거리는주파수가 3 Hz 에서 49 Hz 사이인콘텐츠요소들을포함하지않아야한다. 2 만일위의 1에서명시한요구조건을만족할수없는웹콘텐츠는깜박거림이있는웹페이지로이동하기전에이페이지에깜박거림이있음을사전에사용자에게경고해주어야한다. 또한, 스크린의깜빡거림이배제된대체페이지를별도로제공하여야한다. 움직이는그림 (animated gif) 나애플릿및스크립트를사용한움직임, 플래시를사용한깜박임등이모두대상이되며, <blink>, <marquee> 등과같이텍스트에적용되는깜박임이나움직임과관련된태그의사용도문제가됨. 이들은모두 html/xhtml 표준에없는비표준요소일뿐아니라, 브라우저호환성과접근성측면에서도사용하지않는것이바람직함. 이러한깜박임과움직임을사용할경우, 깜박거림의주파수범위가 3hz에서 49hz이며광과민성발작의원인이되므로,

149 따라서최소한사이트메인페이지에서깜박거리는요소가없도록디자인하고, - 특정페이지에깜박거리는요소가있을때에는해당페이지로가는링크에경고를표시하고 - 깜박거림이없는대체페이지와이페이지로이동할수있는링크를제공하는것이필요함. 일반인에게도, 지나치게동시에여러곳에서깜박임이있거나, 깜박거림의주파수가위의범위에들어갔을때에는혼란스러움을느끼게하며, 깜박임이원래의도했던주의집중의효과를떨어뜨릴수있으므로, 깜박이는요소의사용을신중하게검토할필요가있음

150 X (Bad) < 그림 62> 깜박거림이심한국내의사이트 출처 : 서울방송 ( ), 국내대부분의상업적사이트가광고, 뉴스, 메뉴, 하이라이트섹션등거의모든부분 ( 사각형으로표시한부분 ) 이깜박거리도록설계되어있고, 주요메뉴를선택할때에사용자의미세한마우스움직임에도크게움직이도록설계되어있어시각적으로혼란을줄뿐만아니라 마우스조작이서툰사용자들의접근성을떨어뜨리고있음

151 O (Good) < 그림 63> 깜박임이전혀없는영국의 BBC 방송사이트 출처 : 영국 BBC 방송 ( ), 국내방송사홈페이지와대조적으로영국 BBC 방송사홈페이지의경우, 깜박이는그림이나움직이는메뉴, 움직이는텍스트등을전혀사용하지않아 차분한느낌을줄뿐만아니라, 더많은사용자들이쉽게이용할수있도록배려하고있음

152 X (Bad) < 그림 64> 대부분의사진이동시에깜박거려매우혼란스러운사례 출처 : ( 주 ) 옥션 - 포토포커스 ( 국내대형전자상거래사이트인옥션의홈페이지물품보기항목을보면다양한속도의깜박이는 GIF 파일들이빈번하게사용되고있음. 이는홈페이지방문객의시선을끌기위한것으로보이나광과민성환자나주의집중에어려움을느끼는사람들에게는정보접근에문제를야기할가능성이큼

153 X (Bad) < 그림 65> 국내사이트들에서자주쓰이는흘러가는뉴스의경우에도주의가필요함 출처 : 서울시홈페이지 ( 위의경우마우스를뉴스문장에갖다대면멈추게처리하여사용자에의한최소한의제어장치는마련해두었으나, 마우스사용이능숙하지않은사용자의경우원하는뉴스기사를정확히선택하기어렵고, 키보드제어장치가없으므로마우스를사용할수없는장애를가진사람들에게는심각한문제를야기함 시각장애인용화면낭독프로그램의경우, 변하는텍스트가계속생길경우해당부분만을계속반복적으로읽어줌으로, 결국홈페이지를전혀이용할수없게될수있으므로, 꼭필요한경우가아니라면흘러가는뉴스보다는지정된개수의최신의뉴스만을고정적으로보여주는것이바람직함

154 VIII. 장치독립성 지침 7. 키보드 ( 또는키보드인터페이스 ) 만으로도웹콘텐츠가제 공하는모든기능을수행할수있어야한다. 1 웹콘텐츠는키보드또는장애를극복하도록도와주는여러가 지입력장치를보조기구로사용하는경우에도콘텐츠가제공하는 모든기능을사용할수있어야한다. 동지침의실천적목표는마우스를사용할수없는시각장애인들과마우스를사용하기힘든지체장애를가진사람들을배려하기위한것으로, 특히마우스를클릭하는등의이벤트발생시이벤트처리기가스크립트를불러오게되는데 이때마우스와키보드등특정한장치와연관된이벤트처리기보다는장치독립적인 (device-independent) 이벤트처리기를사용하는것이바람직함. 마우스뿐만아니라키보드로도스크립트가접근가능하게하려면대응하는키보드이벤트처리기를추가하여야하며, 마우스의더블클릭의경우, 대응하는키보드의이벤트가

155 없으므로사용시주의가필요함. 기하학적인도형으로정의가안되는영역이있는경우를제외하고는서버측이미지맵 (server-side image maps) 대신에, 반드시클라이언트측이미지맵 (client-side image maps) 을사용해야함.( 지침 4 참고 ) 키보드를통해순차적으로 ( 예를들면 Tab 키를이용 ) 또는직접적으로 ( 단축키를이용 ) 웹페이지내의요소들을탐색할수있어야함. 1. 장치독립적인이벤트발생기사용 사용자상호작용관점의이벤트가아닌응용프로그램관점의이벤트를사용해야함 예를들어 HTML 4.01에서는 onfocus", "onblur", "onselect" 와같은것들이응용프로그램관점에서의이벤트속성으로, - 이것들은특정입력장치에연계된이벤트가아니므로, 장치독립적인 (device independent) 이벤트라할수있음

156 또한, "onmousedown", "onmouseup", "onclick", "ondblclick" 등은마우스를이용한사용자상호작용관점의이벤트발생기로, - 마우스가없거나쓸수없는사용자에게문제가발생함. 마우스와관련된이벤트를꼭써야할경우에는그것에대응하는키보드이벤트를같이넣어주는것이바람직함. "onmousedown" 사용시는 "onkeydown" 을병행 "onmouseup" 을사용시는 "onkeyup" 을병행 "onclick" 을사용시는 "onkeypress" 를병행 - 사실상현존하는대부분의브라우저는 onclick 이벤트에대해서 onkeypress를동시에지원해주므로현실적으로는 onkeypress를명시할필요성은줄어들고있음. 마우스좌표에의존하는이벤트를쓰는것은장치독립적인입력관점에서바람직하지않음

157 X (Bad) < 그림 66> 마우스로만조작가능한메뉴 출처 : 중소기업청 ( 홈페이지 <a href="sub_frame2.jsp?page=/portal/ portal.policy.policyservlet?yl=01" onmouseout="mm_swapimageresore()" onmouseover="mm_swapimage('image36','','images/y_le fte_02.gif',1);mm_showhidelayers('layer1... 중략 위의그림에서는지원정책메뉴를마우스로만선택하도록되어있음. 즉, 각각의메뉴링크에 onmouseout, onmouseover 이벤트만을사용하여키보드를이용한접근은제한됨

158 onfocus, onblur를추가하여작성하면이론적으로최소의키보드접근이가능하게됨. - 현실적으로는키보드접근성을보장하기위해탭 (Tab) 키로이동시탐색순서, 마우스좌표위주의설계등몇몇가지를더고려해야사실상키보드접근이가능해짐. O (Good) <a href="sub_frame2.jsp?page=/portal/ portal.policy.policyservlet?yl=01" onmouseout="mm_swapimgrestore()" onblur="mm_swapimagrestore()" onmouseover="mm_swapimage('image36','','images/y_le fte_02.gif',1);mm_showhidelayers('layer1... 중략 onfocus="mm_swapimage('image36','','images/y_lefte_ 02.gif',1);MM_showHideLayers('Layer1... 중략 2. 키보드탐색 시각장애인, 지체장애인 ( 뇌병변장애포함 ) 등많은사용자들이마우스와같은위치지시장치 (pointing device) 를사용할수없으며, 특수환경 ( 운전중등 ) 에서는일반인도마우스를사용하기

159 힘든경우가발생함. 따라서, 마우스가아닌키보드만으로도메뉴선택과링크선택등웹페이지내의상호작용이가능해야함. 페이지내의선택가능한요소들사이를이동할때에는 Tab 키 ( 전진 ), Shift + Tab 키 ( 후진 ) 를이용함. Tab 키를이용해전진및후진이동할때에논리적으로타당한순서대로이동하도록제작되어야함. 텍스트필드의특정한값을조사하여, 오류발생시강제로포커스 (focus) 를특정한양식 (form) 으로이동시킬경우, 키보드를이용한입력이불가능해질수있으므로주의해야함. (1) tabindex 속성 보통은소스에서작성된순서에따라요소들사이를 Tab키를이용해이동할수있음. 하지만, 소스상의순서와다르게이동하는것이논리적으로더타당할때또는명확히이동순서를웹콘텐츠제작자가

160 지정하고자하는경우에는, Tab 키를이용해요소 (element) 들을이동할때에각요소에 tabindex 값을넣어주어요소들간의이동순서를웹콘텐츠제작자가정함. 하지만, 모든요소에 tabindex 값을넣을수는없고, - A( 앵커 ), AREA( 이미지맵의영역표시 ), BUTTON( 버튼 ), INPUT( 입력양식 ), OBJECT( 객체표시 ), SELECT( 목록상자양식 ), TEXTAREA( 텍스트입력양식 ) 에대해서만 tabindex를넣을수있음. 사례 : tabindex가중복될경우, 소스에서먼저출현하는것이앞선순서를배정받음. 아래의예에서는 BUTTON, INPUT filed1, INPUT filed2, INPUT submit, A 순으로포커스가이동함. O (Good) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <HTML> <HEAD> <TITLE> 복잡한 tabindex 사용예 </TITLE> </HEAD> <BODY>

161 ...some text... <P>Go to the <A tabindex="10" href=" Web site.</a>...some more... <BUTTON type="button" name="get-database" tabindex="1" onclick="get-database"> Get the current database. </BUTTON>...some more... <FORM action="..." method="post"> <P> <INPUT tabindex="1" type="text" name="field1"> <INPUT tabindex="2" type="text" name="field2"> <INPUT tabindex="3" type="submit" name="submit"> </P> </FORM> </BODY> </HTML>

162 < 그림 67> 복잡한 tabindex 사용예 출처 : W3C의 HTML 4.01 명세 ( 위의그림에서노란색동그라미로표시된번호는탭키의이동순서이며, [ ] 안에표시된숫자는소스에서지정한 tabindex 값임. 요소의출현순서보다 tabindex가더우선적으로적용되지만, 그값이동일하면요소의출현순서에따라이동순서가결정됨. 즉, [Get the current database] 버튼과그밑에있는텍스트입력상자는동일하게 tabindex="1" 을가지고있지만 [Get the current database] 버튼이더먼저출현하므로키보드로이동할때에가장먼저포커스를받게됨

163 O (Good) <input type=image src="/img/b_login.gif" style="border:0" tabindex='3' alt=' 로그인하기 '> <!--중간생략--> <input type=text name=puserid size=12 maxlength=15 onfocus="this.select()" tabindex='1'> <!--중간생략--> <input type=password name=ppasswd size=12 maxlength=15 onfocus="this.select()" tabindex='2'> < 그림 68> 입력순서를 tabindex 값을통해바르게지정한예 출처 : 정보통신사이버대학 ( 위의사례에서, 소스내에서는로그인버튼 아이디입력창 암호입력창순으로각요소가출현하지만, tabindex를이용하여아이디입력창 암호입력창 로그인버튼순으로탭키가이동하도록설정해놓아사용자들의편의성을높여주고있음

164 X (Bad) 아래의그림에서는키보드로이동할때에이름 확인버튼 주민등록번호앞자리 주민등록번호뒷자리순으로포커스가이동하여 이름을입력한다음바로주민등록번호를입력할수없고, 확인 버튼을건너뛴다음에주민등록번호를입력가능함. 따라서마우스가아닌키보드사용자에게혼란을가져오는잘못된사례임. < 그림 69> 탭키순서가지정되지않아불편을주는사례 출처 : 청와대홈페이지회원가입 ( (2) accesskey 속성

165 중요한요소에는 accesskey 속성을이용해직접접근가능한단축키를넣어줌으로써탭키를이용한순차적인접근에대해서보완할수있음. 단축키를넣을수있는요소로는 A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA가있음. 보통 Windows 기반의 PC에서는 Alt+ 단축키를, Mac OS에서는 Cmd+ 단축키를누르면단축키가실행됨. 아래의예에서는단축키 U를누르면 이름 이라는 LABEL 요소가활성화되어, 바로텍스트입력필드를활성화시켜바로이름을입력할수있게됨. <FORM action="..." method="post"> <P> <LABEL for="fuser" accesskey="u"> 이름 </LABEL> <INPUT type="text" name="user" id="fuser"> </P> </FORM> 출처 :HTML 4.01 Specification (

166 아래의예와같이앵커 (A) 에단축키를넣어주면, 링크에포커스가이동하거나 ( 인터넷익스플로러의경우 ) 또는링크가가리키는문서로직접이동할수있음 ( 모질라계열브라우저의경우 ). <A accesskey="c" rel="contents" href=" tml"> 목차 </A> accesskey 사용시주의 accesskey는브라우저에서기본적으로제공하는단축키와충돌을일으킬수있으므로, 사용시주의가요구됨. - 특히사용자의시스템과사용자가사용하는브라우저, OS, 프로그램종류에따라어떤단축키가사용될지알수없으므로, 꼭필요한경우가아니면, tabindex를활용하고, accesskey 사용을자제하는것이안전한방법임. (3) 자동초점이동

167 X (Bad) 아래의그림에서는 < 그림 82> 과는달리, 키보드를이용할때에도성명 주민등록번호 실명확인버튼순으로이동이가능하지만, 주민등록번호앞자리를입력했을때에자동으로뒷자리로넘어가도록해놓아, 실수로잘못입력했을경우, 키보드로는다시앞자리로이동 (Shift+Tab) 할수없는문제가발생함. < 그림 70> 회원가입시흔히사용되는주민등록번호입력의문제점 출처 : 조선닷컴회원가입 ( 아래는 < 그림 83> 에대한 HTML 소스로, onkeydown 이벤트가발생했을때에자동으로 Enter_Key라는함수를호출하여주민등록번호뒷자리 (reg2) 로이동하도록되어있음

168 X (Bad) // 자동으로포커스를이동하는자바스크립트함수 function Enter_key(toform){ if(document.m_body.hansin.value == 'true') document.m_body.hansin.value = 'false'; if(event.keycode == 13){ toform.focus(); } } <!-- 중간생략 --> <!--주민등록번호앞자리--> <input type="text" class="box_nm" name="reg1" size="6" maxlength="6" onkeyup="reg1chk(this.value);" onkeypress='if((event.keycode < 48 ) (event.keycode >57)) event.returnvalue=false;' onkeydown='enter_key(this.form.reg2)'> - <!--주민등록번호뒷자리--> <input type="password" class="box_pw" name="reg2" size="12" maxlength="7"

169 onkeyup="reg2chk(this.value);" onkeypress='if((event.keycode < 48 ) (event.keycode >57)) event.returnvalue=false;' onkeydown='enter_key(this.form.real_auth);'> 아래는 < 그림 83> 에대한 HTML 소스를수정한것으로, 주민등록번호뒷자리로자동으로이동하는이벤트에연계된함수 (onkeydown='enter_key(this.form.reg2)') 를제거하여키보드입력의접근성을높인것임. O (Good) <!-- 중간생략 --> <!--주민등록번호앞자리--> <input type="text" class="box_nm" name="reg1" size="6" maxlength="6" onkeyup="reg1chk(this.value);" onkeypress='if((event.keycode < 48 ) (event.keycode >57)) event.returnvalue=false;'> - <!--주민등록번호뒷자리--> <input type="password" class="box_pw" name="reg2" size="12" maxlength="7" onkeyup="reg2chk(this.value);" onkeypress='if((event.keycode < 48 ) (event.keycode >57)) event.returnvalue=false;'

170 onkeydown='enter_key(this.form.real_auth);'> (4) 키보드를통한메뉴선택 O (Good) < 그림 71> 키보드로이동과선택이가능한 2 단계메뉴의예 출처 : 미국 Apple 사 ( 위의사례에서는 Tab키로이동시상위메뉴를왼쪽에서부터순서대로이동한다음, 하위메뉴로이동함. 따라서마우스를사용하지않더라도일반적으로생각하는논리적인순서에따라키보드를이용해메뉴를이동하고탐색할수있음. (Good) 아래사례는 < 그림 84> 처럼키보드로도메뉴이동이가능하도록잘제작되었으나, 플래시로메뉴를제작하여플래시가작동되지않을경우

171 ( 예를들면텍스트브라우저사용자나플래시플러그인을설치하지못한사용자 ) 메뉴에접근할수없는문제가있음. 또한, 키보드로메뉴이동시현재선택된메뉴를시각적으로확인 ( 사각형테두리 ) 할수있도록콘텐츠를제작함. 하지만, 현재까지는인터넷익스플로러외의다른브라우저에서는작동하지않는문제점이있음. < 그림 72> 경우에따라키보드로이동과선택이가능한 2 단계메뉴 출처 : 미국 Macromedia 사 ( 위의그림을보면, 플래시로제작하였지만 Tab 키를통해선택된상위메뉴의하위메뉴까지논리적인순서로이동가능하며, 선택된부분에는시각적인테두리가주어져현재위치 (Products Products Home) 를알기쉬움. 단, 특정한브라우저에서만작동함

172 X (Bad) 아래의사례는 2004년현재우리나라홈페이지에서주메뉴구성에자주사용하는기법으로, 주메뉴를접근성을고려하지않은플래시로제작하여, 이로인해다음과같은문제가발생함. - 키보드로는메뉴선택과이동이전혀불가능함. - 마우스를이용할경우에도, 매우세밀하게마우스포인터를움직이지않으면메뉴선택이어려움. ( 노인, 지체장애인, 손떨림이있는사용자등 ) < 그림 73> 키보드접근성을고려하지않은플래시메뉴 출처 : KT ( 위의그림을보면, Apple사와같이 2단계의메뉴체계로되어있으나,

173 모든메뉴를플래시로제작하였으며, 마우스가아니면전혀메뉴접근을할수없음. 마우스의움직임에따라메뉴의위치, 크기, 모양이계속바뀌므로미세한마우스동작실수에의해메뉴선택을잘못할가능성도매우큼

174 IX. 링크를통한이동 지침 8. 웹콘텐츠는반복적인네비게이션링크 (repetitive navigation link) 를뛰어넘어페이지의핵심부분으로직접이동할수있도록구성하여야한다. 1 웹콘텐츠상에반복적네비게이션링크객체가포함되어있으며이링크객체가콘텐츠의핵심부분보다먼저읽어주도록구성된경우에이들링크들의읽기를생략하고직접콘텐츠의메인부분으로직접이동할수있는링크를제공하여야한다. 2 하나의긴문장으로구성된웹페이지는이페이지의문장을여러개의논리적인절로구분하고각절의색인을콘텐츠의첫부분에포함시켜원하는절의시작부분으로직접이동할수있도록웹페이지를구성한다. 3 모든웹사이트는텍스트또는대체텍스트가포함된텍스트아닌콘텐츠로구성된사이트맵을제공하여야한다. 사이트구조상동일한상단메뉴나좌측메뉴가페이지마다되풀이될경우에는, 이를화면낭독프로그램이반복적으로읽지않고서바로중요한내용으로건너뛸수있도록링크를넣어주어야함 즉, 각페이지의메뉴시작부분에해당페이지의핵심콘텐츠로바로이동할수있는링크를제공하면메뉴를순서

175 대로읽지않고도핵심콘텐츠에직접접근할수있게됨. 전체사이트의구조를한눈에볼수있는사이트맵을제공하는것처럼, 한페이지내에서도전체내용의목차를먼저보여준다음해당내용들을보여주도록구성하는것이매우중요함. 1. 건너뛰기링크 O (Good) < 그림 74> 보이지않는건너뛰기링크가제공되는사례 출처 : World Wide Web Consortium (

176 위의 < 그림 87> 에는 7개의선택항목 (Activities, Technical Reports,, Contact W3C) 을거치지않고핵심내용으로이동할수있도록콘텐츠를제작함. 즉, Activities 링크앞에 Skip to Technologies' 라는링크를제공하고있음. 이링크는보통의시각적인브라우저에서는눈에보이지않아아무런영향을주지않으나, < 그림 88> 과같이텍스트전용브라우저나, 시각장애인용화면낭독프로그램을사용할경우에는모든항목을읽지않고핵심콘텐츠로바로이동할수있는장점이있음. < 그림 75> 위의사이트를텍스트전용브라우저로본경우 출처 : World Wide Web Consortium (

177 <span class="invisible"><a class="bannerlink" title="skip introductory links and the mission statement" href="#technologies" shape="rect">skip to Technologies</a>... 중략... <a name="technologies" id="technologies" shape="rect">w3c A to Z</a> 위의소스에서 Skip to Technologies 링크를선택할경우에는같은페이지내의다른부분을건너뛰고 '#technologies' 라는부분으로이동하도록콘텐츠를제작함

178 X (Bad) < 그림 76> 너무많은메뉴를건너뛸방법이없는경우 출처 : 와싱턴포스트 ( 위의그림에서와같이신문사사이트는전형적으로왼쪽에매우많은메뉴항목들을가지고있으므로, 오늘의주요기사에접근하려면모든메뉴를거쳐야함. 따라서반드시많은메뉴를건너뛰고바로오늘의주요

179 기사를읽을수있는링크를제공해야함. 2. 사이트맵 X (Bad) < 그림 77> 사이트맵이없는홈페이지 출처 : 농림수산정보센터패밀리사이트아피스포털 ( 위의홈페이지는상당히많은부분과복잡한메뉴로이루어졌으나, 첫페이지와하위페이지모두에사이트맵이제공되지않아, 전체적으로사이트의구조를파악하기가어려움. 장애인들의경우, 사이트맵이복잡한웹을탐색하는데에매우큰도움을주므로사이트맵은매우쉽게접근성을높일수있는방법임

180 O (Good) < 그림 78> 위계적으로잘구성해놓은사이트맵. 출처 : Accessify.com ( 위의사례에서는사이트맵을위계적으로큰메뉴, 작은메뉴를잘구분하여제공하고있을뿐만아니라, 위계적으로찾아가기힘들경우, 바로알파벳순으로원하는페이지를찾을수있도록알파벳순의사이트맵을함께제공하고있어, 전체적인구조를시각적으로한꺼번에파악하기힘든장애인들에대해서도쉽게원하는페이지를찾을수있도록배려하고있음

181 3. 페이지내목차 한페이지내에서도시각장애인의경우에는원하는곳을찾으려면모든문서를순차적으로읽어내려가야하므로 한페이지내에서도전체내용의목차를먼저보여주고, 또한, 목차를클릭하면해당내용으로직접이동하도록구성해야함. X (Bad) < 그림 79> 목차바로가기가필요한경우 출처 : 한국디지털대학교학칙안내 (

182 위의그림에서학칙은여러개의장과여러개의조로이루어져있음. 이와같이여러개의조항으로이루어진글의경우맨위쪽에전체조항을열람할수있는목차와바로가기링크가있어야함. 그렇지않으면, 장애인들의경우, 원하는조항을바로갈수없고, 모든조항을순차적으로읽어내려가야하는불편함이생김. O (Good) < 그림 80> 복잡한페이지에먼저제시된목차

183 출처 : 미국 Department of Health and Human Services ( 위의그림에서와같이페이지의내용이매우길고여러개의부분으로나뉠경우, 맨위쪽에각부분으로이동할수있는목차를먼저보여줌으로써전체내용을쉽게파악할수있고, 원하는부분으로쉽게이동이가능함

184 X. 시간제한 지침 9. 실시간이벤트나제한된시간에수행하여야하는활동등 은사용자가시간에구애받지않고읽거나, 상호작용을하거나응 답할수있어야한다. 1 웹콘텐츠의시간제약조건이최소한아래의항목중하나는 만족하여야한다. 1) 사용자가시간제한기능을동작하지않도록할수있거나, 2) 일반적으로사람들이선호하는시간의 10 배이상으로제한시 간을늘릴수있거나, 3) 주어진시간이종료하기전에경고를발하며, 제한시간을늘 리기위하여최소한 10 초이상시간이주어질수있어야한다. 2 그러나아래의항목은예외로한다. 1) 경매등과같이시간제약이있으나다른대안이없는경우거 나, 2) 실시간게임이나시간이정해진범위에서작업해야하는테스 트등과같이시간제약이필수적인경우 3 팝업창은가급적사용을피해야한다. 그러나꼭사용해야하는경우에는팝업창이열리기전에사용자에게경고를할수있어야한다. 또한팝업창이열리더라도포커스가새로열린팝업창으로이동해서는안된다

185 1. 페이지자동이동 (1) 메타리프레시 (meta refresh) 다음과같은경우특정한페이지를방문했을때다른페이지로자동으로바뀌도록할필요가생길수있음. 더이상그페이지주소가유효하지않아서, 유효한새주소로이동시킬때 그페이지에서어떤작업을처리하고나서, 다른페이지로이동시킬때 웹서버에서지정한시작파일이아닌다른파일에서시작되도록하고싶을때 위와같은경우에일반적으로아래와같이 meta "refresh" 기법을사용함. X (Bad) <!-- 10 초후에 URL 에서지정된페이지로자동으로이동 --> <META HTTP-EQUIV=Refresh CONTENT="10; URL=

186 그러나이방법은다음과같은이유로사용하지않는것이바람직함. 어떤브라우저에서는이런식의페이지이동을지원하지않으며, 장애인용화면낭독프로그램, 텍스트기반의브라우저에서이런기능을지원할수없음. 통상적으로사용되는그래픽기반의브라우저 ( 인터넷익스플로러, 모질라, 파이어폭스, 사파리, 오페라등 ) 에서도무단으로성인사이트로이동하는것을막기위해사용자가메타리프레시기능옵션을꺼둘수있음. 이렇게페이지이동을한후에는, [ 뒤로가기 ] 버튼을통해페이지를되돌아갈수가없고, 사용자는아무리뒤로가기버튼을눌러도현재페이지에서갇혀버림. 이제까지방문했던페이지들의기록 (history) 이엉망이됨. 의미적으로새페이지가구페이지를대체한다는정보를아무것도가지고있지못하므로검색엔진의검색로봇이해당페이지가새페이지로옮겨졌다는정보를찾아내지못함. 어떤검색엔진에서는리프레시를사용한페이지는의도적으로검색결과에서빼버림

187 이전페이지의내용을미처다읽지못했는데사용자의의도와무관하게새페이지로내용이바뀌어버려특히느리게읽는사람 ( 예 : 외국인등 ) 에게불편을초래할수있음. 특정시간내에어떤일을다끝마치지않으면새페이지로이동해버리겠다는것은 X (Bad) - 장애인, 노인과같이컴퓨터작업속도가일반인보다훨씬느린사람들에게는인터넷을쓸수없게만드는결정적요인이됨. < 그림 81> 자동으로다른페이지로이동하도록잘못제작된페이지의예 출처 : 원진에이티 ( 초후에자동으로페이지가다른주소로넘어가도록되어있어, 페이지가넘어간후에는뒤로가기버튼 ( ) 을이용해원래의페이지나, 그이전페이지로돌아갈수없음. (2) HTTP redirects meta 태그를이용한리프레시는웹문서와브라우저사이

188 에서리프레시가일어나는반면, HTTP Redirect의경우는서버자체에서이미다른주소를참조하도록설정이되어있어, 처음부터브라우저는최종주소만을받게됨. 또한 HTTP redirects를쓰면서버가브라우저에게주소가바뀐이유에대해더의미있는정보를 HTTP 상태코드 (status code) 로전달해주어, 문법검사기, 검색엔진, 브라우저등이그것을기반으로서로다른행동을취할수있도록도움을줌 - 영구적인이동 (HTTP 301) - 일시적인이동 (HTTP 307) - 정의되지않은이동 (HTTP 302) 등 서버측 redirect 를지정하는방법 Apache 웹서버의경우 httpd.conf 파일에 redirect directive를넣어줌 O (Good) Redirect permanent /one Redirect 303 /three

189 IIS 웹서버의경우 Internet Information Services 스냅인 (Snap-In) 에서원하는웹사이트나디렉토리를선택한후 Property Sheet를열고, - Home Directory, Virtual Directory 또는 Directory 탭을선택한다음, A Redirection to a URL을선택함 - Redirect to 상자에이동하고자하는주소의 URL을넣어주면됨 - 예를들어 /Catalog 디렉토리에있는파일에대한요청이들어오면그것을 /NewCatalog 디렉토리로보내고자할때에, /NewCatalog라고입력함. 웹서버관리자권한이없을경우, 서버측스크립트언어인서버측스크립트언어를이용해 HTTP 헤더에값을보낼수있으며, PHP의경우에는아래와같이작성해야함. O (Good) <?php header("location: (3) 단순한링크를통한이동

190 시간제약을걸어놓고사용자의반응을기다리거나, 사용자가미처반응하기전에브라우저가다음동작을취하는것은, 반응이느린사용자 ( 장애인, 노인, 초심자등 ) 의사용편의성을크게떨어뜨리므로, 단순하게정적인링크를사용하는것이가장좋은대안이될수있음 O (Good) 아래의예는주소가바뀌었다는사실을직접적으로알려주고, 사용자가그바뀐주소에걸린링크를선택하여이동할수있도록한예임. 이페이지는 2004 년 1 월 1 일이후부터 <a href=" 새로운주소 </a> 로 옮겼습니다. 책갈피 / 즐겨찾기를해놓으셨다면수정해주십시오

191 2. 빠른내용의전환 최신뉴스를전하기위해수초마다내용이갱신되거나, 좌우또는상하로내용이흐르도록할경우, 글읽는속도가느리거나 ( 정신지체장애인, 어린이등 ) 마우스조작이어려운사람 ( 노인, 지체장애인, 컴퓨터초보자등 ) 은원하는뉴스나뉴스기사를선택할수없음 특히, 화면낭독프로그램을사용해홈페이지를보는시각장애인의경우페이지의특정한부분이계속반복적으로업데이트되어 포커스가다른곳으로넘어가지못하고한곳에갇혀버릴수있는문제가발생함

192 X (Bad) < 그림 82> 수초마다자동갱신되는뉴스 출처 : 네이버 ( 위의그림에서뉴스의아랫부분은자동으로수초마다갱신되도록해놓아, 비시각적인탐색을하는장애인들은해당부분으로포커스가반복적으로이동해버려, 다른부분으로이동이불가능해질수도있음. 따라서, 아주부득이한경우가아니라면다음과같은대안적인방법을사용하는것이바람직함. 최신의뉴스기사몇개만을고정적으로보여주되, 사용자가직접해당페이지를다시불러오거나 (page reload),

193 다른사용자가들어왔을때에는다른내용의뉴스기사가나오도록프로그래밍하여, - 실제로는고정된페이지를보여주되, 원하는뉴스를모두보여주는효과를간접적으로얻을수있음 주어진공간이적어서많은뉴스를보여주지못할경우에는, - 단순히전체보기 (more...) 링크를통해뉴스전체를볼수있는화면으로이동하게할수있음. 굳이한화면에서좁은공간에더많은내용을보여주고자할경우에는, - <iframe> 을사용하여, 사용자가직접위아래로스크롤해가면서뉴스기사를선택할수있으며, - 이러한경우 <iframe> 요소에는반드시 title= 최신뉴스 와같은식으로이름을붙여서현재의 iframe 구역이어떤목적으로설정되었다는것을알려야함 3. 새창, 팝업창 (1) 링크에연결된새창

194 사용자가특정한링크를선택하여다른곳으로이동할때에, 다음과같은이유로꼭필요한경우가아니면새창보다는현재의창에새로운주소가나타나는것이바람직함 새창에새로운주소가열릴경우, 브라우저의방문기록 (history) 이남지않아서뒤로가기 ( ) 와앞으로가기 ( ) 등탐색에자주사용하는버튼을사용할수없음 시각장애인의경우, 소리를통해웹을탐색해야하므로한번에한곳에만주의를집중할수있으며, - 새창이열리는것은동시에두개이상의내용을머릿속에기억하고그것들사이를왔다갔다해야함으로, - 인지적인부하가급격하게증가하여웹에서길을잃고사용자를혼란스럽게만드는원인이됨. 특히두개이상의창이열릴때에창제목 ( 즉, 문서의제목 ) 을정확히부여하지않았을경우에는 - 일반인과시각장애인등모두에게혼란을줄수있음 따라서, 부득이하게새창을열어야할경우에는미리해당링크에대한설명이나 title 속성을통해경고를해주는것이바람직함

195 X (Bad) < 그림 83> 경고없이무조건새창으로뜨는링크 <!-- 아무런경고없이기본링크가새창으로열림 --> <a target="_blank" href=" ic&mode=srch_ke&query=accessibility" onclick="return goothercr(this,'u='+escape(this.href)+'&r=1&i=_dumm y_&f=nx&a=dict_en&q='+headerfooter_query_encoded);" > 영한사전 (1건)</a>

196 출처 : 네이버검색결과 ( 위의사례와같이국내대다수사이트들이일반적인링크에대해새창이뜨도록해놓아장애인들에게불편을주고있음. 이경우에는새창이아닌링크로교체하거나, 또는아래와같이최소한새창으로링크가열릴것이라는사실을미리알려주어야함. <!-- 새창으로열린다는사실을미리경고해주도록바꾼예 --> <a target="_blank" href=" ic&mode=srch_ke&query=accessibility" onclick="return goothercr(this,'u='+escape(this.href)+'&r=1&i=_dumm y_&f=nx&a=dict_en&q='+headerfooter_query_encoded);" title=" 검색결과보기 : 새창으로열림 "> 영한사전 (1건)( 새창 )</a>

197 O (Good) < 그림 84> 새창으로열릴것을미리알려준사례. <!-- 기본링크는같은창에서열림 --> <a class="yschttl" href=" y/v=2/sid=w/tid=prvt_83/l=ws1/r=1/ipc=kr/she=0/h=1/ SIG=11n9hrj6i/EXP= /*-http%3A//outlook.mic rosoft.com/enable">home, Microsoft <b>accessibility</b></a> <!-- 새창으로열고싶을경우별도의링크가제공됨 --> <a href=" y/v=2/sid=w/tid=prvt_83/l=ws1/r=1/ipc=kr/she=0/h=1/ NW=1/SIG=11n9hrj6i/EXP= /*-http%3A//outloo

198 k.microsoft.com/enable" target="_blank"><img src=" nw2.gif" alt="open this result in new window" border="0" height="11" width="11"></a> 출처 : 미국야후검색결과 ( 위의그림에서와같이국내사이트와대조적으로미국의사이트들은링크가같은창으로열리는것이기본값이며, 특별히사용자가새창으로열고싶을경우별도의아이콘링크 ( 빨강색동그라미부분 ) 를마련해놓았음. 뿐만아니라새창으로열리는그림에는충실하게새창으로링크가열릴것이라는안내를 <img> 의 alt 속성을이용해하고있음. (2) 원하지않는팝업창 링크가새창으로열리는것보다사용자들이원하지않았는데팝업 (Pop-up) 창이열리는것은더나쁜영향을줌. 특히시각장애인들의경우원하지않는팝업창이여러개떴다는사실을모르고엉뚱한창에서계속웹탐색을진행하다포기하는경우가생길수있음. 요즈음많은브라우저들 ( 예 : Mozilla, Mozilla Firefox,

199 Opera, Safari, Avant Browser, Konqueror 등과같이기본적으로팝업차단기능이내장된브라우저나 Windows XP Service Pack 2나구글툴바와같은팝업차단소프트웨어를설치한 Internet Explorer 등 ) 에서원하지않는팝업창을차단하도록기본값이설정되어있어, 팝업창을이용해일반사용자들의주목을끌수있는가능성도점점줄어들고있음 많은사용자들이원하지않는팝업창 ( 예 : 팝업광고등 ) 에대해불편함을느끼고, 무의식적으로팝업창을닫아버리는습관으로인해중요한메시지전달을팝업창으로하는것은실질적효과가없음

200 X (Bad) < 그림 85> 여러개의원하지않는팝업창이뜨는사례 출처 : 철도청 ( 위의그림에서는첫페이지에원하지않는팝업창이무려 4개씩이나등장하여큰혼란을줌. 더욱이팝업창마다 ( 문서의 ) 제목을정확히붙여놓지않아문제가심각해짐. 위의그림에서와같이모든사용자에게꼭알려야할만큼중요하고긴급한내용이라면팝업을무분별하게띄우지말고,

201 본문페이지의사용성과편의성을고려한디자인을통해어떻게사용자의주목을끌수있을지고민해야할것임

202 XI. 데이터테이블 지침 10. 데이터테이블은테이블을구성하는데이터셀의내용에 대한정보가충분히전달될수있어야한다. 1 데이터테이블은테이블의제목이나테이블의내용을요약하여 제공해야한다. 2 데이터테이블은데이터셀별로대응되는모든헤더를확인할 수있도록구성하여야한다. 1. 표 (table) 의종류 데이터테이블 (data table) 이란표로나타내기에적당한논리적인정보들 ( 예를들면연도별예산표또는일주일식단표등 ) 을머리글 (header) 부분과일반내용부분으로나누어표현한표를말하며, 배치용테이블 (layout table) 과대조됨. 데이터테이블은시각적으로 2차원의격자형식으로표현되지만, 음성으로는내용을풀어서표현되며, 이때일반내용칸을읽기전에그것의머리글 (header) 을짝지어서읽어줌

203 배치용테이블 (layout table) 이란논리적인정보를나타내기위해서가아니라 단순히시각적으로텍스트나그래픽을원하는위치에배치하기위해 HTML의 <table> 요소를사용한경우를지칭함. 접근성측면에서배치용테이블을남용하는것은바람직하지않으며, - 보통은스타일시트 (CSS : Cascading Style Sheet) 의위치지정기능 (positioning) 으로대체할수있음. 2. HTML 에서데이터테이블의바른사용법 summary 속성 summary 속성은비시각적인웹표시장치인화면낭독프로그램이나점자표시장치등에게유용한표의구조, 요약정보를제공하는것으로, - summary 속성은시각적인브라우저에는아무런표시가되지않음. caption 요소

204 caption 요소는표의제목을나타내는것으로, 시각적인브라우저에서표의위또는아래에표시되며, 그위치와모양은스타일시트 (CSS) 를통해조정가능함. 머릿글 (header) 요소 표에서제목줄이나제목열에해당하는정보를표시하기위해서사용되는요소를머릿글요소라고하며, <thead>, <tfoot>, <th> 등이있음. 모든테이블의가로줄 (row) 은 <thead>, <tbody>, <tfoot> 요소를사용하여크게세개의그룹으로나눌수있음. <TABLE> <THEAD> <TR>... 머릿글정보... </THEAD> <TFOOT> <TR>... 꼬릿말정보... </TFOOT> <TBODY> <TR>... 첫번째데이터블록의첫번째줄... <TR>... 첫번째데이터블록의두번째줄... </TBODY>

205 <TBODY> <TR>... 두번째데이터블록의첫번째줄... <TR>... 두번째데이터블록의두번째줄... </TBODY> </TABLE> 표의머릿글 ( 헤더 ) 과내용칸 (content cell) 을올바르게짝짓기 표의머릿글과실제데이터를담고있는내용은짝짓기가바르게되어야 - 표를표시할수없는상황에서표를펼치거나, 화면낭독프로그램등에서표를순서대로읽어줄때에도 - 표가제공하고자하는정보를정확히이해할수있음. 짝짓는방법은크게두가지이며, - 첫번째는머릿글에고유한 id 속성값을준다음, 그것과연관되는내용에도 headers라는속성을통해똑같은값을갖게함으로써연관성이있다는것을나타낼수있음. - 두번째는머릿글이영향력을미치는범위를 scope 속성을이용해표시해주는방법임. < 개인별시험성적표 >

206 구분 중간고사 기말고사 김철수 박영희 Bad (X) <table> <tr><td> 구분 <td> 중간고사 <td> 기말고사 <tr><td> 김철수 <td>50<td>60 <tr><td> 박영희 <td>70<td>80 </table> 위의표를화면읽기프로그램으로읽었을때의예 구분, 중간고사, 기말고사, 김철수, 50, 60, 박영희, 70, 80 Good (O) <!-- scope 를이용해머릿글과내용을짝지은예 --> <table summary=" 중간고사와기말고사성적을개인별로보여주는표 "> <caption> 개인별시험성적표 </caption> <thead>

207 <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 </table> </tbody> <!-- id, headers 속성을이용해머릿글과내용을짝지은예 --> <table summary=" 중간고사와기말고사성적을개인별로보여주는표 "> <caption> 개인별시험성적표 </caption> <thead> <tr> <th> 구분 <th id="midterm"> 중간고사 <th id="final"> 기말고사

208 </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 </table> </tbody> 화면읽기프로그램으로읽었을때의예표제목 : 개인별시험성적표표머릿글 : 구분, 중간고사, 기말고사표내용 : 김철수중간고사 50, 김철수기말고사 60 박영희중간고사 70, 박영희기말고사 80 Good (O) 아래표는머릿글부분에 id 속성값 ( 예 : checkpoint, status 등 ) 을준다음,

209 실제내용칸에서는그값을 headers에다시지정해줌으로써내용칸이어떤머릿글과짝지어지는지명확히표시해주고있음. < 그림 86> 머릿글과내용을적절하게짝지은표의예 출처 : IBM Accessibility Center ( <!-- id, headers 속성을이용한머리글과내용짝짓기예 --> <table summary="ibm Web accessibility checklist" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td colspan="4" height="18" class="tdblue">ibm Web accessibility checklist - version 3.5</td> </tr> <tr bgcolor="#99ccff">

210 <th id="checkpoint" colspan="2">checkpoint</th> <th id="status"><small>yes No<br/>Planned<br/>N/A</small></th> <th id="cmts">comments</th> </tr> <tr bgcolor="#eeeeee"> <th id="cp1" width="4%" valign="top"><a name="checkpoint1">1</a></th> <td headers="checkpoint cp1" width="46%"><a href="webimages.html">images and animations</a>. Use the <span class="textelement">alt="text"</span> attribute to provide text equivalents for images. Use <span class="textelement">alt=""</span> for images that do not convey important information or convey redundant information. </td> <td headers="status cp1"> </td> <td headers="cmts cp1" width="40%"> </td> </tr><!-- 뒷부분생략 -->

211 O (Good) < 그림 87> 머릿글이미치는범위 (scope) 를명시한표 출처 : 정보통신사이버대학 ( <!-- scope 를이용한머릿글과내용칸짝짓기예 --> <table border="0" cellpadding="0" cellspacing="0" width="535"> <caption>2001년 2학기개설과목 </caption> <tbody> <tr> <th scope="col"> 학교명 </th> <th scope="col"> 교과목명 </th> <th scope="col"> 학교명 </th> <th scope="col"> 교과목명 </th> </tr> <tr> <td rowspan="2" class="univ"> 강원대학교 </td> <td class="course"> 웹서버구축 II</td>

212 <td rowspan="2" class="univ"> 전남대학교 </td> <td class="course"> 인터넷보안 </td> </tr> <tr> <td class="course">vlsi CAD</td> <td class="course"> 전자상거래보안 </td> </tr> <!-- 중간생략됨. --> </tbody> </table> 위의표는머릿글 ( 학교명, 교과목명등 ) 의 <th> 요소에대해 scope라는속성값을넣어줌으로써, 머릿글이어떤내용에까지범위가미치는지를명확히지정하고있으며, caption 요소를이용해표의제목을제공함

213 X (Bad) < 그림 88> 표를이용한데이터의표현 출처 : 기상청 ( < 그림 89> 짝짓기가안된머릿글과내용 위의표에서시각장애인은어떤것이 15일의날씨, 어떤것이 17일의날씨인지알기힘듬

214 O (Good) < 그림 90> 표를바르게수정한예 위의날씨를나타내는표에서는오늘, 내일, 모레와같은날짜를나타내는줄 ( 행 ) 이머릿글이므로 <td> 대신에 <th> 요소를사용하여수정하는것이좋음. 각머릿글셀 <th> 에는해당머릿글. 이세로 (column) 로적용되는지가로로 (row) 적용되는지에따라 scope="col" 또는 scope="row" 와같은속성을넣어줌. 또한세로로 (column) 나열된셀들이가장위의머릿글날짜에해당되는날씨라는것을확실하게표현하기위해 머릿글에는 id를부여하고밑에나오는열 (column) 에나열된셀들은공통의 headers 값을공유하고있음 마지막으로데이터를나타내는표에는표의요약을 summary라는속성값으로넣어주는것이좋음

215 XII. 콘텐츠의배치 검사항목 11. 콘텐츠의모양이나배치는논리적으로이해하기쉽 게구성하여야한다. 1 문서의모양이나콘텐츠의배치를위해서는스타일시트 (style sheet) 를사용하여야한다. 2 배치용테이블을사용하여콘텐츠의모양이나배치를할경우에는테이블을구성하는모든셀들을왼쪽상단에서오른쪽하단에이르는순서대로늘어놓았을때에도그내용을충분히이해할수있도록구성해야한다. 1. 스타일시트와테이블을이용한배치비교 테이블을이용한배치 (layout) 테이블은하나의개체로취급되어, 테이블내의모든요소들이로드되기전까지는내용물이나타나지않으므로일반적으로브라우저에서느리게표시되며, 내용물의배치를위해테이블안에중복적으로여러테이블을넣는것은코드를이해하기어렵게만들고, - 또한개발후에도유지보수애로점이있음

216 테이블을이용하여내용물의배치를미세하게조정하기위해특정한픽셀크기의투명한그림을넣기도하는데, - 이로인해더욱속도가느려지거나, 무의미한그림으로인한코드의혼란, 절대적인 (absolute) 크기단위사용으로인한디자인의적응성결여등의문제가생길수있음. 스타일시트를이용한배치 스타일시트를이용해내용물을배치할경우, - 내용물의구조와내용을건드리지않은채로배치위치나표현방식만바꿀수있어구조와표현을효과적으로분리할수있음. 스타일시트를이용해내용을배치하면일반적으로코드의양이작아지고, 구조가간결해지며, - 다른사람이보아도이해하기가쉬워지고, 후에내용을수정보완하거나또는내용을그대로놔둔채로모양이나배치만바꾸는것이매우쉬운장점이있음. 스타일시트를이용한배치에관한참고자료 CSS 2.1 의 Visual formatting model (

217 Visual formatting model 의한국어번역본 ( Glish.com : CSS Layout techniques ( The Layout Reservoir ( Little boxes ( oxes.html), Position is Everything ( 스타일시트를이용해내용물을배치한사이트의예 World Wide Web Consortium ( SitePoint.com ( The Web Standards Project ( CSS Zen Garden: The Beauty in CSS design (

218 ESPN.com ( Yahoo! ( Opera Web Browser ( 한글 Mozilla 프로젝트 ( Jeffrey Zeldman Presents The Daily Report ( Wired News ( MSN ( ABC News ( 스타일시트를이용한내용과구조의분리예 : CSS ZenGarden CSS Zen Garden 은디자이너들로하여금 HTML 본문은전 혀건드리지않고오로지 CSS(Cascading Style Sheet) 만을 활용하여디자인을극적으로바꿀수있다는것을보여줌 CSS 만을활용함으로써아래의예와같이 HTML 원본문 서는 100% 동일한문서를전혀다른모양으로표현이가

219 능함. 이렇게함으로써원본문서는구조적으로견고하고표준문 법에맞으며, 장애인의접근성이매우높은문서가되고, CSS 는오로지시각적인디자인을입히는역할만을하게 됨. 아래문서들은모두 CSS 표준, XHTML 표준, 미국의재활법 508조의규정, W3C WAI(Web Accessibility Initiative) 의웹콘텐츠접근성적합성의최상위수준인 AAA를모두만족하면서도시각적으로는다양한모습을보여줌 특히, CSS 의배치 (layout) 기능을이용하여내용물의배치가 시각적으로는상당히달라지지만, 스타일시트를제거했을때에는일정한구조적인순서로 표시되므로, 화면낭독프로그램등을사용하는시각장애 인에게도순서의혼란을주지않음

220 < 그림 91> CSS Zen Garden: 스타일시트를제거했을때 출처 : css Zen Garden ( < 그림 92> CSS Zen Garden: 기본스타일적용

221 < 그림 93> CSS Zen Garden: Paravion 스타일적용 < 그림 94> CSS Zen Garden: Golden Cut 스타일적용

222 < 그림 95> CSS Zen Garden: The hall 스타일적용 2. 스타일시트의바른사용 X (Bad) < 그림 96> 잘못된스타일시트의사용

223 스타일시트를이용해서내용물의위치를지정할때에는스타일시트를제거했을때에도논리적으로이해가가능해야함. < 그림 97> 스타일시트를빼면순서가어긋나는경우 스타일시트를제거했을때어떤것이생산품이고어떤것이생산지인지구별할수없음. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css">.menu1 { position: absolute; top: 1em; left: 0; color: red; background-color: white }

224 .menu2 { position: absolute; top: 1em; left: 8em; color: red; background-color: white }.item1 { position: absolute; top: 3em; left: 0; margin: 0}.item2 { position: absolute; top: 4em; left: 0; margin: 0}.item3 { position: absolute; top: 3em; left: 8em; margin: 0}.item4 { position: absolute; top: 4em; left: 8em; margin: 0} </style> <TITLE> 잘못된스타일시트사용 </TITLE> </head> <body> <span class="menu1"> 생산품 </span> <span class="menu2"> 생산지 </span> <span class="item1"> 전화기 </span> <span class="item2"> 컴퓨터 </span> <span class="item3"> 서울 </span> <span class="item4"> 부산 </span> </body> </HTML>

225 O (Good) < 그림 98> 스타일시트를바로잡은예 스타일시트를써서내용을배치했을때에스타일시트가제거되었을때내용이논리적으로이해가가능한지주의해야함. < 그림 99> 스타일을빼도논리적이해가가능한경우

226 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <head> <style type="text/css">.menu1 { position: absolute; top: 1em; left: 0; font-size: 120%; color: red; background-color: white }.menu2 { position: absolute; top: 1em; left: 8em; font-size: 120%; color: red; background-color: white }.item1 { position: absolute; top: 3em; left: 0em; margin: 0}.item2 { position: absolute; top: 4em; left: 0em; margin: 0}.item3 { position: absolute; top: 3em; left: 8em; margin: 0}.item4 { position: absolute; top: 4em; left: 8em; margin: 0} </style>

227 <TITLE> 바로잡은예 </TITLE> </head> <body> <dl> <dt class="menu1"> 생산품 </dt> <dd class="item1"> 전화기 </dd> <dd class="item2"> 컴퓨터 </dd> <dt class="menu2"> 생산지 </dt> <dd class="item3"> 서울 </dd> <dd class="item4"> 부산 </dd> </dt> </dl> </body> </HTML> 그림 112과같이생산품, 생산지가여러개가있어서복잡한짝짓기가필요한데이터를표현하기위한가장좋은방법은아래와같이표 (table) 를이용하는것임. 단, 표를이용할때에생산품, 생산지와같은제목에해당하는부분은반드시 <th> 요소를사용해야함. 이렇게함으로써시각장애인용화면낭독프로그램에서도 생산품, 전화기, 생산지, 서울, 생산품, 컴퓨터, 생산지, 부산 과같은순서로바르게읽어주어표의내용을이해할수있게됨

228 O (Good) <table summary=" 각생산품별생산지를보여주는표 "> <caption> 생산품과생산지 </caption> <tr> <th scope="col"> 생산품 <th scope="col"> 생산지 <tr> <td> 전화기 <td> 서울 <tr> <td> 컴퓨터 <td> 부산 </table>

229 X (Bad) < 그림 100> 잘못된스타일시트사용예 출처 : KTmall (

230 X (Bad) < 그림 101> 스타일시트를빼면어긋나는메뉴 위의전자상거래사이트에서는왼쪽의상품카테고리부분에마우스를갖다대면하위상품카테고리가보이는방식을사용하고있음. 이때하위메뉴의위치는스타일시트를이용해절대적인위치값을갖도록해놓아하위메뉴의접근이어려움. 따라서스타일시트를제거했을때나, 스타일시트를지원할수없는상황에도내용물이정상적으로표시되고,

231 사용자가이해할수있도록시각적으로뿐아니라, 논리 / 구조적마크업 (H1, H2, UL, DL, LI 등 ) 을사용하여문서를재구성해야함. 3. 배치용테이블 (layout table) 배치용테이블에는 summary, caption, thead, tbody, tfoot, th 등의미적인마크업을붙이지않는것이좋음 배치용테이블의경우, 테이블안의내용을순서대로펼쳤을때 (linearized) 타당하게이해할수있어야함. X (Bad) < 그림 102> 양식입력시테이블을잘못사용한예 출처 : New York Times ( 위의그림과같이테이블을써서양식 (form) 입력을받을경우, 양식의논리적인순서에주의해야함

232 아래그림과같이테이블이해제되었을때에논리적인순서가흐트러질수있음. X (Bad) < 그림 103> 테이블을없애면순서가뒤바뀐예 < 그림 115> 은양식을입력받을때에양식의레이블 (label) 과실제양식이테이블의칸 (cell) 을이용하여상하로배치되어있음. 그러나이경우, 화면음성낭독프로그램이나테이블을지원하지못하는텍스트브라우저와같이테이블을순차적으로읽는방식의프로그램에서테이블을풀어헤치면, Household Income Range, Industry in which you work 와같이연속적으로레이블이나오고, 해당양식은밑에한꺼번에몰려서나오는문제가생김. 따라서, 양식을입력받을때에테이블을사용할때에는테이블을왼쪽, 오른쪽칸순으로펼쳤을때에도논리적으로

233 타당한지점검해보아야함. 더욱바람직한방법은 <label> 요소를사용하여양식의레이블과양식을짝지어주는것으로 XIII. 온라인양식 (form) 에자세한설명이있음. O (Good) < 그림 104> 테이블대신 CSS 로만내용물배치를한사례 출처 : 재정경제부함께풀어가는종합투자계획 (

234 O (Good) < 그림 105> CSS 를제거했을때모습

235 위사례의첫번째그림에서는테이블을사용하지않고 CSS(Cascading Style Sheet) 로만내용물을배치하여테이블사용에따른복잡함을없앤경우로, 두번째그림에서와같이문서의스타일시트나디자인요소를제거해도잘짜여진논리적인구조는그대로남아있음을알수있음

236 XIII. 온라인양식 (form) 지침 12. 온라인양식을포함하는콘텐츠는양식작성에필요한정보, 양식구성요소, 필요한기능, 작성후제출과정등양식과관련한모든정보를제공해야한다. 1 온라인양식을구성하는모든양식제어요소, 예를들면, 에디트박스 (edit box), 라디오버튼 (radio button), 체크박스 (check box) 등은레이블과해당양식제어요소간의표시순서가일정하여야한다. 2 탭 (tab) 키를이용하여양식제어요소간을이동할경우에그순서가왼쪽위에서오른쪽아래부분으로순차적인이동이가능하여야한다. 3 양식을구성할때에보조기술을사용하면접근이가능한경우에만스크립트, 애플릿, 플러그인또는다른프로그램요소를사용한다. 만일이것이불가능할경우에는스크립트, 애플릿 (applet), 플러그인 (plug-in) 등프로그램요소의기능을정지시켜도온라인양식을작성할수있어야한다. 1. 양식의접근성 웹에서는양식을통해사용자로부터다양한방법으로값을입력받아, 그결과를웹서버에전송하고그결과에따라서로다른페이지를보여줄수있게되므로, 가장기본적인상호작용방법으로활용됨

237 일반적으로장애인들에게는양식에자료를입력하는것이보통의웹을탐색하는것보다훨씬어려운일이며, 양식의이해와자료입력에비장애인보다훨씬많은시간을소요하게되므로, 웹페이지에양식을삽입할때에는, 양식의현재위치, 빠른이동, 정확한맥락제공, 오류방지, 작업의취소, 충분한시간적여유제공등장애인들의접근성을향상시키기위한문제를신중하게고려해야함. 2. 각컨트롤에정확한이름붙이기 (LABEL) 컨트롤에정확한이름표 (label) 를붙여줌으로써시각장애인처럼컨트롤과그컨트롤의제목을짝짓기힘든사람들에게양식을쉽게사용할수있도록함. 이름표는해당하는컨트롤과시각적으로잘짝짓기가되어야하는것은물론이지만이것만으로는부족하며, 반드시 <label for="id값 "> 요소를사용하여해당하는컨트롤과명시적으로짝짓기를해주어야하며, 이것을명시

238 적인레이블링 (explicit labeling) 이라고함. 이렇게명시적으로레이블링을함으로써시각적으로양식을보는비장애인들에게도이득을줄수있음. 즉, 직접컨트롤을선택하지않아도단지레이블만을선택하는것만으로도그것과짝지어진컨트롤 ( 예 : 라디오버튼, 텍스트필드등 ) 을선택할수있는장점이있음. O (Good) < 그림 106> 라디오버튼과레이블을짝지은예 <label for="rb_showposts_0"><input type="radio" name="showposts" value="0" id="rb_showposts_0" checked="checked" />Threads</label> <label for="rb_showposts_1"><input type="radio" name="showposts" value="1" id="rb_showposts_1" />Posts</label> 위의예에서는 <label> 요소가 <input> 이라는컨트롤을완전히둘러싸는형태로, 라디오버튼을직접누르지않고 Posts 라는레이블만눌

239 러도해당라디오버튼을선택하는것과동일한결과를가져옴. W3C 표준에서는위와같이하기보다는, 단지 label을정확히지정해주는것이좋다고권장하고있음. (Good) < 그림 107> 시각적결함을 <label> 로보완한예 <FIELDSET> <LEGEND align="top">

240 Options Required </LEGEND><BR> <INPUT TYPE="CHECKBOX" NAME="opt1" ID="opt1" VALUE="abs"><BR> <LABEL for="opt1">anti-lock breaks</label> <LABEL for="opt2">moon roof </LABEL> <INPUT TYPE="CHECKBOX" NAME="opt2" ID="opt2" VALUE="mr"><BR> <INPUT TYPE="CHECKBOX" NAME="opt3" ID="opt3" VALUE="hm"> <LABEL for="opt3">heated mirrors</label> <LABEL for="opt4">power windows</label><br> <INPUT TYPE="CHECKBOX" NAME="opt4" ID="opt4" VALUE="pw"> </FIELDSET> 출처 : WAI WCAG Curriculum ( 위의예에서는시각적으로체크상자가먼저나오거나또는체크상자의제목이먼저나오거나하여일관성이없게양식이작성되었지만,

241 다행히 <label> 요소를이용하여체크상자와그제목을명시적으로짝지어놓았기때문에장애인들이사용하는데에큰문제는없음. X (Bad) < 그림 108> 레이블을명시하지않아장애인에게선택을어렵게한예 출처 : 인터넷우체국회원가입페이지 ( <input name="hobby" value="01" style="border: 0pt none ;" onclick="chkhobbycnt(this.form, this)" type="checkbox"> 스포츠 ( 구기 ) 위의예에서는, 시각적으로는어떤체크박스가어떤항목과연관되는지어느정도구분이되지만, 이것을음성으로연속적으로들을경우, 해당체크박스가앞의것과연관되는지뒤의것과연관되는지알기어려움. 따라서, 아래와같이각각의체크박스에서로다른 id 를부

242 여하고, 그것과짝지워지는텍스트에는 <label> 을붙임으로써접근성이높아짐. O (Good) <input name="hobby" id="sports" value="01" style="border: 0pt none ;" onclick="chkhobbycnt(this.form, this)" type="checkbox"> <label for="sports"> 스포츠 ( 구기 )</label> 3. 유사한컨트롤의묶음 (FIELDSET) 회원가입, 구독신청등과같이많은정보를양식을통해입력받을때에는적절하게비슷한컨트롤들을묶어줌으로써 순차적으로양식을입력해야하는장애인들에게는현재의맥락을쉽게파악하고, 양식입력의오류를줄일수있게함. 유사한컨트롤들은 fieldset 요소를통해묶어주고, legend 요소를이용해제목을붙임

243 O (Good) < 그림 109> <fieldset> 을사용하여유사컨트롤을하나로묶은예 위예에서는개인의신상정보와개인의의료기록에대한정보를입력하는부분으로나눈다음, 각부분에속하는컨트롤들을 fieldset으로묶어구분하고, legend를통해구분된영역에제목을붙임. <form action=" method="post"> <fieldset> <legend> 개인정보 </legend> <label for="lastname"> 성 :</label> <input type="text" id="lastname" tabindex="1" />

244 <label for="firstname"> 이름 :</label> /> <input type="text" id="firstname" tabindex="2"... 중간생략... </fieldset> <fieldset> <legend> 의료기록 </legend>... 개인의료기록정보... </fieldset> </form> 4. 유사한목록의묶음 (OPTGROUP) SELECT 요소를이용해목록상자 (list box) 를만들때에목록이많아지면, 한꺼번에목록을볼수없는시각장애인들은전체목록의개수도알수없고, 전체를조감할수없으므로현재까지들은목록중에하나가최상의선택인지결정하기가어려움. 일반인들도지나치게목록이많아지면정확히원하는항목을선택하기가어려워지며, 이런어려움을부분적으로해결해주는것이유사한항목

245 을그룹으로묶어주는 optgroup 요소임. 아래의예에서는 7개의항목을 optgroup 요소를사용하여세개의범주로분류한것이며, 선택을구조적으로쉽게할수있도록함. O (Good) < 그림 110> 목록상자내의유사항목을 <optgroup> 으로묶은예 <SELECT name="comos"> <OPTGROUP label="portmaster 3"> <OPTION label="3.7.1" value="pm3_3.7.1"> PortMaster 3 with ComOS <OPTION label="3.7" value="pm3_3.7"> PortMaster 3 with ComOS 3.7 <OPTION label="3.5" value="pm3_3.5"> PortMaster 3 with ComOS 3.5 </OPTGROUP>

246 <OPTGROUP label="portmaster 2"> <OPTION label="3.7" value="pm2_3.7">portmaster 2 with ComOS 3.7 <OPTION label="3.5" value="pm2_3.5">portmaster 2 with ComOS 3.5 </OPTGROUP> <OPTGROUP label="router: IRX"> <OPTION label="3.7r" value="irx_3.7r">irx with ComOS 3.7R <OPTION label="3.5r" value="irx_3.5r"> IRX with ComOS 3.5R </OPTGROUP> </SELECT> 출처 : WAI WCAG Curriculum에서약간변형 ( 양식의키보드접근성 마우스를사용할수없는시각장애인, 지체장애인들을위해양식의값을채워넣거나, 이동하거나, 실수를정정하거나, 최종제출하는모든관련행위가키보드를통해이루어질수있어야함. 키보드를통해서양식을탐색할수있게함으로써,

247 비장애인들에게도더정확하고빠르게양식의값을입력하고, 오류를줄이고, 제출할수있게되어이득을줌. X (Bad) < 그림 111> 잘못된양식사용예 출처 : 청와대홈페이지회원가입 ( <!-- 앞부분생략... 이름필드--> <strong> 이름 :</strong> <input name="name" type="text" size="16" maxlength="40" hname=" 이름 " required maxbyte="40"> <!-- 중간생략... 확인버튼--> <a href="javascript:gologin();"><img src="imgs_new/1_btn_ok.gif" border="0"></a> <!-- 중간생략... 주민등록번호입력필드 --> <strong> 주민등록번호 :</strong><input maxlength=

248 size=6 name=resident_code_1 hname=" 주민등록번호1" required maxbyte="6" value=''> - <INPUT maxlength=7 size=7 name=resident_code_2 hname=" 주민등록번호2" required maxbyte="7" value=''> 위의예에서잘못된부분은 label 이없는것으로, 텍스트필드에는적절한식별자 (id) 를붙이고, 그식별자에맞는 label을 <label for= id"> 형식으로반드시붙여야함. 주민등록번호입력에대해서는자세한설명이필요 주민등록번호의경우, 앞자리와뒷자리를한꺼번에입력해야하는지, 아니면나누어서입력해야하는지 - 시각장애인은알수가없으므로, 앞부분과뒷부분이나뉘어져있다는사실을숨겨진텍스트 (<span style ="display:none">) 를통해알려주거나, - 각각의텍스트필드에 title= 텍스트필드설명 을삽입해줌으로써해당텍스트필드에무슨값을넣어야하는지확실하게알수있게됨. 잘못된속성사용예 : <input> 요소의속성에 hname,

249 required, maxbyte라는속성은 HTML 표준문법에없으며, 잘못된것임. 확인버튼의유형지정필요 통상적으로확인버튼으로이동하지않아도이름과주민등록번호를입력후에키보드의 [Enter] 키만을누름으로써데이터가제출 (submit) 되도록콘텐츠를제작해야함. 이미지에단순한하이퍼링크를거는것 (<a><img...></a>) 은그것이양식에입력된값들을최종제출 (submit) 하는버튼과는다르므로, - 그링크를마우스로누르거나키보드로포커스를준다음 [Enter] 를누르는것과같이명시적으로그링크를활성화시켜주지않으면제출이되지않는문제가발생함. 따라서제출 (submit) 버튼은 <input type="submit"...> 과같이명확히유형을지정해주거나, - 또는이미지를버튼으로사용할경우에도 <input type ="image"...> 와같이지정하여야만값을입력하는도중에, 또는모든값을입력한후에 [Enter] 키를누름으로써양식의값을제출이가능함. 키보드이동순서지정

250 아울러키보드를이용해정확한순서대로값을입력할수있도록 tabindex= 값 을넣어주어야하며, - 이러한경우, tabindex의값은반드시 1, 2, 3 등과같이연속된숫자일필요는없으며, 10, 20, 30 등과같이숫자의순서만맞으면됨. 위의사례를바르게수정하면아래와같이됨. O (Good) <!--이름필드 : label 지정, 탭순서지정--> <label for="name"> 이름 :</label> <input name="name" id="name" type="text" size="16" maxlength="40" tabindex="10"> <!-- 확인버튼 : 양식의유형을이미지로지정 --> <input type="image" name="submit" src="imgs_new/1_btn_ok.gif" alt=" 확인 " onclick="gologin(); return false > <!--주민등록번호 : label 지정, 보이지않는설명추가--> <label for="pid1"> 주민등록번호 :</label> <span style="display:none"> 주민등록번호앞자리 </span> <INPUT maxlength=6 size=6 name=resident_code_1 title=" 주민등록번호앞자리 " tabindex="20">

251 - <span style="display:none"> 주민등록번호뒷자리 </span> <INPUT maxlength=7 size=7 name=resident_code_2 id="pid2" title=" 주민등록번호뒷자리 " tabindex="30"> X (Bad) < 그림 112> 이동버튼이따로없는잘못된목록상자 (list box) <select name="gov_site" class=exp_select ONCHANGE="goGovSite(this.options[this.selectedIndex ].value)"> 출처 : 대한민국전자정부 ( 위의전자정부사이트에서는목록상자를생성하는 <select> 요소의값이변하는이벤트 onchange에,

252 사이트를바로이동하는 JavaScript 함수를연결해놓아, 선택하자마자사이트가바뀌어버리는문제가발생함. 위와같이제작할경우시각및지체장애인등마우스를이용하기힘든장애인뿐만아니라, 비장애인들의경우에도마우스에능숙하지않으면, 실수로선택을잘못한것에대해되돌릴방법이없는문제발생 화면낭독프로그램을사용하는시각장애인들의경우, 행정부, 입법부, 사법부를차례대로읽기도전에, 첫번째항목인행정부에서바로행정부사이트로이동해버리기때문에, 두번째이후항목에는전혀접근할수있는방법이없음. O (Good) 아래미국백악관사이트에서처럼항목을선택한후, 그것을최종적으로실행하는 [ 가기 ], [ 확인 ], [Submit], 또는 [Go] 등의버튼을별도로두는것이바람직함

253 < 그림 113> 이동버튼이따로있는바른목록상자 출처 : 미국백악관 ( X (Bad) < 그림 114> 키보드 ( 탭 ) 를이용한이동이불가능한경우 출처 : Daum 회원가입 ( <input type="text" name="curaddress" value="" maxlength="30" style="width:316px" class="inputbox"

254 onfocus="blur(this)"> 국내에서매우자주발견되는기법중하나가양식에마우스초점 (focus) 이이동했을때그것을보이지않게만드는 onfocus="blur(this)" 와같은방법임. 위의사례에서는거주지주소입력란에초점이이동하지못하도록설정해놓아, 해당양식에키보드접근이불가능하게되며, 장애가없는일반인들에게도현재의초점을보이지않도록해사용에불편을줌. 따라서, onfocus="blur(this)" 와같은기법은매우잘못된관행으로아주극단적인디자인요구가있지않는한은절대쓰지않는것이바람직함. O (Good) 아래와같이 onfocus="blur(this)" 와같은이벤트처리함수를없애면키보드로접근이가능해짐. <input type="text" name="curaddress" value="" maxlength="30" style="width:316px" class="inputbox">

255 XIV. 스크립트, 애플릿 지침 13. 스크립트, 애플릿또는플러그인 (plug-in) 등과같은프로그래밍요소들은현재의보조기술의수준에서이들프로그래밍요소들의내용을사용자에게전달해줄수있을경우에만사용하여야한다. 1 콘텐츠를디스플레이하기위해혹은인터페이스요소를만들기위해스크립트언어를이용할경우에는스크립트에의해제공되는중요한정보는최신의보조기술을이용해읽을수있어야한다. 만일이것이불가능할경우에는스크립트의동작을정지시켜도웹콘텐츠의내용을읽을수있어야한다. 2 애플릿, 플러그인 (plug-in) 혹은다른응용프로그램을이용하여웹콘텐츠를구성하였을때에는이들프로그램요소에의해제공되는중요한정보는최신의보조기술을이용해읽을수있어야한다. 만일이것이불가능할경우에는이들프로그램요소의동작을정지시켜도웹콘텐츠의내용을읽을수있어야한다. 3 스크립트, 애플릿과플러그인은키보드또는대체키보드인터 페이스를이용하여사용할수있어야한다. 1. 스크립트, 애플릿삽입 (1) 대체적인접근방법제공 앞서페이지에서언급되었듯이웹브라우저가기본적으로

256 지원하지않는객체를삽입하려면, <object> 요소를사용하며, <object> 요소에삽입된내용을브라우저가제대로표시하지못할경우에대비하여대안적인내용을반드시삽입해주어야함 흔히사용되는스크립트인 ECMA-262 Script ( 보통자바스크립트라고불리우는것 ) 의경우도꼭필요한경우에만사용하는것이바람직하며, 스크립트가작동되지않더라도중요한내용에접근하는데에문제가없도록웹콘텐츠를제작해야함. X (Bad) <a href=javascript:viewarticle('43','news')>[2005 년 경제운용주요정책과제...</a> 출처 : 함께풀어가는종합투자계획 ( 위의예에서 href 속성값으로 JavaScript 함수인 viewarticle 을사용함으로써 JavaScript가동작하지않는브라우저의접근성을떨어뜨리고있는문제가발생함 viewarticle 함수의경우단순히특정한페이지를호출하는함수이므로아래와같이 href의속성값을서버측주소

257 를호출하도록바꾸어주면접근성이높아질것임. (Bad) <a href="#" onclick="viewarticle('43','news')">[2005년경제운용주요정책과제...</a> O (Good) <a href=" article_id=21">[2005년경제운용주요정책과제...</a> <noscript> 의사용 : 자바스크립트가작동되지않을경우를대비해 <script> 안쪽에 <!-- --> 와같이주석으로처리하고, 추가로 <noscript> 요소안쪽에대안적인페이지를넣어줌으로써더확실한접근성을보장할수있음. O (Good) <script type="text/javascipt"> <!-- 자바스크립트내용 --> </script>

258 <noscript> <!-- 대안적인내용--> <ul> <li><a href="choice1.html"> 선택1</a></li> <li><a href="choice2.html"> 선택2</a></li> </ul> </noscript> (2) 흔히발견되는자바스크립트오류 자바스크립트를 HTML 중간에삽입할때에 <script> 요소를사용하는데, 이때에반드시스크립트의유형 (type) 을반드시지정해주어야함. X (Bad) <script language="javascript" src="example.js" /> 스크립트의언어 (language) 속성은 HTML 4.0 이후표준에서낡은 (deprecated) 속성으로바뀌었으므로, language 대신에 type을반드시지정해야하며, 굳이하위호환성을생각한다면 language와 type을모두지정할수있음

259 외부자바스크립트파일 (.js) 을삽입할때주의할점은외부파일문서의인코딩방식 (euc-kr, utf-8 등 ) 을명확히지정해야함. 인코딩방식을지정함으로써잘못디코딩되어문자가깨지거나내용해석이안될가능성을줄일수있음. (Good) <script type="text/javascript" language="javascript" src="example.js" /> O (Good) <script type="text/javascript" charset="utf-8" src="example.js" /> DOM(Document Object Model) 객체호출 JavaScript를사용하는큰이유가운데하나는문서의구조에동적으로접근하여그것을조작할수있다는장점으로많이활용하고있음 - 이때에문서구조에접근하기위해서는 W3C에서문서구조를모형화한 DOM 표준에따라원하는부분에접근해야할것임

260 가장흔히발견되는오류는 form 객체에대한잘못된접근 / 호출이며, X (Bad) - 객체를 DOM 표준에따라호출하지않으면많은웹표시장치 (Mozilla, Opera, Konqueror, 수많은화면낭독프로그램, 보이스브라우저등 ) 에서자바스크립트함수의원래기능을수행하지못하게됨. function mov item(opt) { mailitem.submit();... 중략... } function delet item() { document.mailitem.action ="...";... 중략... }... 중략... <form name="mailitem" method="post"> 출처 : 코리아닷컴메일본문읽기화면 ( 위의예에서 mailitem이라는이름을갖는객체를자바스크립트함수에서호출할때에모두잘못된방법을사용하고있어서작동하지않은브라우저가생김

261 아래와같이 DOM 표준에따라호출하도록바꾸어야함. O (Good) function mov item(opt) { document.form.mailitem.submit();... 중략... } function delet item() { document.form.mailitem.action ="...";... 중략... }... 중략... <form name="mailitem" method="post"> 2. 플래시 (Flash) - 플래시는사실상거의모든플랫폼과거의모든브라우저에서작동되므로, 플래시를무조건사용하지않는것이접근성을높이는것은아님. 또한플래시는다음과같은특징으로인해접근가능한콘

262 텐츠가될수있는충분한잠재력을가지고있음 ( 출처 : ) 다양한표현방법 : 플래시는콘텐츠를애니메이션, 텍스트, 음성등다양한방법으로표시할수있음. 크기확장성 (scalability) : 플래시객체는래스터 (raster) 그래픽이아닌벡터 (vector) 방식으로되어있어, 저시력자가크게확대해볼수있음. 키보드접근성 : 플래시는 HTML보다더정교하게키보드조작이가능하도록설계가가능함. 상호작용성 (engaging) : 플래시는사용자에게애니메이션, 그래픽, 사운드등을활용하여정적인 HTML 콘텐츠보다더쉽게상호작용하고, 개념을전달할수도있음. 자체음성기능 : 플래시무비에자체적으로음성을내장시킬수있기때문에화면낭독프로그램을사용하지않더라도자체적으로화면낭독프로그램역할을대체하도록설계할수도있음. 그러나, 아직까지현존보조기술의수준에서플래시에대한접근성은매우낮은편이며,

263 플래시의내장된접근성기능들도 Microsoft Active Accessibility(MSAA) 라는기술을통해화면낭독프로그램이제한적으로판독할수있음. - - 즉, Windows와 Internet Explorer 플랫폼이아닌환경에서는플래시의내장된접근성기능들의혜택을볼수없는어려움이있음. 그러므로, 플래시로콘텐츠를제작할경우에는접근성을높이기위해일반 HTML 콘텐츠보다매우세심한주의가필요함. 플래시콘텐츠접근성제작방법 (Macromedia사의접근성담당자인 Bob Regan) 오디오부분에는캡션을붙여라. 장치독립적으로디자인하라 ( 주로키보드로조작가능하게하라는뜻 ). 화면낭독프로그램등을사용할때논리적으로읽는순서가나오도록하고, 키보드를이용했을때에도 Tab 순서가바르게되도록하라. 구조를견고하게하여구조를쉽게파악할수있게하고,

264 현재위치를사용자가쉽게알수있게하라. 텍스트가아닌요소에는대체텍스트를붙여라. 색깔을주의해서사용하라. X (Bad) < 그림 115> 접근성이떨어지는플래시메뉴 출처 : 보건복지부 ( 위사례에서는플래시로메뉴를구성하고있으며키보드를통한메뉴접근이전혀불가능하며, 또한각메뉴의설명 ( 대체텍스트 ) 도전혀없어접근성이매우떨어짐 일반적으로마우스를사용하는사람들에게도마우스의조그

265 마한움직임에따라메뉴가급격하게변하므로사용성이떨어짐. 꼭필요에의해어쩔수없는경우가아니면주메뉴를플래시로제작하는것은피하는것이바람직함. O (Good) < 그림 116> 접근성을고려한플래시메뉴 출처 : 유타대학교 ( 위의예에서는주메뉴를플래시로구성했지만, 인터넷익스플로러환경에서는키보드를통한메뉴탐색이가능하게제작되었으며, 메뉴항목 ( 위의그림에서는 04. Community) 을선택했을때에시각적으로노란색테두리가선명하게생겨, 현재의위치를알수있으며, 이와더불어메뉴접근이안되는경우에대비하여페이

266 지의맨처음부분에플래시를없앨수있는옵션 (Turn Flash Off) 을제공하고있음. O (Good) 아래사례에서는메인메뉴가플래시로제작되었지만동시에텍스트버전으로도동일한메뉴를선택할수있게함으로써 플래시사용이어려운사용자들의접근성을보완해주고있음. < 그림 117> 플래시와텍스트메뉴를함께제공한예 ( 플래시버전 ) 출처 : 산업자원부 (

267 < 그림 118> 플래시와텍스트메뉴를함께제공한예 ( 텍스트버전 )

268 O (Good) < 그림 119> 캡션을삽입한플래시무비 출처 : Macromedia - Breeze Overview (

269 위의그림은플래시무비에삽입된음성과동일한캡션을삽입하여청각장애인의접근성을높인예임. 구체적으로플래시의접근성을높이는제작방법은이문서에서다루기에는너무광범위하므로아래의웹문서를참조하기바람 Creating Accessible Macromedia Flash Content ( PDF(Portable Document Format) Adobe사에서만들어진 PDF 파일은플랫폼과장치독립적으로문서의원형을보존할수있는특징때문에웹에서의사용빈도가점점높아지고있음 Acrobat Reader 6.0에서는비록내장화면낭독프로그램을탑재하였지만여전히 PDF 파일을화면낭독프로그램이접근할수있도록하려면상당히주의가필요함 가장손쉬운방법은 PDF 문서와함께접근가능한 HTML 문서를제공하는것인데, 이것이불가능할경우, 다음과같은사항을준수해야함 (1) 실제텍스트로문서를구성해야함

270 스캐너로스캔하여받은이미지는실제텍스트데이터가아니므로당연히화면낭독프로그램이읽지못하며, 스캔받은데이터는 OCR(Optical Character Recognition) 프로그램을이용하여실제텍스트데이터로바꾸어야만화면낭독프로그램이읽을수있음 (2) 적절한태그를붙여야함 현실적으로 PDF 문서에태그를수동으로붙이는것은매우시간과노력이많이들어가는어려운작업임으로, PDF 문서형태가가장좋은문서형식인가를생각해보아야할것임 Adobe 사에서제공하는 Make Accessible Plug-in을설치한후원하는문서에서고급 (A) > 액세서빌러티 (A) > Make Accessible 메뉴를선택하면됨. Make Accessible Plug-in 다운로드사이트 : xid=88de 국내에서많이사용되는워드프로세서인 글 의경우는아직까지는구조적인문서를작성해도 HTML, PDF로변환시구조정보가거의보전되지않고있는문제가있음

271 (3) 적절한마크업을붙여야함 PDF 문서를생성하기전에원문서를구조적으로작성하는것이필요함. 예를들어, 마이크로소트프워드문서를작성할때에는제목 1, 제목 2와같은실제제목스타일을사용해서문서를만들어야하며, 단지글자크기를크게하는시각적효과만을낸다고해서구조적인마크업이생성되는것은아님

272 O (Good) < 그림 120> 워드에서구조적으로문서를작성한예 위의그림은 Microsoft Word에서스타일과개요기능을이용하여문서를구조적으로작성한사례로, 보기 (V) 메뉴에서개요 (O) 를선택하면문서의구조를체계적으로볼수있음

273 O (Good) < 그림 121> 파워포인트에서이미지에대체텍스트를삽입하는대화창 위의그림에서와같이, 원본문서를파워포인트에서작성할때에는삽입된이미지에대체텍스트를넣어주어야함

274 O(Good) < 그림 122> 구조적인 PDF 문서 원본문서에서적절한마크업을사용해구조적으로작성된문서는 PDF로변환된후에도견고한구조를유지할수있음. 시각장애인뿐만아니라다양한유형의장애인들에게보편적으로접근가능한 PDF 문서를만드는자세한방법에대해서는아래의웹문서를참조할것

275 Reading PDF Documents with Adobe Reader 6.0: A Guide for People with Disabilities : ain.html

276 XV. 별도페이지 지침 14. 콘텐츠가 13개지침을만족하도록최대한노력하였으나해결되지않는부분이남아있다면텍스트만의콘텐츠를제공하는웹페이지 ( 또는웹사이트 ) 를별도로제공해야한다. 1 가능한보조기술수준이미흡하여장애인이접근가능한웹콘텐츠를제작할수없는경우에는텍스트로만구성된대체페이지를마련하고기존의웹콘텐츠의첫페이지에대체페이지로이동하는링크를제공하여야한다. 2 제공하는대체페이지는기존의웹콘텐츠가포함한정보나기능을모두포함하여야한다. 3 제공하는대체페이지는기존의웹콘텐츠의개정주기에맞추어개정되어야한다. 1. 대체페이지 이상적으로는단일한하나의웹페이지가접근가능하게제작되어, 장애인과비장애인, 모든사용자가모두동일한정보에접근할수있어야할것임. 현실적으로오락성이매우강하거나, 시각적인효과가매우중요한사이트의경우,

277 현존기술의한계나예산, 시간부족등으로인해장애인의접근성을고려한보편적인사이트를설계하지못할경우가생길수있음. 또한저속인터넷을사용하여그래픽로딩속도가느린사용자나그래픽없이일부러빠른속도로웹의주요내용을보고자하는사용자를위해, 별도로텍스트위주로구성된사이트를제공할수도있음. 이러한경우에는별도의텍스트위주의페이지를만들어접근성을보장하는것이바람직할것임

278 O (Good) < 그림 123> 저속인터넷사용자를배려한 Low Graphics version 링크 출처 : BBC News Front Page ( 위의사례에서는그림과사진이많이들어간뉴스페이지에저속인터넷사용자를배려하여 그래픽을최소화하고페이지로딩속도를빠르게한텍스트위주의뉴스페이지로갈수있는 Low Graphics version이라는링크를걸어놓았음

279 O (Good) < 그림 124> 동일한뉴스를담고있는 Low Graphics version 출처 : BBC News (

280 X (Bad) < 그림 125> 전체플래시로제작된사이트 출처 : S- 다이어리 ( 영화홍보사이트와같이화려함이강조되는사이트는흔히전체가플래시로제작되기도함. 이경우, 최소한의정보성콘텐츠만이라도장애인용대체페이지를만들어주어야할것임

281 X (Bad) < 그림 126> 전체가플래시애니메이션으로제작된사이트 출처 : 코크플레이닷컴 ( 오락성이강한사이트로보편적접근성을고려하지않고전체를플래시애니메이션으로제작하였음. 이경우도최소한의정보에대해서는대체페이지를제공해주는것이좋을것임

282 X (Bad) < 그림 127> 별도장애인페이지로가는링크가없는경우 출처 : 광진구청 ( 위의사례에서는장애인, 노인용음성페이지를별도로제작했으나, 해당페이지로가는링크가일반페이지내에전혀없음. 또, 페이지제목에 Ctrl + Enter를누르면장애인용페이지로이동한다고나와있으나, 이러한키조합은범용적인것이아니므로다른종류의브라우저, Mac OS, Linux 사용자, 특수한키조합을사용하는화면낭독프로그램사용자에게는무용지물이됨

283 X (Bad) 굳이키보드단축키를제공하려면 HTML 표준에서제공하는 accesskey="" 를사용해야더많은시스템에서작동을보장할수있음. < 그림 128> 전혀다른인터페이스를사용하는별도의음성홈페이지 출처 : 광진구청장애인용홈페이지 ( 위의그림과같이별도로구성된음성홈페이지에서도별도의인터페이스를제공하고있어접근성을오히려떨어뜨리고있음. 일반적이지않은특수한단축키조합 (Ctrl+T, Ctrl+M 등 ) 을사용하고있어기존화면낭독프로그램과충돌을일