PowerPoint 프레젠테이션

Transcription

1

2 발간사 누구에게나평등한온라인세상을꿈꾸는케이티가웹접근성백서를발간하였습니다. 케이티가온라인사이트에대해웹접근성을도입하고자했을때, 웹접근성기준을수립하고, 어떻게적용해야할것인가에대해많은고민과노력이필요하였습니다. 특히, 많은개발자의인식부족과담당부서의지속적인관리에대한의지가무엇보다중요하다는사실을깨닫고, 하루라도더, 한사람이라도더많이웹접근성적용에대한인식을같이하여, 참여할수있도록그간의노하우를정리해보았습니다. 비록누군가에게는도움이, 또누군가에게는부족한내용이될수있으나, 국가가정한기준을떠나, 나부터, 지금부터, 누구에게나평등한세상을제공하겠다는마음으로이백서를제공합니다. 이렇게시작된배려는장애인이세상과소통할수있는가장쉬운방법, 세상으로나아갈수있는희망이될수있습니다. 평등한세상을꿈꾸는많은이들과함께, 누구에게나똑같은눈으로바라보겠습니다. 감사합니다. 주식회사케이티온라인사업단단장고경곤 - 2 -

3

4 1. 웹접근성의이해 웹접근성 (Web Accessibility) 이란어떠한온라인환경에서든지웹사이트에서제공하는정보에장애인, 고령자등누구나손쉽게접근하여서비스를이용할수있도록보장하는것을말합니다. 웹접근성을적용하는것은정책적인내용과기술적인사항에대한이해를바탕으로진행되는프로젝트이나, 장애인과장애에대한전반적인이해없이는근본적인문제해결및사용성개선이어렵습니다 웹접근성이란? 장애인의이해 장애인의웹이용 웹접근성의개요 적용가치 1.2. 관련법령및위반사례 관련법령 국내웹접근성소송사례 해외웹접근성소송사례 불편민원발생에대한신속대응 1.3. 웹접근성국가표준및관련가이드라인 국가표준및가이드라인

5 1.1. 웹접근성이란? 장애인의이해 우리나라인구의 5.6% 가장애인이며, 그중 90.5% 가사고, 질병등으로장애를얻은후천적장애인으로누구나불의의사고등으로인해장애인이될수있습니다. 우리주변에는장애로힘들어하시는분들이얼마나있을까요? 대한민국인구중 100 명당 5 명이신체 / 정신적장애를겪고있습니다. 대한민국전체 252 만여장애인중 90.5% 가후천적인장애인들입니다. 선천성장애 9.5% 후천성장애 90.5% 대한민국전체가구에서 7 가구중 1 가구마다장애인이거주하고있습니다. 출처 : 33 회장애인의날교육자료 _ 장애인의삶과사회적인식 ( 보건복지부 ) 비장애인에비해활동이불편한장애인들에게웹서비스의이용은생활에꼭필요한필수요소로변화되었습니다. 우리의웹사이트는장애인이이용하기편리한환경일까요? - 5 -

6 1.1. 웹접근성이란? 장애인의웹이용 웹접근성 (Web Accessibility) 이란어떠한이용 / 기술환경에서든지웹사이트에서제공하는모든정보에장애인, 고령자등누구나손쉽게접근하고이해할수있도록보장하는것을말합니다. 웹에서는장애유형별로어떤대체수단을제공하고있을까요? 대한민국장애인전체인구 : 2,519,241 명 227,827 명 9.1% 2,291,414 명 90.9% 청각장애 8.0% 뇌병변장애 11.3% 한시적 / 제한적으로웹이용이가능한장애유형 자폐성 신장 심장 호흡기 간질외 4 개유형 웹이용이크게불편하거나, 일반웹이용이불가능한장애유형 지체장애 시각장애 청각장애 언어 / 지적장애 뇌병변장애 시각장애 10.9% 언어 / 지적장애 2,291,414 명전체장애인대비 80.6% 지체장애 58.1% 11.4% 출처 : 2012 장애인통계 < 고용노동부 > 구분지체장애시각장애청각장애언어 / 지적장애 제약사항 웹페이지에대한제어가불가능하거나, 어려움 모니터화면에대한인지가불가능하거나, 어려움 동영상, 오디오등의소리청취가불가능하거나어려움 복잡한전문용어나어려움용어의이해가불가능하거나어려움 대체수단 대체마우스사용, 키보드사용, 마우스를이용한화면키보드사용 스크린리더화면확대색의제한적사용 수화, 자막, 원고등시각정보제공 쉬운용어의사용 인구 1,333,429 명 251,258 명 261,067 명 184,942 명 비중 65.7% 12.4% 12.9% 9.1%

7 1.1. 웹접근성이란? 웹접근성의개요 웹접근성적용사업이란, 정부에서제정한웹접근성국가표준을바탕으로환경의차이, 장애의유무등에상관없이누구나동등하고쉽게웹사이트를이용할수있도록사이트 UI 및기능을개선하는것을의미합니다. 제약과차별없이누구나이용가능한웹서비스제공을목표로합니다. KWCAG 2.0( 한국형웹콘텐츠접근성지침 2.0) Korean Web Content Accessibility Guidelines 2.0 인식의용이성확보운용의용이성확보이해의용이성확보견고성확보 사용자가쉽게인식할수있는콘텐츠제공 내비게이션및조작이용이한 UI 구성 누구나쉽게이해할수있는 UI 구성 변화하는기술환경에서도이용가능한콘텐츠구성 시청각정보인지가어려운시 / 청각장애 신체움직임에제한이있는지체및뇌병변장애 읽기, 문장이해가부족한지적 / 언어장애 PC, 스마트폰, 웹브라우저등다양한사용환경대응 - 7 -

8 1.1. 웹접근성이란? 적용가치 웹접근성이구현되면장애인에대한정보접근성확보는물론운영중인사이트의사용자만족도및이용율을증대시킬수있습니다. 정보접근격차해소 장애인차별금지법의무사항적용 고객만족도제고 PV/UV 증대 누구나쉽게인식할수있는 UI 텍스트가아닌콘텐츠에대한대체텍스트제공 멀티미디어콘텐츠의인식을위한대체수단제공 명확한전달을위한콘텐츠색상, 폰트등을선택 누구나차별없이이용할수있는서비스 키보드접근성확보및콘텐츠선형구조제공 콘텐츠응답시간조절및콘텐츠제어기능제공 광과민성발작유발이가능한콘텐츠의사용제한 쉬운콘텐츠네비게이션을위한제공지침 누구나쉽게이해하기쉬운표현방식 모든페이지내기본언어표기 사용자를혼동하게하는팝업등의사용제한 논리적인콘텐츠구성을위한지침 입력오류방지및정정을위한기능제공 사용기기및웹브라우저와무관한콘텐츠 올바른마크업문법을적용한콘텐츠제공 웹어플리케이션의접근성확보를위한지침 - 8 -

9 1.2. 관련법령및위반사례 관련법령 2008 년 4 월 11 일장애인차별금지및권리구제등에관한법률 ( 장애인차별금지법 ) 시행으로대고객웹사이트의접근성준수가의무화되었으며, 이에따라 2013 년 4 월 11 일이후에는모든웹 ( 법인사업장 ) 에웹접근성이적용되어야합니다. 장애인차별금지및권리구제등에관한법률 ( 법률제 호 ) 모든생활영역에서장애를이유로한차별을금지하고 장애를이유로차별받은사람의권익을효과적으로구제함으로써장애인의완전한사회참여와평등권실현을통하여인간으로서의존엄과가치를구현함을목적으로하는법 < 웹접근성의무화보도자료 > 2008 년 4 월 11 일시행 제 21 조및동법시행령 14 조에의거, 공공및민간웹사이트의웹접근성준수의무화 ) 2009 년 4 월 11 일 ( 법시행후 1 년이경과한날 ) 상시 300 인이상의근로자를사용하는사업장과국가및지방자치단체 2011 년 4 월 11 일 ( 법시행후 3 년이경과한날 ) 상시 100 인이상 300 인미만의근로자를사용하는일반사업장 2013 년 4 월 11 일 ( 법시행후 5 년이경과한날 ) 모든법인사업장의무적용 2012 년 9 월 30 일파이낸셜뉴스보도 2013 년 ~ 모바일기기등으로법률강화및범위확대될것으로예측됨 - 9 -

10 1.2. 관련법령및위반사례 국내웹접근성소송사례 국내에서는 2012 년 11 월최초로웹접근성관련손해배상청구가발생하였습니다. 따라서이를미연에방지하기위해서는웹접근성사업에대한계획수립및실천이필요합니다. 웹사이트이용차별을사유로 서울도시철도공사, 대한항공, 한전병원, 서울장애인종합복지관등교통 의료 복지기관 4 곳 을대표적으로소송 소송사유 일부기업들은법을인지하는동시에위반하고있지만 " 실제로소송이제기될확률이크지않고소송에서배상해야할액수가크지않을수있으므로추이를두고보자." 라고생각하는기업이존재할수있어사회변화의시발점측면으로소장을접수하게됨 소송내역 참여연대공익법센터와 ( 사 ) 한국장애인단체총연합회, 공익변호사그룹공감 ( 공감 ) 등시민단체들은시각장애인 10 명을대리해 4 개공공기관 기업을상대로하여시각장애인 10 명이한명당 500 만원씩, 총 2 억원상당의손해배상청구소송을서울중앙지방법원에제기 미준수사항 가이드라인준수율이 30~40% 수준이며이미지대체텍스트를제공하지않거나표를제대로설명해주지않는등위반사항 키보드로이용하기어려운콘텐츠를제공하고, 동영상재생 정지기능을지원하지않았음 출처 : 2012 년 11 년 29 일에이블뉴스보도

