전자정부사업관리직무역량교육 웹호환성및웹접근성의이해 2015.5.19 류영일수석
개념정리
개념정리 3 웹표준 웹접근성 < 상황 1> 제안회의 류과장 : 김대리 ~ 이번프로젝트웹접근성프로젝트니까핵심잘맞춰서제안서쓰세요김대리 : 네그럼 3종브라우저맞추고, Active-X는사용하지않도록하겠습니다.
개념정리 4 목적 웹접근성 웹호환성 수단 웹표준 WWW 관련표준스펙 CSS, DOM, HTML, XTHML, XML, JavaScript (ECMA Script)
개념정리 5
개념정리 6 현재 웹표준 이라고하는의미가협의적으로는 웹화면 에서보여지기위한표준스펙을중심으로일컬어지고있으나광의적으로는웹기술에해당하는모든표준을말함 6
개념정리 7 7
개념정리 8 S T A N D A R D S
개념정리 9
개념정리 10 A 웹접근성의범주 B 넓은의미의웹접근성 다양한사용자환경 비장애인 장애인 웹브라우저운영체제 보조기기보조기술 정보기술 단말기기 다양한기술환경 좁은의미의웹접근성
개념정리 11 웹호환성 웹접근성 웹표준
전자정부서비스호환성준수지침
웹표준및호환성관련제고활동추진경과 13 기존웹사이트개선, 관련지침마련및보급, 전문인력양성등
지침주요내용 14 항목요약
지침주요내용 15 항목요약
국내웹브라우저점유현황 16
웹표준및호환성진단 진단환경 20.89% 29.54% 렌더링엔진 트라이던트 (Trident) 웹킷 (Webkit) 게코 (Gecko) 프레스토 (Presto) 0.20% 브라우저 Internet Explorer Chrome Safari Firefox Opera 13.91% 렌더링엔진 : 브라우저가웹사이트를표시하는방식 14.84% 17.61% 브라우저 IE Chrome Firefox Safari 기타 비율 (%) 76.2 20.9 1.6 0.8 0.5 OS Windows 7 브라우저 Internet Explorer 11 Chrome Firefox Safari Opera 17 17
웹표준및호환성진단 진단대상으로선정된웹페이지에대해표준준수여부및호환성확보여부를병행진단하고진단결과를종합 / 검증후기관별보고서작성 유형별 10 개페이지선정 자동진단 (HTML/CSS) 자동진단결과검증 플러그인호환성수동진단 레이아웃호환성수동진단 동작호환성수동진단 진단오류시 feedback 18
웹표준및호환성진단 진단대상홈페이지의메인페이지, 공지사항, 민원등대민접촉이많은 웹페이지를중심으로 10 개페이지를임의로선정 선정기준웹페이지유형진단개수 메인페이지 - 진단대상홈페이지의메인페이지 1 개 목록페이지 서브페이지 부가기능제공페이지 합계 - DB 의목록및내용을조회하는페이지 ( 공지사항목록및내용, 게시판목록및내용, 자료실등 ) 첨부파일이있을경우다운로드가능여부까지확인 - 메인페이지의 1~2 단계하위페이지 ( 기관소개 / 안내페이지, 정보 / 서비스제공페이지, 기타콘텐트제공페이지등 ) - 멀티미디어 ( 동영상등 ) 제공페이지 - 기타플러그인동작페이지 3개 4개 2개 10개 재진단의경우신규페이지로임의선정될수있음 19
웹표준및호환성진단 20 진단지표 구분진단지표배점진단방법 1. 웹표준문법준수 1-1. 표준 (X)HTML 문법준수여부 30 1-2. 표준 CSS 문법준수여부 20 자동진단도구 (W3C Markup Validator) 자동진단도구 (W3C CSS Validator) 2. 웹호환성확보 2-1. 동작호환성확보여부 20 2-2. 레이아웃호환성확보여부 20 2-3. 플러그인호환성확보여부 10 크로스브라우징테스트등 -IE 11 (Windows 7) - Chrome, Firefox, Safari, Opera IE 11 을제외한나머지브라우저는진단시점에서의최신버전적용
웹표준및호환성진단 진단지표 진단지표 1-1. 표준 (X)HTML 문법준수여부 진단기준 W3C Markup Validator 에서출력된오류를 < 심각 >, < 위험 >, < 보통 > 으로나누어오류발생시마다오류유형별로차등을두어감점 심각 : 1 개이상의오류발생시해당지표전체점수를 0 점처리 위험 : 1 개발생시마다 3 점감점 보통 : 1 개발생시마다 1 점감점 경고 : 감점없음 오류분류기준 - 심각 : 문서해석 (parsing) 에대한정보가없거나문서전체를해석하는데심각한오류가발생할수있는경우 - 위험 : 문서의일부요소와속성을해석하는데오류가발생할수있는경우 - 보통 : 문법적으로는오류이지만브라우저의오류방지기능으로보완될수있는경우 21 21
웹표준및호환성진단 진단지표 진단지표 1-2. 표준 CSS 문법준수여부 진단기준 W3C CSS Validator 에서출력된오류를 < 심각 >, < 위험 >, < 보통 > 으로나누어오류발생시마다오류유형별로차등을두어감점 심각 : 1 개이상의오류발생시해당지표전체점수를 0 점처리 위험 : 1 개발생시마다 3 점감점 보통 : 1 개발생시마다 1 점감점 경고 : 감점없음 오류분류기준 - 심각 : 문서전체를해석하는데심각한오류가발생할수있는경우 - 위험 : 유효하지않은속성이나속성값을사용해서선언이누락될수있는경우 - 보통 : 특정미디어나특정환경에서만발생하는오류인경우 22 22
웹표준및호환성진단 진단지표 진단지표 2-1. 동작호환성확보여부 2-2. 레이아웃호환성확보여부 2-3. 플러그인호환성확보여부 진단기준 브라우저부가기능을이용해서해당페이지내에사용된 Javascript 오류및 DOM 경고발생시감점 3 종이상의브라우저에서 Javascript 가의도한기능이정상적으로동작되는지점검하여비정상적동작에대해감점 스크립트오류, DOM 경고 : 1 개발생시마다 4 점감점 비정상동작 : 전체점수를 0 점처리 3 종이상의브라우저에서동등한레이아웃으로구현되었는지여부확인 동등한수준의레이아웃이구현되지않은경우전체점수를 0 점처리단, 웹브라우저별특성에의한차이 ( 폰트, 픽셀등 ) 는예외처리 사용자화면에영향을미치거나로그인및동작에관련된다음과같은플러그인에한하여 3 종이상의브라우저에서정상적으로동작되는지조사 - 보안, 구간암호화, 공인인증 - 영상, 멀티미디어 ( 플래시, 실버라이트, 그래프, 리포트등 ) - 파일송수신 3 종브라우저에서정상동작하지않을경우전체점수를 0 점처리단, 브라우저별대체수단을제공할경우에는예외처리 23 23
웹표준및호환성진단 진단지표 진단지표 2-1. 동작호환성확보여부 2-2. 레이아웃호환성확보여부 세부진단기준 최초페이지로딩시, 오류가발생하지않아도탭을이동하거나링크또는기능등을클릭하여작동시킬때생기는오류및 DOM 경고발생시감점 오류 텍스트등정보에대한가독성을저해할수있는글자겹침의경우 한줄콘텐츠가두줄콘텐츠로나타나서문단형식이상이한경우 콘텐츠의특정부분이가려지거나나타나지않은경우 내용이틀을넘는수준으로레이아웃이틀어지거나벗어나는경우 기타상식을넘는수준의레이아웃이동등하지않는경우 예외 픽셀단위로동일하지않더라도웹브라우저별특성에의해폰트, 픽셀등의차이가발생하는경우 2-3. 플러그인호환성확보여부 오류 특정브라우저에서설치된기능이타브라우저에서설치되지않거나는경우 예외 브라우저별대체수단을제공하는경우 동작하지 24 24
25 웹표준및호환성진단 웹호환성준수방법 진단도구는한국정보화진흥원 (http://www.nia.or.kr) 사이트에서다운로드
26 웹표준및호환성진단 웹호환성준수방법
27 웹호환성수준진단 주요오류유형 웹호환성준수방법 [ 예시 ] 메뉴, 퀵바등에서자바스크립트오류발생
28 웹호환성수준진단 주요오류유형 웹호환성준수방법 - [ReferenceError( 스크립트오류 ) 예시 ] 정의되지않은변수를사용한경우발생하는오류 - [ 기능동작오류예시 ] IE 전용속성인 zoom 속성을사용하여확대, 축소기능미동작
29 웹호환성수준진단 주요오류유형 웹호환성준수방법 - 퀵메뉴가본문내용과겹침 ( 가독성확인 )
30 웹호환성수준진단 주요오류유형 웹호환성준수방법 - 플래시콘텐츠와레이어팝업의겹침
31 웹호환성수준진단 주요오류유형 웹호환성준수방법 - 배너의이미지가보이지않음
32 웹호환성수준진단 주요오류유형 웹호환성준수방법 - [ 요소사용오류예시 ] audio 파일을 video 요소로제공하여 IE 외의브라우저에서플러그인요청
33 이슈및문제점 웹호환성준수방법
34 이슈및문제점 웹호환성준수방법 구분 합계 웹표준 ( 40 점 ) 웹호환성 ( 30 점 ) 모바일웹호환성 ( 30 점 ) (X)HTML ( 20 점 ) CSS (20 점 ) 동작 ( 10 점 ) 레이아웃 ( 10 점 ) 플러그인 ( 10 점 ) 안드로이드 ( 15 점 ) I-OS ( 15 점 ) 행정자치부 100 20 20 10 10 10 15 15
ActiveX 대체기술
36 ActiveX 사용현황 전자정부시스템의비표준기술사용현황 플러그인없음 13.2% 분류실태조사비중 * 전체기타 13.7% ActiveX 등비표준기술사용 9,875 개 73.1% 73.1% 플러그인없음 1,788 개 13.2% 전체기타 ** 1,854 개 13.7% ActiveX 등비표준기술사용 합계 13,517 100% ( 출처 : 행정 공공부문의웹사이트이용환경개선을위한 ActiveX 등비표준체계사용실태조사, 2014.07, 행정자치부, 한국정보화진흥원 )
ActiveX 대체방안 37 1. 공인인증서기능구현을위한플러그인사용 전자서명, 로그인, PKI 기반의통신구간암호화, 전자결제등을위해서는공인인증서사용필수 대체방안 : (1) 웹표준기반기술, (2) 실행파일설치 (3) 법 / 제도개정 - 공인인증서의무사용폐지 2. PC 시스템자원접근을위한플러그인사용 키보드보안, 개인방화벽 / 백신, 장치관리등과같이클라이언트 PC의시스템자원에접근하는기능은별도의응용프로그램필요 대체방안 : 별도의실행파일방식 3. 풍부하고다양한 UI 기능구현을위한플러그인사용 그리드, 리포팅도구, 그래픽확장, 멀티미디어재생등의 UI 기능구현은 ActiveX, Flash 등을통해구현 대체방안 : HTML5, Java script 등웹표준기술로구현가능
ActiveX 대체방안 대체기술 구분 Active-X명 용도 비고 종류 적용 공인인증서 NPAPI 방식, 별도실행파일, 공인인증서를이용한전자서명전자서명자바애플릿 X 법제도개정필요 본인인증로그인 본인확인을이용한로그인보안 X 공인인증서없이모바일단말, ARS 등을활용한복합인증방식 데이터암호화 ( 웹구간 ) 데이터암호화 ( 통신암복호화 ) SSL 방식 피싱방지등을위한 EV-SSL 적용추천 보안 / 데이터암호화결제 / ( 내부자료 ) 데이터암호화 ( 내부자료암복호화 ) X 인증 전자결제 전자지불및결제 금액방식, 간편결제 결제수단중신용카드등에적용 키보드보안 키보드해킹방지 별도실행파일, 가상키보드, OTP방식 X 개인방화벽 개인방화벽 별도실행파일 X 위변조방지 웹 DRM, 화면캡쳐방지, 프린터제어 별도실행파일 X 개인정보보호 문자열필터링, DB 서버시스템의플러그인은 Active- 별도실행파일 - DB 암호화 X와관련없음 파일 다중파일처리 다중파일업로드, 다운로드 플래쉬, 처리 파일다운로드 콘텐츠파일다운로드 HTML5 장치장치관리, 원격제어, 자동설치, 플래시, 자바애플릿, 장치제어및관리제어업그레이드, 바로가기등 NPAPI, 별도실행파일 멀티미디어재생 동영상, 음악등실행 차트, 그래프실행 차트, 그래프등실행 HTML5, 오픈소스자바스크립트 그리드컴포넌트엑셀과유사한테이블뷰실행라이브러리 (IE), 브라우저내장 UI확장리포팅툴 / PDF 뷰어 (FF,CR) 리포팅툴중뷰어대체기술적용가능, 지원 문서뷰어프린트출력시는기존플러그인방식 웹에디터 HTML5, 오픈소스 웹지도 HTML5, 자바스크립트기반 API 38
ActiveX 대체방안 39
ActiveX 대체방안 40
ActiveX 대체방안 41
ActiveX 대체방안 42
웹접근성준수지침
웹접근성이란?
웹접근성 45
46 웹접근성 누구나! 생활속에서의일시적인장애 고령화로인한점진적인장애 < 감각의대체를통한정보인식 >
장애인차별금지법이란?
48 장애인차별금지법 Point 1. 전자정보 vs 웹사이트정보 Point Point 2. 3. 지침을준수해도 5% 는차별 가장중요한판단은고의적 악의적여부
49 장애인차별금지법 Point 1. 전자정보 vs 웹사이트제공정보 법제21조전자정보및비전자정보에대하여장애인이장애인아닌사람과동등하게접근 시행령제14조누구든지신체적, 기술적여건과관계없이웹사이트를이용할수있도록접근성보장
50 장애인차별금지법 Point 1. 전자정보 1 장애인차별금지법제 3 조제 8 호 가. " 전자정보 " 라함은 국가정보화기본법 제 3 조제 1 호에따른정보를말한다. 2 국가정보화기본법제 3 조제 1 호 1. " 정보 " 란특정목적을위하여광 ( 光 ) 또는전자적방식으로처리되어부호, 문자, 음성, 음향및영상등으로표현된모든종류의자료또는지식을말한다.
51 장애인차별금지법 Point 1. 전자정보에대한전체적인접근성필요 제정당시명시되지않은영역에대한지속적인법제정 모든영역에대한접근성의무화 결국시행령제 14 조에서명시한 접근성이보장되는웹사이트 라는표현에도불구하고모바일웹, 모바일앱 등전자정보에대한접근성준수가법도입의취지에부합 시행령개정예상
52 참고 해외장애인차별금지법 국명시기법률명 1990 년 미국장애인법 (ADA: Americans with Disabilities Act) 미국 1998년 재활법 508조 (Section 508 of Rehabilitation Act) 21세기통신및비디오접근성법 2010년 (The 21st Century Communication & Video Accessibility Act of 2010) 호주 1992 년 장애인차별금지법 (DDA: Disability Discrimination Act) 영국 1995 년 장애인차별금지법 (DDA: Disability Discrimination Act) 독일 2002 년 ~2005 년 장애인평등법 (DDA: Disability Discrimination Act) * 홍콩 (1995 년 ), 스웨덴 (1999 년 ), 노르웨이 (2001 년 ) 등도장애인차별금지법제정
53 장애인차별금지법 Point 2. 지침을준수해도 5% 는차별 < 지침은준수했으나설계자체가차별된경우 > < 지침은준수했으나실제로이용이불가한경우 >
54 장애인차별금지법 Point 2. 지침을준수해도 5% 는차별 쇼핑몰
55 장애인차별금지법 Point 3. 가장중요한판단은고의적 악의적여부 < 권리구제절차 >
56 장애인차별금지법 Point 3. 가장중요한판단은고의적 악의적여부 장애인차별금지법에서는과도한부담, 현저히곤란한사정이있는경우는차별로인정하지않음 개선계획이나개선노력에대한정상참작이가능함 ( 인권위원회결정례참조 ) 제4조 ( 차별행위 ) 1이법에서금지하는차별이라함은다음각호의어느하나에해당하는경우를말한다. ( 중략 ) 3제1항에도불구하고다음각호의어느하나에해당하는정당한사유가있는경우에는이를차별로보지아니한다. 1. 제1항에따라금지된차별행위를하지않음에있어서과도한부담이나현저히곤란한사정등이있는경우
57 장애인차별금지법 방송사웹사이트장애인편의제공진정결정례의미 곤란한사정 : 현재의기술수준 과도한부담 : 피진정인들의재무현황 웹사이트구축에수반되는비용 웹접근성진정사례에있어서의결정례의미 조사중해결 조사중해결 : 앞으로개편할구체적계획 유무가중요한관건 [ 참조 : 국가인권위원회 ]
58 장애인차별금지법 Point 3. 가장중요한판단은고의적 악의적여부 < 단계적계획 >
59 장애인차별금지법 Point 3. 가장중요한판단은고의적 악의적여부
웹접근성준수방법
국가표준한국형웹콘텐츠접근성지침 2.0 61 표준제정일 : 2010 년 12 월 31 일 고시명 : 방송통신위원회제2010-59호 표준번호 : KCS.OT-10.0003/R1 구성 : 4개원칙 (Principle), 13개지침 (Guideline) 22개검사항목 (Requirement)
한국형웹콘텐츠접근성지침 2.0 62 원칙 (4 개 ) 지침 (13 개 ) 검사항목 (22 개 ) 원칙설명 1. 인식의용이성 2. 운용의용이성 3. 이해의용이성 4. 견고성 1. 대체텍스트 1. 적절한대체텍스트제공 2. 멀티미디어대체수단 2. 자막제공 3. 명료성 4. 키보드접근성 5. 충분한시간제공 3. 색에무관한콘텐츠인식 4. 명확한지시사항제공 5. 텍스트콘텐츠의명도대비 6. 배경음사용금지 7. 키보드사용보장 8. 초점이동 9. 응답시간조절 10. 정지기능제공 6. 광과민성발작예방 11. 깜빡임과번쩍임사용제한 7. 쉬운내비게이션 12. 반복영역건너뛰기 13. 제목제공 14. 적절한링크텍스트 8. 가독성 15. 기본언어표시 9. 예측가능성 16. 사용자요구에따른실행 10. 콘텐츠의논리성 11. 입력도움 17. 콘텐츠의선영화 18. 표의구성 19. 레이블제공 20. 오류정정 장애인이비장애인과동등하게웹페이지를알아볼수있어야한다. 장애인이비장애인과동등하게웹페이지의기능을이용할수있어야한다. 장애인이비장애인과동등하게웹페이지의콘텐츠를이해할수있어야한다. 12. 문법준수 21. 마크업오류방지 웹기술에구애받지않고콘텐츠를이용할 13. 웹애플리케이션접근성 22. 웹애플리케이션접근성준수 수있어야한다.
한국형웹콘텐츠접근성지침 2.0 의기본원칙 63 4 대원칙 견고성 인식의용이성 운용의용이성 이해의용이성
64 1. 인식의용이성 웹접근성준수방법 1. 인식의용이성 지침 (3 개 ) 검사항목 (6 개 ) 1.1 ( 대체텍스트 ) 텍스트아닌콘텐츠에는대체텍스트를제공해야한다. 1.2 ( 멀티미디어대체수단 ) 동영상, 음성등의멀티미디어콘텐츠를이해할수있도록대체수단을제공해야한다. 1.1.1 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나용도를이해할수 있도록대체텍스트를제공해야한다. 1.2.1 ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고또는수화를제공해야한다. 1.3.1 ( 색에무관한콘텐츠인식 ) 콘텐츠는색에관계없이인식될수있어야한다. 1.3 ( 명료성 ) 콘텐츠는명확하게전달되어야한다. 1.3.2 ( 명확한지시사항제공 ) 지시사항은모양, 크기, 위치, 방향, 색, 소리등에관계없이인식될수있어야한다. 1.3.3 ( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠와배경간의명도대비는 4.5대 1 이상이어야한다. 1.3.4 ( 배경음사용금지 ) 자동으로재생되는배경음을사용하지않아야한다.
65 1. 인식의용이성 웹접근성준수방법 1.1 적절한대체텍스트제공 1.1.1 ( 적절한대체텍스트제공 ) 텍스트아닌콘텐츠는그의미나용도를이해할수있도록대체텍스트를제공 해야한다. alt(alternate text)? 어떠한조건에서도이미지의내용을사용자에게전달하는것 저사양 PC 저속인터넷회선 텍스트브라우저사용자
66 1. 인식의용이성웹접근성준수방법 1.2 멀티미디어대체수단 1.2.1 ( 자막제공 ) 멀티미디어콘텐츠에는자막, 원고또는수화를제공해야한다. - 동영상콘텐츠음성정보와동일하게동기화된자막, 원고또는수화를제공해야함 - 원고제공시동영상콘텐츠옆또는아래에같은페이지에제공하는것이바람직함 - 텍스트로제공되는동영상인경우해당텍스트의내용을음성또는원고로제공해야함 - 음성이없는자막동영상의경우시각장애인이인식이가능하도록원고를제공해야함 동영상에자막과수화동시제공 동영상에충실한원고를제공 음성이없는자막동영상에원고를제공하지않음
67 1. 인식의용이성 웹접근성준수방법 1.3 명료성 1.3.1 ( 색에무관한콘텐츠인식 ) 콘텐츠는색에관계없이인식될수있어야한다. 원본 적색맹 녹색맹 청색맹
68 2. 운용의용이성 웹접근성준수방법 2. 운용의용이성 지침 (4 개 ) 검사항목 (8 개 ) 2.1 ( 키보드접근성 ) 콘텐츠는키보드로접근할수있어야한다. 2.2 ( 충분한시간제공 ) 콘텐츠를읽고사용하는데충분한시간을제공해야한다. 2.3 ( 광과민성발작예방 ) 광과민성발작을일으킬수있는콘텐츠를제공하지않아야한다. 2.4 ( 쉬운내비게이션 ) 콘텐츠는쉽게내비게이션할수있어야한다. 2.1.1 ( 키보드사용보장 ) 모든기능은키보드만으로도사용할수있어야한다. 2.1.2 ( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며, 시각적으로구별할수있어야한다. 2.2.1 ( 응답시간조절 ) 시간제한이있는콘텐츠는응답시간을조절할수있어야한다. 2.2.2 ( 정지기능제공 ) 자동으로변경되는콘텐츠는움직임을제어할수있어야한다. 2.3.1 ( 깜빡임과번쩍임사용제한 ) 초당 3~50 회의주기로깜빡이거나번쩍이는콘텐츠를제공하지않아야한다. 2.4.1 ( 반복영역건너뛰기 ) 콘텐츠의반복되는영역은건너뛸수있어야한다. 2.4.2 ( 제목제공 ) 페이지, 프레임, 콘텐츠블록에는적절한제목을제공해야한다. 2.4.3 ( 적절한링크텍스트 ) 링크텍스트는용도나목적을이해할수있도록제공해야한다.
69 2. 운용의용이성 웹접근성준수방법 2.1 키보드접근성 2.1.2 ( 초점이동 ) 키보드에의한초점은논리적으로이동해야하며, 시각적으로구별할수있어야한다. 1) 초점의논리적이동 - tab, shift+tab 키로초점이동시콘텐츠의좌 -> 우, 위 -> 아래로이동되도록제공해야함
70 2. 운용의용이성웹접근성준수방법 2.4 쉬운내비게이션 2.4.1 ( 반복영역건너뛰기 ) 콘텐츠의반복되는영역은건너뛸수있어야한다. - 키보드를사용하는시각, 운동장애인을위해본문으로건너뛸수있는링크를제공해야함 - 건너뛰기링크를제공할경우페이지맨상단에표시되도록제공해야하며, 키보드로초점이갔을때표시되도록해도무방함 - 건너뛰기링크는 3개이하로제공하는것이바람직함 1) 페이지상단화면에표시되도록제공
71 3. 이해의용이성웹접근성준수방법 3. 이해의용이성 지침 (4 개 ) 검사항목 (6 개 ) 3.1 ( 가독성 ) 콘텐츠는읽고이해하기쉬워야한다. 3.1.1 ( 기본언어표시 ) 주로사용하는언어를명시해야한다. 3.2 ( 예측가능성 ) 콘텐츠의기능과실행결과는예측가능해야한다. 3.2.1 ( 사용자요구에따른실행 ) 사용자가의도하지않은기능 ( 새창, 초점변화 등 ) 은실행되지않아야한다. 3.3 ( 콘텐츠의논리성 ) 콘텐츠는논리적으로구성해야한다. 3.3.1 ( 콘텐츠의선형화 ) 콘텐츠는논리적인순서로제공해야한다. 3.3.2 ( 표의구성 ) 표는이해하기쉽게구성해야한다. 3.4 ( 입력도움 ) 입력오류를방지하거나정정할수있어야한다. 3.4.1 ( 레이블제공 ) 입력서식에는대응하는레이블을제공해야한다. 3.4.2 ( 오류정정 ) 입력오류를정정할수있는방법을제공해야한다.
72 3. 이해의용이성 웹접근성준수방법 3.1 가독성 3.1.1 ( 기본언어표시 ) 주로사용하는언어를명시해야한다. - 화면낭독기에서해당국가언어를음성으로올바르게출력해주기위해기본언어를명시해야함 - 내용이있는 iframe 안에페이지경우기본언어를명시해야함 구분 HTML 4.01 표준의언어표시 ( 한국어 ) XHTML 1.0표준의언어표시 ( 한국어 ) XHTML 1.1표준의언어표시 ( 한국어 ) 내용 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ko"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang= ko >
73 4. 견고성웹접근성준수방법 4. 견고성 지침 (2 개 ) 검사항목 (2 개 ) 4.1 ( 문법준수 ) 웹콘텐츠는마크업언어의문법을준수해야한다. 4.1.1 ( 마크업오류방지 ) 마크업언어의요소는열고닫음, 중첩관계및속성선언에오류가없어야한다. 4.2 ( 웹애플리케이션접근성 ) 웹애플리케이션은접근성이있어야한다. 4.2.1 ( 웹애플리케이션접근성준수 ) 콘텐츠에포함된웹애플리케이션은접근성이있어야한다.
74 4. 견고성웹접근성준수방법 4.1 문법준수 4.1.1 ( 마크업오류방지 ) 마크업언어의요소는열고닫음, 중첩관계및속성선언에오류가없어야한다. - 화면낭독기는마크업언어을해석하여음성으로출력하므로, 최소한열고닫음, 중첩관계, 속성선언에오 류가없어야함 구분 내용 태그의열고닫음 마크업언어로작성된콘텐츠는표준에서특별히정한경우를제외하고는시작태그와 끝나는태그가정의되어야한다. 태그의중첩열고닫는태그가나타내는요소는포함관계가어긋나지않아야한다. 중복된속성 하나의요소안에서마크업언어의속성이중복되어선언될경우, 중복된속성중하나 는무시될수있으므로같은속성이중복선언되지않도록제공해야한다. id 속성값 하나의마크업문서에는같은 id 값을가진요소가존재해서는안되므로, id 값을중복 되지않도록사용해야한다.
75 4. 견고성웹접근성준수방법 4.1 문법준수 마크업오류사례 구분 사례 열고닫기오류 태그중첩오류 중복된속성
한국형웹콘텐츠접근성지침 2.1 비교
77 2.0 vs 2.1 1.1( 대체텍스트 ) 텍스트아닌콘텐츠에는대체텍스트를제공해야한다. 수정 배경이미지의의미가사용자에게전달되어야하는콘텐츠는그의미가보조기술로전달되도록대체텍스트를제공해야한다. 추가 IR 기법사용시, display:none, visibility:hidden 사용금지를의미 동일한정보를중복해서제공하는경우 : 보조기술로동일한정보가반복해서전달되지않도록구현하는것이바람직하다. 추가 권장이유 중복을이유로 제품의사진 에는 alt 값을제공하지않는다면 검색엔진에서이미지를수집할때노출되지않을수있음
78 2.0 vs 2.1 대체텍스트중복사례
79 2.0 vs 2.1 1.3.3( 텍스트콘텐츠의명도대비 ) 텍스트콘텐츠와배경간의명도대비는 4.5 대 1 이상이어야한다. 수정 화면확대가가능한콘텐츠 : 화면확대가가능하도록구현한텍스트콘텐츠 ( 텍스트, 텍스트이미지 ) 의명도대비는 3 대 1 까지낮출수있다. 추가 브라우저확대가가능하므로명도대비는사실상완화 기존 핵심콘텐츠 삭제로영역은확대 장식용문구등과같은의미없는영역은제외
80 2.0 vs 2.1 1.3.5 ( 콘텐츠간의구분 ) 이웃한콘텐츠는구별될수있어야한다. 신설 모든이웃한콘텐츠는시각적으로구분될수있도록구현해야한다. 신설 1-1) 테두리를이용하여구분함 1-2) 콘텐츠사이에시각적인구분선을삽입하여구분함 1-3) 서로다른무늬를이용하여구분함 1-4) 콘텐츠배경색간의명도대비 ( 채도 ) 를달리하여구분함 1-5) 줄간격및글자간격을조절하여구분함 1-6) 기타콘텐츠를시각적으로구분할수있는방법등
81 2.0 vs 2.1 2.1.3 ( 조작가능 ) 사용자입력및컨트롤은조작가능하도록제공되어야한다. 신설 컨트롤의크기 : 콘텐츠에포함된모든컨트롤은대각선방향의길이를 6.0mm 이상으로제공해야한다. 신설 컨트롤의대각선길이 6mm 미만인사례 컨트롤의대각선길이 6mm 이상인사례
82 2.0 vs 2.1 2.1.3 ( 조작가능 ) 사용자입력및컨트롤은조작가능하도록제공되어야한다. 신설 링크, 사용자입력, 기타컨트롤등의안쪽여백 : 테두리안쪽으로 1 픽셀이상의 여백을두고이곳에서마우스, 터치등에반응하지않도록구현하는것이바람직함. 신설 컨트롤을잘못선택하지않도록간격제공
83 2.0 vs 2.1 2.4.1( 반복영역건너뛰기 ) 콘텐츠의반복되는영역은건너뛸수있어야한다. 수정 시각적인구현 : 건너뛰기링크는시각장애인뿐아니라지체장애인도키보드조작횟수를 줄일수있게하는효과적인수단이므로메뉴건너뛰기링크는화면에보이도록구현해 야한다. 추가 2.4.2( 제목제공 ) 페이지, 프레임, 콘텐츠블록에는적절한제목을제공해야한다. 수정 팝업창제목 (title) 제공 : 팝업창은팝업창 임을제목에명시해야한다. 항목을추가
84 2.0 vs 2.1 2.4.3( 적절한링크텍스트 ) 링크텍스트는용도나목적을이해할수있도록제공해야한다. 수정 맥락을통해이해할수있도록링크텍스트제공 : 링크의용도나목적지를링크텍스트만으로또는주변의맥락으로부터충분히이해할수있도록링크텍스트를제공해야한다. 수정 2.0 : 맥락과무관한링크, 맥락과 관계없이이해할수있도록 ~ 공지사항, 링크 1, 링크 2, 링크 3, 공지사항더보기 vs 김수한무거북이와두루미삼천갑자동방삭치치카포사리사리센타워리워리세브리깡이미지크게보기, 김수한무거북이와두루미삼천갑자동방삭치치카포사리사리센타워리워리세브리깡자세히보기, 김수한무거북이와두루미삼천갑자동방삭치치카포사리사리센타워리워리세브리깡주문하기 맥락을이용하여목적어생략필요
85 2.0 vs 2.1 3.3.1( 콘텐츠의선형구조 ) 콘텐츠는논리적인순서로제공해야한다. 수정 의미가명확히전달되도록 선형화 대신 선형구조 로표현 4.2.1( 웹애플리케이션접근성준수 ) 콘텐츠에포함된웹애플리케이션은접근성이있어야한다. 수정 보조기술호환성을제공할수있도록 접근성프로그래밍인터페이스대체수단제공 : 웹 애플리케이션을구현하는과정에서운영체제 ( 플랫폼포함 ) 가제공하는접근성프로그래밍 인터페이스가정의되지않은새로운기능을구현할경우에는그기능의명칭, 역할, 상태및 값에관한정보를운영체제 ( 또는플랫폼 ) 의접근성프로그래밍인터페이스로전달하도록 구현함으로써보조기술이그정보를이용할수있게해야한다. 수정
모바일앱접근성지침소개
87 스마트폰접근성기능 음성읽기기능 모바일앱접근성지침소개 큰텍스트글자크기를크게하여가독성증가 화면내용을음성으로안내 < 아이폰 > 화면색상반전 저시력사용자가편하게볼수있는환경 청각장애인을위한기능 알림시 LED 깜빡임 & 모노오디오 < 안드로이드폰 > 확대 / 축소모든화면을쉽게확대및축소
88 모바일애플리케이션접근성지침 - 구성 모바일앱접근성지침소개 모바일애플리케이션접근성지침 모바일애플리케이션접근성지침 ( 미래부고시제 2011-38 호 ) 준수사항 (7개) 권고사항 (8개) 1. 대체텍스트 1. Native UI Component 2. 초점 2. 컨트롤간충분한간격 3. 운영체제접근성기능지원 3. 알림기능 4. 누르기동작지원 4. 범용폰트이용 5. 색에무관한인식 5. 사용자인터페이스의일관성 6. 명도대비 6. 깜빡거림의사용제한 7. 자막, 수화제공 7. 배경음사용금지 8. 장애인사용자평가
89 모바일애플리케이션접근성지침 - 준수사항 모바일앱접근성지침소개 1. ( 대체텍스트 ) 텍스트아닌콘텐츠는대체가능한텍스트를함께제공해야한다. 문제점 대체텍스트를미제공 하여모바일화면낭독 버튼버튼버튼버튼 버튼버튼버튼버튼 프로그램에서제공하는 음성읽기기능을활용 하면 버튼 이라고읽음
90 2. 모바일애플리케이션접근성지침 - 준수사항모바일앱접근성지침소개 1. ( 대체텍스트 ) 텍스트아닌콘텐츠는대체가능한텍스트를함께제공해야한다. 아이폰
91 2. 모바일애플리케이션접근성지침 - 준수사항모바일앱접근성지침소개 1. ( 대체텍스트 ) 텍스트아닌콘텐츠는대체가능한텍스트를함께제공해야한다. 안드로이드폰
92 모바일애플리케이션접근성지침 - 준수사항 모바일앱접근성지침소개 2. ( 초점 ) 모든객체에는초점 (focus) 이적용되고, 초점은순차적으로이동되어야한다. 문제점 - TTS를실행할경우, 아이디입력창, 비밀번호입력창 ', 공인인증입력창 등에초점이가지않아애플리케이션이용이불가능 아이디, 비밀번호, 공인인증입력등이불가능하여로그인을할수있는방법이없음 - 아이디저장, 시세전용 체크박스에대체텍스트미제공 선택됨, 선택안됨 으로만음성출력
93 모바일애플리케이션접근성지침 - 준수사항 모바일앱접근성지침소개 3. ( 운영체제접근성기능지원 ) 운영체제가제공하는접근성기능및속성이지원되어야한다. 운영체제에서의접근성기능을지원한 Twitter 의경우 SNS 에서제공하는텍스트정보 를제대로인식할수있으나, 국내의모 SNS 의경우에는운영체제의접근성기능을지 원하지않아음성읽기기능이용시아무런텍스트정보도얻지못하는문제가발생
94 모바일애플리케이션접근성지침 - 준수사항 모바일앱접근성지침소개 4. ( 누르기동작지원 ) 모든컨트롤은누르기 (touch or tap) 동작으로제어할수있어야한다. < Slide 기능에대한대체수단제공사례 ( 두번두드리기 (double tap)) > < Slide 기능에대한대체수단미제공사례 >
95 모바일애플리케이션접근성지침 - 준수사항 모바일앱접근성지침소개 5. ( 색에무관한인식 ) 화면에표시되는모든정보는색에관계없이인식할수있어야한다.
96 모바일애플리케이션접근성지침 - 준수사항 모바일앱접근성지침소개 6. ( 명도대비 ) 화면에표시되는모든정보는전경색과배경색이구분될수있도록최소대비이상으로제공되어야한다. - 모든정보의최소대비는 3:1 이상으로제공해야한다. - 저시력자에게실효성을가지기위해서주콘텐츠의경우 4.5:1 또는 7:1 이상으로제공해야한다. 배경색과글자색의대비가충분하지않아저시력사용자는글씨를읽기가매우어려움
97 모바일애플리케이션접근성지침 - 준수사항 모바일앱접근성지침소개 7. ( 자막, 수화등의제공 ) 멀티미디어콘텐츠에는동등한내용의자막, 원고또는수화가 제공되어야한다.
98 모바일애플리케이션접근성지침 - 권고사항 모바일앱접근성지침소개 1. (Native UI Component) 운영체제에서제공하는기본사용자인터페이스컴포넌트를 최대한이용하는것이바람직하다. picker TextView EditText Button
99 모바일애플리케이션접근성지침 - 권고사항 모바일앱접근성지침소개 2. ( 컨트롤간충분한간격 ) 컨트롤은충분한간격으로배치하는것이바람직하다. 컨트롤중심간간격은 13mm X 13mm 이상을권장 컨트롤영역의크기는 8.5mm X 8.5mm 이상을권장 Android 해상도기준 : 480 800, 240dpi 기준으로평가함 IOS 의표준해상도기준 : 72dpi 기준으로평가함
100 모바일애플리케이션접근성지침 - 권고사항 모바일앱접근성지침소개 3. ( 알림기능 ) 사용자에게알림을제공할때에는진동, 시각, 소리등최대한다양한방법으로 사용자가선택할수있도록제공하는것이바람직하다. < 페이스북의알림설정화면 > < 운영체제에서제공하는 Native UI 알림기능사용예 >
101 모바일애플리케이션접근성지침 - 권고사항 모바일앱접근성지침소개 4. ( 범용폰트이용 ) 폰트의크기조절, 확대기능을제공하거나운영체제에서제공하는관련 기능을활용할수있는방법을제공하는것이바람직하다. < 트위터의글자크기설정화면 > < ibooks 폰트크기및서체설정화면 >
102 모바일애플리케이션접근성지침 - 권고사항 모바일앱접근성지침소개 5. ( 사용자인터페이스의일관성 ) 사용자인터페이스요소들의배치를일관성있게제공하는 것이바람직하다. < 일관성없는입력서식제공사례 > ( 네이티브 UI 컴포넌트 ( 좌측 ), 커스텀 UI Component ( 우측 ) > < 새로고침 버튼의위치가다른페이지와달리오른쪽상단에위치하여일관성이성이없음 >
103 모바일애플리케이션접근성지침 - 권고사항 모바일앱접근성지침소개 6. ( 깜빡거림의사용제한 ) 광과민성발작을일으킬수있는콘텐츠를제공하지않는것이 바람직하다. 깜빡이거나번쩍이는콘텐츠를제공해야만할경우초당 3-50 회주기는피해서제공해야함
104 모바일애플리케이션접근성지침 - 권고사항 모바일앱접근성지침소개 7. ( 배경음사용금지 ) 자동으로재생되는배경음을사용하지않는것이바람직하다. 동영상을사용자의선택에의해활성화되도록제공하는것이바람직하다. 배경음을제공할경우에는반드시애플리케이션첫부문에이를정지할수있는기능을제공하 는것이바람직하다.
105 모바일애플리케이션접근성지침 - 권고사항 모바일앱접근성지침소개 8. ( 장애인사용자평가 ) 애플리케이션개발시다양한모바일기기에서의이용가능여부를 점검해야하며, 장애인테스트를수행하는것이바람직하다. [ 출처 ] < 오마이뉴스 > 시각장애인의스마트폰교육현장을가다
106 모바일앱접근성이슈 모바일앱접근성지침소개 앱접근성주요오류및이슈 1 제보하기의대체텍스트가제보보기탭으로변하였는데 제보하기선택됨 으로고정됨 커스텀탭메뉴제작시상태정보를정확하게구분하지않아발생 웹과달리대체텍스트제공시, 객체나요소의종류, 현재상황을예측할수있도록표현
107 모바일앱접근성이슈 모바일앱접근성지침소개 앱접근성주요오류및이슈 2 좌에서우, 상에서하로만논리적순서를판단하기어려운영역이존재 일관되고예측가능한순서의개념으로재정립하여적용
Q & A 감사합니다.