숙명여대정책산업대학원 (4.2) 웹접근성의이해및추진전략 한국정보문화진흥원 접근기획팀현준호

Similar documents
성균관대학교시스템경영공학과 (6.2) 웹접근성이해및지침소개 한국정보화진흥원 웹접근성지원부현준호

1. 들어가기 축구 웹 축구를잘하려면, 기본은? 체력이좋아야지요!! 1

CSS Design Korea( ) 웹콘텐츠접근성지침 2.0 개요 한국정보화진흥원 정보접근지원부현준호책임 현준호

untitled

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor

Windows 8에서 BioStar 1 설치하기

PG 605 워크숍 [ ) 모바일접근성 (Mobile Accessibility] 한국정보화진흥원현준호책임 Twitter 현준호

vRealize Automation용 VMware Remote Console - VMware

Microsoft Word - ijungbo1_13_02

View Licenses and Services (customer)

..,. Job Flow,. PC,.., (Drag & Drop),.,. PC,, Windows PC Mac,.,.,. NAS(Network Attached Storage),,,., Amazon Web Services*.,, (redundancy), SSL.,. * A

Microsoft PowerPoint - XP Style

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

한국정보통신표준 KICS.OT /R1 제정일 : 2010 년 12 월 31 일 한국형웹콘텐츠접근성지침 2.0 Korean Web Content Accessibility Guidelines 2.0 방송통신위원회

src.hwp

슬라이드 1

PowerPoint 프레젠테이션

슬라이드 1

장애인건강관리사업

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

PowerPoint Template

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

Microsoft PowerPoint - 권장 사양

Web Scraper in 30 Minutes 강철

슬라이드 1

<4D F736F F D20284B B8F0B9D9C0CF20BED6C7C3B8AEC4C9C0CCBCC720C4DCC5D9C3F720C1A2B1D9BCBA2020C1F6C4A720322E302E646F6378>

서현수

Endpoint Protector - Active Directory Deployment Guide

포맷

성능 감성 감성요구곡선 평균사용자가만족하는수준 성능요구곡선 성능보다감성가치에대한니즈가증대 시간 - 1 -

목차 윈도우드라이버 1. 매뉴얼안내 운영체제 (OS) 환경 윈도우드라이버준비 윈도우드라이버설치 Windows XP/Server 2003 에서설치 Serial 또는 Parallel 포트의경우.

IRISCard Anywhere 5

미쓰리 파워포인트

Visual Studio online Limited preview 간략하게살펴보기

Microsoft PowerPoint - mobileAppAccessibilityGuidelines_Korea.pptx

Windows Live Hotmail Custom Domains Korea

PowerPoint 프레젠테이션

소개 Mac OS X (10.9, 10.10, 10.11, 10.12) 와 OKI 프린터호환성 Mac OS X 를사용하는 PC 에 OKI 프린터및복합기 (MFP) 제품을연결하여사용할때, 최고의성능을발휘할수있도록하는것이 OKI 의목 표입니다. 아래의문서는 OKI 프린터및

PDF_Compass_32호-v3.pdf

02.전체교육과정안내서 (김종혁)

PowerPoint 프레젠테이션

PowerPoint Presentation

KDTÁ¾ÇÕ-2-07/03

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

Model Investor MANDO Portal Site People Customer BIS Supplier C R M PLM ERP MES HRIS S C M KMS Web -Based

KPS-19MA-1.hwp

Windows 10 General Announcement v1.0-KO

Javascript

PowerPoint 프레젠테이션

Studuino소프트웨어 설치

untitled

SchoolNet튜토리얼.PDF

슬라이드 제목 없음

슬라이드 1

C스토어 사용자 매뉴얼

38이성식,안상락.hwp

미디어 및 엔터테인먼트 업계를 위한 Adobe Experience Manager Mobile

슬라이드 1

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

15_3oracle

PowerPoint Presentation

- 2 -


TTA Journal No.157_서체변경.indd

PowerPoint 프레젠테이션

설치 순서 Windows 98 SE/Me/2000/XP 1 PC를 켜고 Windows를 시작합니다. 아직 컴퓨터에 프린터를 연결하지 마십시오. 2 PC에 P-S100 CD-ROM(프 린터 드라이버)을 삽입합니다. 3 설치 프로그램을 시작합니다. q CD-ROM의 PS1