11 1.2. 관련법령및위반사례 해외웹접근성소송사례 해외사례중에는웹접근성적용및인증마크획득후에도지속적인유지보수및관리가되지않아장애인차별금지법위반으로고소 진정된사례가있습니다. 웹접근성적용후에도모든추가 / 변경사항에대해필수적으로웹접근성이적용되어야합니다 년, 디즈니월드 ( 전미시각장애인재단접근성우수기업수상후장애인 3 인이집단소송제기 대체텍스트미제공으로스크린리더판독불가 ( 내비게이션불가 ) 재생 / 정지컨트롤이불가능한동영상 ( 오디오포함 ) 제공 시각장애인이접근할수없는 Flash 메뉴제공 2000 년, 시드니올림픽 ( 웹접근성위반소송으로 $20,000 보상금지급 image 및 image map 의대체텍스트미적용 경기일정페이지內경기종목에대한색인미제공 경기결과테이블 (image) 에대한접근불가 2008 년, Target.com( 웹접근성위반소송으로인해한화 60 억원의합의금지불 키보드를통한주문 / 결제컨트롤미적용 image 및 image map 내대체텍스트미적용 상품 banner 의재생컨트롤불가

12 1.2. 관련법령및위반사례 불편민원발생에대한신속대응 서비스운영시장애인에대한차별적요소나불편사항이최소화되도록웹접근성지침을항시준수하여야하며, 장애인이용자에의한불편민원발생시에는보완계획을수립하여가급적빠른시일내에개선해야합니다. 불편신고및민원발생시 웹접근성개선프로세스 민원접수시, 신속하고적극적인조치를위해민원내용에대한개선일정, 개선방향등계획을수립하여先공유후개선진행 웹접근성개선작업에대한내역관리 지속적인품질관리를위해개선작업및교육참여내역등을체계적으로관리하고, 담당자및관련자가항상조회하고활용할수있도록공유 관련자료 장애인이용자 / 모니터요원 불편사항신고 통보웹접근불편접수시정결과알림개선방향 / 일정수립 사이트담당자 웹접근성개선작업내역관리 웹접근성교육참여내역 웹접근성관련수집정보 민원대응내용및처리결과 웹접근성반영이미진한부분에대한개선계획 웹접근성적용및유지보수시 웹접근성지침을고려한서비스설계 웹접근성지침을바탕으로하되, 그외에도장애인에대한이해와공감을바탕으로이용상의불편을최소화할수있는적극적인설계및개발 웹접근성적용및인증획득이후에도서비스리뉴얼및신규서비스입점등의진행시에도반드시웹접근성지침을준수하여서비스설계 웹접근성교육참여및상시점검 각사이트담당자는웹접근성관련교육에주기적으로참여하여최신정보를수집하고, 변화하는기술과트렌드를토대로현재운영중인서비스에대한자체진단필요 웹접근성진단체크리스트를활용하여운영중인사이트에대해주기적인점검을하여야하며, 미흡한부분은지속적인유지 / 보수필요

13 1.3. 웹접근성국가표준및관련가이드라인 국가표준및가이드라인 우리나라에서는웹접근성관련국제표준을토대로국내실정에맞춘기술적규격으로국가표준을만들었으며, 실제적용에참고될만한각종가이드라인을제작및배포하고있으니관련사업추진시에는필히숙지해야합니다. 한국형웹콘텐츠 접근성지침 2.0 국가표준 모바일애플리케이션 접근성지침 장애인, 고령자등의 정보접근및이용편의 증진을위한지침 관할기관 : 미래창조과학부 제정일 : 2010 년 12 월 31 일 목적장애인이비장애인과동등하게접근할수있는웹콘텐츠를제작하는방법정의 주요내용 - 웹접근성제고를위한 4 가지원칙과각원칙을준수하기위한 13 개지침으로구성 - 각지침의준수여부확인을위한 22 개의검사항목제공 관할기관 : 안전행정부 제정일 : 2011 년 9 월 22 일 목적장애인이비장애인과동등하게모바일애플리케이션을활용할수있도록준수해야할세부사항규정 주요내용 - 모바일애플리케이션의접근성확보를위하여반드시준수할사항 (7 개 ) 과권고사항 (8 개 ) - 접근성지침을고려한개발실제사례및방법을별첨으로제공 행정안전부고시제 호 관할기관 : 안전행정부 제정일 : 2011 년 7 월 14 일 목적정보통신제품및서비스의장애인접근성을제공하기위한기본요구사항규정 주요내용 - 웹접근성국가표준과동등한웹접근성요구사항규정 - 정보통신제품및서비스의장애인접근성제공에필요한요구사항규정 - 정보접근및이용편의증진을위한접근성관련표준추가 행정안전부고시제 호 출처 : 웹접근성연구소 (

14 2. 웹접근성프로젝트의설계와관리 웹접근성사업은참여자모두의웹접근성이해도가가장중요하며 UI/UX 일관성및통일성을위해사전에가이드및라이브러리제작등이필요합니다. 웹접근성적용을위한체계적인프로젝트의설계와관리를통한사업추진이필요합니다. 2.1 웹접근성프로젝트의수행방법및전략 웹접근성프로젝트의수행전략 웹접근성프로젝트의추진로드맵 조직구성및구성원의역할 웹접근성프로젝트관련기술공유및교육 2.2. 단계별추진방법 프로젝트준비단계 적용개발단계 검 / 인증단계 유지보수단계

15 2.1 웹접근성프로젝트의수행방법및전략 웹접근성프로젝트의수행전략 웹접근성관련사업은장애에대한이해를바탕으로, 1 회성프로젝트가아닌웹사이트운영및유지보수가전제되어야함을인지하고, 프로젝트를추진해야합니다. 장애에대한이해와객관적 1 현황파악기반의프로젝트추진 2 이용자관점에의 UI/UX 설계와 일관성있는정책적용 1. 사전진단결과를바탕으로한객관적현황파악후설명회또는워크샵을통해참여자의명확한인지와이해도확보 2. 온 / 오프라인 ( 그룹교육 ) 을통한실시간기술지원체계제공 1. 웹사이트개선을위한관련가이드및사전샘플소스개발을통해각메뉴별일관성있는웹접근성관련 UI/UX 적용 2. 사업자 ( 제공자 ) 중심이아닌고객 ( 이용자 ) 관점의 UI/UX 설계가필수적임 추진준비전략 설계 / 개발전략 품질평가전략 유지보수전략 인증기관수준의 3 체계적인품질평가체계마련 4 관리및보완체계를통한 지속적인품질관리 1. 자체체크리스트개발을통한품질관리체계구축필요 2. 체계적인평가방법구축을통하여진단결과의객관성유지및취약점분석 / 보완방법등구축필요 1. 장애인이용자의의견및 VOC 를대응할수있는전담응대조직마련 2. 고객응대조직의장애인관련교육을통한전문성제고

16 2.1 웹접근성프로젝트의수행방법및전략 웹접근성프로젝트의추진로드맵 웹접근성프로젝트는크게준비 추진 검증 관리단계로구분하고, 각단계별로철저한사전준비를통해체계적인프로젝트추진환경을마련해야합니다. 대상사이트에대한웹접근성준수율진단 기획단계부터장애인또는웹접근성컨설팅기관의참여로효과적인접근성개선 / 구축계획수립 외부공인단체를통한검 / 인증진행 인증마크획득및홍보 프로젝트준비적용개발검 / 인증유지보수 웹접근성개선 / 개발진행및퍼블리싱 서비스별개발단계웹접근성진단수행 민원및 VOC 대응을위한고객응대조직구성및사전교육진행 지속적인품질관리및평가진행 웹접근성적용개발상세프로세스 기획 / 설계 UI/UX 디자인개발 / 컨버팅 장애인사용자평가 퍼블리싱

17 2.1 웹접근성프로젝트의수행방법및전략 조직구성및구성원의역할 사업관리와정책을관리하는총괄파트를중심으로하위각파트별명확한 R&R 구분을통해프로젝트수행조직을구성하며, 상호간의협조와이해에따라추진되어야합니다. 총괄관리파트 사업관리담당 정책관리담당 프로젝트총괄 ( 일정 / 인력 / 과업관리 ) 세부프로젝트관리 웹접근성지침 / 정책관리 개별가이드및품질기준관리 기획 / 설계파트 기획 / 설계 UI/UX 디자인 서비스설계 / 기획 Wireframe 개발및 S/B 작성 UI/UX 디자인정책수립 UI/UX 디자인진행 개발파트 개발 / 컨버팅 공통 Interface 설계 공통기능개발 개별사이트기술지원 품질관리파트 자체검증담당 기술지원담당 웹접근성적용총괄관리 사용자평가및보완요구 퍼블리싱일정관리 검증 인증일정및품질관리 웹접근성기술지원 민원및법적대응지원 인증심사담당 인증단체및기준관리 인증스케쥴및결과관리

18 2.1 웹접근성프로젝트의수행방법및전략 웹접근성프로젝트관련기술공유및교육 추진단계별로필요한기술공유를위해관련자를위한설명회 워크샵등을진행하며, 추가기술교육을요구할때마다수시교육을통해참여자의이해를높이고웹접근성품질을향상시킬수있도록합니다. 기술교육 Agenda 추진시기 사전진단결과공유및사업추진계획발표 - 웹접근성에대한이해전파 - 대상사이트에대한웹접근성적용현황공유 사전진단완료후 웹접근성내부정책및가이드교육 - 웹접근성관련법률및지침소개 - 지침별적용가이드교육 가이드개발완료후 그룹별웹접근성상세적용교육및기술지원 - 개별기술지원이필요한그룹을대상으로추가교육 관련자요청시 ( 수시 ) 웹접근성진단및인증심사안내 - 웹접근성인증및심사기준소개 - 서비스별품질확보를위한사전자체진단방안교육 퍼블리싱완료후 웹접근성기반유지보수방법및기술동향설명회 - 웹접근성완료보고및유지운영방안교육 - 최신기술동향소개 유지보수체제변경전

19 2.2. 단계별추진방법 프로젝트준비단계 웹접근성지침을기반으로정확한방향과원칙을제시하는가이드및샘플소스등을사전배포하여웹사이트설계 / 개발시효율성과일관성을확보하여야합니다. 가능하면장애인당사자또는접근성컨설팅기관을설계에참여시키는것이바람직합니다. 기본웹개발가이드웹접근성지침적용가이드샘플라이브러리제공 UI/UX 가이드 웹스타일가이드 개발가이드 샘플 HTML 소스제공 CSS 가이드 Etc UI/UX 설계가이드 웹스타일가이드 개발가이드 CSS 가이드 웹접근성지침안내 지침별적용방법 사이트내세부사례및콘텐츠유형별적용방법 장애인당사자 / 컨설팅기관의의견반영 콘텐츠별적용지침을준수하는샘플라이브러리를함께제공 제공샘플예 : 썸네일, 테이블서식, HTML 등

20 2.2. 단계별추진방법 프로젝트준비단계 ( 계속 ) 접근성관련기술지원담당전담조직을구성합니다. 또한이슈발생시즉각적인지원이가능하도록온 / 오프라인커뮤니케이션채널을구축할필요가있습니다. 가능하면장애인당사자또는접근성컨설팅기관고의커뮤니케이션채널을구축합니다. 가이드및라이브러리기술지원관련정보공유 운영주기 : 상시 지원사항 - 가이드, 샘플라이브러리제공 - FAQ 제공문의내용응대 운영주기 : 상시 지원사항 - 서비스개별문의사항응대 - 긴급사항발생시대응 운영주기 : 정기발송 지원사항 - 웹접근성동향, 변경사항등정보리포트자료제작 / 배포 기술지원담당자 웹접근성설명회소그룹기술교육 1:1 기술지원 운영주기 : 각로드맵별진행 지원사항 - 웹접근성정책및적용범위, 구현방안에대한설명회개최 운영주기 : 정기진행 지원사항 - 메뉴담당자또는그룹별개별미팅을통한적용기술관련교육제공 운영주기 : 이슈발생시 지원사항 - 기술지원이필요한경우, 방문토록하여 1:1 기술지원

21 2.2. 단계별추진방법 적용개발단계 웹접근성지침을바탕으로구성된체크리스트를사전배포하여, 개발단계및퍼블리싱직전에자체검수등을진행하여결과물의완성도를높일수있도록합니다. 검수용체크리스트란? - 적용완료후자체테스트를위한매뉴얼형태의문서로각지침별 Test 방식및 Tool 에대한안내를제공 점검도구안내 지침별점검방법 지침별평가방식및배점

22 2.2. 단계별추진방법 검 / 인증단계 필요한경우대외적이미지제고와공정하고객관적평가를위해전문인증기관에의뢰하여웹접근성인증진행하고인증마크획득절차를진행합니다. 웹접근성인증 ( 심사 ) 프로세스시행계획 사전준비 심사 / 인증진행프로세스 인증마크획득 사전점검웹접근성심사 / 인증에대비하여자체적인사전진단실시 심사유예 수정 / 보완 ( 기간 : 2 주 ) 불합격 재심사요청 1. 심사신청 심사신청서류등록 2. 기초심사 기초심사 ( 전문가심사 ) 재심사요청 심사중지 심사중지 (1 개월후재신청 ) 3. 정밀심사 정밀심사사용성심사 불합격 4. 인증완료 인증심의완료인증마크부여

23 2.2. 단계별추진방법 유지보수단계 웹접근성검 인증완료후에도웹접근성품질관리, 법률분쟁및민원대응등을전담할웹접근성전담유지보수조직을운영하여야합니다. 올레닷컴웹접근성품질관리유지보수계획및목표 VOC/ 민원대응지원 웹접근성 VOC 관련기술상담지원 대외적분쟁. 소송발생시대응지원 CP 별이슈대응 / 지원 홍보 / 교육지원 대내외웹접근성홍보자료개발및홍보수행 상담센터를위한웹접근성대응교육지원 서비스별담당자교체및개편시추가교육수행 기술 / 정보지원 적용기술변경시가이드라인갱신 / 배포 정책변경및내용변경내용공지 ( /sms) 유지보수 / 품질유지관련 FAQ/Q&A 관리

24 2.2. 단계별추진방법 유지보수단계 ( 계속 ) 웹접근성민원대응을위한콜센터등의전담조직을구성하고, 상담직원응대요령가이드의제작 / 배포, 정기교육실시등을통하여전문성을유지할수있도록해야합니다. 웹접근성민원응대가이드제작 / 배포 웹접근성민원응대를위한교육지원 웹접근성 VOC 상담가이드제작 / 배포를통해상담센터의원활한 1 차상담응대지원 웹접근성교육지원을통한웹접근성이해및상담지식향상 웹접근성관련응대를위한교육자료 V 웹접근성관리팀 웹접근성의개념 올레닷컴인증마크적용범위 / 현황 민원대응참고자료 - 웹접근성이용방법 - 웹접근성오류접수 - 웹접근성기능개선 민원대응지원방안 - 민원응대요령 - 민원발생시보고요렬 오프라인교육 온라인교육진행 웹접근성교육시행 - 대상 : 전체상담원 - 장애특징 - 웹접근성의이해 - 자주발생하는민원유형 - 민원응대지원방안안내 방문교육진행후추가로교육이필요한경우, 화상교육시스템을활용한온라인교육실시

25 3. 웹접근성적용 본웹접근성적용가이드라인은웹접근성국가표준 2.0 을기반으로웹접근성을처음접하는분들도쉽게이해할수있도록예시위주로구성하였습니다. 보다자세한사항은국가표준을참고하시기바랍니다 인식의용이성확보 적절한대체텍스트제공 자막제공 색에무관한콘텐츠인식 텍스트콘텐츠의명도대비 배경음사용금지 3.2. 운용의용이성확보 키보드사용보장 초점이동 / 콘텐츠의선형화 응답시간조절 정지기능제공 깜빡임과번쩍임사용제한 반복영역건너뛰기 제목제공 적절한링크텍스트 3.3. 이해의용이성확보 기본언어표시 사용자요구에따른실행 표의구성 레이블제공 / 오류정정 3.4. 견고성확보 마크업오류방지 웹애플리케이션접근성준수

26 3.1. 인식의용이성확보 적절한대체텍스트제공 ( 계속 ) 웹콘텐츠접근성지침 텍스트아닌콘텐츠는그의미나용도를이해할수있도록대체텍스트를제공해야한다. 적용방법 모든이미지콘텐츠에는대체텍스트 (alt 속성 ) 를제공하여야합니다. - 이미지는물론이미지링크, 이미지맵등을구성하는이미지에도적절한 alt 속성제공 - 의미없이디자인용도로사용되는이미지는 <alt=""> 형태로제공 - 이미지의내용과동등한정보를대체텍스트로제공해야하며, 필요시 longdesc 속성으로제공 ( 단, HTML5 에서는 longdesc 를지원하지않음 ) - 영문이니셜의경우대문자로표기하되, 이니셜사이에점 (.) 를추가하여알파벳으로읽도록하는방법을권장 텍스트로표현가능한정보 ( 텍스트이미지 ) 의경우이미지대신텍스트로제공하는것을권장합니다. 적용예시 이미지예시 적용내용 적용내용 - 이미지에대한 alt 속성제공 - 알파벳으로읽는영문에대한처리 적용예시 - <img src=" 주소 " alt=" 갤럭시노트 L.T.E 화이트 16 기가 "/> 적용내용 - 이미지맵으로사용된이미지에대한 alt 속성제공 적용예시 <img src=" 주소 " style=" 내용 " usemap=" 내용 " alt="olleh service 모음 "/>

27 3.1. 인식의용이성확보 적절한대체텍스트제공 적용예시 이미지예시 적용내용 적용내용 - 이미지링크에대한 alt 속성제공 - 배경이미지는의미가없는경우에만 CSS 로제공하며, 의미가있을경우에는 img 요소로제공적용예시 - 이미지링크 : <img src=" 주소 " alt=" 음악베스트 5 더보기 "/> 적용내용 - 웹툰등대체텍스트정보가긴이미지콘텐츠의경우 longdesc 속성을사용하여제공 ( 단, html5 의경우 longdesc 를지원하지않으므로 alt 속성사용 ) 적용예시 <p class="p_ex01"><img src=" 주소 " alt="gs 칼텍스편 " longdesc="./img/gs 칼텍스편.txt" />

28 3.1. 인식의용이성확보 자막제공 ( 계속 ) 웹콘텐츠접근성지침 멀티미디어콘텐츠에는자막, 원고또는수화를제공해야한다. 적용방법 멀티미디어콘텐츠에는자막, 원고또는수화를제공하여야합니다. - UCC 의경우제공자가콘텐츠제공시대체수단을함께제공하도록권고 - 동영상의음성정보에대해동등한자막또는원고제공 (Sync 기능은필수사항아님 ) - 광고형동영상의경우, 광고카피가존재하더라도자막 / 원고제공하도록권장 대사가없는동영상의경우화면해설을위한음성정보를반드시제공하여야합니다. 적용예시 광고형동영상예시 적용내용 광고형동영상의경우에도자막 / 원고제공권장

29 3.1. 인식의용이성확보 자막제공 적용예시 동영상원고제공예시 적용내용 동영상음성정보와동일한내용의원고를제공

30 3.1. 인식의용이성확보 색에무관한콘텐츠인식 ( 계속 ) 웹콘텐츠접근성지침 콘텐츠는색에관계없이인식될수있어야한다. 적용방법 차트, 그래프등여러항목이함께표기되는경우색상차이뿐아니라다른모양이나무늬를사용하여구분할수있도록제공해야합니다. - 차트, 그래프에데이터나명칭을직접기입하여항목을구분하는것도바람직함 텍스트를강조하기위해서는색상뿐아니라폰트크기, 두께, 밑줄등을사용하여구분될수있도록해야합니다. - 마크업콘텐츠제작시스크린리더사용자를배려하는구현방법을사용 ex. 굵은폰트를사용하여강조하는경우에 <b> 또는 <i> 태그대신 <strong> 이나 <em> 태그를사용 적용예시 잘못된적용예시 ( 막대그래프 ) 올바른적용예시 ( 막대그래프 ) 그래프의각항목이색으로만구분되어흑백화면에서구분불가능 그래프의각항목을무늬로도구분하여어느경우에도구분가능 범례에도동일한기호 / 무늬를사용

31 3.1. 인식의용이성확보 색에무관한콘텐츠인식 ( 계속 ) 적용예시 잘못된적용예시 ( 선형그래프 ) 올바른적용예시 ( 선형그래프 ) 항목을색으로만구분 항목을색과서로다른기호를이용하여구분 잘못된적용예시 ( 선택된항목의구분표기 1) 올바른적용예시 ( 선택된항목의구분표기 1) 선택된항목을색으로만구분 선택된항목을밑줄과굵은폰트를사용하여구분

32 3.1. 인식의용이성확보 색에무관한콘텐츠인식 적용예시 잘못된적용예시 ( 선택된항목의구분표기 1) 올바른적용예시 ( 선택된항목의구분표기 1) 현재선택된메뉴를색으로만구분 현재선택된메뉴를색외에이미지를추가적으로제공하여구분

33 3.1. 인식의용이성확보 텍스트콘텐츠의명도대비 ( 계속 ) 웹콘텐츠접근성지침 텍스트콘텐츠와배경간의명도대비는 4.5 대 1 이상이어야한다. 적용방법 텍스트콘텐츠와배경간의명도대비는 4.5:1 이상을유지하여야합니다. - 폰트사이즈가 18pt 이상또는 14pt 이상의굵은폰트인경우는배경과의명도대비를 3:1 까지허용 - 콘텐츠에포함된디자인목적의글자및마우스선택이나키보드초점을받았을경우에명도대비가달라지는콘텐츠는예외 적용예시 잘못된적용예시 올바른적용예시 폰트색상과배경색상의명도대비가낮아콘텐츠인식이어려움 폰트색상과배경색상의명도대비를 4.5:1 이상으로적용

34 3.1. 인식의용이성확보 텍스트콘텐츠의명도대비 적용예시 허용명암비 1 일반텍스트 - 명도대비 4.5 : 1 적용 - # 이상의색상사용 #FFFFFF 1 # 명도대비 4.5:1 2 # 명도대비 3:1 2 폰트사이즈가 18pt 이상또는 14pt 이상의굵은폰트 - 명도대비 3 : 1 적용 - # 이상의색상사용 이미지폰트사용시권장스타일 시스템폰트사용시권장스타일

35 3.1. 인식의용이성확보 배경음사용금지 웹콘텐츠접근성지침 자동으로재생되는배경음을사용하지않아야한다. 적용방법 멀티미디어콘텐츠 ( 동영상, 음성, 음악등 ) 는자동으로재생되지않도록합니다. - 3 초미만의배경음의경우는자동으로재생되어도무관 - 3 초이상분량의멀티미디어콘텐츠는음소거또는정지상태로제공 적용예시 잘못된적용예시 올바른적용예시 페이지접근시동영상자동재생 페이지접근시음소거상태로자동재생

36 3.2. 운용의용이성확보 키보드사용보장 웹콘텐츠접근성지침 모든기능은키보드만으로도사용할수있어야한다. 적용방법 스크립트, CSS, 마크업구현시마우스뿐아니라키보드만으로도이용이가능하도록콘텐츠를구현하여야합니다. 키보드이용시사용자가키보드초점의위치를시각적으로확인할수있도록표시하여야합니다. - onfocus="this.blur();" 사용금지 - <img>, <li> 등과같이키보드 focus 를받지않아야하는객체에는 onclick 이벤트사용금지 키보드로도접근할수있는이벤트를사용합니다. - 마우스이벤트와키보드이벤트비교 마우스이벤트 (X) 마우스 / 키보드공용이벤트 (O) onclick onmouseover onmouseout onfocus onblur

37 3.2. 운용의용이성확보 초점이동 / 콘텐츠의선형화 ( 계속 ) 웹콘텐츠접근성지침 키보드에의한초점은논리적으로이동해야하며시각적으로구별될수있어야한다. 또한, 콘텐츠는논리적인순서로제공되어야한다. 적용방법 키보드의이동경로는논리적인구조로제공되어야합니다. - 일반서브페이지이동경로정책 : 본문으로바로가기 > BI > 채널 Tab > Util > 검색 > GNB > LNB > 컨텐츠 ( 본문 ) > 퀵배너 > Footer - GNB 는좌 우, LNB 는상 하로이동하는것을기본으로함 콘텐츠가초점을받으면시각적으로구분될수있어야합니다. - 예시 : 포커스링 (focus ring) 표시가보이도록함 적용예시 잘못된예시 키보드 focus 이동이비논리적이며, focus 받은콘텐츠에대한표시없음 올바른예시 키보드 focus 가논리적으로이동하며, focus 받은콘텐츠에포커스링표시

38 3.2. 운용의용이성확보 초점이동 / 콘텐츠의선형화 ( 계속 ) 적용예시 서브페이지의키보드이동경로예시 ( 올바른경우 ) 본문으로바로가기 2 BI & Title 3 고객군탭 4 Util 영역 5 검색영역 6 GNB 영역 7 LNB 영역 8 Body 영역 9 Quick Banner 10 Footer

39 3.2. 운용의용이성확보 응답시간조절 웹콘텐츠접근성지침 시간제한이있는콘텐츠는응답시간을조절할수있어야한다. 적용방법 시간제한이있는콘텐츠는가급적제공하지않도록합니다. 시간제한이있는콘텐츠를제공해야할경우에는시간제한해제또는시간연장기능을제공해야합니다. - 일정시간이지난후자동으로페이지갱신또는이동되지않도록기본설정하고, 사용자가선택할때만동작하도록구현 ( 키보드로시간제한해제기능을이용했을때마우스액션으로인한영향이발생하면안됨 ) - 서식입력시시간제한을두거나일정시간후자동로그아웃되는경우에는시간연장기능제공 ( 단, 경매 / 시험등과같이시간제한이필수적인경우에는예외 ) 적용예시 이미지예시 적용내용 입력제한시간을연장할수있는기능제공

40 3.2. 운용의용이성확보 정지기능제공 웹콘텐츠접근성지침 자동으로변경되는콘텐츠는움직임을제어할수있어야한다. 적용방법 자동으로변경되는콘텐츠에는움직임을제어할수있는기능을함께제공하여야합니다. - 기본적으로자동변경되는콘텐츠 ( 배너등 ) 에는이전 / 다음 / 정지제어기능을제공 적용예시 잘못된적용예시 올바른적용예시 자동롤링콘텐츠에이전 / 다음이동및정지기능미제공 자동롤링콘텐츠에이전 / 다음이동및정지기능제공

41 3.2. 운용의용이성확보 깜빡임과번쩍임사용제한 웹콘텐츠접근성지침 초당 3~50 회주기로깜빡이거나번쩍이는콘텐츠를제공하지않아야한다. 적용방법 초당 3~50 회주기로깜빡이거나번쩍이는콘텐츠는광과민성발작을유발시킬수있으므로제공하지않도록합니다. - 깜빡임이초당 3 회미만이거나 3 초내에깜빡임이나번쩍임이종료되는콘텐츠는제공가능 - esc 키를눌러서깜빡임을정지시킬수있을경우에는허용 적용예시 잘못된적용예시 고대비색상으로초당 3 번이상연속적으로번쩍이는이미지콘텐츠 esc 키로정지시킬수있도록하거나, 깜빡임주기가초당 3 회미만으로변경되도록수정

42 3.2. 운용의용이성확보 반복영역건너뛰기 웹콘텐츠접근성지침 콘텐츠의반복되는영역은건너뛸수있어야한다. 적용방법 키보드사용시반복적인초점이동횟수를줄이기위하여 본문으로바로가기 버튼을제공하여야합니다. - 바로가기버튼은문제가없는한시각적으로노출되도록구현 - 공통 GNB 의경우공통소스에서해당기능제공 적용예시 이미지예시 적용내용 적용내용본문으로바로가기링크제공 적용소스예시 <a href="#content"> 본문내용바로가기 </a> <h2 id="content"> 본문영역 </h2>

43 3.2. 운용의용이성확보 제목제공 ( 계속 ) 웹콘텐츠접근성지침 페이지, 프레임, 콘텐츠블록에는적절한제목을제공해야한다. 적용방법 브라우저타이틀에는현재페이지의정보를제공하여야합니다. - 브라우저타이틀은아래형식을기본으로표기 - [1Depth 메뉴명 ] 현재페이지명 - 올레슬로건 ex) [ 폰서비스 ] 통화연결음 고객만족뛰고또뛰겠소 dododo olleh - 프레임타이틀은해당프레임명만표기 - 빈프레임에도제목제공 - 프레임제목은구분가능하도록제공 - 브라우저타이틀, 프레임제목에는특수문자나기호를반복하여사용하지않음 - 일반팝업 : [1Depth 메뉴명 ] 팝업명 - 올레슬로건 - 이벤트페이지예시 : [1Depth 메뉴명 ] 이벤트명 - 올레슬로건 적용예시 잘못된적용예시 ( 브라우저타이틀 ) 올바른적용예시 ( 브라우저타이틀 ) 브라우저타이틀을사이트내모든페이지에서동일하게제공 브라우저타이틀이페이지별로상이하게제공

44 3.2. 운용의용이성확보 제목제공 적용예시 잘못된적용예시 ( 프레임제목누락등 ) 올바른적용예시 ( 프레임제목제공 ) IFRAME-1 ㅇ Name not specified ㅇ Longdesc not specified ㅇ Title not specified ㅇ Src= " 프레임제목을제공하지않음 IFRAME-1 ㅇ Name not specified ㅇ Longdesc not specified ㅇ Title 통합검색 ㅇ Src= 간단명료한프레임제목을제공 IFRAME-1 ㅇ Name not specified ㅇ Longdesc not specified ㅇ Title 팝업 ㅇ Src= IFRAME-2 ㅇ Name not specified ㅇ Longdesc not specified ㅇ Title 팝업 ㅇ Src= " 동일페이지내의프레임제목이동일함 IFRAME-1 ㅇ Name not specified ㅇ Longdesc not specified ㅇ Title 올레 tv 안내 ㅇ Src= IFRAME-2 ㅇ Name not specified ㅇ Longdesc not specified ㅇ Title 키봇 2 이벤트 ㅇ Src= " 동일페이지내의프레임들의제목이서로다르게제공

45 3.2. 운용의용이성확보 적절한링크텍스트 웹콘텐츠접근성지침 링크텍스트는용도나목적을이해할수있도록제공해야한다. 적용방법 링크의용도나목적지를명확하게이해할수있도록링크텍스트를제공하여야합니다. - 텍스트만으로의미를알수없는경우에는대체텍스트를이용하여추가적인정보를제공 적용예시 해당사례 잘못된적용예시 올바른적용예시 <a href=" 주소 " target="_blank"> 더보기 </a> <a href=" 주소 " target="_blank ><img src= 더보기 _image.jpg alt= 알립니다더보기 ></a> 한페이지내에 더보기 가여러개인경우구분이어려움 한페이지내에여러개의 더보기 가있을경우구체적인명칭을추가적으로제공

46 3.3. 이해의용이성확보 기본언어표시 웹콘텐츠접근성지침 주로사용하는언어를명시해야한다. 적용방법 페이지별로기본으로적용되는언어를표기해야합니다. 적용예시 방법 적용내용 1. HTML4.01 / HTML5 <html lang="ko"> 2. XHTML1.0 <html xml:lang="ko" lang="ko"> 기본언어를한국어로표기 3. XHTML1.1 <html xml:lang="ko">

47 3.3. 이해의용이성확보 사용자요구에따른실행 ( 계속 ) 웹콘텐츠접근성지침 사용자가의도하지않은기능 ( 새창, 초점변화등 ) 은실행되지않아야한다. 적용방법 사용자가인지할수없는새창, 팝업창등을제공하지않아야합니다. - Select box, 라디오버튼의선택만으로팝업창이뜨거나새로운 URL 로이동하는 UI 제거 - 자동새창, 팝업창사용이반드시필요한경우페이지내 1 개로제한하며, focus 는새창으로이동 새창링크사용시, 사전에새창열림정보를제공하여야합니다. - 새창이열림을사전에공지하기위하여 target= _blank 를제공 - 텍스트링크에는텍스트링크이름뒤에 ( 새창열림 ) 을추가로표기 - 이미지링크에는 <img> 의 alt 속성의대체텍스트뒤에 ( 새창열림 ) 을추가로표기 팝업창, 팝업레이어사용시에는 focus 이동을고려하여제공하며닫기기능이제공되어야합니다. - 팝업사용시스크립트의 confirm() 대화상자같은것을이용하여사전에알리고선택하도록제공 - 팝업사용시 focus 는팝업으로이동하여야하며, 팝업닫기시에는원페이지상단으로이동 - 모든팝업에는닫기버튼을제공하여야하며, 닫기버튼은팝업창의마지막에위치시키는것을권장

48 3.3. 이해의용이성확보 사용자요구에따른실행 ( 계속 ) 적용예시 잘못된적용예시 ( 자동팝업제공 ) 올바른적용예시 ( 자동팝업제공 ) 페이지접근시자동으로팝업이 2 개이상제공 페이지접근시자동팝업은 1 개만제공 잘못된적용예시 ( 텍스트 / 이미지링크 ) 올바른적용예시 ( 텍스트 / 이미지링크 ) 텍스트링크 <a href=" 주소 "> 키봇 2 출시이벤트 </a> 텍스트링크 <a href=" 주소 " target="_blank > 키봇 2 출시이벤트 ( 새창열림 )</a> 이미지링크 <a href=" 주소 "><img src=" 주소 " alt=" 갤럭시노트구매 " /></a> 이미지링크 <a href=" 주소 "><img src=" 주소 " alt=" 갤럭시노트구매 ( 새창열림 )" /></a> 텍스트링크와이미지링크모두새창열림에대한사전알림을제공하지않음 텍스트링크는 target 속성을사용하여새창열림에대해사전알림 이미지링크는 alt 속성에새창열림에대해사전알림

49 3.3. 이해의용이성확보 사용자요구에따른실행 ( 계속 ) 적용예시 팝업레이어사용예 팝업레이어는원칙적으로허용하지않으나반드시사용해야하는경우에는팝업레이어에 닫기 버튼을제공하고, 팝업레이어가닫히면원페이지상단으로초점이이동하도록구현

50 3.3. 이해의용이성확보 표의구성 ( 계속 ) 웹콘텐츠접근성지침 표는이해하기쉽게구성해야한다. 적용방법 데이터가포함된테이블제공시테이블구조와내용의이해를돕기위한정보를제공해야합니다. - 테이블에 Caption, Summary 등을함께제공 ( 단, HTML5 에서는 caption 만사용가능 ) - 데이터테이블에제목셀과내용셀을 <th> 와 <td> 를이용하여구분 테이블구성시제목셀 (<th>) 이 2 개이상의열또는 2 개이상의행에걸쳐있는복잡한테이블의경우, 항목을분리하여여러개의테이블로나누어제공하여주는것을권장

51 3.3. 이해의용이성확보 표의구성 적용예시 해당사례 잘못된적용예시 테이블제목및요약정보제공 <table summary=" 게시물목록 "> <caption> 게시물목록 </caption> <tr><td> 제목 1</td><td> 제목 2</td>...</tr> <tr><td> 내용 1</td><td> 내용 2</td>...</tr> </table> 올바른적용예시 테이블제목및요약정보제공 <table summary=" 상품명, 서비스이용료, 모뎀임대료, 설치비의순서로게시물목록을나타낸표입니다 "> <caption>olleh 인터넷라이트약정별요금목록 </caption> <thead> <tr><th> 상품명 </th><th> 서비스이용료 </th> </tr> </thead> <tbody> <tr><th> 라이트 3 년 </th> <td>25,500 원 </td><td> 면제 </td><td> 면제 </td></tr>... </tbody> </table> 테이블제목과요약정보가모호하여테이블의구조와내용을유추할수없음 제목셀을 </th> 로구분하지않음 Caption 을통해정확한테이블제목을기재하였으며 Summary 를통해테이블의구조와내용에대한요약정보를제공함 제목셀은 </th> 로구분

52 3.3. 이해의용이성확보 레이블의제공 / 오류정정 ( 계속 ) 웹콘텐츠접근성지침 입력서식에는대응하는레이블을제공해야하며입력오류를정정할수있는방법을제공해야한다. 적용방법 입력서식에대해각레이블 ( 타이틀, 속성, 목적, 입력값, 형태등 ) 을제공하여야합니다. - 이미지레이블을사용하지않으며, 하나의서식에는하나의레이블만제공 - for, id 속성을사용하여 input 태그와 label 태그간의관계를명시적으로제공하며, 레이블은정확하게제공 - 디자인상레이블을숨겨야할경우, display:none; 속성을사용해도무관 기본적으로 input 태그를사용한레이블제공을권장하며, 주민등록번호와같이연속한 2~3 개의 input 태그를사용하는경우와같이 label 태그를사용할수없는경우에는레이블을 title 속성으로제공해야함 입력서식작성시오류가발생하면그위치와오류내용을알려주어수정이용이하도록합니다. - 잘못입력된항목에대해항목과오류내용등의정보를제공 - alert 등을활용하여사용자가되도록쉽게인지할수있는방법으로제공 적용예시 입력서식의레이블제공예 레이블사용예시 <label for="registno1"> 주민등록번호 </label> <input type="text" id="registno1" /> - <input type="text /> Title 속성사용예시 <label for="registno1"> 주민등록번호 </label> <input type="text" id="registno1 title= 앞자리 /> - <input type="text title= 주민등록번호뒷자리 />

53 3.3. 이해의용이성확보 레이블의제공 / 오류정정 적용예시 레이블을제공해야하는서식 구분서식이미지레이블제공내용 ( 텍스트 ) 편집창 ( 암호 ) 편집창 입력해야하는항목을레이블로제공 title= 아이디입력 다중편집창 라디오버튼 체크박스 선택이의미하는내용을 Title 로제공하고암묵적레이블사용 <label><input.. Title KOIN 결제 ></label> 콤보박스 (Select box) 무엇을선택하는지목적을레이블로제공 title= 검색구분선택 서식입력오류알림예 적용내용 필요한정보를기입하지않았음을 alert 으로알림 alert 확인후에는 focus 를해당항목으로이동

54 3.4. 견고성확보 마크업오류방지 웹콘텐츠접근성지침 마크업언어의요소는열고닫음, 중첩관계및속성선언에오류가없어야한다. 적용방법 마크업언어는 DOCTYPE 에따른문법을최대한준수하여야하며, 중첩관계등의속성선언에오류가없도록주의하여야합니다. 사용한마크업언어에따른문법준수여부는 W3C Markup Validation Service 를이용하거나 K-WAH4 등을이용하여오류를확인할수있습니다. ( 적용예시 잘못된적용예시 중첩관계오류 <p> 운영자에게 <a href=" 주소 "> 메일 </p> 보내기 </a> 올바른적용예시 중첩관계수정 <p> 운영자에게 <a href=" 주소 "> 메일 </a> 보내기 </p> 닫는태그미제공 <a href=" 주소 "> 올레닷컴 닫는태그제공 <a href=" 주소 "> 올레닷컴 </a> 속성중복선언 <p style="font-size:12pt; font-weight:bold;" style="color:#00ff00; font-decoraton:underline;"> 올레클럽 </p> 속성중복선언수정 <p style="font-size:12pt; font-eight:bold; color:#00ff00;font-decoraton :underline;"> 올레클럽 </p>

55 3.4. 견고성확보 웹애플리케이션의접근성준수 웹콘텐츠접근성지침 콘텐츠에포함된웹애플리케이션은접근성이있어야한다. 적용방법 웹애플리케이션의경우자체적으로접근성을제공하여야하며, 그렇지못할경우에는대체수단을제공하여야합니다. 웹애플리케이션제공시주의사항 - 키보드보안프로그램은스크린리더 / 키보드사용자의입력과소리출력을방해하지않아야함 - 멀티미디어재생애플리케이션의볼륨조절기능은시스템볼륨을변경하거나조절하지않아야함 - 웹애플리케이션으로인해키보드단축키의이용이불가능하거나초점이사라지거나비정상적인이동등의현상이나타나지않아야함 - 플래시콘텐츠는자체적인접근성을제공하도록구현되어야하며, 페이지에포함시킬경우에 wmode 의 value 값을반드시 window 로설정

56 4. 진단과평가 서비스는웹접근성을준수하는지자체적인평가가필요합니다. 웹접근성진단은웹접근성국가표준에의거하여기준을마련하고, 그기준에따라수행되어야합니다 검증도구안내 검증양식및도구안내 AIS 툴바 Open Wax 4.2. 검증 평가방법안내

57 4.1. 검증도구안내 검증양식및도구안내 웹접근성진단은다양한방법으로수행할수있습니다. 여기서는 AIS 툴바와 Open WAX 를사용하는방법을주로설명합니다. AIS 툴바 Open WAX Etc. IE 브라우저기반의접근성확인툴바로웹접근성에대한다양한항목확인가능 최신버전 (13 년 7 월기준 ) : Web Accessibility Toolbar for IE 프리웨어로웹사이트에서다운로드가능 Firefox, Chrome 브라우저전용웹접근성툴바로국내웹접근성지침에맞춰개발 최신버전 (13 년 7 월기준 ) - Firefox : v Chrome : v 각브라우저내부가기능으로추가하여사용가능 그외에도개발자도구를사용하여웹접근성검증을진행합니다. FireBug : Firefox, Chrome 브라우저전용개발자도구 IE 개발자도구 : IE 8 이상의브라우저에서 F12 키로이용가능

58 4.1. 검증도구안내 AIS 툴바 AIS 툴바다운로드및설치방법을안내합니다. 다운로드및설치방법 사용방법 Step 1. Vision australia" 웹사이트접속 ( AIS 툴바사용시, 아래의기능들이유용하게사용되오니이용시참고하시기바랍니다. Step 2. 아래경로를따라페이지이동 Home > Business and professionals > Digital Access > Resources > Tools to download > Web Accessibility Toolbar for IE 2012 Step 3. Download Web Accessibility Toolbar for IE 2012 클릭기본정보 ( 이름, 메일등 ) 입력후다운로드 Doc Info > Page Information[new windows] - 이미지의전체개수, alt 제공및적절성을확인하실수있습니다. - 비슷한기능은 Images 의세부항목들입니다. CSS > Disable CSS - CSS 제거, 해당항목을다시한번누르거나 F5 버튼을누르면원래대로돌아옵니다. Colour > Contrast Analyser[application] - 명도대비확인프로그램

59 4.1. 검증도구안내 Open Wax Open Wax (for Firefox & Chrome) 다운로드및설치방법을안내합니다. 다운로드및설치방법 사용방법 Step 1. 아래주소의 Open Wax 다운로드사이트접속 ( Step 2. 브라우저선택하여링크클릭 Step 1. 브라우저주소창 / 검색창우측사다리모양의 Open Wax 아이콘 클릭 [Chrome] [Firefox] Step 3. 브라우저별설치페이지에서 추가 버튼클릭 [Chrome 앱스토어 ] Step 2. 브라우저좌측에정보제공 [Firefox 부가기능 ]

60 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 1. 이미지대체텍스트제공 (1/2) 평가도구 AIS 툴바 - SHOW IMAGES 검색 > NO ALT - PAGE INFORMATION Open Wax 평가방법 이미지의 alt 속성이적절하게제공되었는지평가합니다. 더보기, 다운로드 등과같이단독으로이해가불가능한링크이미지의경우구체적인기능을대체텍스트로제공해야합니다. " 더보기 " 같은링크텍스트는오류로평가합니다. 대체텍스트가부족한이미지의경우 CSS 를제거하여 IR 기법으로제공하고있는지확인이필요합니다. 검색버튼의 alt 는 검색 으로만제공되어도충분합니다. 유의사항 Page Information 에서는 img 만확인가능하며 input, area 는확인할수없습니다. AIS 툴바버전에따라잘열리는버전과잘안열리는버전이존재하며, AIS 1.2 버전이가장잘열립니다. 평가도구사용법 AIS 툴바 - [Page information] 1 Doc Info. > Page Information 선택 2 CTRL+F 로검색창을열고 "no alt" 를검색하여 alt 가제공되지않은이미지를확인

61 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 1. 이미지대체텍스트제공 (2/2) 평가도구사용법 AIS 툴바 - [List images] 1 Images > List images 선택 2 CTRL+F 로검색창을열고 "no alt" 를검색하여 alt 가제공되지않은이미지를확인 Open WAX 1 브라우저주소창 / 검색창우측사다리모양의 Open Wax 아이콘 클릭 [Chrome] 2 브라우저좌측에 KWCAG2.0 정보제공, 각항목을펼쳐상세정보확인 [Firefox]

62 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 2. 멀티미디어콘텐츠대체수단제공 평가도구 시각 평가방법 자막, 수화, 원고등이제공되고있는지확인합니다. 유의사항 사용자가올리는동영상콘텐츠 (UCC) 는검증대상에서제외됩니다. 동영상콘텐츠내에자막이포함된경우 ( 오픈캡션 ) 가있습니다. 반드시동영상을플레이하여확인해야합니다. 재생되지않는동영상은멀티미디어콘텐츠로분류하지않습니다. 3. 색상에무관한콘텐츠인식 평가도구 시각 평가방법 색상으로만구분되는콘텐츠를확인합니다. 그래프, 게시판항목 ( 이전 1,2,3,4,5... 다음 ) 등에서오류가자주발생합니다. 유의사항 색상으로구분된콘텐츠라하더라도색상이외의방법으로구분이가능하면오류가아닙니다. 그래프와텍스트의구분이있기때문에미준수항목체크시유의해야합니다. 4. 명확한지시사항제공 평가도구 시각, 청각등 평가방법 지시사항에한하여모양, 크기, 위치, 방향, 색, 소리중하나의감각만을사용한경우가있는지확인합니다. 유의사항 ~ 이동하세요, ~ 선택하세요등과같은지시사항이있는경우유의해서확인합니다

63 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 5. 텍스트콘텐츠의명도대비 평가도구 AIS 툴바 : Colour Contrast Analyser Open WAX 평가방법 본문텍스트콘텐츠와배경간의명도대비를확인합니다. 유의사항 본문영역텍스트, 텍스트이미지에한하여평가합니다. 디자인요소 ( 예 : 로고등 ) 로사용된이미지는평가하지않습니다. 평가도구사용법 AIS 툴바 - [Contrast Analyser] 1 Colour > Contrast Analyser [application] 선택 2 실행된어플리케이션을통해명도대비확인 [PASS 일경우 ] [Fail 일경우 ]

64 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 6. 배경음사용금지 평가도구 청각및시각 평가방법 페이지열림과동시에자동으로재생되는배경음을확인합니다. 유의사항 동영상재생버튼을누른것같이사용자의의도가있는페이지의자동재생은평가하지않습니다. ( 재생을누른후페이지가변경되면서동영상이자동재생되는경우 ) 자동재생된다하더라도 3 초이하의배경음이면제외합니다. 자동재생중 esc 키를눌러정지되면제외합니다. 7. 키보드접근성보장 평가도구 키보드 평가방법 키보드 tab 키를이용하여마우스로이용가능한개체로이동할수있으며, 그기능을실행시킬수있는지확인합니다. 유의사항 키보드로접근할수없는개체를확인합니다. 함정에빠져서나오지못하는경우다음객체에마우스를이용하여포커스를옮긴후계속평가합니다

65 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 8. 초점이동 평가도구 키보드, 시각 평가방법 접근은가능하나키보드초점을시각적으로확인할수없는개체를확인합니다. tab 키를누를때마다키보드초점이좌상단에서우하단방향으로이동하는지확인합니다. 함정에빠져서더이상움직일수없는곳이존재하는지확인합니다. 유의사항 초점의확인은반드시포커스링으로확인할필요는없으며, 초점을받았을때색상의변화등으로초점받은사실이확인되면접근성준수입니다. iframe 에접근할때초점이사라지는경우는예외입니다. ( 하지만 iframe 내에서초점이보이지않는경우는접근성위반입니다.) 한페이지내에서키보드초점이 header>gnb> 본문 >quick menu( 하단 )> 하단 (quick menu) 로이동되는지확인합니다. 9. 응답시간조절 평가도구 시각 평가방법 시간제한콘텐츠 ( 자동로그아웃, 이메일 / 휴대폰인증 ), 자동업데이트가존재하는경우알림기능을제공하는지확인합니다

66 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 10. 정지기능제공 평가도구 키보드, 마우스 평가방법 배너존, 팝업존등흐르는콘텐츠의경우재생, 정지선택기능을제공하고, 이기능이올바르게동작하는지확인합니다. 유의사항 제어기능의제공유무와키보드, 마우스의이용가능여부만을확인합니다. 11. 깜빡임과번쩍임사용제한 평가도구 시각 평가방법 초당 3~50 회깜빡이는콘텐츠가있는지확인합니다. 유의사항 이런콘텐츠가있는페이지로의이동에앞서서사전알림이있는경우는제외합니다. esc 키를눌러깜빡임을멈출수있으면제외합니다. 플래시콘텐츠외에는대부분문제가없습니다

67 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 12. 반복영역건너뛰기 평가도구 키보드 AIS 툴바 평가방법 AIS 툴바를이용하여 CSS 를제거한후 ' 바로가기 ' 링크가있는지확인합니다. tab 키를눌러바로가기로이동할수있는지확인합니다. 유의사항 CSS 를제거한화면에서건너뛰기링크묶음이콘텐츠첫부분 ( 보통로고다음 ) 에제공되어야합니다. 평가도구사용법 AIS 툴바 - [Disable CSS] - CSS 제거후본문바로가기, 메인메뉴건너뛰기, 콘텐츠바로가기등건너뛰기링크가제공되고있는지확인합니다. - F5 를눌러 CSS 를복구시킨후 tab 키를이용하여 본문바로가기 로이동한후 enter 를눌러올바르게본문으로이동하는지확인합니다. 1 CSS > Disable CSS 선택 2 CSS 가제거된화면으로확인

68 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 13. 제목제공 평가도구 AIS 툴바 Open WAX 각종진단도구및소스확인 평가방법 브라우저상단의페이지제목이올바르게제공되었는지확인합니다. 공지사항과같이해당페이지에맞는제목인지확인하며동일한제목이제공되었거나페이지주소가출력되면미준수입니다. iframe, frame 태그에 title 속성을제공하고있는지확인합니다. h1, h2, h3, h4, h5, h6 등의제목태그가제공되었는지확인합니다. 유의사항 TITLE 보다브라우저상단또는페이지탭의페이지제목을우선으로판단합니다. 평가도구사용법 AIS 툴바 [Frame Name/Title] 1 Frames > Frame Name/Title 선택하여정보확인 AIS 툴바 [Heading Structure] 1 Structure > Heading Structure 선택하여정보확인

69 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 14. 적절한링크텍스트제공 평가도구 AIS 툴바 평가방법 링크텍스트만으로목적지또는용도를이해할수있는지확인합니다. 더보기텍스트링크의경우 TITLE 속성으로 " 공지사항더보기 " 와같이세부내용제공시준수한것으로판단합니다. 유의사항 " 텍스트를이미지로제공한링크 " 의경우대체텍스트가적절한링크텍스트인지평가합니다. " 더보기 " 이미지의 alt 속성은 ' 공지사항더보기 ' 등과같이구체적인더보기임을알수있도록할필요가있습니다. title 속성 ( 해당브라우저클릭후이미지나텍스트에마우스를올리면나오는툴팁 ) 으로추가설명을제공한경우에는준수한것으로판단합니다. " 파일다운로드 " 이미지의 alt 속성은 ' 약관동의서식다운로드 ' 등과같이구체적으로파일다운로드임을표시할필요가있습니다. " 바로가기 ", " 자세히보기 " 등에도동일한방법이적용됩니다. 온라인서식의 " 검색 " 버튼의경우에는평가에서제외됩니다

70 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 15. 기본언어표시 평가도구 페이지마우스우클릭 > 소스보기 평가방법 html 4.01 인경우 <html lang="ko"> xhtml 1.0 <html xml:lang="ko" lang="ko"> xhtml 1.1 <html xml:lang="ko"> 유의사항 html5 도 <html lang="ko"> 평가도구사용법 각브라우저의 소스보기 에서다음화면에표기된부분의정보확인 16. 사용자요구에따른실행 평가도구 키보드접근및실행 각종개발자툴및소스확인 평가방법 <select> 의해당항목선택이나초점이동만으로새창열림, 자동실행, 페이지갱신, 포커스자동이동등이발생하는지확인합니다. 자동재생 ( 온라인광고등 ) 이발생하는지확인합니다. 유의사항 사용자가의도하지않는기능실행은모두문제로봅니다. select box 다음에이동버튼이제공되는지를확인합니다. 회원가입주민번호앞자리입력시뒷자리로자동이동되는지확인합니다. 자동이동시오류입니다. 주소입력시우편번호를입력하면주소일부가자동입력되는것은오류가아닙니다. ( 페이지리플레시가일어나면오류, 해당페이지내에서변경되는것은오류로잡지않습니다.)

71 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 17. 콘텐츠의선형화 평가도구 AIS 툴바 : CSS 제거 > Linearize( 테이블선형화 ) FireBug : CSS 제거 평가방법 CSS 제거후콘텐츠구성순서가논리적으로제공되는지확인합니다 유의사항 메인페이지게시판목록, 더보기의경우게시판명 게시판목록 게시판더보기의순서로구성되었는지확인합니다. 로그인창의경우아이디 비밀번호 로그인버튼순으로구성되었는지확인합니다. 기타논리적으로생각해서판단합니다. " 제목 내용 " 과같이논리적으로맞는지판단합니다. [ 예시 ] 평가도구사용법 AIS 툴바 [Disable CSS /Linearize] 1 CSS > Disable CSS 선택 2 Tables > Linearize 선택 3 화면을통해정보확인

72 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 18. 표의구성 (1/2) 평가도구 AIS 툴바 각종개발자툴및소스확인 평가방법 데이터테이블의 <caption>, summary 속성을확인합니다. th, td 구분이올바르게되었는지확인합니다. <caption>, summary, th 를모두제공해야합니다. <caption>, summary 의내용이동일하지않아야합니다. * <caption> : 테이블제목 * summary : 테이블의구조와내용요약정보제공 ( 단 html5 에서는사용할수없음 ) 데이터테이블에한하여평가합니다. 데이터테이블이란정보의연관관계를제공하므로선형화시에그내용의이해가가능하도록제공해야합니다. 데이터테이블에서제목셀과데이터셀을각각 <th> 와 <td> 로구분하지않으면오류입니다. 레이아웃테이블은제목셀과데이터셀을구분할수없으므로 <th> 를사용하면오류입니다. [ 예시 ] 유의사항 다음예시의게시판목록은선형화하였을때인식이불가능합니다. ( 이무슨의미인지알수없습니다.) 반면 " 이름 : 개똥이아이디 : 웹와치성별 : 남제목 : 애인구함내용 : 애인이필요해 " 와같이글내용테이블을선형화하면인식이가능하므로레이아웃으로볼수있습니다

73 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 18. 표의구성 (2/2) 평가도구사용법 AIS 툴바 - [Show Data Tables] 1 Tables > Show Data Tables(Simple Data Tables) 선택 2 CSS 제거후, <caption>, summary 확인 게시판목록과같이 th 가상단에모여있는경우데이터테이블입니다. [ 예시 ] 내용셀 (td) 에 th 를제공한오류

74 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 19. 레이블제공 평가도구 AIS 툴바 : Fieldset/Labels, Show Titles Open WAX 각종개발자툴및소스확인 평가방법 해당온라인서식에 title, <label> 이제공되었는가확인합니다. 유의사항 레이블의 id 와 input 태그의 for 값이동일하게제공되어야합니다. 레이블을 img 로제공한경우는오류입니다. <label> 을 display:none 으로제공해도준수한것으로봅니다. 평가도구사용법 AIS 툴바 [Fieldset/Labels / Show Titles] 1 CSS > Disable CSS 선택 2 Structure > Fieldset/Labels 실행 3 Doc Info. > Show Titles 실행 4 온라인서식에서레이블과입력서식이올바르게제공되었는지확인

75 4.2. 검증 평가방법안내 검증 / 평가방법안내 ( 계속 ) 20. 오류정정 평가도구 키보드, 마우스 평가방법 회원가입 / 글쓰기페이지에서일부필수서식을채우지않은채로가입 / 작성버튼을누른후오류메시지및위치정보를제공하는지확인합니다. 어느서식에서무엇이잘못되었나확인할수있으면준수한것으로봅니다. 오류위치로직접이동해도준수한것으로봅니다. 유의사항

76 4.2. 검증 평가방법안내 검증 / 평가방법안내 21. 마크업오류방지 평가도구 소스검사, W3C Markup Validator, K-WAH4 평가방법 DTD 규격에따라소스를확인하여태그의열고닫음오류를확인합니다. K-WAH4 의마크업확인기능을이용합니다. 22. 웹애플리케이션접근성준수 평가도구 키보드 스크린리더 평가방법 키보드접근성, 스크린리더접근성을파악합니다. 대체콘텐츠가제공되고있는지확인합니다. 유의사항 플래시콘텐츠를웹페이지에포함시킬때에 wmode 의 value 값이 transparent 인경우스크린리더의접근이불가능하므로접근성이확보되지않은것으로평가합니다. 핸드폰사용량, 주식시세표와같이특정데이터를뿌려주는 RIA 의경우엑셀, 워드등문서파일을다운로드할수있는기능을제공하면접근성을확보한것으로평가합니다

77 [ 부록 ] 1. 웹접근성평가용체크리스트 ( 샘플 ) 2. 자체검수진행시집중검사항목

78 1. 웹접근성평가용체크리스트 ( 샘플 ) 이체크리스트는 KWCAG2.0 의 22 개검사항목을토대로웹페이지의웹접근성점수를측정하는데사용됨 중요 5 개검사항목에최대기본점수를부여하고최대기본점수의합이 100 점이되도록하며, 나머지검사항목은발견된오류수에비례하여총점에서감점하는방식으로환산함 사이트의대표적인서비스용페이지에대한웹접근성진단을수행하여점수를측정함 진단결과는웹사이트의웹접근성품질관리를위한지표로만사용이가능함 이체크리스트는웹접근성국가표준을참고하여웹페이지의접근성준수점수를측정하기위하여작성한웹접근성체크리스트입니다. 이체크리스트는참고용으로사용해야하며변형, 복제및배포를금합니다. No 지침제목지침체크리스트 1 적절한대체텍스트제공 텍스트아닌콘텐츠는그의미나용도를이해할수있도록대체텍스트를제공해야한다. 2 자막제공 멀티미디어콘텐츠에는 대체수단인자막, 원고또는 수화를제공해야한다. 3 색에무관한콘텐츠인식 콘텐츠는색에관계없이인식될 수있어야한다. 4 명확한지시사항제공 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없이 인식될수있어야한다. 5 텍스트콘텐츠의명도대비 텍스트콘텐츠와배경간의 명도대비는 4.5 : 1 이상이어야 한다. 6 배경음사용금지 자동으로재생되는배경음을 사용하지않아야한다. 7 키보드사용보장 모든기능은키보드만으로도 사용할수있어야한다. 대체텍스트가제공되지않은텍스트아닌콘텐츠개수 대체텍스트가적절하지않은텍스트아닌콘텐츠개수 대체콘텐츠가제공되지않은배경이미지개수 핵심텍스트를이미지로표현한콘텐츠가있는경우 대체수단이제공되지않거나부적절한멀티미디어콘텐츠개수 기본배점 30 감점배점 색으로만구분될수있는콘텐츠개수 -3 시각정보로만지시사항을전달하는콘텐츠가있는경우 소리정보로만지시사항을전달하는콘텐츠가있는경우 명도대비가기준이하인텍스트콘텐츠의개수 -5 자동으로재생되는멀티미디어콘텐츠를사용한경우 키보드로접근및운용이불가능한콘텐츠개수 20 키보드, 마우스이벤트가동등하지않은콘텐츠개수

79 1. 웹접근성평가용체크리스트 ( 샘플 ) 이체크리스트는웹접근성국가표준을참고하여웹페이지의접근성준수점수를측정하기위하여작성한웹접근성체크리스트입니다. 이체크리스트는참고용으로사용해야하며변형, 복제및배포를금합니다. No 지침제목지침체크리스트 8 초점이동 키보드에의한초점은논리적으로이동해야하며시각적으로구별할수있어야한다. 9 응답시간조절 시간제한이있는콘텐츠는 응답시간을조절할수있어야 한다. 10 정지기능제공 자동으로변경되는콘텐츠는 움직임을제어할수있어야 한다. 11 깜빡임과번쩍임사용제한 초당 3~50회주기로 깜빡이거나번쩍이는콘텐츠를 제공하지않아야한다. 12 반복영역건너뛰기 콘텐츠의반복되는영역은 건너뛸수있어야한다. 13 제목제공 페이지, 프레임, 콘텐츠 블록에는적절한제목을 제공해야한다. 14 적절한링크텍스트 링크텍스트는용도나목적을 이해할수있도록제공해야 한다. 15 기본언어표시 주로사용하는언어를명시해야 한다. 콘텐츠영역간의초점이동을예측할수없는경우 초점이동이논리적순서가아닌콘텐츠개수 키보드로조작이불가능한함정또는오류가있는경우 초점을인지할수없는링크및서식개수 연장또는정지할수없는시간제한페이지가있는경우 정지및선택할수없는자동갱신및이동하는콘텐츠개수 깜빡임이나번쩍임을중단시킬수없는콘텐츠개수 기본배점 10 감점배점 건너뛰기링크를제공하지않은경우 -10 건너뛰기링크의제공위치가부적절한경우 건너뛰기링크를시각적으로인지할수없는경우 건너뛰기링크의링크텍스트가어렵고통일성이없는경우 사이트맵이제공되지않거나부적절한경우 페이지제목이제공되지않거나부적절한경우 -10 제목의사용이부적절한프레임개수 제목의사용이부적절한콘텐츠영역개수 용도나목적을이해할수없는링크및버튼의개수 링크제공방법이부적절한콘텐츠개수 기본언어가명시되지않거나부적절한경우

80 1. 웹접근성평가용체크리스트 ( 샘플 ) 이체크리스트는웹접근성국가표준을참고하여웹페이지의접근성준수점수를측정하기위하여작성한웹접근성체크리스트입니다. 이체크리스트는참고용으로사용해야하며변형, 복제및배포를금합니다. No 지침제목지침체크리스트 16 사용자요구에따른실행 사용자가의도하지않은기능 ( 새창, 초점변화등 ) 은실행되 지않아야한다. 17 콘텐츠의선형화 콘텐츠는논리적인순서로제공 해야한다. 18 표의구성 표는이해하기쉽게구성해야 한다. 19 레이블제공 입력서식에는대응하는레이블 을제공해야한다. 20 오류정정 입력오류를정정할수있는방 법을제공해야한다. 21 마크업오류방지 마크업언어의요소는열고닫 음, 중첩관계및속성선언에 오류가없어야한다. 22 웹애플리케이션접근성준수 콘텐츠에포함된웹애플리케이션은접근성이있어야한다. 초점이동또는선택만으로의도하지않은기능이실행되는콘텐츠개수 새창 ( 팝업창 ) 의열림을사전에고지하지않는콘텐츠개수 닫기기능이제공되지않거나부적절한새창 ( 팝업창 ) 개수 콘텐츠를선형화하였을경우에그순서가논리적이지못한경우 제목과요약정보가없거나부적절한데이터테이블개수 제목셀과내용셀을구분하고있지않은데이터테이블개수 레이블이올바르게제공되고있지않은온라인서식개수 오류정정방법을명확하게안내하지않은서식개수 마크업요소의열고닫음, 중첩관계및속성오류개수 접근성을확보하고있지않은웹애플리케이션개수 보조기기와충돌을일으키는웹애플리케이션개수 기본배점 감점배점 기본배점및감점배점합계

81 2. 자체진단평가시집중검사항목 2.1. 대체텍스트점검 ( 계속 ) 이미지대체텍스트점검사항 1 <img..>, <input type=image..>, <area> 의 alt가올바르게제공되고있는가? - 위 3개엘레멘트는 alt 속성이반드시제공되어야함 - 의미없는이미지의대체텍스트는 alt="" 으로제공함 - 텍스트이미지의대체텍스트는이미지의텍스트와동일하게제공되어야함 - 부가적인기능설명및내용을더자세하게설명하는대체텍스트는허용함 - longdesc or IR기법을사용한경우는다음페이지의설명에따라점검 적용예시 이미지예시 적용방법및예시 적용내용 - 이미지에대한 alt 속성제공 - 영문에대한처리 적용예시 - <img src="/img/main/main_img01.gif" alt=" 모바일 - 모바일요금제 / 부가서비스 " /> 본집중검사항목은웹접근성진단평가시반복적으로발생하는오류중핵심적인사항만을정리한것으로약식점검등을위한참고자료로사용하여야하며전체지침에대해서는본문서의본문내용을참고하여야합니다. 적용내용 - 이미지에대한 alt 속성제공 - 영문에대한처리 적용예시 - <img src="/img/main/main_img02.gif" alt=" 인터넷 - 대한민국대표인터넷 " /> 적용내용 - 이미지에대한 alt 속성제공 - 영문에대한처리 적용예시 - <img src="/img/main/main_img03.gif" alt="tv- 국내최강 HDTV 채널 " />

82 2. 자체진단평가시집중검사항목 2.1. 대체텍스트점검 이미지대체텍스트점검사항 2 longdesc or IR 기법을사용하여대체텍스트를제공한경우, 올바르게제공되고있는가? - longdesc or IR기법을사용한경우에도해당이미지에는 alt가있어야함예 )longdesc 사용 : <img. alt=" ㅇㅇㅇ소개 " longdesc="( 설명파일절대경로 )" > IR기법사용 : <img alt=" ㅇㅇㅇ소개 ( 아래내용참고 )" > - IR기법제공시해당설명박스 (<div>) 는 display:none; 가아닌다른방식으로숨겨야함예 )position:absolute; 활용화면밖이나이미지밑에숨김 visibility:hidden; 등활용 본집중검사항목은웹접근성진단평가시반복적으로발생하는오류중핵심적인사항만을정리한것으로약식점검등을위한참고자료로사용하여야하며전체지침에대해서는본문서의본문내용을참고하여야합니다

83 2. 자체진단평가시집중검사항목 2.2. 키보드접근성및초점이동 ( 계속 ) 키보드접근및초점이동점검사항 1 마우스로클릭 or 오버될수있는개체에키보드접근이되는가? -모든링크및버튼은다음 4가지외의방법으로코딩해선안됨 (1)<a href > 텍스트 </a> <a> 에 onclick 등이벤트추가가능 (2)<a href...><img,,,></a> onclick 등이벤트추가시 <a> 에만사용해야함 (3)<input type="image" or "button" or "submit" or "reset"> 이벤트제한없음 (4)<button...> 텍스트 ro <img></button> 이벤트제한없음 키보드접근및초점이동점검사항 2 아래의개체들에대하여키보드 Tab 이동시 IE8 에서초점 ( 포커스링 ) 이보이거나개체의변화가인식될수있는가? - 아래와같이 IE8 에서초점이확인되어야함 - IE8 에서해당페이지를열고 Tab 키또는 Shift+Tab 을눌러보면확인가능 적용예시 본집중검사항목은웹접근성진단평가시반복적으로발생하는오류중핵심적인사항만을정리한것으로약식점검등을위한참고자료로사용하여야하며전체지침에대해서는본문서의본문내용을참고하여야합니다 이미지예시 적용방법및예시 적용내용 - Tab 키를이용한이동시 IE8 에서초점이보이도록처리함

84 2. 자체진단평가시집중검사항목 2.2. 키보드접근성및초점이동 ( 계속 ) 키보드접근및초점이동점검사항 3 자동팝업레이어는로딩과함께레이어로초점이동이되는가? - 로딩시자동으로발생하는팝업레이어는해당레이어 (<div>) 에자동포커스되어야함 적용예시 이미지예시 적용방법및예시 적용내용 - 로딩시자동으로발생하는팝업레이어는해당레이어 (<div>) 에자동포커스되어야함 본집중검사항목은웹접근성진단평가시반복적으로발생하는오류중핵심적인사항만을정리한것으로약식점검등을위한참고자료로사용하여야하며전체지침에대해서는본문서의본문내용을참고하여야합니다

85 2. 자체진단평가시집중검사항목 2.2. 키보드접근성및초점이동 키보드접근및초점이동점검사항 4 마우스클릭또는 Enter 키를누르면열리는레이어팝업의경우에열림과동시에레이어팝업으로초점이이동하는가? -달력, 안내, 광고등과같이사용자가마우스를클릭하거나 Enter 키를눌러발생하는레이어는레이어가열림과함께해당레이어로초점이이동되어야하며, 레이어를닫으면이전위치로초점이복귀되어야함 적용예시 이미지예시 적용방법및예시 1 3 본집중검사항목은웹접근성진단평가시반복적으로발생하는오류중핵심적인사항만을정리한것으로약식점검등을위한참고자료로사용하여야하며전체지침에대해서는본문서의본문내용을참고하여야합니다 적용내용 - 클릭및엔터에의한레이어는열림과함께레이어로초점이동이되어야함 1. Enter 키또는마우스클릭 2. 레이어로초점이동 3. 닫게되면초점복귀

86 2. 자체진단평가시집중검사항목 2.3. 온라인서식레이블제공 온라인서식레이블제공점검사항 1 다음엘레멘트에 title 속성으로레이블이제공되고있는가? - <input> 태그의경우 type 속성이 'text', 'radio', 'checkbox', 'file', 'password' 등이거나 <textarea>, <select> 예 )title=" 이름 ", title=" 주민번호앞 6자리 ", title=" 우편번호앞자리 title=" 핸드폰식별번호 ", title=" 핸드폰중간자리 ", title=" 핸드폰끝자리 title=" 검색분류선택 ", title=" 서비스번호선택 title="sms 수신동의 ", title=" 이메일수신동의안함 " 적용예시 이미지예시 적용방법및예시 본집중검사항목은웹접근성진단평가시반복적으로발생하는오류중핵심적인사항만을정리한것으로약식점검등을위한참고자료로사용하여야하며전체지침에대해서는본문서의본문내용을참고하여야합니다. 적용내용 - 태그의 title 속성을이용하여레이블이제공되어야함

87 2. 자체진단평가시집중검사항목 2.4. 데이터테이블제공점검 데이터테이블제공점검사항 1 레이아웃용테이블에혹시 <th>, <caption>, summary 가사용되고있지는않은가? - 레이아웃용도의테이블은 <th>, <caption>, summary 속성을사용할수없으며, <td> 만존재해야함 데이터테이블제공점검사항 2 데이터테이블에 <th>, <caption>, summary 가모두올바르게제공되고있는가? -표의제목및내용에맞는 <caption>, summary 제공이중요함 ( 이항목은종종오류가있는부분이므로필히확인할필요가있음 ) -<caption> 은 display:none; 사용가능 -<th> 가있는경우 scope는제공하지않아도됨 적용예시 이미지예시 본집중검사항목은웹접근성진단평가시반복적으로발생하는오류중핵심적인사항만을정리한것으로약식점검등을위한참고자료로사용하여야하며전체지침에대해서는본문서의본문내용을참고하여야합니다

88 발행처 주식회사케이티 발행인 고경곤 / 케이티온라인사업단단장 총괄박종서 / 케이티인터넷마케팅담당상무 편집신영준, 양윤선, 임창준, 김예솔외올레닷컴팀 감 수 김석일 / 충북대학교컴퓨터공학과교수현근식 / ( 사 ) 한국장애인인권포럼정책모니터링센터수석위원 주소경기도성남시분당구불정로 90 ( 정자동 206 번지 ) 발행일 2013 년 7 월 본백서의저작권은케이티에있으며, 사전허가없이무단으로복제 변형할수없습니다. Copyright(c) 2013 kt corp. all rights reserved. PDF v.1.5.3