지능정보화사회로의발전이생활을편리하고효율적으로바꿔주지만일자리파 괴, 디지털격차등또다 른경제적불평등의우려가크다, 노인, 장애인, 여성등취약계층이변화과정에 서소외되지않도록정책적 배려가있어야하겠다. ( 17.10. 11, 4 차산업혁명위원회출범식, 문재인대통령인사말씀 )
17 년기준, 정보소외계층의디지털정보화수준은일반국민의 65.1% 수준 디지털접근수준 (91%), 디지털역량수준 (51.9%), 디지털활용수준 (65.3%) 구분 2015 년 2016 년 2017 년 장애인 62.5 65.4 70.0 저소득층 74.5 77.3 81.4 농어민 55.2 61.1 64.8 장노년층 45.6 54.0 58.1 * 평균 52.4 58.6 65.1 전체국민의디지털정보화수준을 100 으로할때, 일반국민대비정보취약계층의디지털정보화수준을의미 ( 출처 : 2017 년디지털정보격차실태조사, 과학기술정보통신부 )
2012 런던올림픽개회식 Sir Tim Berners-Lee, Web 창시자 Sir Tim Berners-Lee, Web 창시자
웹호환성 웹표준 웹접근성 다양한웹브라우저에서 웹사이트를동등하게 이용할수있는것 웹표준은월드와이드웹의측면을서술하고정의하는공식표준이나다른기술규격을가리키는것 어떠한사용자 ( 장애인, 노인등 ), 어떠한기술환경에서도사용자가전문적인능력없이웹사이트에서제공하는모든정보에접근할수있도록보장하는것
웹표준을준수하면웹접근성을준수한것이다. 웹표준준수 웹접근성준수 웹표준을준수하면웹호환성을준수한것이다. 웹표준준수 웹호환성준수
웹표준의경우웹관련기술규격준수여부만판단하고있으나, 웹접근성은웹표준을적절하게제공하고있는경우까지준수하도록하고있음 웹표준을준수해서웹브라우저의렌더링엔진및웹표준수용도에따라웹호환성이 보장되는것음아님
웹접근성제고 = 웹사이트에경사로를만들어주자 다리가아플때 축구, 등산을하고난뒤 무거운짐을들고다닐때등 터치스크린을활용하지못할때 저사양스마트폰등통신환경이좋지않을때 시끄러운환경에놓여일을때동영상보기어려울때등
W3C 는 장애를갖고있는사람들도웹을이용할수있도록보장하는것 이라고정의함 한국정보화진흥원은 어떠한사용자와어떠한기술환경에서도사용자가전문적인능력없이웹사이트에서제공 하는모든정보에접근할수있도록보장하는것 이라고정의함 W3C/WAI 웹접근성필수구성요소 웹접근성준수효과 법률적인의무사항준수 장애인및고령자등이용자확대 다양한플랫폼과환경에서이용가능 웹사이트개발기간단축 (UI, 개발분리 ) 개발및운영비절감 국가및기업의사회적책임홍보수단 검색결과의신뢰성증가 ( 이미지검색등 )
전맹 (Blind) 저시력인 (Low Vision) 텍스트아닌콘텐츠의인식 + 입력 ( 터치스크린보완 ) + 확대 + 고대비 + 색상의존
농인 (Deaf) 난청인 (Hard of Hearing) 멀티미디어콘텐츠에대한접근성 ( 자막, 수화제공필요 ) + 쉬운용어 ( 도움말 ) 콜센터 / 고객상담센터와손말이음센터연동 TTY/TDD & 보청기와의호환
상지장애인 하지장애인 입력보완 ( 터치스크린등 ) + 콘트롤의위치 ( 콘트롤간간격 ) + 단순한동작의입력
쉬운용어 + 해설서 + 깜빡임방지 + 의사소통보완및대체기능 + 오류정정도움기능 + 의외의상황에대한대처방법도움등 매뉴얼을 PDF 등문서가아닌웹페이지로제공 ( 병행제공 ) http:/ / trace.wisc.edu/ peat/
접근성 (Accessibility) 사용성 (Usability)
수어서비스제공 학습장애및지적장애인등을위한 Easy Read 양궁 축구
장애인차별금지및권리구제등에관한법률 장애인차별금지및권리구제등에관한법률시행령 제 20 조 ( 정보접근에서의차별금지 ) 1 개인 법인 공공기관 ( 이하이조에서 " 개인등 " 이라한다 ) 은장애인이전자정보와비전자정보를이용하고그에접근함에있어서장애를이유로제 4 조제 1 항제 1 호및제 2 호에서금지한차별행위를하여서는아니된다. 제 21 조 ( 정보통신ㆍ의사소통등에서의정당한편의제공의무 ) 1 ~ 생략 ~ 전자정보및비전자정보에대하여장애인이장애인아닌사람과동등하게접근ㆍ이용할수있도록수화, 문자등필요한수단을제공하여야한다. 이경우제 3 조제 8 호가목후단및나목에서말하는자연인은행위자등에포함되지아니한다. 제 4 조 ( 차별행위 ) 1 이법에서금지하는차별이라함은다음각호의어느하나에해당하는경우를말한다. 1. 장애인을장애를사유로정당한사유없이제한 배제 분리 거부등에의하여불리하게대하는경우 2. 장애인에대하여형식상으로는제한 배제 분리 거부등에의하여불리하게대하지아니하지만정당한사유없이장애를고려하지아니하는기준을적용함으로써장애인에게불리한결과를초래하는경우 제 14 조 ( 정보통신ㆍ의사소통에서의정당한편의제공의단계적범위및편의의내용 ) 1 생략 2 법제 21 조제 1 항에따라제공하여야하는필요한수단의구체적인내용은다음각호와같다. 1. 누구든지신체적ㆍ기술적여건과관계없이웹사이트를통하여원하는서비스를이용할수있도록접근성이보장되는웹사이트 국가정보화기본법 제 32 조 ( 장애인ㆍ고령자등의정보접근및이용보장 ) 1 국가기관등은정보통신망을통하여정보나서비스를제공할때장애인ㆍ고령자등이쉽게웹사이트와이동통신단말장치 ( 전파법 에따라할당받은주파수를사용하는기간통신역무를이용하기위하여필요한단말장치를말한다. 이하같다 ) 에설치되는응용소프트웨어를이용할수있도록접근성을보장하여야한다. < 개정 2018.2.21.>
( 출처 : 국가인권위원회 ) 재화 용역의제공및이용 구분합계고용교육 합계 재화 용역일반 보험 금융 시설물접근 이동및교통수단 정보통신의사소통 문화예술체육 사법 행정참정권 괴롭힘등 기타 2015 2014 2013 접수 1,142 건 69 건 55 건 729 건 126 건 82 건 124 건 99 건 286 건 12 건 37 건 121 건 131 건 비율 100.0% 6.0% 4.8% 63.8% 11.0% 7.2% 10.9% 8.7% 25.0% 1.1% 3.2% 접수 1,139 건 94 건 66 건 676 건 180 건 62 건 142 건 108 건 166 건 19 건 61 건 123 건 118 건 비율 100.0% 8.2% 5.7% 59.4% 15.8% 5.4% 12.5% 9.5% 14.6% 1.7% 5.4% 접수 1,312 건 75 건 45 건 706 건 154 건 55 건 128 건 49 건 307 건 13 건 71 건 303 건 112 건 비율 100.0% 5.7% 3.4% 53.8% 11.7% 4.2% 9.8% 3.7% 23.4% 1.0% 5.4% 10.6 % 10.8 % 23.1 % 11.5% 10.4% 8.5%
진정개요 진정내용 : 지상파방송 3 사및부산지역방송사웹사이트의접근성이취약해시각장애인등 이접근 이용하는데제약이크다 며 2010.9 월국가인권위원회진정제기 조사내용 방송사 - 각사업자는웹접근성준수지침을준수하여개선하였거나웹사이트콘텐츠사용빈도등에따라순차적개선계획을밝힘 - 또한, 멀티미디어콘첸츠서비스에대해서는기술 재정적한계로서비스품질이확보되면서비스할계획이거나콘텐츠와동기화되지않은서비스를제공하고있다고밝힘 인권위 - 인권위조사결과지상파, 부산지역방송사의경우준수율이각각 53.9%, 36.5% 로모두개선이필요한것으로나타남 조사결과 피진정인들이관리 운영하는웹사이트의접근및이용에상당한제약이있는것은정보접근 에있어정당한사유없이장애인을제한 배제한것으로, 이는합리적인이유없이장애를이유로한차별행위라고판단함 (2012.7.5)
Internet Explorer/Edge FireFox Chrome Safari 애플 (ios) 구글 (Android) 진단및컨설팅 수준진단 / 품질인증 / 온라인자문 / 인식제고 ( 세미나등 ) 공공기관 교육기관 의료기관 복지기관 문화예술 대기업 중소기업 소상공인 민간법인 포털은행쇼핑기타 Web 개발자도구 Open-WAX, Pajet ( 국산, Toolbar) WAVE ( 미국, Toolbar) eaccessibility Checker (EU, 자동평가도구 ) Google 등 HTML AJax JavaScript Java 웹콘텐츠접근성제작기법 JavaScript 접근성제작기법 Ajax 접근성제작기법 ios 접근성제작기법 Android 접근성제작기법 한국형웹콘텐츠접근성지침 2.1 ( 국가표준, 2015.3) 모바일애플리케이션접근성지침 2.0 ( 국가표준, 2016.10) 장애인고령자등의정보접근및이용편의증진을위한지침 ( 17.07 개정, 과학기술정보통신부장관고시 ) 장애인차별금지및권리구제등에관한법률 ( 07.4.11 일제정 ) 국가정보화기본법 ( 18,02, 개정 )
효율적웹접근성구축프로세스 (Source : W3C) 1 2 3 분위기조성 초기접근성평가 접근성정책수립 8 4 웹사이트점검 일회성추진이아닌지속적인추진과관리가필요 S/W 선정 7 인식제고 6 웹접근성을고려한홈페이지구축 5 교육훈련제공
콘텐츠 웹콘텐츠접근성지침 (Web Content Accessibility Guidelines) 평가도구저작도구 웹브라우저, 멀티미디어도구보조기기 사용자접근성지침 (User Agent Accessibility Guidelines) 저작도구접근성지침 (Authoring Tools Accessibility Guidelines) 개발자 Accessibility Guidelines ATAG, WCAG, UAAG Technical Spec (HTML, XML, CSS, SVG, SMIL, etc..) 사용자 출처 : http://www.w3.org/wai/eo/drafts/slides/components.html
목표 모든국민이신체적 기술적 경제적환경에구애없이전자정부서비스이용환경조성 목적 장애인등정보소외계층이행정 공공기관등의전자정부웹사이트를차별없이이용할수있는환경조성
진단지표 한국형웹콘텐츠접근성지침 2.1 (KCS.OT-10.0003/R2) (2015 년 3 월개정 ) 진단도구 IE/Firefox 브라우저의부가기능 Web Developer, 스크린리더, 줌텍스트등보조 SW 진단웹브라우저 인터넷익스플로러 (IE) 버전 11, 윈도우 10 기준 진단방법전문가수동진단 (2 개의그룹교차진단 ) 점수산정방식 수준진단웹페이지에서 23 개검사항목중에서해당사항이없는경우평가점수산정시 반영하지않음 ( 변경사항 )
기준 진단대상웹사이트의메인페이지, 공지사항, 민원등대민접촉이많은웹페이지를중심으로임의선정 분류설명페이지수메인페이지웹사이트의메인페이지 1 - 메인페이지의하위서브페이지 단, 웹사이트총량대상에서웹사이트로등록된경우는제외 - 외부공개대상페이지 ( 공지사항, 민원신청, 보도자료등 ) 선정웹페이지 서브페이지 - 필수제공페이지 ( 팝업, 인트로, 안내창등 ) - 공지사항목록 / 상세, 게시판목록 / 상세, 자료실등 도메인이바뀌는경우는진단제외 8 iframe 에서외부기능을불러와서적용한경우도진단대상에 포함됨 (SNS, 국민신문고등 )( 변경사항 ) 멀티미디어 ( 영상뉴스, 홍보영상등 ) 제공페이지 - 동영상평가대상은해당기관에서제작하거나소속또는산하공공 부가기능제공페이지 기관에서제작한경우까지포함됨 ( 변경사항 ) 1 동영상의경우요약본을제공하고외부 ( 유투브등 ) 로링크하여 제공하는경우진단
기준 4 개원칙 24 개검사항목 구분검사항목배점구분검사항목배점 1. 적절한대체텍스트 10 13. 깜빡임과번쩍임사용제한 2 2. 자막제공 4 운용의 14. 반복영역건너뛰기 5 인식의 용이성 3. 색에무관한콘텐츠인식 3 용이성 15. 제목제공 6 4. 명확한지시사항제공 2 16. 적절한링크텍스트 4 5. 텍스트콘텐츠명도대비 6 17. 기본언어표시 4 검사항목별배점 6. 자동재생금지 2 18. 사용자요구에따른실행 5 7. 콘텐츠간구분 3 이해의 19. 콘텐츠선형구조 3 8. 키보드사용보장 6 용이성 20. 표의구성 6 운용의 용이성 9. 초점이동 6 21. 레이블제공 6 10. 조작가능 3 22. 오류정정 4 11. 응답시간조절 2 23. 마크업오류방지 4 견고성 12. 정지기능제공 4 24. 웹애플리케이션접근성준수 0 총점 100
개선방식으로점수를산정할경우 100 점만점으로환산해서최종점수를확정 ( 예, 86.3 점의경우 20 개검사항목 92 점만점이기때문에 100 점으로환산할경우 90.87 이최종확정점수임 )
항목 1. ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나용도를이해할수있도록대체텍스트를제공해야한다. 준수기준 의미있는텍스트아닌콘텐츠에그의미나용도를동등하게인식할수있는적절한대체텍스트를제공한경우에준수한것으로인정 오류유형 텍스트아닌콘텐츠에대한대체텍스트를제공하지않은경우 텍스트아닌콘텐츠에대한대체텍스트를불충분또는적절하지않게제공한경우 위반사례
항목 1. ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나용도를이해할수있도록대체텍스트를제공해야한다.
항목 1. ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나용도를이해할수있도록대체텍스트를제공해야한다. 위반사례 개선방안 <button> 태그내 다음단계 와같이용도나목적을이해할수있는텍스트정보를제공하고있으므로 alt= 으로제공할것을권장함. 또는해당기호이미지는배경이미지로처리할것을권장함.
항목 2. ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고또는수화를제공해야한다. 준수기준 영상, 음성등멀티미디어콘텐츠를동등하게인식할수있는자막, 원고또는수화를제공한경우준수한것으로인정 오류유형 멀티미디어콘텐츠에자막, 원고, 수화중하나이상의대체수단을제공하지않은경우 멀티미디어콘텐츠에대한대체수단의내용을불충분또는적절하지않게제공한경 오류사례
항목 2. ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고또는수화를제공해야한다. 동기화된수어제공 (4 점 ) 동기화된자막제공 (4 점 ) 원고제공 (4 점 ) 동영상없음가점 (1 점 ) 점수산정없음 (4 점을제외한 96 점을 100 점으로환산 ) 2 개이상의대체수단제공 시 1 점가점부여
항목 8. ( 키보드사용보장 ) 모든기능은키보드만으로도사용할수있어야한다. 준수기준 모든기능을키보드로접근및운용제공한경우준수한것으로인정 오류유형 마우스로제어할수있는요소를키보드로제어할수없는경우 오류사례
항목 9. ( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며시각적으로구별할수있어야한다. 준수기준 오류유형 운용가능한개체 ( 링크, 버튼, 서식등 ) 들에키보드로접근시초점을인지할수있고논리적순서로이동되는경우준수한것으로인정 초점의이동순서가논리적이지않으며일관성이없는경우 초점또는키보드의위치를나타내는요소가시각적으로표시되지않은경우 텍스트등운용할수없는요소에초점이되는경우 세부설명
항목 14. ( 반복영역건너뛰기 ) 콘텐츠의반복되는영역은건너뛸수있어야한다. 준수기준 반복되는영역을건너뛸수있는링크를제공한경우준수한것으로인정 오류유형 건너뛰기링크를제공하지않은경우 건너뛰기링크의제공방법이적절하지않은경우 ( 이동하지않는경우 ) 세부설명
항목 19. ( 콘텐츠의선형구조 ) 콘텐츠는논리적인순서로제공해야한다. 준수기준 콘텐츠의순서가논리적으로선형화되어제공한경우준수한것으로인정 오류유형 콘텐츠의순서가논리적으로제공되지않아계층구조를이해할수없는경우 세부설명
항목 19. ( 콘텐츠의선형구조 ) 콘텐츠는논리적인순서로제공해야한다. 오류감점 오류아님
Open Wax 활용 포털컴색창에서 OpenWax 입력후설치 ( 웹브라우저확장프로그램 ) 현재웹브라우저에보이는페이지만웹접근성준수여부검사 웹브라우저우측상단에 ( 사다리모양 ) 을클릭
Open Wax 활용 ( 계속 )
크롬확장프로그램고대비 (Goolge Accessibility)
명도대비 (Color Contrast analyzer)
Web Accessibility Toolbar 다운로드 : https://www.paciellogroup.com
키보드점검방법 다양한최신의웹브라우저 (IE11, Chrome, Firefox 등 ) 를이용하여주소창에서부터시작해서 Tab( 정방향 ) 와 Shift+Tab( 역방향 ) 을이용하여문서처음부터끝까지모든기능을이용및이용할수있는지점검 주요점검사항 키보드만으로모든기능을사용할수있는가? 초점이동순서가논리적인가? 특정영역이마우스나키보드조작을통해초점을받았을때초점을받았음을시각적으로알수있도록되어있는가? 웹접근성연구소 (www.wah.or.kr) 웹접근성표준, 제작기법등관련정보제공웹접근성전문가상담 ( 온라인자문 ) 웹접근성관련교육, 세미나등개최안내등
반복해서웹페이지마다적용되는콘텐츠의경우웹페이지마다중복평가함 배너 ( 좌측, 우측, 하단 ) 등, 기관로고등의경우오류발생시마다감점됨 외부콘텐츠 ( 지도 API, SNS 등 ) 에대한평가기준 단순링크방식으로제공할경우, 대체텍스트제공유무등평가진행 웹페에지내에포함에서 iframe 형식으로제공할경우도평가함, iframe 형식으로제공하는것보다해당웹사이트로이동할수있도록제공하는것이바람직함 대체텍스트제공시자주발견되는오류 단순오타, 이미지내텍스트와대체텍스트간의정확한 1:1 매칭이안되는경우등 이미지는수정이되었으나, 대체텍스트를수정하지않는경우 ( 지역축제등 ) CopyRights( 주소, 전화번호 ) 를이미지제공시주소가변경되어도대체텍스트는변경되기전주소 표의구성 : Caption 과 Summary 를잘못제공하는경우 caption 과 summary 를서로바꾸어제공하는경우 summary 를간략하게제공하는경우 html5 에서는 summary 를제공이제공되지않으므로, captiion 에표의제목과요약정보를함께제공
내용 2018 년 2017 년변경유무 ( 외부 API) 웹사이트적용한외부 API 를수정할수 ( 외부 API) 표준프레임워크적용시예외적용 외부 API 있는경우 ( 공개 SW, 표준프레임워크 ) 등은수준진단 (iframe 사용 ) iframe 을사용하여외부콘텐츠를적 사용수준진단 대상에포함 (iframe 사용 ) iframe을사용하여외부콘텐츠를적 용할경우수준진단결과에서오류 (Error) 로발견될경우감점하지않음 변경 기준 용할경우수준진단결과에서오류 (Error) 로발견될 경우동일하게감점 ( 웹접근성품질인증마트획득 ) : 2 점 ( 웹접근성품질인증마트획득 ) : 5 점 - 수준진단결과점수에 2 점가점부여방식 - 수준진단결과점수에 5 점가점부여방식 가점부여 ( 멀티미디어대체방식제공 ) : 1 점 변경 - 멀티미디어제공시동기화된자막제공, 수어, 원고 중 2 개이상제공시 멀티미디 멀티미디어대체수단제공방식 ( 수어, 자막, 원고 ) 단 멀티미디어대체수단제공방식 ( 수어, 자막, 원고 ) 동 어대체 계별평가점수부여방식 일평가정수부여방식 수단 변경 평가점수 산정방식 검사항목평가점수산정방식 수준진단웹페이지에서 23개검사항목중에서해당사항이없는경우평가점수산정시반영하지않음 각각의웹페이지에서검사항목이존재할경우만평가점수계산하여반영 수준진단웹페이지에서 23개검사항목중에서해당사항이없는경우만점처리 변경
국가정보화기본법 제 32 조 ( 장애인ㆍ고령자등의정보접근및이용보장 ) 1 국가기관등은정보통신망을통하여정보나서비스를제 공할때장애인ㆍ고령자등이쉽게웹사이트와이동통신단말장치 ( 전파법 에따라할당받은주파수를사용하는기간통신역무를이용하기위하여필요한단말장치를말한다. 이하같다 ) 에설치되는응용소프트웨어를이용할수있도록접근성을보장하여야한다. < 개정 2018.2.21.>
진단지표 모바일애플리케이션접근성지침 2.0 ( 국가표준, 2016.10 월개정 ) 진단환경 Android : OS 4.4.2( 갤럭시 S4 이상 ) ios : ios 8.4(iPhone5 이상 ) 참고사항 : 디바이스와 OS 는가능하면최신버전을사용 진단대상 유형을달리하는 5 개모바일페이지 진단방법 전문가수동진단 점수산정방식 수준진단모바일앱페이지에서 18 개검사항목중에서해당사항이없는경우평가점수 산정시반영하지않음 ( 변경사항 )
기준 진단대상모바일페이지의메인페이지, 공지사항, 민원등대민접촉이많은페이지를중심으로임의선정 선정페이지설명수량 메인 모바일애플리케이션메인앱대표페이지 1 선정모바일페이지 서브 해당어플리케이션의주목적콘텐츠 로그인, 회원가입, 글쓰기등의서식입력페이지 주요정보 ( 공지등 ) 를얻을수있는페이지 4 해당어플리케이션만의주요자료및서비스페이지 Q&A, 고객센터, FAQ 등의소통페이지 합계 5 모바일앱페이지가 5 개이하일경우전수조사
기준 4 개원칙 18 개검사항목 구분검사항목배점구분검사항목배점 1. 대체텍스트 12 운용의 10. 정지기능제공 5 2. 자막, 수화등의제공 6 용이성 11. 컨트롤의크기와간격 5 검사항목별배점 인식의용이성운용의용이성 3. 색에무관한콘텐츠인식 4 12. 입력도움 8 4. 명도대비 6 13. 사용자인터페이스의일관성 3 5. 명확한지시사항 5 이해의용이성 14. 깜빡거림의사용제한 2 6. 알림기능 3 15. 자동재생금지 2 7. 초점 11 16. 예측가능성 6 8. 누르기동작지원 5 17. 폰트관련기능의활용 2 견고성 9. 응답시간조절 5 18. 보조기술과의호환성 10 총점 100
검사항목 1. ( 대체텍스트 ) 텍스트아닌콘텐츠는대체가능한텍스트와함께제공되어야한다. 준수기준 텍스트가아닌콘텐츠를이용할경우, 해당콘텐츠가제공하는의미나용도를동일하게인식할수있는적절한대체텍스트를제공한경우준수한것으로인정 오류유형 텍스트가아닌콘텐츠에대체텍스트를제공하지않거나부적절하게제공한경우 세부설명
검사항목 2. ( 자막, 수화등의제공 ) 영상이나음성콘텐츠에는동등한내용의자막, 원고또는수화가제공되어야한다. 준수기준 멀티미디어콘텐츠를동등하게인식할수있도록제작하기위해서자막, 원고또는수화제공한경우준수한것으로인정 오류유형 영상이나음성콘텐츠에자막, 원고, 수화중하나이상의대체수단을제공하지않은경우 내용전체를충분히설명하지않고요약정보나제목만제공하는경우 텍스트만제공하는영상콘텐츠에서동등한음성을제공하지않은경우 세부설명
검사항목 7. ( 초점 ) 의미나기능을갖는모든사용자인터페이스컴포넌트에는초점 (focus) 이적용되고, 초점은논리적인순서로이동되어야한다 준수기준 의미나기능을갖는모든사용자인터페이스컴포넌트에초점 (focus) 이적절한영역에표시되어접근하고, 논리적인순서로이동되는경우준수한것으로인정 오류유형 초점이적용되지않거나불필요한콘텐츠에초점이적용된경우 표시되는초점의영역이콘텐츠의위치와다르게표시된경우 초점의이동순서가논리적이지않으며일관성없이이동되는경우 세부설명
검사항목 8. ( 누르기동작지원 ) 터치 (touch) 기반모바일기기의모든컨트롤은누르기동작으로제어할수있어야한다. 준수기준 두손가락이상을사용하는다중누르기동작과슬라이드 (Slide), 끌기와놓기 (Drag and drop) 등의복잡한동작을단순한누르기동작으로대체할수있는방법을제공한경우준수한것으로인정 오류유형 다중누르기 (Multi-touch) 동작을대체할수있는방법을제공하지않은경우 복잡한동작을대체할수있는방법을제공하지않은경우 세부설명
검사항목 12. ( 입력도움 ) 입력서식이용시, 입력오류를방지하거나정정할수있는방법을제공해야한다. 준수기준 입력서식의용도와목적을알수있도록입력정보제목, 도움말등을제공하고, 입력오류를방지하거나정정할수있는방법을제공한경우준수한것으로인정 오류유형 입력서식에대한입력정보제목, 도움말등을제공하지않거나부적절하게제공된경우 입력오류에대한알림및정정방법이제공되지않거나부적절하게제공된경우 세부설명
검사항목 13. ( 사용자인터페이스의일관성 ) 사용자인터페이스요소들의배치를일관성있게제공하는것이바람직하다. 준수기준 사용자인터페이스를구성하고있는요소들을사용자가다시학습하지않아도기능을사용할수있도록페이지또는앱내에서일관성있게콘텐츠의배치를제공한경우준수한것으로인정 오류유형 사용된사용자인터페이스의순서나패턴등이일관되게적용되지않은경우 (13-1) 세부설명
안드로이드접근성검사기활용 자동평가검사항목 콘텐츠레이블제공여부 터치할대상크기 클릭가능한항목 텍스트및이미지대비 구글 Play 스토어검색창에서 접근성검사기 입력후다운로드 안드로이드 6.0 이상의스마트폰및태블릿에서사용가능
국내웹브라우저시장점유율 Chrome IE Edge FireFox Mozilla Safari Opera Whale Swing 360 Safe sogou Phantom Maxthon Chominum 기타 58.28% 31.96% 2.83% 1.57% 0.01% 2.49% 0.79% 1.04% 0.55% 0.02% 0.02% 0.18% 0.01% 0.02% 0.23% * 원문 : http://gs.statcounter.com (2018 년 2 월기준 )
인터넷익스플로러사용현황 IE버전 점유율 지원운영체제 기술지원종료일 IE11.0 29.16% 윈도우7이상 Win7('20.1) IE10.0 1.06% 윈도우7이상 Win7('16.1) IE9.0 0.84% 윈도우7이상 Win7('16.1), Vista 이상 ('17.4) IE8.0 0.88% 윈도우XP이상 XP('14.4), Vista이상 ('16.1) IE7.0 0.01% 윈도우XP까지 XP('14.4), Vista이상 ('16.1) IE6.0 0.01% 윈도우XP까지 11.12
웹브라우저별레이아웃엔진 브라우저명 제조사 레이아웃엔진 Chrome 구글 블링크 (Blink) IE 마이크로소프트 트라이던트 (Trident) Edge 마이크로소프트 엣지HTML(EdgeHTML) Firefox 모질라재단 게코 (Gecko) Mozilla 모질라재단 게코 (Gecko) Safari 애플 웹킷 (Webkit) Opera 오페라 프레스토 Whale 네이버 블링크 (Blink) Swing 줌인터넷웹킷 (Webkit), 트라이던트 (Trident) 360 Safe Qihoo 블링크 (Blink), 트라이던트 (Trident) sogou Wang Xiaochuan 웹킷 (Webkit), 트라이던트 (Trident) Phantom LG 전자웹킷 (Webkit) Maxthon 창유 ( 중국 ) 웹킷 (Webkit), 트라이던트 (Trident) Chromium 오픈소스웹브라우저프로젝트 블링크 (Blink) 진단환경선정 OS Windows 7 Windows 10 웹브라우저 Internet Explorer 11 Chrome Firefox Microsoft Edge
수행절차 수준진단대상으로선정된웹페이지에대해웹표준준수와웹호환성확보및비표준기술제거여부를병행진단하고진단결과를종합 / 검증후기관별보고서작성 수준진단대상웹페이지선정 유형별 10 개페이지선정 웹표준준수여부수준진단 웹호환성확보수준진단 구분 수준진단방법 평가도구 구분 진단방법 HTML 자동평가 W3C HTML Validatior 기능 화면표시 수동평가 수동평가 CSS 자동평가 W3C CSS Validator 모든웹페이지에서적용되는 HTML 과 CSS 오류 (Error) 가발생하는경우웹페이지마다중복해서감점처리 진단결과종합 / 검증 오류시재진단 보고서작성
기준 진단대상웹사이트의메인페이지, 공지사항, 민원등대민접촉이많은웹페이지를중심으로임의선정 분류설명페이지수 메인페이지웹사이트의메인페이지 1 - 메인페이지의하위서브페이지 단, 웹사이트총량대상에서웹사이트로등록된경우는제외 선정웹페이지 서브페이지 - 외부공개대상페이지 ( 공지사항, 민원신청, 보도자료등 ) - 필수제공페이지 ( 팝업, 인트로, 안내창등 ) - 공지사항목록 / 상세, 게시판목록 / 상세, 자료실등 8 도메인이바뀌는경우는진단제외 iframe 에서외부기능을불러와서적용한경우도진단대상 에포함됨 (SNS, 국민신문고등 )( 변경사항 ) 부가기능제공 페이지 멀티미디어 ( 영상뉴스, 홍보영상등 ) 제공페이지 1
지침 전자정부호환성준수지침 ( 행정안전부고시 )(( 제 2017-26 호 )2017 년 12 월개정 ) 웹표준준수 웹페이지의문법을선언하고, 선언합문법을올바른방식으로구현웹페이지인코딩방식은UTF-8 이원칙웹페이지크기, 색체, 배치, 정렬및여백등시각적속성은국제표준기술인 CSS 표준으로구현웹페이지를동적으로구성하고제어하는기능은국제표준기술은 DOM 과 ECMA-262표준으로구현 HTML5 등의웹표준신기술을사용할경우웹사이트호환성확보 웹호환성확보 웹사이트신규구축하는경우다양한웹브라우저에서동등하게서비스를제공해야함 웹사이트개선, 유지보수및운영하는경우다양한웹브라우저에서동등하게서비스를제공하도록노력 비표준기술제거 웹사이트구축, 개선, 유지보수및운영하는경우비표준기술제거를위해노력 수준진단웹호환성수준진단결과개선이필요한경우개선권고 ( 추가 )
기준 3 개원칙 7 개검사항목 원칙검사항목오류유형 ( 감점 ) 배점비고 웹표준문법준수 1. 표준 (x)html 문법준수 2. 표준 CSS 문법준수 1. 선언된문서타입에따른표준 (x)html 문법의요소또는속성이나해당값을적용하지않은경우감정 2. 선언된문서타입에따른표준 CSS 문법의속성또는선택자를적용하지않은경우감점 30 20 페이지별득점 ( 배점 오류수 ) 의전체페이지평균 검사항목별배점 웹호환성확보 3. 기능호환성 4. 화면표시호환성 3-1. 웹브라우저부가기능을이용해서해당페이지내에사용된 Javascript 오류및 DOM 경고발생시감점 3-2. Javascript 가의도한기능이정상적으로동작되는지점검하여비정상적동작에대해감점 4-1. 텍스트깨짐, 겹침또는타브라우저와상이하게레이어의겹침으로가독이어려운경우감점 4-2. 기타이미지, 버튼, 입력서식등구성요소의위치가타브라우저와상이하거나영역을벗어나는경우 25 20 4 종중 3 종이상브라우저에서호환성확보시, 감점없음단, 호환성미확보시전체감점되며,, 3-1 의오류는배점내에서개당 -4 점차감 4 종중 3 종이상브라우저에서호환성확보시, 감점없음단, 호환성미확보시전체감점 5. 비표준기술제거 5. 웹사이트내액티브 X 를사용하고있을경우감점 4 전문가수동진단시액티브 X 를제공할경우감점 웹표준기술준수 6. 최신웹표준기술사용 7. 비표준기술제거 6. HTML5 문서타입선언하여구현하지않을경우감점 7. 액티브 X 는물론플러그인 (Plugin) 이하나도없는경우가점 1 1 HTML5 문서타입선언페이지당 0.1 점씩득점 액티브 X 등모든플러그인을사용하지않을경우 +1 점가점부여
평가결과예시
평가결과예시 ( 계속 ) 평가방법은자동평가도구 W3C HTML Validator 를이용 평가대상은선정된 10 개웹페이지대상 각웹페이지별자동평가도구를이용한 HTML 문법오류 (Error) 시마다 1 점씩감점 ( 페이지별최대 30 점감점 ) 점수산정방식 : 웹표준준수평가방법 ( 예시 ) ( 예 ) - HTML 문법준수 : 25.1 점 = - CSS 문법준수 : 20 점 = - 웹표준문법준수 : HTML 문법준수 (25.1 점 )+ CSS 문법준수 (20 점 ) = 45.1 점획득
평가결과예시 ( 계속 ) 웹브라우저동작호환성평가방법 ( 예시 ) 평가방법은전문가수동평가 다양한웹브라우저에서스크립트오류및 DOM 경고발생여부점검 각웹페이지에서다양한웹브라우저에서 1 개오류 ( 스크립트 ) 또는경고 (DOM) 발생시마다 4 점씩감점 ( 예 ) - 1 페이지의경우 DOM 경고또는스크립트오류가 1 개발생하여 4 점감점한 21 점득점 - 7 페이지의경우 DOM 경고또는스크립트오류가 4 개발생하여 16 점감점한 9 점득점 또한다양한웹브라우저에서콘텐츠가로딩되지않거나변화가없는경우와기타기능이누락되거나동작하지않을경우 (3-2, 3-3 오류 ) 는다양한웹브라우저중에서 3 개이상에서정상적으로동작하지않을경우해당동작호환성점수전체를 0 점처리함 ( 예 ) - 3 페이지의경우 DOM 경고또는스크립트오류가발생하지않았지만 2 개브라우저에서 3-2, 3-3 오류가발생하여동장호환성점수 (25 점만점 ) 가 0 점처리됨
평가결과예시 ( 계속 ) 웹브라우저레이아웃호환성평가방법 ( 예시 ) 다양한웹브라우저중에서 3 개이상에서 4-1,4-2 오류가발견되었을경우해당웹페이지를 0 점처리함 ( 예 ) - 4 페이지의경우 2 개브라우저에서 4-1, 4-2 오류가발생하여동장레이아웃호환성점수 (20 점만점 ) 가 0 점처리됨
평가결과예시 ( 계속 ) 비표준기술평가방법 ( 예시 ) 비표준기술제거여부는 2 개비표준기술 ( 액티브 X, NPAPI) 를웹사이트에서제공하고있지않은경우에해당함 웹비표준기술 ( 액티브 X, NPAPI) 를제공하고있지않을경우 4 점득점함 (1 개라도제공하고있을경우 0 점처리 ) 어도비사의비표준기술 ( 플래시, 플렉스, Acrobat) 의경우평가대상에서제외 이평가항목은수준진단점검웹사이트의도메인기준으로웹표준을준수하고있을경우에한하여액티브 X, NPAPI 를제공하고있지않았음을증빙자료제출했을경우인정 ( 예 ) - 동일한도메인에서사용자인증, 로그인, 보안등을위해비표준기술을사용하고있지않은점검결과제출 ( 검사항목 5 참고또는 HTML5 KOREA5(www.koreahtml5.kr) 참조 ) - 비표준기술대체기술 (EXE 형식 ) 으로제공하는경우인정함 최신웹표준기술사용여부는각웹페이지에서문서형식을 HTML5 로선언한경우 0.1 점획득함 ( 총합계 1 점 )
항목 1. ( 표준 HTML 문법준수 ) 웹페이지문법을선언하고, 선언한문법을올바른방식으로구현하여야한다. 검사항목 표준 (x)html 문법준수 오류유형 1-1. 선언된문서타입에따른표준 (x)html 문법의요소또는속성이나해당값을적용하지않은경우 HTML5 에만존재하는요소, 속성을 XHTML1.0 에서사용 HTML5 에만존재하는것 data-* autocomplete embed 세부설명
항목 1. ( 표준 HTML 문법준수 ) 웹페이지문법을선언하고, 선언한문법을올바른방식으로구현하여야한다. 검사항목 표준 (x)html 문법준수 오류유형 1-2. 기타문법오류가발견되는경우 <meta> 요소를 <head> 요소밖에제공함 세부설명 URL 에 Entity Code 가사용된오류
항목 2. ( 표준 CSS 문법준수 ) 웹페이지의크기, 색체, 배치, 정렬및여백등시각적속성을사용할경우 CSS 표준으로구현하여야한다. 검사항목 표준 CSS 문법준수 오류유형 2-1. 선언된문서타입에따른표준 CSS 문법의속성또는선택자를적용하지않은경우 cursor 속성값사용오류 세부설명
항목 2. ( 표준 CSS 문법준수 ) 웹페이지의크기, 색체, 배치, 정렬및여백등시각적속성을사용할경우 CSS 표준으로구현하여야한다. 검사항목 표준 CSS 문법준수 오류유형 2-2. 기타문법오류가발견되는경우 주석을잘못사용한오류 세부설명
항목 3. ( 기능호환성확보 ) 웹페이지의동적구성 제어기능은 DOM 표준및 ECMA-262 표준을준수하여호환성을확보해야한다. 검사항목 기능호환성확보 오류유형 3-1. 스크립트오류또는 DOM 경고가발견되는경우 정의되지않은변수를사용한경우발생하는스크립트오류 세부설명
항목 3. ( 기능호환성확보 ) 웹페이지의동적구성 제어기능은 DOM 표준및 ECMA-262 표준을준수하여호환성을확보해야한다. 검사항목 기능호환성확보 오류유형 3-1. 스크립트오류또는 DOM 경고가발견되는경우 DOM 표준미준수에따른 DOM 경고 세부설명
항목 3. ( 기능호환성확보 ) 웹페이지의동적구성 제어기능은 DOM 표준및 ECMA-262 표준을준수하여호환성을확보해야한다. 검사항목 기능호환성확보 오류유형 3-2. 콘텐츠가화면에정상적으로로딩되지않거나변화가없는경우 팝업의내용을확인할수없음 세부설명
항목 3. ( 기능호환성확보 ) 웹페이지의동적구성 제어기능은 DOM 표준및 ECMA-262 표준을준수하여호환성을확보해야한다. 검사항목 기능호환성확보 오류유형 3-3. 기타기능이누락되거나동작하지않는경우 IE 전용속성인 zoom 속성을사용하여확대축소기능이동작하지않음 세부설명
항목 3. ( 기능호환성확보 ) 웹페이지의동적구성 제어기능은 DOM 표준및 ECMA-262 표준을준수하여호환성을확보해야한다. 검사항목 기능호환성확보 오류유형 3-3. 기타기능이누락되거나동작하지않는경우 IE 를제외한나머지브라우저에서동영상이재생되지않는경우 세부설명
항목 4. ( 화면표시호환성확보 ) 다양한웹브라우저의최신버전에서동등한레이아웃으로구현되어야함. 검사항목 화면표시호환성확보 오류유형 4-1. 텍스트깨짐, 겹침또는타브라우저와상이하게레이어의겹침으로가독이어려운경우 특정기호가브라우저에제대로표시되지않아텍스트와겹치면서레이아웃오류가발생 세부설명 렌더링되지않는기호.
항목 4. ( 화면표시호환성확보 ) 다양한웹브라우저의최신버전에서동등한레이아웃으로구현되어야함. 검사항목 화면표시호환성확보 오류유형 4-1. 텍스트깨짐, 겹침또는타브라우저와상이하게레이어의겹침으로가독이어려운경우 퀵메뉴가본문내용과겹친오류 세부설명
항목 4. ( 화면표시호환성확보 ) 다양한웹브라우저의최신버전에서동등한레이아웃으로구현되어야함. 검사항목 화면표시호환성확보 오류유형 4-2. 기타이미지, 버튼, 입력서식등구성요소의위치가타브라우저와상이하거나영역을벗어나는경우 메인메뉴의영역이가려지고, 입력서식의위치또는영역이타브라우저와상이 세부설명
항목 5. ( 비표준기술제거 ) 특정웹브라우저에서만동작하는비표준기술을사용하지않도록노력해야한다. 검사항목 비표준기술제거 오류유형 5. 웹사이트내액티브 X, 를사용하는경우 플러그인사용점검결과액티브 X 를사용하지않을경우점수획득 세부설명
항목 6. ( 최신웹표준기술사용 ) 호환성확보를위해 HTML5 등의최신웹표준기술을사용하도록노력해야한다. 검사항목 최신웹표준기술사용 득점유형 6. HTML5 문서타입선언하여구현한경우 세부설명
< W3C 홈페이지 > < Validator 위치 >
[ 예시 ] W3C Markup Validator 를통한진단
[ 예시 ] W3C Markup Validator 를통한진단결과
[ 예시 ] W3C CSS Validator 를통한진단
[ 예시 ] W3C CSS Validator 를통한진단결과
웹페이지진단시전체사이트가동일한 URL 을사용하는경우 Validate by File Upload( 파일업로드 ), Validate by input( 직접입력 ) 을사용하여진단가능
문서타입이 HTML5 인경우 Nu Html Checker 로연결되며모든오류에대하 여감점 (-1 점 ) 처리함
Script와 DOM은동작과관련된부분으로최초페이지로딩시오류가나타나지않는다고정상으로진단하면안됨 페이지상의탭, 하이퍼링크, 퀵링크, 플로팅바, 게시판등기능부분을클릭, 입력등실제로작동시켜야오류가발생하는경우가많으므로실제동작하는부분을반드시테스트해야함 파이어폭스의오류콘솔은페이지를변경하는경우반드시기존결과를삭제해야하며파이어버그와병행사용해서오류와경고를확인해야함
국내모바일기기시장현황 < 16 모바일기기제조사별국내시장점유율 > 출처 : 애틀러스리서치앤컨설팅 < 16 삼성전자하반기월별판매량 TOP5 모델 > 출처 : 애틀러스리서치앤컨설팅
국내모바일운영체제현황 국내모바일운영체제별시장점유율 안드로이드운영체제버전별사용현황 출처 : 2018.2 월기준, statcounter.com 국내모바일운영체제점유율은안드로이드 73.77%, ios 26.1% 로나타나고있음 출처 : 2018.2 월기준, statcounter.com 안드로이드 4.4 ~ 8.0 버전까지다양한안드로이드버전시장에존재
국내모바일웹브라우저시장점유율 Chrome Samsung Internet Safari Android Puffin UC Browser Opera Yandex Browser Firefox QQ Browser 53.85% 20.88% 22.83% 1.16% 0.59% 0.36% 0.16% 0.03% 0.09% 0.03% * 원문 : http://gs.statcounter.com (2018 년 2 월기준 )
조사응답 268 개기준으로반응형 88 개, 적응형 21 개, 모바일 131 개운영중 (2016.10 월기준 )
수행절차 수준진단대상으로선정된모바일웹페이지에대해웹표준준수와웹호환성확보및비표준기술제거여부를병행진단하고진단결과를종합 / 검증후기관별보고서작성 수준진단대상모바일웹페이지선정 유형별 10 개페이지선정 웹표준준수여부수준진단 웹호환성확보수준진단 구분 수준진단방법 평가도구 구분기능 진단방법수동평가 HTML 자동평가 W3C HTML Validatior 화면표시 수동평가 CSS 자동평가 W3C CSS Validator 모바일호환성 수동평가 모든웹페이지에서적용되는 HTML 과 CSS 오류 (Error) 가발생하는경우웹페이지마다중복해서감점처리 진단결과종합 / 검증 오류시재진단 보고서작성
기준 진단대상모바일웹사이트의메인페이지, 공지사항, 민원등대민접촉이많은웹페이지를중심으로임의선정 분류설명페이지수 메인페이지모바일웹사이트의메인페이지 1 - 메인페이지의하위서브페이지 단, 웹사이트총량대상에서웹사이트로등록된경우는제외 선정웹페이지 서브페이지 - 외부공개대상페이지 ( 공지사항, 민원신청, 보도자료등 ) - 필수제공페이지 ( 팝업, 인트로, 안내창등 ) - 공지사항목록 / 상세, 게시판목록 / 상세, 자료실등 8 도메인이바뀌는경우는진단제외 iframe 에서외부기능을불러와서적용한경우도진단대상 에포함됨 (SNS, 국민신문고등 )( 변경사항 ) 부가기능제공 페이지 멀티미디어 ( 영상뉴스, 홍보영상등 ) 제공페이지 1
기준 3 개원칙 7 개검사항목 원칙검사항목오류유형 ( 감점 ) 배점비고 웹표준문법준수 1. 표준 (x)html 문법준수 2. 표준 CSS 문법준수 1. 선언된문서타입에따른표준 (x)html 문법의요소또는속성이나해당값을적용하지않은경우감정 2. 선언된문서타입에따른표준 CSS 문법의속성또는선택자를적용하지않은경우감점 25 20 페이지별득점 ( 배점 오류수 ) 의전체페이지평균 검사항목별배점 웹호환성확보 3. 기능호환성 4. 화면표시호환성 3-1. 웹브라우저부가기능을이용해서해당페이지내에사용된 Javascript 오류및 DOM 경고발생시감점 3-2. Javascript 가의도한기능이정상적으로동작되는지점검하여비정상적동작에대해감점 4-1. 텍스트깨짐, 겹침또는타브라우저와상이하게레이어의겹침으로가독이어려운경우감점 4-2. 기타이미지, 버튼, 입력서식등구성요소의위치가타브라우저와상이하거나영역을벗어나는경우 20 20 4 종중 3 종이상브라우저에서호환성확보시, 감점없음. 단, 호환성미확보시전체감점되며,, 3-1 의오류는배점내에서개당 -4 점차감 4 종중 3 종이상브라우저에서호환성확보시, 감점없음. 단, 호환성미확보시전체감점 5. 비표준기술제거 5. 웹사이트내플러그인 ( 액티브 X 등 ) 을사용하고있을경우감점 4 전문가수동진단시플러그인을제공할경우감점 웹표준기술준수 6. 멀티미디어플러그인 사용 6. 멀티미디어제공시플러그인을설치하는방식으로사용하고있을경우감점 5 멀티미디어제공방식을플래시, 미디어플에이어등으로제공시감점 7. 최신웹표준기술사용 7. HTML5 문서타입선언하여구현하지않을경우감점 1 HTML5 문서타입선언페이지당 0.1 점씩득점 모바일호환성확보 8. 중첩테이블사용 9. 프레임사용여부 8. 모바일웹페이지에서중첩테이블사용시다양한모바일웹브라우저에서화면표시오류가발생할경우감점 9. 모바일웹페이지에서 frameset 또는 iframe 사용시다양한모바일웹브라우저에서화면표시오류발생시감점 3 중첩테이블또는프레임사용시다양한모바일웹브라우저에서화면표시 2 오류가발생할경우만감점
항목 5. ( 비표준기술제거 ) 특정웹브라우저에서만동작하는플러그인을사용하지않도록노력해야한다. 검사항목 플러그인제거 오류유형 모바일웹사이트에서액티브 X. 실행파일 (EXE) 등플러그인을사용하는경우 플러그인을사용하지않는경우점수획득 세부설명
항목 6. ( 멀티미디어플러그인제거 ) 멀티미디어제공시웹표준방식으로제공해야한다. 검사항목 멀티이디어제공방식점검 오류유형 모바일웹사이트에서멀티미디어콘텐츠제공시플래시, 플랙스, 실버라이트, 미디어플레이어등플러그인설치를통해제공하는경우감점
항목 8. ( 중첩테이블사용여부 ) 중첩테이블사용시다양한모바일웹브라우저에서화면표시오류가발생하지않아야한다. 검사항목 중첩테이블사용여부점검 오류유형 모바일웹사이트에서중첩테이블을사용할경우다양한모바일웹브라우저에서화면표시오류가발생할경우감점 항목 9. ( 프레임사용 ) 프레임사용시다양한모바일웹브라우저에서화면표시오류가발생하지않아야한다. 검사항목 프레임사용여부점검 오류유형 frameset 또는 iframe 사용시다양한모바일웹브라우저에서화면표시오류발생할경우감점