PowerPoint 프레젠테이션

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS

2009방송통신산업동향.hwp

제8장 자바 GUI 프로그래밍 II

SBR-100S User Manual

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

쉽게 풀어쓴 C 프로그래밍

Microsoft PowerPoint 웹 연동 기술.pptx

Xcrypt 내장형 X211SCI 수신기 KBS World 채널 설정법

XE 스킨 제작 가이드

1809_2018-BESPINGLOBAL_Design Guidelines_out

con_using-admin

Microsoft Word - 07길연희특집) 차수정

구대환 (134~153)97.PDF

untitled

SQL Developer Connect to TimesTen 유니원아이앤씨 DB 기술지원팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 작성자

160322_ADOP 상품 소개서_1.0

ICT À¶ÇÕÃÖÁ¾

DW 개요.PDF

쏘니표지

08SW

<A4B5A4C4A4B5A4BFA4B7A4B7A4D1A4A9A4B7A4C5A4A4A4D1A4A4A4BEA4D3A4B1A4B7A4C7A4BDA4D1A4A4A4A7A4C4A4B7A4D3A4BCA4C E706466>

<4D F736F F F696E74202D C61645FB3EDB8AEC7D5BCBA20B9D720C5F8BBE7BFEBB9FD2E BC8A3C8AF20B8F0B5E55D>

월간 CONTENTS 3 EXPERT COLUMN 영화 점퍼 와 트로이목마 4 SPECIAL REPORT 패치 관리의 한계와 AhnLab Patch Management 핵심은 패치 관리, 왜? 8 HOT ISSUE 2016년에 챙겨봐야 할 개인정보보호

슬라이드 제목 없음

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드]

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

1

1701_ADOP-소개서_3.3.key

10방송통신서비스_내지최종

슬라이드 1

14 경영관리연구 제6권 제1호 ( ) Ⅰ. 서론 2013년 1월 11일 미국의 유명한 경영전문 월간지 패스트 컴퍼니 가 2013년 글로벌 혁신 기업 50 을 발표했다. 가장 눈에 띄는 것은 2년 연속 혁신기업 1위를 차지했던 애플의 추락 이었다. 음성 인식

Transcription:

숙명여대정책산업대학원 (4.2) 웹접근성의이해및추진전략 2008. 4 한국정보문화진흥원 접근기획팀 Jhyun22@kado.or.kr

Question???? 웹접근성에대해궁금한 사항이무엇입니까?

1. 들어가기 사상누각 ( 沙上樓閣 ) 모래위에집을짓듯이기초를든든하게하지않으면아무리잘짓고정성을들여도금방무너져노력이허사가되고만다는뜻 경영, 투자, 스포츠등모든부문에서 기본과원칙준수가매우중요 Web 의기본과원칙은? 표준화 & 접근성 1

1. 들어가기 -2 < 서울대이상묵교수 > 장애인에게필요한것은줄기세포가아니라현실적인정보기술 (IT) 참고자료 : YTN : 장애인차별없는 IT 세상, 2008 년 3 월 12 일 http://www.ytn.co.kr/_comm/pop_mov.php?s_mcd=0105&s_hcd=&key=200803121052149079 2

1. 들어가기 -3 u 시각장애인의실제인터넷사용애로점!!! 질의 답변 3

1. 들어가기 -4 q 시각장애인현금카드로 850 만원꿀꺽 ( 연합뉴스, 2004 년 8 월 2 일 ) 1 급시각장애인심모 (23) 씨가술값 30 만원을찾아달라고부탁하며준 현금카드로인근편의점에서 26 차례에걸쳐 850 만원을인출 q 대구은행, 시각장애인인터넷뱅킹이용불허 ( 연합뉴스, 2005 년 7 월 7 일 ) 시각장애인이기때문에인터넷뱅킹가입이불가능하다.. 시각장애인은 대신음성서비스인폰뱅킹이체거래를이용하면된다.. 장애인도비장애인과동등하게이용할수있는환경조성필요 4

