은행연합회 발표자료

웹 콘텐츠 접근성 지침2.0 설명 및 금융권 이슈

2

진행순서

웹 접근성 개요

한국형 웹 콘텐츠 접근성 지침 2.0

웹 접근성 품질마크

금융권 이슈

Q & A

3



Web + Access + Ability

개념

4

웹 접근성 개요개념

5

웹 접근성 개요개념

6

웹 접근성 개요현황

계 인구의 10%

(약 6억 5천만명)( 출처 : UN ENABLE Websites,

http://www.un.org/disabilities/default.asp?id=18 )

7


국내 등록 장애인은

2,519,241명(11년 12월말 기준)

1,500,000

2,000,000

2,500,000

3,000,000

2006년 2007년 2008년 2009년 2010년

2006년

2007년

2008년

2009년

2010년

[ 출처 : 보건복지부 전국 장애인 등록현황]

5%

8


체국민

장애인

2005 2007

(단위 : %)

`

77.6

2009 2011

41.0

72.8

76.3

49.952.7

31.8

26.4

24.923.9

54.4

78.3

•장애인의 인터넷 이용률은

54.4%, 전체국민 78.3%에

비해 23. 9%p 격차 발생

•등록장애인(10) : 252만(5%)

•세계: 6억 5천만(인구10%)

•장애원인 : 후천적 90%

9

웹 접근성 개요국외 법제도 현황

1990 장애인법 제정1998 재활법 508조 (1194.21, 22) 제정2010 재활법508조/통신법255조 개정안

공고 중

1995 장애인차별금지법 제정2004 장애인차별금지법 발효

1992 장애인차별금지법(DDA)

2003 웹 접근성 표준 제정(JIS X 8341-1~5)

미국

호주

영국

일본

※ Section 508 applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology.

※ 국제표준: WCAG 2.0 (W3C); ISO 9471 series (ISO)

10

웹 접근성 개요국외 법제도 현황

v America Online vs. NFB

- 1999년 미국 시각장애인연합회는 온라인업체인 AOL을 상대로 인터넷에 접속하는데 어려움이

있다며 소송을 제기

- AOL은 이를 인정하고 접근성이 확보되도록 개선하여 갈등 해소

v Maguire vs. Sydney Organising Communittee for the Olympic Game

- 1999년 6월 호주 시각장애인 Maquire는 입장권 주문에 관한 정보를 점자버전으로 제공하기

않은 점, 웹 사이트 수정을 요구하였음에도 보완하지 않은 것 등에 대한 불만으로 시드니 올림

픽조직위원회를 상대로 소송을 제기

- 2000년 8월 판결에서 시드니 올림픽 조직위원회가 웹 사이트의 이미지와 이미지 맵에 대한

대체 텍스트를 제공하지 않고, 경기결과 페이지도 쉽게 이용하도록 만들지 못했다는 점에서

장애인차별금지법 제24조항을 침해하였으며, 이에 대한 적절한 이의제기에도 적절한 조치를

취하지 않았다는 판결을 받음

11

웹 접근성 개요국내 법제도 현황

국가정보화기본법 (’09.5 개정, ’09.8 시행)

- 기존 『정보화촉진기본법』 전부를 개정한 법으로 제32조 1항에서 장애인·고령자등에 대한 정보접근 및 이용보장에 대한 의무화를 명시※ 2001년 1월 제정된 『정보격차해소에 관한 법률』은 폐지

장애인차별금지 및 권리구제 등에 관한 법률(’07.4 제정, ’08.4 시행)

- 모든 생활 영역에서 장애를 이유로 차별을 금지하고, 장애를 이유로 차별 받은 사람의 권익을 효과적으로 구제하기 위해 제정(관련조항: 법21조 및 시행령 14조)

- 정당한 편의의 내용, 행위자에 대한 단계적 범위, 불이행 시 처벌조항, 권리구제 절차 등이 구체적으로 명시

- 모든 공공기관은 2009년 4월 11일부터 의무적용, 단계적으로 2015년까지 모든웹 사이트가 웹 접근성을 준수해야 함

장애인복지법(’11. 3 일부 개정)- 제22조(정보에의 접근) : 국가와 지방자치단체는 장애인이 정보에 원활하게 접근하고 자신의 의사를 표시할 수 있도록 전기통신·방송시설 등을 개선하기 위해 노력해야 한다.

12


제32조 (장애인·고령자 등의 정보접근 및 이용 보장)

① 국가기관 등은 인터넷을 통하여 정보나 서비스를 제공할 때 장애인 ·고령자 등이 쉽게

웹사이트를 이용할 수 있도록 접근성을 보장하여야 한다.

② 『정보통신망 이용촉진 및 정보보호 등에 관한 법률』 제2조 제3호에 따른 정보통신서비스

제공자는 그 서비스를 제공할 때 장애인·고령자 등의 접근과 이용의 편익을 증진하기 위하여

노력하여야 한다.

③ 정보통신 관련 제조업자는 정보통신기기 및 소프트웨어를 설계, 제작, 가공할 때 장애인·고

령자 등이 쉽게 접근하고 이용할 수 있도록 노력하여야 한다.

④ 국가기관 등은 정보통신제품을 구매할 때 장애인·고령자 등의 정보접근과 이용편의를 보장

한 정보통신제품을 우선하여 구매하도록 하여야 한다.

⑤ 행정안전부 장관은 장애인·고령자 등의 정보접근 및 이용편의 증진을 위한 정보통신서비스

및 정보통신제품 등의 종류·지침 등을 정하여 고시하여야 한다.

13


제21조 (정보통신 ·의사소통에서의 정당한 편의제공의무)

①(중략)행위자는 생산·배포하는 전자정보 및 비 전자정보에 대하여 장애인이 장애인 아닌

사람과 동등하게 접근·이용할 수 있도록 수화, 문자 등 필요한 수단을 제공하여야 한다.

시행령 제14조 (정보접근·의사소통에서의 정당한 편의 제공의 필요수단 및 단계적

범위) ①법 21조1항 전단에 따라 장애인이 접근·이용할 수 있도록 수화, 문자 등 필요한 수단

을 제공하여야 하는 행위자 등의 단계적 범위는 별표 3과 같다.

②법 21조 1항에 따라 제공하여야 하는 필요한 수단의 구체적인 내용은 다음 각 호와 같다.

1. 누구든지 신체적ㆍ기술적 여건과 관계없이 웹사이트를 통하여 원하는 서비스를 이용할 수

있도록 접근성이 보장되는 웹사이트

14


행위자

기간공공기관 교육기관 의료기관 복지시설 문화예술체육 법인

‘09. 4. 11 공공기관

특수학교/특수학급

있는 국공립학교/

장애전담보육시설

종합병원사회복지시설

장애복지시설

‘10. 4. 11

국공립문화예술기관/

국공립(대학)박물관·미술관/

국립중앙도서관/공공도서관

‘11. 4. 11

국공립유치원/초·중·고 대

학교/보육 시설(100인 이

상)/영재학교 및 영재교

육원

일반병원/치과/한방

병원

(입원 30인

이상)

‘12. 4. 11민간종합공연장/

사립대학박물관·미술관

’13. 4. 11

사립유치원/평생

교육시설,연수기관/

직업훈련기관/보육 시설

(100인 이하)

그 외 병원

(입원 30인

이하)

체육관련행위자모든

법인

‘15. 4. 11민간일반공연장 및

소공연장/영화상영관(300석~)/사립박물관·미술관

15


출처 : 보건복지부민사소송을 통한 권리구제(법 제46조) 형사소송을 통한 권리구제(법 제49조)

16


v 시각장애인 vs 교육청 e-러닝서비스

- 시각장애인이 교육청에서 운영하는 e-러닝 학습서비스를 수강하고자 하였으나 이미지 링크,

레이블 등이 미흡하여 해당 홈페이지에 접근하기 어려워 관련 학습사이트를 이용할 수 없었

다는 진정을 국가인권위원회에 제기

- 국가인권위원회의 조사 이후 교육청은 해당 사이트를 웹 접근성 지침에 부합하도록 개선

v 청각장애학생 vs OO방송 인터넷동영상강의

- 청각장애가 있는 고등학생이 OO방송의 인터넷 동영상 강의를 통해 공부하고자 하나 동영상에

자막이 전혀 제공되지 않아 이를 이용할 수 없어 개선이 필요하다는 진정을 제기

- 국가인권위원회의 조사 이후 OO방송국은 홈페이지를 통한 주요 동영상강의에 청각장애인을

위한 자막과 시각장애인을 위한 화면해설을 제공할 것이라고 답변 함으로서 갈등 해소

17

18

한국형 웹 콘텐츠접근성 지침 2.0

KWCAG 2.0 개요 - 제정 배경

19

§ 웹 애플리케이션이 늘어나는 추세

ú 플러그인 등 RIA 기술의 보편화

Flash, Flex, Silverlight, JavaScript, Java

기존의 HTML의 정적 화면에서 좀 더 기능적이고,

다이나믹한 멀티미디어 및 응용 프로그램 강화

웹 콘텐츠와 웹 애플리케이션의 구분이 모호

ú 신기술을 반영할 수 있는 표준 개정 필요

20

WCAG 2.0WCAG 1.0

o 일시 : 1999년 5월

o 구성 : 14개 가이드라인,

65개 체크포인트

o 특징 : HTML 중심

o 일시 : 2008년 12월

o 구성 : 4개 지침, 12개

가이드라인, 61개

성공기준

o 특징 : HTML, RIA 등

다양한 기술

유연성 제고(Flexible)

+ 검증가능성 제고

(Testable)

※ 출처 : http://www.w3.org/2008/12/wcag20-pressrelease.html.en

※ 성공기준 구성 : 중요도 1 : 25개,

중요도 2 : 13개, 중요도 3 : 23개

§ 신기술을 반영한 국제 표준(WCAG2.0) 제정

KWCAG 2.0 개요 - 제정 배경

21

§ KWCAG 2.0 국가표준

ú 표준 제정일 : 2010년 12월 31일

ú 고시명 : 방송통신위원회 제2010-59호

ú 표준번호 : KICS.OT-10.003/R1

ú 구성 : 4개 원칙(Principle), 13개 지침(Guideline)

22개 검사항목(Requirement)

KWCAG 2.0 개요 – 구성

※ 출처: http://www.tta.or.kr/data/ttas_view.jsp?rn=2&pk_num=KCS.OT-10.0003/R1&nowSu=1

22

§ 4대 원칙(Principles)

ú 인식의 용이성(P) : 모든 콘텐츠는 사용자가 인식할

수 있어야 한다.

ú 운용의 용이성(O) : 사용자 인터페이스 구성요소는

조작 가능하고 내비게이션 할 수 있어야 한다.

ú 이해의 용이성(U) : 콘텐츠는 이해할 수 있어야 한다.

ú 견고성(R) : 웹 콘텐츠는 미래의 기술로도 접근할 수

있도록 견고하게 만들어야 한다.

KWCAG 2.0 개요 - 구성

23

§ 13개 지침(Guidelines)

ú 웹 제작자가 접근성을 준수하기 위해 완수해야 하는

기본적인 13개 목표

KWCAG 2.0 개요 - 구성

§ 22개 검사항목(Requirements)

ú 13개 지침을 준수했는지를 검증하기 위한 22개의 구

체적인 검사항목

24

ú 신기술 반영: 기존 HTML 중심에서 모든 웹 관련 신

기술(Flash, Silverlight, Java 등)에 대응

ú 국제표준 부합: 국내 표준 준수 시 자동적으로 W3C

표준 (중요도 1) 만족

※ 표준 제정 시 국내 정보통신보조기기(화면낭독 프로그램등)등을 최대한 고려

※ WCAG(Web Content Accessibility Guidelines) 2.0 은 12 개지침으로 구성, 검사항목 중요도에 따라 중요도 1, 2, 3으로구분. 미국과 호주 등에서는 중요도 2까지 준수 의무화

KWCAG 2.0 VS. 1.0

25

ú 표준간 연계성: KWCAG 1.0을 준수하는 웹 사이트

는 자동적으로 KWCAG2.0을 만족함

ú 지침 모호성 해소: 지침의 모호성을 해소하고 평가

방법을 구체적으로 제시

ú 사례 제시: 검사항목별 사례를 부록으로 제시

KWCAG 2.0 VS. 1.0

2626

KWCAG 2.0 KWCAG 1.0 비 고

1.1 대체 텍스트 1.1 텍스트 아닌 콘텐츠의 인식 동일

1.2 멀티미디어 대체 수단 1.2 영상매체의 인식 동일

1.3 명료성 1.3 색상에 무관한 인식 유사(일부 추가)

2.1 키보드 접근성 2.4 키보드만으로 운용 가능 동일

2.2 충분한 시간 제공 2.6 반응시간의 조절 기능 동일

2.3 광과민성 발작 예방 2.3 깜빡거리는 객체 사용 제한 동일

2.4 쉬운 내비게이션2.2 프레임의 사용 제한 삭제

2.5 반복내비게이션 링크 동일

3.1 가독성 추가

3.2 예측가능성 추가

3.3 콘텐츠의 논리성3.1 데이터 테이블 구성3.2 논리적 구성

동일

3.4 입력 도움 3.3 온라인 서식 구성 추가

4.1 문법 준수 추가

4.2 웹 애플리케이션 접근성 4.1 신기술의 사용 유사(추가)

2.1 이미지 맵 기법 사용제한 삭제

4.2 별도 웹 사이트 구성 삭제

KWCAG 2.0 VS. 1.0

27

KWCAG 2.0 세부내용 - 인식의 용이성

지침(3개) 검사항목(6개)

1.1 (대체 텍스트) 텍스트 아닌콘텐츠에는 대체 텍스트를 제공해야 한다.

1.1.1(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.

1.2(멀티미디어 대체 수단) 동영상,음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체수단을 제공해야 한다.

1.2.1(자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는수화를 제공해야 한다.

1.3(명료성) 콘텐츠는 명확하게전달되어야 한다.

1.3.1(색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이인식될 수 있어야 한다.

1.3.2(명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

1.3.3(텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경간의 명도 대비는 4.5대 1 이상이어야 한다.

1.3.4(배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.

검사항목 1.1.1 (적절한 대체 텍스트 제공)

§ 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.

인식의 용이성 – 1.1 대체 텍스트

<img src=“logo.png”>

<img src=“logo.png” alt=“행안부”

<img src=“logo.png” alt=“행정안전부”

※ 텍스트이미지의 내 을 그 로 체텍스트에

<텍스트이미지>

28

※ 체텍스트를 사 하지 않음

※ 줄임말 등의 체 텍스트는 정확한의미를 전달하지 함

29

<img src="languge.gif" alt="language"

usemap="#language">

<map name="language">

<area alt="English" shape="rect"

coords="10,5,66,19" href="/en/">

<area alt="Korean" shape="rect"

coords="10,17,66,32" href="/ko/">

</map>

<이미지 맵의 대체 텍스트>


<버튼 이미지>

<input type="image" src="btn write.gif" alt="실명확인 및 글쓰기">

30


<막대그래프 이미지>

<img alt="2008년 10월 62,983(억원) : 수도권지역좌수 1,751, 기타지역좌수 931,2008년 11월 63,777(억 원) : 수도권지역좌수 1,745, 기타지역좌수 920,2008년 12월 63,732(억 원) : 수도권지역좌수 1,724, 기타지역좌수 904“src="http://img1.kbstar.com/img/house/graph joiner 090123.gif" />

달이 지구를 공전하는 플래시애니메이션

31

<플래시에서의 대체 텍스트 제공 사례>


액세스 가능성 패널의 이름 항목을 이용하여 대체 텍스트 제공

32

<의미를 제대로 파악할 수 없는 대체 텍스트 제공>


※ 이미지는 반도체 산업 생산규모에 대한 정보를 제공하고 있으나, 대체 텍스트는 “그래프-수출주도형반도체산업”으로제공하여 그래프가 의미하는2004년과 2005년의 반도체 국내 생산규모에 관한 정보를 얻을 수 없음

33

<대체 텍스트를 title 속성만으로 제공한 경우>

<img src=“logo.gif" title="한국정보화진흥원 로고“>


※ ‘title’ 속성은 참고용 제목으로 사용되며 대체 텍스트용은 아님

34


<대체 텍스트가 불충분한 경우>

<img src=“org.gif" alt=“OOO조직도“>

35

<그래프 등 복잡한 이미지에 대한 대체 텍스트 제공 방법>

1) longdesc 속성<p><img src="chart.gif"

alt="중앙기관 웹 접근성 조사결과" longdesc="dest_chart.html"/>

</p>


35

2) 설명문 제공

<p><img src="chart.gif" alt="중앙기관 웹 접근성 조사결과"/></p><P>2008년도 중앙기관의 웹 접근성 조사결과에 따르면 ...

...<p>

※ Longdesc 속성과 같이 별도 설명문 페이지로 이동하는 불편함을 해소할 수 있음

36

3) 이미지 링크 제공

※ 설명문으로 이동하는 링크의 위치와 모양을 다양하게 제공할 수 있는 장점

<p> <a href="chartdesc.html">

<img src="chart.gif" alt="중앙기관 웹 접근성 조사결과"/></a>

</p>

<그래프 등 복잡한 이미지에 대한 대체 텍스트 제공 방법>


37

인식의 용이성 – 1.2 멀티미디어 대체 수단

<동영상에 충실한 원고를 제공한 사례>

검사항목 1.2.1 (자막제공)

§ 멀티미디어 콘텐츠에는 자막,원고 또는 수화를 제공해야 한다.

<동영상의 요약 정보만 제공한 사례>

38


<동영상에 수화와 자막 동시제공 사례>

검사항목 1.2.1 (자막제공)

§ 멀티미디어 콘텐츠에는 자막,원고 또는 수화를 제공해야 한다.

※ 수화와 자막을 동시에제공하는 경우에는 닫힌자막을 제공하는 것이바람직함

39


<음성파일에 원고를 제공한 사례>

40


<화면 해설 없이 영상만 제공>

※ 화면 내용을 설명하는 화면해설을 제공해야 함

41

인식의 용이성 – 1.3 명료성

※ 색은 보조적인 용도로만 사용해야 함

검사항목 1.3.1(색에 무관한 콘텐츠 인식)

§ 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.

42


※ 색상을 배제하고서도 구분할 수 있도록 무늬(□△○▤▥▦ 등)를 이용하여 색 이외의 방법으로도 구분이 가능해야 함

<콘텐츠를 색만으로 구분할 수 있는 경우>

"윈도를 닫으려면 상단의동그란 빨간 버튼을 클릭“

“윈도를 닫으려면 창 닫기 버튼(왼쪽 상단 첫 번째 동그란빨간 버튼)을 선택”

43


검사항목 1.3.2(명확한 지시 사항 제공)

§ 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계 없어인식될 수 있어야 한다.

44


<시각장애인이 접근 가능한 예>

§ 전송 버튼을 누르시오

<form action="http://... " ><input type=submit value=전송/>

</form>

<청각장애인이 접근 가능한 예>

§ (정답)딩동뎅~<img src=“O.gif”/>

§ (오답)삐삐삐~<img src=“X.gif”/>

45


<시각장애인이 접근 불가능한 예>

§ 동그란 버튼을 누르시오.

§ 큰 버튼을 누르시오.

§ 우측 상단 버튼을 누르시오.

§ 붉은색 버튼을 누르시오.

<청각장애인이 접근 불가능한 예>

§ (정답)딩동뎅~, (오답)삐삐삐~

※ 모양, 크기, 위치, 색 등으로만 지시하면 인식이 불가능함

è 반드시 용도를 알 수있는 방법을 동시에 제공해야 함

※ 소리로만 지시하면 인식이 불가능함

è 반드시 시각적인 방법을 동시에 제공해야 함

46


검사항목 1.3.3(텍스트 콘텐츠의 명도 대비)

§ 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야한다.

전경색/배경색 대비 평가도구들

47


• Colour Contrast Check(snook.ca)http://www.snook.ca/technical/colour_contrast/colour.html

• Colour Contrast(Juicy Studio)http://juicystudio.com/services/luminositycontrastratio.php

• Colour Contrast Analyzer(Colors on the web)http://www.colorsontheweb.com/colorcontrast.asp

• Contrast Analyser(The Paciello Group)http://www.paciellogroup.com/resources/contrast-analyser.htmlWindows/MAC Application.

Colour Contrast Analyzer 활용법

1. Colour Contrast Analyzer를 실행한다.

2. 검증하고자 하는 텍스트 콘텐츠와 배경에 색 선택포인터(Colour Picker) 아이콘을 선택한다.

3. 텍스트는 전경색으로 선택하고, 배경은 배경색으로선택한다.

4. Contrast ratio의 값이 해당 비율 값이며, 자동으로 pass와 Fail로 구분해준다. 이 때의 결과가명료성에 해당된다.

48


49


※ 자동으로 배경음악이 재생되면 화면낭독 프로그램 사용자에게 불편을 줌

è 사용자가 선택할 때에 비로소 배경음이 플레이 되도록해야 함

검사항목 1.3.4(배경음 사용 금지)

§ 자동으로 재생되는 배경음을 사용하지 않아야 한다.

<페이지가 로딩되면 배경음이 자동으로 재생되는 경우>

50


<배경음이 정지 상태로 제공되는 경우>

§ 배경음 재생시간이3초 미만인 경우나,

§ 배경음을 정지 상태로제공하고 배경음 제어방법을 제공하는 경우

51


<마우스 오버/키보드 초점을 받으면 자동으로 배경음이 실행되는 경우>

52


2.1(키보드 접근성) 콘텐츠는 키보드로 접근할 수 있어야 한다.

2.1.1(키보드 사용 보장) 모든 기능은 키보드만으로도사용할 수 있어야 한다.

2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

2.2(충분한 시간 제공) 콘텐츠를읽고 사용하는 데 충분한 시간을제공해야 한다.

2.2.1(응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

2.2.2(정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

2.3(광과민성 발작 예방) 광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한다.

2.3.1(깜빡임과 번쩍임 사용 제한) 초당 3~50회의 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

2.4(쉬운 내비게이션) 콘텐츠는쉽게 내비게이션할 수 있어야 한다.

2.4.1(반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은건너뛸 수 있어야 한다.

2.4.2(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

2.4.3(적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

KWCAG 2.0 세부내용 – 운용의 용이성

운용의 용이성 – 2.1 키보드 접근성

53

< 키보드로 일부 링크로의 이동이 불가능한 사례 >

검사항목 2.1.1(키보드 사용 보장)

§ 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

※ 컨트롤, 링크, 사용자입력 등은 키보드 내비게이션으로 초점이동이 불가능함

è 기능 실행이 불가능하므로 반드시 사용자가 사용하는 기능은 키보드로 초점이동이 가능해야 함


54

< 키보드로 메뉴를 건너뛰어 바로 아이디와 비밀번호로 이동하는 경우 >

<input type="submit" onfocus="this.blur()">

<a onfocus="this.blur()" href="Page.html">공지사항</a>

< 키보드로 초점을 이동할 수 없도록 구현한 사례 >

※ 링크 이미지의 초점 표시를 없애기 위해 onfocus=“this.blur()”를 제공한 경우 키보드로 초점을 이동할 수 없음

è 링크 이미지의 초점 표시를 없앨 필요가 없음

55


< 키보드 초점 이동 순서가 논리적인 사례 >

검사항목 2.1.2 (초점 이동)

§ 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

56


< 초점을 받은 콘텐츠가 시각적으로 구분되는 경우 >

운용의 용이성 – 2.2 충분한 시간 제공

57

< 일정시간(3초) 이후에 따라 자동으로 페이지가 변경되는 사례 >

※ 시간제한내에 사용자가 작업을 종료하지 못할 수 있음

è 시간제한을 해제하거나, 연장할 수 있도록 구현해야 함

검사항목 2.2.1 (응답 시간 조절)

§ 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

58

운용의 용이성 – 2.2 충분한 시간 제공

<시간제한이 있는 콘텐츠에 사용자의 제어기능 제공>

검사항목 2.2.2 (정지 기능 제공)

§ 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

※ 자동으로 변경되는 콘텐츠는 움직임이 느린사용자가 이용할 수 없음

è 사용자가 조작할 수 있는 컨트롤을 제공함

59

운용의 용이성 – 2.3 광과민성 발작 예방

<연속적 움직임이 있는 플래시 또는 동영상 콘텐츠>

검사항목 2.3.1 (깜빡임과 번쩍임 사용 제한)

§ 초당 3~50회의 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

60


<깜빡임이나 번쩍임이 전혀 없는 외국 방송사의 웹 사이트>

<그림 4)> 깜빡임 콘텐츠가 많은 페이지

61


<애니메이션 포켓몬 사례>

<그림 4)> 깜빡임 콘텐츠가 많은 페이지

※ 1997년 일본의 유명 애니메이션 ‘포켓몬스터’의 38번째 에피소드인 ‘전능전사 포리곤’의 한 장면에서 빨간색과 파란색이 교대로 반복되는 섬광 장면이 수분간 지속되자 TV로 이를 시청하던 어린이 685명이 발작을 일으켰으며 그 중 150여 명은 병원에 입원한 바 있음. 일본에서는 어린이들의발작 원인으로 애니메이션의 섬광 이미지로 인한 광과민성 발작 현상으로 결론내고 관련 업계와 방송국에 주의 조치를 내린 바 있음

운용의 용이성 – 2.4 쉬운 내비게이션

62

<메뉴를 건너뛸 수 있게 건너뛰기 링크를 제공한 경우>

검사항목 2.4.1 (반복 영역 건너뛰기)

§ 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

※ 3개 보다 많은 건너뛰기 링크는 도리어 불편함을 증가시키므로 주의해야 함


63

건너뛰기 링크 제공여부 점검 방법

§ CSS를 제거하여 화면에 건너뛰기 링크를 보이도록 한후에 육안으로 평가ú Firefox에서 보기(View) à 문서 스타일(Page Style) à 스타일

제거(No Style) 에서 CSS 제거 선택

§ HTML 코드상에서 건너뛰기 링크를 확인

64


<페이지를 구분할 수 있는 페이지 제목 제공>

※ 매 페이지 마다 고유한 제목을 제공하여 분별할 수 있도록 해야 함

검사항목 2.4.2 (제목 제공)

§ 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

65


<페이지 제목이 동일한 사례>

<그림 8)> 페이지 타이틀이 모두 동일한 경우

※ 화면 낭독 프로그램은 서로 다른 페이지를 로딩할 때에도 “페이지 제목Mozilla Firefox”이라고 읽어주므로 어느 페이지를 선택했는지 알 수 없음

è 페이지 별로 제목을 달리해야 함

<그림 12)> 페이지 타이틀에 특수문자 사용

66


<그림 8)> 페이지 타이틀이 모두 동일한 경우

※ 페이지 제목에 의미 없는 기호를 많이 사용함

è 의미 없는 기호를 반복적으로 사용하지 않고, 간결한 제목을 사용함

<특수문자를 제목에 사용하는 사례>

<그림 12)> 페이지 타이틀에 특수문자 사용

67


<각 프레임을 구분할 수 있는 간단 명료한 tltle 속성 제공>

※ 모든 프레임은 title 속성을 제공해야 함. 빈 프레임에도 반드시 title 속성을제공해야 화면 낭독 프로그램 사용자의 탐색 실수를 방지할 수 있음

<frameset>

<frame title=“메인메뉴”/>

<frameset>

<frame title=“서브메뉴”/>

<frame title=“콘텐츠 본문”/>

</frameset>

</frameset>

68

보다 자세한 내용을 보시려면 <a href="here.html">여기</a>를 클릭하세요.

보다 자세한 내용을 보시려면 <a href="guide.html">사이트 이용 방법</a>을 확인하세요.


검사항목 2.4.3 (적절한 링크 텍스트)

§ 링크 텍스트는 용도나 목적은 이해할 수 있도록 제공해야 한다.

KWCAG 2.0 세부내용 – 이해의 용이성

69


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(오류 정정) 입력 오류를 정정할 수 있 는 방법을제공해야 한다.

이해의 용이성 – 3.1 가독성

70

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ko"> <head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="ko"> <head>

< HTML 4.0 표준에서의 언어표시(한국어)>

< XHTML 1.0 표준에서의 언어표시(한국어)>

검사항목 3.1.1 (기본언어 표시)

§ 주로 사용하는 언어를 명시해야 한다.


71

언어 언어 코드 언어 언어 코드

중국어(Chinese) zh 일본어(Japanese) ja

독일어(German) de 한국어(Korean) ko

영어(English) en 러시아어(Russian) ru

불어(French) fr 스페인어(Spanish) es

※ 출처 : 공식 언어 코드(ISO 630) 목록

http://www.loc.gov/standards/iso639-2/php/code_list.php

< 언어별 언어표시(ISO 표준)>

72

< 중간에 언어가 바뀌는 경우>


<p>중국어로는 “안녕하세요”라고 인사할 때에 <span lang=“zh”> </span>라고 말합니다. </p>

※ 페이지에서 외국어를 사용하는 경우에도 이 부분에 해당 언어를 명시해야화면 낭독 프로그램이 해당 언어를 알맞게 읽어줄 수 있음

73

이해의 용이성 – 3.2 예측 가능성

< 매인 페이지에서 팝업 창을 사용한 경우 >

※ 메인 페이지에서 팝업 창/레이어 팝업창을 사용하면 사용자에게 혼란을 주게됨

è 사용자가 선택하지않은 어떤 팝업 창도사용하지 않아야 함

검사항목 3.2.1 (사용자 요구에 따른 실행)

§ 사용자가 의도하지 않은 기능 (새 창, 초점변화 등)은 실행되지 않아야 한다.

74


< 닉네임 입력 박스를 클릭하면 자동으로 새 창이 발생하는 경우 >

< 체크상자 선택만으로 값이 제출되어 콘텐츠가 바뀌는 경우 >

체크 상자를 선택하는 것만으로 페이지의 내용이 바뀌는 경우

75


< 사용자에게 새 창이 열림을 명시적으로 알려 줌>

대체 텍스트 “새 창 열기”를 제공

76


< 키보드를 이동에 의한 페이지 자동 변경 사례 >

< 사용자가 클릭 또는 엔터 키 입력시에 페이지가 이동하도록 버튼 제공 >

77

이해의 용이성 – 3.3 콘텐츠의 논리성

※ CSS를 제거하고 선형화 했을 때 콘텐츠 배치 순서에 잘못이 있으면 비논리적인 순서로 간주함

검사항목 3.3.1 (콘텐츠의 선형화)

§ 콘텐츠는 논리적인 순서로 제공해야 한다.

< 선형화가 잘못된 사례 >


78

제목 영역 : <th>

내용 영역 : <td>

검사항목 3.3.2 (표의 구성)

§ 표는 이해하기 쉽게 구성해야 한다.

※ 올바른 표의 구현방법

1. 표는 요약과 캡션을 제공해야 함

2. 헤더와 셀이 명확히 구분될 수 있어야 함


79

<table class="data" summary=“부산지

역의 3일간의 일기예보로, 날씨와 예상기

온과 강수확률 정보를 제공">

<caption>부산지역의 3일간 일기예보

</caption>

검사항목 3.3.2 (표의 구성)

§ 표는 이해하기 쉽게 구성해야 한다.

80

이해의 용이성 – 3.4 입력 도움

< 온라인 서식에 레이블을 제공한 경우 >

검사항목 3.4.1 (레이블의 제공)

§ 입력 서식에는 대응하는 레이블을 제공해야 한다.

<label for="uid">아이 </label>

<input type="text" id="uid" >

<label for="upw">비 호</label>

<input type="password" id="upw" >

※ 입력서식(텍스트 입력 상자, 라디오 버튼, 체크 상자 등)의 레이블은 해당 입력 서식과 대응되어야 함

검사항목 3.4.2 (오류 정정)

§ 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

81

이해의 용이성 – 3.4 입력 도움

< 오류를 정정할 수 있도록 경고메시지를 보여주는 경우 >

※ 올바른 구현 방법1. 오류가 발생하였

음과 그 원인을알려줌

2. 오류가 발생한 위치로 초점이 이동함

KWCAG 2.0 세부내용 - 견고성

82


4.1(문법 준수) 웹 콘텐츠는 마크업언어의 문법을 준수해야 한다.

4.1.1(마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

4.2(웹 애플리케이션 접근성) 웹 애플리케이션은 접근성이 있어야 한다.

4.2.1(웹 애플리케이션 접근성 준수) 콘텐츠에 포함된웹 애플리케이션은 접근성이 있어야 한다.

<태그의 열고 닫음>

83

견고성 – 4.1 문법 준수

검사항목 4.1.1 (마크업 오류 방지)

§ 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에오류가 없어야 한다.

웹 접근성은 인터넷에 <strong>경사로<strong>를 만

드는 것이다.

웹 접근성은 인터넷에 <strong>경사로</strong>를 만

드는 것이다.

태그의 열고 닫음 오류


<태그의 중첩 관계>

84

<p>중첩관계가 <strong>명확해야 한다.</p></strong>

<p> 중첩관계가 <strong>명확해야 한다.</strong></p>

태그의 중첩관계 오류

<id속성 값>

85


<div id="header"> ... </div><div id="content"> ... </div>

...<form ...>

...<textarea id="content" name="content"></textarea>

...</form>

...<script type="text/javascript">

function validateForm() {...

var el = document.getElementById('content');if (el.value) {

...}

...}

</script>

※ id=content가 두곳에서 정의되어정상적인 동작이불가능함

è 서로 상이한 id를사용하도록 수정해야 함

<W3C 마크업 유효성 검사>

86


※ 출처: http://validator.w3.org/

87

견고성 – 4.2 웹 애플리케이션 접근성

< 대표적인 웹 애플리케이션 >

1. Ajax, JavaScript2. Flash, Flex, Silverlight3. Java 애플릿

검사항목 4.2.1 (웹 애플리케이션 접근성 준수)

§ 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

※ 신기술의 정확한 구현 방법1. 자체적인 접근성을 지원하고, 화면 낭독 프로그램의 API를 이용하되,

API 동작을 설정(on-off)할 수 있도록 함2. 자체적인 접근성을 지원하고, 대체 수단을 제공함

88


< 플러그인을 사용하지 않을 때, 기능을 사용할 수 있는 대체 수단 제공 사례>

89


< 웹 애플리케이션과 대체 콘텐츠의 선택기능을 제공한 사례 >

90


자체적인 접근성 준수 및 대체 콘텐츠 제공 점검 방법

< 자체적인 접근성 준수 검검 방법 >

※ 플러그인을 설치하고 화면 낭독 프로그램 등 보조기술을 사용할 때에 키보드의 이상현상, 보조기술의 이상현상이 발생하면 해당 플러그인은 자체적인 접근성을 만족하지 않는 것으로 분류함

※ 웹 애플리케이션은 UI Spy, UIA Verify와 같은 소프트웨어 접근성 평가 도구를 이용하거나 화면 낭독 프로그램을 이용하여 평가함

91


자체적인 접근성 준수 및 대체 콘텐츠 제공 점검 방법

※ 환경설정(Preference) > 고급설정(Advanced) > 콘텐트(Content) > 해당 플러그인사용(Enable plug-ins)에서 체크를 해제하면 플러그인 기능을 사용할 수 없게 되어 웹 애플리케이션의 기능이나 대체콘텐츠를 제공여부를 확인할수 있음.

< 오페라 브라우저에서 플러그인의 대체 수단 확인 방법 >

92


웹 애플리케이션을 구현 도구 별 접근성 제공방법에 관한 정보

● Best Practices for Accessible Flash Design http://www.adobe.com/resources/accessibility/best_practices/best_practices_acc_flash.pdf

● Flex accessibility http://www.adobe.com/accessibility/products/flex/

● UI Automation and Microsoft Active Accessibility http://msdn.microsoft.com/en-us/library/ms788733.aspx

● Silverlight Accessibility Overview http://msdn.microsoft.com/en-us/library/cc707824(VS.95).aspx

● Java Accessibility Helper Early Access v0.8 http://java.sun.com/developer/earlyAccess/jaccesshelper/

● Accessible Explorerhttp://msdn.microsoft.com/en-us/library/ms696082.aspx

93

웹접근성품질마크

장애인 및 고령자가 웹 사이트 이용에 불편이

없도록 웹 접근성 표준지침을 준수한 우수 사

이트에 대해 웹 접근성 수준을 인정하고 이를

상징하는 품질 마크를 부여하는 인증제도

의 화

웹 접근성 품질마크개념

94

95

웹 근 고

배경웹 접근성 품질마크

웹 접근성을 향상하기 위한 국가적인 노력이 계속되고 있으나국내 대부분 사이트의 웹 접근성 수준은 매우 낮음

공공기관에서 조차도 웹 접근성이 선진국들에 비하여 낮아 공공기관이 제공하는 중요 정보도 접근이 어려운 실태

웹 접근성 품질마크심사절차

인증심사

사전심사

결과확인

신청접수

온라인신청

신청인

인증기관

접수완료

인증심의

인증완료

인증서수령

이의제기

수수료납부

자가진단 95%이상 수

웹 접근성 품질마크회차별 신청건수

97

건

50건

100건

150건

200건

250건

300건

350건

400건제

1회

제2회

제3회

제4회

제5회

제6회

제7회

제8회

제9회

제10회

제11회

제12회

제13회

제14회

제15회

2007년 2008년 2009년 2010년 2011년

웹 접근성 품질마크인증 통계

40123

579666 657

15 4395

280 297

0

200

400

600

800연도

신청사이트 수

인증사이트 수

합격률

2007년 40 15 37.50%

2008년 123 43 34.96%

2009년 579 95 16.41%

2010년 666 280 42.04%

2011년 657 297 45.21%

합계 2065 730 35.35%

35.35%평균


K-WAH로 95%의 준수율을 지켰는데 품질마크 심사 불합격?

K-WAH는 웹 접근성 지침의 항목에 따라 설정된 95개의 Rule에 따라기계적으로 점검할 수 있는 도구

예) 대체텍스트 항목의 경우 <alt> 태그의 존재여부만 판단적절성은 육안으로 판단

타 항목도 마찬가지의 변수가 존재

품질마크는 전체 수동으로 심사하므로 K-WAH로 95%이상 준수한 결과와 다르며, 심사기법은 [웹 접근성 연구소 - 자료실 - 동향 및 연구자료 - 389번 웹 접근성 점검매뉴얼(수정)]을 참고

99

FAQ


AS IS

직렬 심사(사전-전문가-사용자)

평균 97일(분기접수)

직접 심사

핵심콘텐츠 연동 인증

TO BE

병렬 심사(전문가 & 사용자)

평균 30일(월별접수)

위탁 심사

중요서비스 인증 후 메인 인증

100

향후개선방향

위의 내용은 계획사항으로 사정에 따라 변동될 수 있음

101

금융권 이슈

금융권 이슈

102

구분 내용

금융감독원보안성 심의 기본

4대 기준

① 데이터송수신 암호화② 키보드보안③ 개인방화벽④ 백신프로그램

오픈뱅킹 심의통과기준

- 보안성 심의 기본 4대 기준 중에서 키보드보안프로그램은 ActiveX 이외 멀티OS와 멀티 Browser 제공이 되지 않음.

- 키보드보안 프로그램 대체로 가상키보드+OTP 사용을 전제로 심의통과 기준 마련함.

가상키보드 + OTP

금융권 이슈

103


위반항목

2.1.1(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야한다.

내용

- 오픈뱅킹에 적용하는 가상키보드는 기존의 윈도우 기반의 인터넷뱅킹에서사용하던 키보드보안 프로그램의 대체 기능을 제공하는 것으로써, 금융감독원에서 멀티 OS와 브라우저를 지원하는 오픈뱅킹에 적용하도록 한 것임.

- 가상키보드의 적용대상 : 계좌비밀번호, 이체비밀번호, OTP비밀번호 적용.- 웹 접근성 측면에서 가상키보드는 키보드의 접근이 안 되는 이슈가 있음.

개선방안

웹 접근성을 제공할 해결방안 : OS를 체크하여 Windows인 경우 가상키보드를 선택적으로 사용하게 하고 키보드보안 프로그램을 적용 가능함. Mac OS와 리눅스는 가상키보드 필수적용.

□ 가상키보드 적

금융권 이슈

104


- OTP(One-Time Password) : 전자금융서비스의 이체 등 중요한 거래에

사용하는 해킹방지용 비밀번호 생성카드로 사용시마다 새로운 비밀번

호가 생성되어 외부노출이나 해킹 등의 위험으로부터 안전하게 서비

스 이용 가능한 보안매체가상키보드의 적용대상 : 계좌비밀번호, 이체

비밀번호, OTP비밀번호 적용.

- 음성을 지원하는 시각장애인용 OTP 제품 부재

- 아무리 웹 접근성을 준수한다 하더라도 최종적으로 서비스 이용 불가

□ OTP

금융권 이슈

105

중요사항에 대한 새창 안내

위반항목

3.2.1(사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.

내용

- 금융감독원에서 은행이 고객에게 중요한 사항에 대한 고지를 지시한것을 프로세스상 꼭 확인해야만 하도록 만든 것을 새창 공지사항으로 제공

ex) 보안카드 교체발급 안내 등

개선방안

논의 중

□ 사 자 정보에 른 새창

금융권 이슈

106

자동로그 아웃

위반항목

2.2.1 (응답 시간 조절) 시간 제한이 있는 콘텐츠는 응답시간을 조절할수 있어야 한다.

내용

- 금융감독원 지시사항에 의해 5~10분 동안 서비스 이용이 없을 시 자동 로그아웃됨

- 국민은행 : 10분, 신한은행 : 10분, 우리은행 : 9분, 하나은행 : 5분- 1분전에 로그인 연장여부 확인 메시지창이 제공되지만 포커스가 이

동되지 않아서 시각장애인과 키보드를 이용하여 시간 제한을 연장할수 없음

개선방안

포커스가 이동되도록 하여 키보드 사용이 가능하도록 함

□ 5~10 동안 서비스 이 이 없을 시 자동 로그아

금융권 이슈

107

서버번호 표시

위반항목

2.4.2 (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

내용- Head 안의 title에 서버의 기호명을 표기하여 오류가 발생하면 장애

가 발생한 서버를 찾기 용이하도록 하고 있음

개선방안

[서버 접속번호 – ㅇㅇㅇ]로 표기

□ 페이지의 제 에 서 구 을 위한 호 표시

금융권 이슈

108

기타이슈

□ 타 이슈

- Ajax 기술을 통한 데이터 갱신

- 전문을 가져오기 위한 한글 아이디 및 아이디 중복

- 보안솔루션 설치 및 인터넷 연결 허용 차단 확인 불가 등

Q & A

109

은행연합회 발표자료

Documents

Transcript of 은행연합회 발표자료