웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

51
현준호 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 지침 2.0을 중심으로 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 지침 2.0을 중심으로 한국정보화진흥원 현 준 호 책임 ([email protected] , Twitter : @jhyun22 http://jhyun.wordpress.com/ ) 서울대 서울대 중앙전산원 중앙전산원 강의 강의[2011. 1. 18) [2011. 1. 18) 서울대 서울대 중앙전산원 중앙전산원 강의 강의[2011. 1. 18) [2011. 1. 18)

Upload: joon-ho-hyun

Post on 27-Jun-2015

1.819 views

Category:

Documents


5 download

DESCRIPTION

한국형 웹 콘텐츠 접근성 2.0에 대한 개괄적인 소개 자료입니다.

TRANSCRIPT

Page 1: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호

웹 접근성의 이해- 한국형 웹 콘텐츠 접근성 지침 2.0을 중심으로

웹 접근성의 이해- 한국형 웹 콘텐츠 접근성 지침 2.0을 중심으로

한국정보화진흥원 현 준 호 책임

([email protected], Twitter : @jhyun22�

http://jhyun.wordpress.com/)

서울대서울대 중앙전산원중앙전산원 강의강의[2011. 1. 18)[2011. 1. 18)서울대서울대 중앙전산원중앙전산원 강의강의[2011. 1. 18)[2011. 1. 18)

Page 2: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호1

1. 1. 들어가기들어가기1. 1. 들어가기들어가기

축구를잘하려면,�기본은?

축구 ≒�웹

체력이좋아야지요!!

Page 3: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호2

1. 1. 들어가기들어가기1. 1. 들어가기들어가기

좋은웹이될려면,�기본은 ?

축구 ≒�웹

표준과접근성을지켜야지요!!

Page 4: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호3

1. 1. 들어가기들어가기1. 1. 들어가기들어가기

축구에서는체력이,

웹에서는표준및접근성준수없이는

최고의선수

최고의웹사이트가될수는없지요!!�

축구 ≒�웹

Page 5: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호4

1. 1. 들어가기들어가기1. 1. 들어가기들어가기

ü지하철에서언제부터휠체어장애인을보았는가?

ü우리의잘못된질문 :�정보시스템과웹및 IT를 장애인이이용하는가?�

몇 명이장애인,�어르신고객이에요 ?�우리 시스템은장애인,�어르신이

사용하지않아요,�그런데도접근성을지켜야하나요 ?�����������������������������

물리적공간(지하철)처럼,�편의시설(접근성)이 갖추어져야지만장애인,�어르신 등이 IT를 이용할 수있음물리적공간(지하철)처럼,�편의시설(접근성)이 갖추어져야지만장애인,�어르신 등이 IT를 이용할 수있음

물리적공간(지하철)물리적공간(지하철)

가상의공간(IT)가상의 공간(IT)

Page 6: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호5

2. 2. 접근성이란접근성이란??2. 2. 접근성이란접근성이란??

My�Web

(���?���)�WayNot�Developer�&�Operators,�

But�My

누구를위한웹?

Page 7: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호6

1. 1. 들어가기들어가기1. 1. 들어가기들어가기

My�Web�My�Wayhttp://www.bbc.co.uk/accessibility/http://www.bbc.co.uk/accessibility/

Page 8: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호7

2. 2. 접근성이란접근성이란??2. 2. 접근성이란접근성이란??

Web�For�All누구를위한웹?

출처 :�http://www.w3.org/Consortium/mission

보다많은 환경

보다많은 사람

Page 9: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호8

2. 2. 접근성이란접근성이란??2. 2. 접근성이란접근성이란??

전세계 인구의 10%�(6억 5천만명)

미국 인구 중 5천 4백만명,�19%

우리나라 약 2백 4십만명

어떤 계층일까요??( 출처 :�UN�ENABLE�Websites,�http://www.un.org/disabilities/default.asp?id=18 )

( 출처 :�미국 통계국,�

http://www.census.gov/newsroom/releases/archives/facts_for_features_special_editions/cb10-ff13.html )

장애인

Page 10: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호9

1. 1. 들어가기들어가기1. 1. 들어가기들어가기

장애인은단지비장애인과

의사소통,�컴퓨터,�인터넷,�…을

다른방법으로하는사람이다 !!!�

장애를느끼지않는 IT�환경구축필요장애를느끼지

않는 IT�환경구축필요

출처 :�한국장애인고용공단,�https://www.kead.or.kr/view/info_center/info_center02_03_01.jsp?gotopage=2&gubn=001&change=�

Page 11: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호10

2. 2. 접근성이란접근성이란? ? 2. 2. 접근성이란접근성이란? ? 보조기기

보조기기(Assistive�Technology)란?

정보통신보조기기체험관:�http://at4u.or.kr/ http://abledata.com/

Page 12: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호11

2. 2. 접근성이란접근성이란??2. 2. 접근성이란접근성이란??

장애인/노인의

이용도

웹접근성 개선을위한 추가비용(1유로 1,800원 기준)

2% 5% 15% 30%

5%287,079,790유로

(5,167억원)

250,694,590유로

(4,512억원)

129,410,592유로

(2,329억원)

-52,515,405유로

(-945억원)�손실

10%598,416,379유로

(1조 771억원)

562,031,180유로

(1조 116억원)

440,747,181유로

(7,933억원)

258,821,184유로

(4,658억원)

20%1,221,089,558유로

(2조 1,979억원)

1,184,704,358유로

(2조 1,324억원)

1,063,420,360유로

(1조 9,141억원)

881,494,363유로

(1조 5,866억원)

※�출처 :�유럽연합(Commission�of�the�European�Communities),�Accessibilityof�ICT�products�and�services�to�disabled�and�older�people,�2008.�11�

※�주 :�전자정부사이트를장애인/노인 등이연 2회 이용한다고가정함

http://ec.europa.eu/information_society/newsroom/cf/itemdetail.cfm?item_id=4722

경제적효과

Page 13: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호12

2. 2. 접근성이란접근성이란??2. 2. 접근성이란접근성이란??

Components�of�Web�Accessibility�(WAI,�Wendy)

ContentsContents

DevelopersDevelopers UsersUsers

- Technical�Specification

- Contents�

- Tools

Technical�ComponentsTechnical�Components

- Contents�producers

- End-users�

- Tool�developers

Human�ComponentsHuman�Components

Evaluation�ToolsAuthoring�Tools

Browsers,�media�playersAssisitive�Technologies

Accessibility�Guidelines

ATAG,�WCAG,�UAAGTechnical�Spec

(HTML,�XML,�CSS,�SVG,�SMIL,�etc..)

출처 :�http://www.w3.org/WAI/EO/Drafts/slides/components.html

Page 14: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호13

2. 2. 접근성이란접근성이란??2. 2. 접근성이란접근성이란?? 핵심개념

Equivalent

동등한접근 보장 필요 (동일한 접근은 아님)

보는방법이다른사람및환경 ­ 시각장애인 등

듣는방법이다른사람및환경­ 청각장애인 등

입력방법이다른사람및환경 ­ 지체장애인 등

Page 15: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호14

2. 2. 접근성이란접근성이란??2. 2. 접근성이란접근성이란?? 관련동영상

http://www.wah.or.kr/Accessibility/publicity.asp http://www.wah.or.kr/Accessibility/blind1.asp

http://www.wah.or.kr/campaign/contents/movie.asp동

영상

Page 16: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호15

3. 3. 한국형한국형 웹웹 콘텐츠콘텐츠 접근성접근성 지침지침 2.02.03. 3. 한국형한국형 웹웹 콘텐츠콘텐츠 접근성접근성 지침지침 2.02.0

표준명및제정일자 :�한국형웹 콘텐츠접근성지침 2.0�

(KICS.OT-10.0003/R1,�2010년 12월 31일)

구성 :�4개 원칙,�13개 지침,�22개 검사항목

- 원칙(4개)�:�인식의 용이성(Perceivable),�운용의 용이성

(Operable),�이해의 용이성(Understandable),�견고성(Robust)

- 지침(13개)�:�대체 텍스트,�멀티미디어대체수단등 13개

- 검사항목(22개)�:�적절한 대체텍스트제공등총 22개

Page 17: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호16

3. 3. 한국형한국형 웹웹 콘텐츠콘텐츠 접근성접근성 지침지침 2.0 2.0 –– 1.01.0과과 비교비교3. 3. 한국형한국형 웹웹 콘텐츠콘텐츠 접근성접근성 지침지침 2.0 2.0 –– 1.01.0과과 비교비교

(신기술반영)�기존 HTML�중심에서 Flex,�Sliverlight�등 웹 개발관련

신기술추가

(국제표준적용)�W3C�WCAG�2.0�국제표준을국내실정에맞게선별적으로

적용(중요도 1항목은모두적용,�중요도 2항목일부적용)

※�WCAG(Web�Content�Accessibility�Guidelines)�2.0은 12개 지침으로구성,�검사항목

중요도에따라 중요도 1,�2,�3으로 구분.�미국과 호주등에서는 중요도 2까지 준수의무화

(적용 및 이해도향상)�지침별검사항목(22개)�및 실 적용사례를구체적으로

제공(코딩방법등)

(기존지침과의연계)�1.0과 동일한원칙을활용하였으며,�최대한기존의

표준과의연계성을높이도록구성하여혼란을최소화

Page 18: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호17

3. 3. 한국형한국형 웹웹 콘텐츠콘텐츠 접근성접근성 지침지침 2.0 2.0 –– 1.01.0과과 비교비교3. 3. 한국형한국형 웹웹 콘텐츠콘텐츠 접근성접근성 지침지침 2.0 2.0 –– 1.01.0과과 비교비교

대체텍스트캡션및대체수단명료성(색상대비,�배경음등)

인식의용이성(Perceivable)

웹접근성 2.0�개요 :�POUR�

가독성및이해용이성

예측가능성

오류예방및정정

이해의용이성(Understandable)

키보드이용보장충분한시간보장깜빡임배제

검색가능성제고(skip,�page�title�등)

운용의용이성(Operable)

현재와미래기기에서의호환성최대화

견고성(Robust)

Page 19: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호18

4. 4. 인식의인식의 용이성용이성4. 4. 인식의인식의 용이성용이성

지침(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(배경음 사용 금지) 자동으로 재생되는 배경음을 사용하

지않아야 한다.

Page 20: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호19

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

점검항목

1.1.1

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

있도록대체텍스트를제공해야한다.

시각장애인,�검색엔진등텍스트아닌콘텐츠(이미지등)을 볼 수없을때 !!

Page 21: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호20

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

회원가입등에캡차(CAPTCHA)�등 흘려쓴글씨 ?�

뉴스레터(이메일 등)의 접근성제고방안 ?�

Page 22: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호21

4. 4. 인식의인식의 용이성용이성 –– 1.2 1.2 멀티미디어멀티미디어 콘텐츠콘텐츠4. 4. 인식의인식의 용이성용이성 –– 1.2 1.2 멀티미디어멀티미디어 콘텐츠콘텐츠

점검항목

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

청각장애인등음성을들을수없을때 (시끄러운환경및조용한환경 !)

위반사례 :�동등하지 않은 요약정보제공

유투브사례 :�UCC�캡션 자막 서비스

안내

준수사례 :�동등한 원고 제공

준수사례 :�동등한 자막 제공

준수사례 :�

동등한 자막 및 수화제공

http://www.google.com/support/youtube/bin/answer.py?hl=kr&answer=100079

Page 23: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호22

4. 4. 인식의인식의 용이성용이성 –– 1.3 1.3 명료성명료성4. 4. 인식의인식의 용이성용이성 –– 1.3 1.3 명료성명료성

점검항목

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

Page 24: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호23

4. 4. 인식의인식의 용이성용이성 –– 1.3�1.3�명료성명료성4. 4. 인식의인식의 용이성용이성 –– 1.3�1.3�명료성명료성

점검항목

1.3.2

(명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관

계없이인식될수있어야한다.

시각장애인,�청각장애인등은어떻게지시사항을인식할수있을까 ?�

- 작성한서식을제출하려면

빨간색버튼을누르시오.

- 음성으로만)�시험 종료 1분

남았습니다.

- 다음 페이지로이동하려면오른쪽

버튼,�이전 페이지로이동하려면

왼쪽버튼을누르시오

Page 25: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호24

4. 4. 인식의인식의 용이성용이성 –– 1.3 1.3 명료성명료성4. 4. 인식의인식의 용이성용이성 –– 1.3 1.3 명료성명료성

점검항목

1.3.3

(텍스트 콘텐츠의 명도대비) 텍스트 콘텐츠와 배경 간의명도 대비는 4.5대 1

이상이어야한다.

http://juicystudio.com/services/luminositycontrastratio.php

http://www.snook.ca/technical/colour_contrast/colour.html

본문콘텐츠로한정

- 단순히장식목적으로만사용한텍스트,

- 로고 또는상호와같은텍스트이미지,�

- 마우스나키보드를활용하여초점을받았을때

색이나명도대비가변화하는콘텐츠,�등 제외

http://www.fujitsu.com/downloads/US/GND/web-accessibility-guide.pdf

Page 26: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호25

4. 4. 인식의인식의 용이성용이성 –– 1.3 1.3 명료성명료성4. 4. 인식의인식의 용이성용이성 –– 1.3 1.3 명료성명료성

점검항목

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

Page 27: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호26

4. 4. 운용의운용의 용이성용이성4. 4. 운용의운용의 용이성용이성

지침(4개) 검사항목(8개)

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(적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해

할수 있도록제공해야 한다.

Page 28: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호27

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

점검항목

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

주소창에서부터 Tab키와 Shift+Tab키를이용해볼것 !

http://ckeditor.com/

Page 29: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호28

4.�4.�운용의운용의 용이성용이성 ­­ 2.1�2.1�키보드키보드 접근성접근성4.�4.�운용의운용의 용이성용이성 ­­ 2.1�2.1�키보드키보드 접근성접근성

점검항목

2.1.2

(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구

별할수있어야한다.

키보드초점은논리적으로제공되어야함

IE�기본(테두리),�Flash�기본(노란색)�등을 숨기지말고시각적구분이가능하도록!

Page 30: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호29

4.�4.�운용의운용의 용이성용이성 ­­ 2.2�2.2�충분한충분한 시간시간제공제공4.�4.�운용의운용의 용이성용이성 ­­ 2.2�2.2�충분한충분한 시간시간제공제공

점검항목

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

Page 31: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호30

4.�4.�운용의운용의 용이성용이성 ­­ 2.2�2.2�충분한충분한 시간시간제공제공4.�4.�운용의운용의 용이성용이성 ­­ 2.2�2.2�충분한충분한 시간시간제공제공

점검항목

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

Page 32: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호31

4.�4.�운용의운용의 용이성용이성 ­­ 2.3�2.3�광과민성광과민성발작발작예방예방4.�4.�운용의운용의 용이성용이성 ­­ 2.3�2.3�광과민성광과민성발작발작예방예방

점검항목

2.3.1

(깜빡임과번쩍임사용제한) 초당 3~50회 주기로깜박이거나번쩍이는

콘텐츠를제공하지않아야한다.

Page 33: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호32

4.�4.�운용의운용의 용이성용이성 ­­ 2.4�2.4�쉬운쉬운 네비게이션네비게이션4.�4.�운용의운용의 용이성용이성 ­­ 2.4�2.4�쉬운쉬운 네비게이션네비게이션

점검항목

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

Page 34: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호33

4.�4.�운용의운용의 용이성용이성 ­­ 2.4�2.4�쉬운쉬운 네비게이션네비게이션4.�4.�운용의운용의 용이성용이성 ­­ 2.4�2.4�쉬운쉬운 네비게이션네비게이션

점검항목

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

로그인프레임

광고프레임

일정프레임

광고프레임

Page 35: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호34

4.�4.�운용의운용의 용이성용이성 ­­ 2.4�2.4�쉬운쉬운 네비게이션네비게이션4.�4.�운용의운용의 용이성용이성 ­­ 2.4�2.4�쉬운쉬운 네비게이션네비게이션

점검항목

2.4.3

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

해야한다.

Page 36: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호35

4. 4. 이해의이해의 용이성용이성4. 4. 이해의이해의 용이성용이성

지침(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(오류 정정) 입력 오류를 정정할 수 있는 방법을 제

공해야한다.

Page 37: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호36

4. 4. 이해의이해의 용이성용이성 –– 3.1 3.1 가독성가독성4. 4. 이해의이해의 용이성용이성 –– 3.1 3.1 가독성가독성

점검항목

3.1.1(기본 언어표시) 주로 사용하는언어를명시해야한다.

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

중국어(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

Page 38: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호37

4.�4.�이해의이해의 용이성용이성 ­­ 3.2�3.2�예측예측 가능성가능성4.�4.�이해의이해의 용이성용이성 ­­ 3.2�3.2�예측예측 가능성가능성

점검항목

3.2.1

(사용자요구에따른실행) 사용자가의도하지않은기능(새 창, 초점 변화

등)은 실행되지않아야한다.

Page 39: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호38

4.�4.�이해의이해의 용이성용이성 ­­ 3.3�3.3�콘텐츠의콘텐츠의논리성논리성4.�4.�이해의이해의 용이성용이성 ­­ 3.3�3.3�콘텐츠의콘텐츠의논리성논리성

점검항목

3.3.1(콘텐츠의선형화) 콘텐츠는논리적인순서로제공해야한다.

위반사례 :�

논리적구성

위반사례

1

2 3 4

<�일반 웹 사이트 >�� <�표현 제거시 웹사이트>��

Page 40: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호39

4.�4.�이해의이해의 용이성용이성 ­­ 3.3�3.3�콘텐츠의콘텐츠의논리성논리성4.�4.�이해의이해의 용이성용이성 ­­ 3.3�3.3�콘텐츠의콘텐츠의논리성논리성

점검항목

3.3.2(표의 구성) 표는 이해하기쉽게구성해야한다.

<table class="data" summary=“부산지역의 3일간

의 일기예보로, 날씨와 예상기온과 강수확률 정보를

제공">

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

제목영역 :�<th>

내용영역 :�<td>

Page 41: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호40

4.�4.�이해의이해의 용이성용이성 ­­ 3.4�3.4�입력도움입력도움4.�4.�이해의이해의 용이성용이성 ­­ 3.4�3.4�입력도움입력도움

점검항목

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

Page 42: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호41

4.�4.�이해의이해의 용이성용이성 ­­ 3.4�3.4�입력도움입력도움4.�4.�이해의이해의 용이성용이성 ­­ 3.4�3.4�입력도움입력도움

점검항목

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

Page 43: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호42

4. 4. 견고성견고성4. 4. 견고성견고성

지침(2개) 검사항목(2개)

4.1(문법 준수) 웹 콘텐츠는 마크

업언어의문법을준수해야한다.

4.1.1(마크업 오류 방지) 마크업 언어의 요소는 열고

닫음, 중첩 관계및속성선언에오류가없어야한다.

4.2(웹 애플리케이션 접근성) 웹

애플리케이션은 접근성이 있어야

한다.

4.2.1(웹 애플리케이션 접근성 준수) 콘텐츠에 포함된

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

Page 44: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호43

4. 4. 견고성견고성 –– 4.1 4.1 문법문법 준수준수4. 4. 견고성견고성 –– 4.1 4.1 문법문법 준수준수

점검항목

4.1.1

((마크업 오류 방지) 마크업 언어의요소는열고 닫음, 중첩 관계 및속성선언

에오류가없어야한다.

<p�요소를여는태그의닫음표시가불명확한문단입니다.</p>�(X)

<p>요소를여는태그의닫음표시가불명확한문단입니다.</p>�(O)

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

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

http://validator.w3.org/

Page 45: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호44

4.�4.�견고성견고성 ­­ 4.2�4.2�웹웹 애플리케이션애플리케이션 접근성접근성4.�4.�견고성견고성 ­­ 4.2�4.2�웹웹 애플리케이션애플리케이션 접근성접근성

점검항목

4.2.1

((웹 애플리케이션접근성준수) 콘텐츠에포함된웹애플리케이션은

접근성이있어야한다.

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[tm]�Accessibility�Helper�Early�Access�v0.8

(http://java.sun.com/developer/earlyAccess/jaccesshelper/)

Accessible�Explorer�

(http://msdn.microsoft.com/en-us/library/ms696082.aspx)

Page 46: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호45

5. 5. 결결 론론5. 5. 결결 론론

One�Web�!!

별도의시각장애인 전용

웹 사이트

Page 47: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호46

5. 5. 결결 론론5. 5. 결결 론론

Early�Stage

기획단계에서부터

접근성고려필요!!

Page 48: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호47

5. 5. 결결 론론5. 5. 결결 론론

Back�to�the�BasicBack�to�the�Basic

장애인,�노인 등 모든 사람이 (Possible)

손쉽게이용하며 (Easy)

원하는것을빨리 (Fast)�할수있는웹사이트로

AccessibilityAccessibilityUniversal�DesignUniversal�Design

UsabilityUsability

Customer�SatisfactionCustomer�Satisfaction

http://www.useit.com/alertbox/

잊지말자,�3개 형용사

Page 49: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호48

5. 5. 결결 론론5. 5. 결결 론론

접근성 ≒�[�가치 ]

가치(Value)

ü Think�Different�à Innovation�àMaking�$$$$

ü Corporate�(Individual)�Social�Responsibility

üMachine�(Technology)�helps�you�

같이(Together)

üWeb(IT)�for�everyone

ü Cooperation�between�developer�and�users

Page 50: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호49

참참 고고참참 고고개발자아카이브 :�웹 접근성구축사례

(항목별우수및 미준수사례제공)

자문서비스 :�온라인으로웹접근성에대한

궁금증을해결할수있는서비스

웹접근성연구소사이트 :�www.wah.or.kr

Page 51: 웹 접근성의 이해 - 한국형 웹 콘텐츠 접근성 2.0을 중심으로

현 준 호

정보접근지원부현준호책임([email protected], 02-3660-2577)

http://jhyun.wordpress.com/

감사합니다감사합니다감사합니다감사합니다