1. 들어가기 -5 출처 : 한국장애인고용촉진공단, http://www.kepad.or.kr/info_center/multi_data/movie.jsp# 장애인은단지비장애인과의사소통, 컴퓨터, 인터넷, 을다른방법으로하는사람이다!!! 장애를느끼지않는 IT 환경구축필요 5

2. 우리가생각하지않는것들!! 수면아래, 보이지않는곳에서는무엇이일어나는가?? 화면 (Presentation) 이외의구조 (Structure), 소스를 다른사람, 기계가알도록만들었는가?? 6

2. 우리가생각하지않는것들!! -2 오른쪽은생각해보았는가? 7

2. 우리가생각하지않는것들!! -2 보다많은사람을!!! 보다많은환경에서!! 어르신 하나의 제품과서비스로 무거운짐을 어린이 장애인 왼손잡이 환자 장갑을착용 미끄러운손 ( 비누등 ) 어둡거나시끄러울때 여성 8 흑백프린터 ( 흑백복사기 )

2. 우리가생각하지않는것들!! -3 당신이그림을볼수없는환경에있다면? 당신이이미지를검색할때기계는무엇으로인식할까? 외국어로된동영상을보는경우자막이없다면? 당신이마우스를사용할수없는환경에있다면? 당신이흑백프린터로웹페이지를인쇄한다면? 3 1 2 9

2. 우리가생각하지않는것들!! -4 주민등록발급일자가반드시필요한가!! 10

2. 우리가생각하지않는것들!! -5 u 웹사이트사용이불가능할경우, 퀴즈는어떻게참가..!! 11

3. 웹접근성이란? 웹접근성제고 = 인터넷상의경사로를만들어주자 다리가아플때 축구, 등산을하고난뒤 무거운짐을들고다닐때등 키보드를활용하지못할때 저사양컴퓨터, 모뎀등통신환경이좋지않을때 시끄러운환경에놓여일을때동영상보기등 12

3. 웹접근성이란? -2 Components of Web Accessibility * 출처 : http://www.w3.org/wai/intro/components 13

3. 웹접근성이란? -3 웹접근성준수시효과 (Thatcher et. al., 2002) 장애인, 노인등을포함한다양한범위의이용자확대새로운장소, 새로운기기등이용상황의확대디자인및설계에있어서의효율성제고 비용절감의효과홍보효과 v 웹접근성보장을통해장애인, 노인등신규고객확보가능 v 일반인의홈페이지이용접근성또한증대 v 자연환경, 주변환경 ( 공항, 공사장등 ) 에구애없이인터넷접근가능 v 다양한정보통신기기 (PDA, Mobile 등 ) 에구애없이인터넷접근가능 v 검색엔진의색인과정, 사이트개편, 다국어버전등사이트개편및신규제작시편의성증대 v 장기적관점에서사이트운영비용감소 v 법제도개선시 ( 접근성의무화 ) 추가제작불필요 v 장애인, 노인등을위한서비스제공에따라기업이미지제고에도움 14

3. 웹접근성이란? -4 Case : 점자 (Braille) 이미지를찾고싶을때 ( 08 년 1 월검색결과 ) 국내사례 (Bad) 해외사례 (Good) 야후코리아, 영문사이트에서점자, Braille 로이미지를검색한결과, 우리나라의경우의미없는이미지만검색된반면, 영문사이트에서점자이미지가검색되어나타남 15

4. 웹접근성표준현황 1) Web Content Accessibility Guidelines 1.0(WCAG) (W3C Recommendation 5-May-1999) 2) Authoring Tool Accessibility Guidelines 1.0(ATAG) (W3C Recommendation 3 February 2000) 3) User Agent Accessibility Guidelines 1.0(UAAG) 2005 년부터 WCAG, UAAG 2.0 개발추진 & ARIA(Accessibility Rich Internet Applications) 표준추진 (W3C Recommendation 17 December 2002) 16

4. 웹접근성표준현황 -2 2000년재활법 508조세부기준마련 ( 웹은 16개지침 ), 2001년 6월부터효력 1194.21 Software applications and operating systems 1194.22 Web-based intranet and internet information and applications http://www.section508.gov/index.cfm?fuseaction=content&id=12 http://teitac.org/wiki/teitac_wiki 2006 년 7 월부터개정작업추진중 17

4. 웹접근성표준현황 -3 2004 년웹접근성국가표준 (JIS) 제정 (9 개세부지침으로구성 ) 18

5. 우리나라의웹접근성표준화현황 웹접근성을 인터넷웹콘텐츠접근성 지침 (KICS.OT 10.0003, 2005 년 ) 고려한콘텐츠 장애인, 접근성을고려한 웹저작도구 한국형웹저작도구접근성지침 1.0 (TTAS.OT 10.0074, 2006 년 ) 접근성을고려한 사용자에이전트 한국형사용자에이전트접근성지침 (TTAS.OT 10.0073, 2006 년 ) 노인등모두가함께하는인터넷환경구축 웹접근성기반조성 ( 표준, 교육, 실태조사, 품질마크등 ) 19

6. 인터넷웹콘텐츠접근성지침개요 인터넷웹콘텐츠접근성지침개발개요 u 개발기간 : 2003. 9 월 ~ 12 월 u 개발자 : 김석일교수 ( 충북대학교 ) 외 4 인 & KADO u 참고지침 : 미국재활법 508 조기준 & W3C WAI WCAG 1.0 TTA 단체표준으로상정하여, 2005 년 12 월국가표준 (KICS) 으로채택 인터넷웹콘텐츠접근성지침주요구성 u 구성 : 4개지침 14개세부항목 u 4개지침 - 인식의용이성 (Perceivable), 운용의용이성 (Operable), 이해의용이성 (Understandable), 기술적진보성 (Robust) 20

7. 지침 1( 대체텍스트 ) 1 텍스트아닌콘텐츠의인식 텍스트아닌콘텐츠중에서글로표현될수있는모든콘텐츠는해당콘텐츠가 가지는의미나기능을동일하게갖추고있는텍스트로도표시되어야한다. 사례 1 : 이미지에대한대체텍스트제공 모든이미지에대해화면낭독프로그램이인지할수있도록대체텍스트를제공 예 ) <img src="/kr/images/home/banner_visit2.jpg" alt=" 청와대관람 "> 사례 2 : 의미없는이미지에대한대체텍스트 화면낭독프로그램이잘못된정보를제공하지않도록의미없는이미지에도대체 텍스트제공 예 ) <img src="placeholder.gif" alt=""> 21

7. 지침 1( 대체텍스트 ) -2 u 지침준수전략 1 : Do right image right!! - 이미지용도에맞게이미지를사용하자 ( 확대시애로 ) - 의미를잘설명할수있는이미지를선택하여사용하자 부적절한사례 Recommendation 22

7. 지침 1( 대체텍스트 ) -3 u 지침준수전략 2 : 명쾌하고짧은대체텍스트를제공하자!! (Provide Clear & Short alt-text) - 링크, 여기, 클릭 등의단어는사용하지말자 - ~ 하십시요, ~ 됩니다 등친절한 (?) 설명을자제하고짧 게 - 사진 1, 사진 2, 사진 3 등무의미한대체텍스트를지양 - 파일명을대체텍스트로제공하지마라!! 이미지를보지못하고텍스트만을듣는다고생각해보라!!! 23

7. 지침 1( 대체텍스트 ) -4 u 지침준수전략 3 : 신규 & 이용자가올리는이미지에대한 대체텍스트제공방안마련 - 대체텍스트를제공해야이미지업로드가능하도록!! u 지침준수전략 4 : 보안, 메일링서비스, 회원가입인증등 부가서비스시에도대체텍스트를제공!! - 부가서비스제공시대체텍스트제공을고민하라!! 24

7. 지침 1( 대체텍스트 ) -5 잘못된사례 Recommendation 음성으로서비스제공 25

7. 지침 1( 대체텍스트 ) -6 26

7. 지침 1( 대체텍스트 ) -7 평가방법 정보통신접근성향상표준화포럼 http://www.iabf.or.kr/ Firefox Web Developer extension https://addons.mozilla.org/firefox/60/ 27

7. 지침 2( 동영상캡션제공 ) 2 영상매체의인식 시간에따라변화하는영상매체는해당콘텐츠와동기되는대체매체를제공해야한다 사례 1 : IBM 홈페이지 ( 동기화된캡션제공 ) 사례 2 : 도움나라홈페이지 ( 동기화된캡션및수화제공 ) 28

7. 지침 2( 동영상캡션제공 ) -2 u 지침준수전략 1 : 모든동영상에캡션을제공하라! - 캡션은영상매체나음향매체와동기되어야함 - 영상정보와캡션을동시에접해야만콘텐츠를인식할수있도록만들어서는안됨 29

7. 지침 2( 동영상캡션제공 ) -3 u 지침준수전략 2 : Client측동영상플레이어에서작동되도록동영상을제공하라 - 웹사이트제공자가형태로제공되는동영상제공지양 부적절한사례 Recommendation 30

7. 지침 2( 동영상캡션제공 ) -4 Best Practices 사용자동영상플레이어선택대본제공 ( 스페인어까지..) 31

7. 지침 3( 색상에무관한인식 ) 3 색상에무관한인식 콘텐츠가제공하는모든정보는색상을배제하더라도인지할수있도록구성해야한다 사례 1 : ** 청홈페이지 ( 색깔만으로정보제공 ) 사례 2 : Jim Thatcher 홈페이지 ( 색깔과특수문자 (*) 동시제공 ) X 32

7. 지침 3( 색상에무관한인식 ) -2 u 지침준수전략 1 : 색상만으로정보를제공하지말자!! 부적절한사례 당신이흑백프린터로출력한다면?? 33

7. 지침 3( 색상에무관한인식 ) -3 부적절한사례 34

7. 지침 3( 색상에무관한인식 ) -4 u 지침준수전략 2 : 전경-배경과의고대비를고민하자!! - 회색톤의글씨체를지양하자!! - 고대비를생각하자!! ( 흑백으로프린할경우 ) 35

7. 지침 3( 색상에무관한인식 ) -5 Best Practices 36

7. 지침 3( 색상에무관한인식 ) -6 평가방법 후지쯔 Color Doctor ( 색맹시험 ) http://design.fujitsu.com/en/universal/assistance/colordoctor/download.html Vischeck http://www.vischeck.com/vischeck/vischeckimage.php 37

7. 지침 4( 이미지맵 ) 4 이미지맵기법사용제한 이미지맵기법이필요한경우에는클라이언트측이미지맵을사용하며서버측이미지 맵을사용할경우에는동일한기능을하는텍스트로구성된대체콘텐츠를제공해야함 Austria Australia etc. Belgium Belize etc. USA etc. <a href="cgi-bin/countries/database"> <img src="worldmap.gif" alt="world Map" ISMAP /></a> <br /> <a href="austria.html">austria</a> <a href= "australia.html">australia</a> etc. 38

7. 지침 4( 이미지맵 ) -2 부적절한사례 39

7. 지침 5( 프레임사용제한 ) 5 프레임사용제한 콘텐츠를구성하는프레임의수는최소한으로하며, 프레임을사용하는경우에는프레임별로제목을붙여야한다 사례 1 : ** 부홈페이지 (+:+: 라는의미없는의미지사용 ) X 사례 2 : Yahoo 홈페이지 ( 프레임별제목을제공함 ) 메인페이지 Movie 페이지 검색 (Internet) 페이지 40

7. 지침 5( 프레임사용제한 ) -2 1. 웹접근성자동평가도구를통한점검 - KADO-WAH 이용 (100% 달성 ) 2. 적절한프레임제목을부여하였는지평가할것!! - 개발사에서자동평가도구만을통과하도록많이제작함 - 페이지소스에서 <frmae> 또는 <iframe> 등을찾아, 프레임에적합한 <title> 을제공하는지파악할것!! 3. 프레임은한페이지에서 4 개이상사용하지않는것이바람직 4. 페이지별로이동해서페이지타이틀이변하는지를파악할것 41

7. 지침 6( 깜빡이는객체사용제한 ) 6 깜박거리는객체사용제한 콘텐츠는스크린의깜박거림을피할수있도록구성되어야한다 웹콘텐츠에는애니메이션등과같이깜박거리는주파수의범위가 3 Hz 에서 49 Hz 사이인콘텐츠요소들을포함하지않아야한다 만일위의조건을만족할수없을경우에는이페이지에깜박거림이있음을사전에사용자에게경고해주여야한다. 또한스크린의깜박거림이배제된대체페이지를별도로제공해야한다한곳에집중하기어려운사람, 광과민성발작증세등이혼란없이웹콘텐츠에접근함 42

7. 지침 6( 깜빡이는객체사용제한 ) -2 o 웹콘텐츠에는애니메이션등과같이깜박거리는회수가 1 초에 3 번에서 49 번되는것은없는지를살펴보아라!! o 페이지소스에서 <blink>, <marquess> 와같은태그를사용하지않는지? < 참고사이트 > 깜박임을파악할수있는사이트 http://ncam.wgbh.org/richmedia/media/flicker_demo.html http://www.webaccessibile.org/test/check.aspx 43

7. 지침 7( 키보드만으로운용가능 ) 7 키보드만으로운용가능 키보드 ( 또는키보드인터페이스 ) 만으로도웹콘텐츠가제공하는모든기능을수행할수있어야한다 사례 1 : 조선일보홈페이지 ( 자동으로이동 ) X 사례 2 : Apple 홈페이지 (Tab 키로모든정보에접근가능 ) 44

7. 지침 7( 키보드만으로운용가능 ) -2 o tab 키를이용하여모든기능에접근할수있는지를파악!! - <shift> + <tab> 로거꾸로이동할수있는지를파악!! O 온라인서식등순서가제대로가는지를파악할것!! 부적절한사례 45

7. 지침 8( 반복네비게이션링크 ) 8 반복네비게이션링크 웹콘텐츠는반복적인네비게이션링크를뛰어넘어 페이지의핵심부문으로직접이동할수있도록구성하여야한다 웹콘텐츠상에반복적네비게이션링크 사례 1 : CNN 홈페이지 ( 뉴스로바로이동 ) 개체가포함되어있으며, 이링크객체가콘텐츠의핵심부문보다먼저읽어주도록구성된경우에는이들링크들의읽기를생략하고직접콘텐츠의메인부문으로직접이동할수있도록링크를제공 46

7. 지침 8( 반복네비게이션링크 ) -2 Recommendation 47

7. 지침 9( 반응시간의조절기능 ) 9 반응시간의조절기능 실시간이벤트나제한된시간에수행하여야하는활동등은사용자가시간에구애받지않고읽거나상호작용을하거나응답할수있어야한다 웹콘텐츠시간제약조건이최소한아래조건을만족해야함 - 사용자가시간제한기능을동작하지않도록할수있거나, - 일반적으로사람들이선호하는시간의 10배이상으로제한시간을늘릴수있도록 - 주어진시간이종료하기전에경고를말하며, 제한시간을늘리기위해최소한 10초이상시간이주어질수있어야함 48

7. 지침 10( 데이터테이블 ) 10 데이터테이블구성 데이터테이블은테이블을구성하는데이터셀의 내용에대한정보가충분히전달될수있어야한다 사례 1 : IBM 홈페이지 사례 2 : 정보통신사이버대학 머릿글에는 id, 내용에는 headers 속성을이용해머릿글과내용을 적절하게짝지은표의예 머릿글에머릿글이미치는 범위 (scope) 를명시함으로써 내용과적절히짝지은표예 49

7. 지침 10( 데이터테이블 ) -2 어느것이좋을까요?? B A 50

7. 지침 11( 논리적구성 ) 11 논리적구성 콘텐츠의모양이나배치는논리적으로이해하기쉽게구성하여야한다 문서의모양이나콘텐츠의배치를 위해서는스타일시트 (Style Sheet) 를사용하여야한다 사례 1 : CSS Zen Garden 홈페이지 (CSS 사용예 ) 배치용테이블을사용하여콘텐츠의모양이나배치를할경우에는모든셀들을왼쪽상단에서오른쪽하단에이르는순서대로늘어놓았을때도그내용을충분히이해할수있도록한다 51

7. 지침 12( 온라인서식 ) 12 온라인서식구성 온라인서식을포함하는콘텐츠는서식작성에필요한정보, 서식구성요소, 필요한기능, 작성후제출과정등서식과관련한모든정보를제공해야한다. 사례 1 : ** 대홈페이지 X 텍스트필드에 <label> 을짝지어 놓지않아어떤필드가어떤역할을 하는지알기어려움. 해결방안 1. 텍스트필드에는적절한식별자 (id) 를, 그식별자에맞는 label을반드시제공 2. 키보드를이용해정확한순서대로값을입력할수있도록 tabindex= 값 제공 52

7. 지침 12( 온라인서식 ) -2 부적절한사례 53

7. 지침 13( 신기술의사용 ) 13 신기술의사용 스크립트, 애플릿또는플러그인등과같은프로그래밍요소들은현재의보조기술의수준에서 이들프로그래밍요소들의내용을사용자에게전달해줄수있을경우에만사용해야한다 콘텐츠를나타내기위해혹은인터페이스요소를만들기위해스크립트 언어를이용하는경우에는스크립트에의해제공되는중요한정보는 최신의보조기술을이용해접근가능해야한다 애플릿, 플러그인혹은다른응용프로그램을이용하여웹콘텐츠를 구성하였을때에는이들프로그램요소에의해제공되는중요한정보는 보조기술을이용해읽을수있어야한다 54

7. 지침 13( 신기술의사용 ) -2 부적절한사례 Javascript Flash ActiveX 55

7. 지침 14( 별도웹사이트제공 ) 14 별도웹사이트제공 콘텐츠가항목 1 에서 13 에이르는 13 개검사항목을만족하도록최대한노력하였으나, 해결되지않는부문이남아있다면 텍스트만의콘텐츠를제공하는웹페이지 ( 또는웹사이트 ) 를별도로제공해야한다 사례 1 : 미백악관홈페이지 ( 일반홈페이지 & 텍스트전용홈페이지 ) Text-Only Homepage 56

7. 지침 14( 별도웹사이트제공 ) -2 부적절한사례 이미지가있는텍스트페이지 57

7. 지침 14( 별도웹사이트제공 ) -2 일반웹사이트에비해턱없이부족한시각장애인용사이트!!! 부적절한사례 58

8. 외국기업들의접근성제고활동 1. Microsoft(http://www.microsoft.com/enable/) - Microsoft 접근성사명 (Commitment) 제정 - MSDN (Microsoft Developer Network) 구축및운영 - MSAA (Microsoft Active Accessibility) : MS 운영체제와보조기술과의호환성을보장하기위해접근성관련정보를제공 - MS 운영체제의접근성보장 : 음성및읽기기능, 키보드및마우스기능, 접근성마법사제공 - 보조기술관련최신정보제공 - 사례제공 59

8. 외국기업들의접근성제고활동 60

8. 외국기업들의접근성제고활동 2. IBM(http://www-03.ibm.com/able/index.html) - 접근성이니셔티브지원서비스 : 관련기업및기관에게접근성컨설팅 - 웹접근성가이드라인및사례제공 ( 개발자지침제공 ) - 접근성을고려한교육관리시스템 - 접근성구축사례제공을통한인식제고 1) 아리조나주사례 : 접근성을고려한홈페이지구축 2) 텍사스주의시각장애인학교 : IBM Homepage Reader 이용 3) 캐나다 Saint Mary s University : IBM 음성기술을활용하여교수강의를실시간으로스크린을통해봄 ( 청각장애인 ), 다양한포맷 ( 텍스트, 음성 ) 으로온라인상에서교수의강의를다시접함 ( 시각등 ) 61

8. 외국기업들의접근성제고활동 62

8. 외국기업들의접근성제고활동 3. ORACLE(http://www.oracle.com/accessibility/index.html) 63

8. 외국기업들의접근성제고활동 4. BEA (http://www.bea.com/content/news_events/white_papers/bea_section508_v5.pdf) 64

8. 외국기업들의접근성제고활동 5. 후지쯔 (http://www.fujitsu.com/global/accessibility/) http://www.fujitsu.com/downloads/us/gnd/web-accessibility-guide.pdf 65

9. 웹접근성제고방안 1 철저한 AS-IS 분석 & 사내인식제고 q 자사웹사이트, 제품에대한접근성평가실시 o 소프트웨어접근성지침, 재활법 508조기준에따른접근성준수평가 o 시각, 지체등의장애인대상핸디소프트제품테스트실시 o 마이크로소프트에서개발한것을제외한브라우저 (Firefox, Opera, Safari) 및운영체제 (Mac, 리눅스 ) 에서가능여부평가 q 접근성 R & D 추진 o 국내외지침분석, 개발방법등에대한 R & D q 웹접근성평가, 캠페인개최 66

9. 웹접근성제고방안 2 접근성정책 (Policy) 수립 q 접근성정책수립 예제 ) OO000 는장애인들의웹접근성제고를위해 한국형웹콘텐츠 접근성지침 1.0 을준수하여홈페이지를제작운영함 OOOO 제품은장애인접근성제고를위해소프트웨어접근성지침, 미국재활법 508 조 Section 508 조소프트웨어지침을준수하여개발 67

9. 웹접근성제고방안 Best Practices 68

9. 웹접근성제고방안 3 웹접근성조직구성 q 접근성조직구성 - 장애인테스터를 1명만이라도고용해보자!!! (Yahoo, Microsoft, IBM 등 ) - 접근성, 보편적설계 (Universal Design) 조직을구성하자 q 역할 - 자사 IT 제품및서비스접근성실태의주기적파악 - 자사 IT 제품및서비스개발시접근성고려사항제시 - 사내접근성제고를위한제반활동수행 ( 홍보, 교육등 ) - 접근성관련기술표준화, 기술개발, 동향파악등 69

9. 웹접근성제고방안 4 관련기관과의유기적협력체계구축 q 장애인단체, 연구기관, 보조기술개발업체와유기적협력체계구축 - Microsoft, IBM, Amazon 등다양한기업에서관련기관과협력추진 대상장애인단체보조기술개발업체연구기관 협력분야 o 제품및서비스이용자모니터 o 장애인요구 (Needs) 파악등 o 호환성테스트및기술정보교환 o 공동기술개발등 o 접근성관련표준화및기술개발 o 접근성관련정보교류등 70

9. 웹접근성제고방안 Best Practices 71

9. 웹접근성제고방안 5 사회공헌활동 (CSR) 으로서의접근성추진 q 생색내기식사회공헌에서벗어나, 자사의제품과서비스를장애인, 노인등을위해개발하는프로젝트수행필요 - 사회공헌을비용 (Cost) 측면이아니라투자 (Investment) 로보자!! u 사회공헌활동 (CSR) 에새로운시각 (Porter, 2006, HBR) 1) 비즈니스와사회와별개 à 상호관련이있는관점으로전환필요 2) 사회공헌에만초점을맟춤 à 사회공헌을기업의전략과연계필요 3) 기부금, 활동등 input 에만초점 à CSR 을통한사회적영향에초점 72

9. 웹접근성제고방안 Best Practices 73

10. Rethinking the web 1 모습보다는콘텐츠 (Contents) 에집중하자!!! ü 웹은정보를교환하는공간이다!! ü 모두가쉽게이해할수있는콘텐츠를제공하라!! 74

10. Rethinking the web 2 수면아래를신경쓰자, Machine Helps You!! ü 웹표준을준수하여웹사이트를제작하자!! ü 선형화 (linearize), 검색엔진최적화, 새로운기술과호환성확보필요!! 75

10. Rethinking the web 3 고객은신기술보다는사용하기쉬운웹을?? ü 고객이진정으로원하는것에대해보다깊은고민필요 ü 사용하기쉬운웹 (Easy of Use) 을신경쓰자!! 76

11. 결론 접근성 비용인가? vs 투자인가?? 77

11. 결론 Back to the Basic 장애인, 노인등모든사람이 (Possible) Universal Design Accessibility 손쉽게이용하며 (Easy) Usability 원하는것을빨리 (Fast) 할수있는웹사이트로 Customer Satisfaction 78

11. 결론 ü Web(IT) for everyone ü Cooperation between developer and users 같이 (Together) 접근성 [ 가치 ] 가치 (Value) ü Think Different à Innovation à Making $$$$ ü Corporate (Individual) Social Responsibility ü Machine (Technology) helps you 79

감사합니다 문의처 : jhyun22@kado.or.kr http://jhyun.wordpress.com/