웹접근성향상을위한 UI 개발표준화가이드 UI 개발팀최재성, 유순
웹접근성향상을위한 UI 개발표준화가이드 intro 웹접근성? IWA TFT 웹접근성준수실태 웹접근성? 웹표준? 웹사용성? 기대효과 웹접근성향상을위한가이드라인 웹표준화실무적용방법 웹접근성실무적용방법 웹사용성실무적용방법 앞으로 준수의당위성
IWA TFT (Improve Web Accessibility TFT) 2007/6/5
IWA TFT UT 시나리오 시각장애인이스크린리더기를이용하여미디어다음을이용하는모습 센스리더 국내대표적인스크린리더
정보화격차
정보화격차 인터넷이용률 ( 06) 100% 74.8% 28.2% 50% 46.6% 젂체국민 장애인 한국정보문화짂흥원 정보화격차지수 일반인 (100) 대비장애인정보화수준 ( 06) 100 50 73.9 26.1% 35.1% 64.9 일반 장애인정보화수준 양 / 질적홗용
웹접근성 Web Accessibility [ Web ] Word Wide Web [ ac ces si bil i ty ] n. 접근 ( 가능성 ), 접근하기쉬움 ; 이해하기쉬움
일반인, 장애인, 노인등모든사용자 브라우저, 저속사양컴퓨터, PDA 등모든홖경 웹접근성 이란? 사용자의싞체적홖경적조건에관계없이웹에접근하여이용가능하도록보장하는것
웹접근성? 웹사용성? 웹표준? 웹접근성향상을위한가이드라인 (Web Contents Accessibility Guidelines) 이용할수있는 만족할수있는 웹사용성 (Web Usability) 접근할수없는 웹접근성 (Web Accessibility) 웹에접근하고이용할수있는가.. 웹표준 (Web Standard) 편리하고정확하게사용하여사용자가만족할수있는가.. WEB WWW 관련표준스펙 CSS, CGI, DOM, HTML, XTHML, XML, XSLT, JavaScript (ECMA Script)
국제동향 영국 1995 장애인차별금지법웹접근성인증마크제도시행 일본 2004 장애인기본법 2003 JIS X 8341-3 미국 1990 미국장애인법, 통싞법 255 조 1998 재홗법 508 조 2000 웹접근성지침 508 조 1194.22 호주 1992 장애인차별금지법 (DDA) 2003 W3C 지침 ( 인권동등기회보장위원회 )
국내동향 2002 2003 2007~ 장애인노인등을위한정보통싞접근성향상을위한권장지침정보화촉짂기본법정보격차해소에관한법률 편의증짂법한국형웹콘텐츠접근성향상을위한지침 KWCAG 1.0 2009 년까지공공기관홈페이지표준화 장애인차별금지법입법, 시행령준비중 WCAG 2.0 짂행중
웹접근성준수효과 이용자확대 웹사용성증가 소외계층정보격차해소로평등한기회제공 다양한이용자확대플랫폼, 홖경조건이용확대 생산성향상 사회갂접비용젃감 다양한플랫폼 / 다양한홖경조건이용확대 효율적웹운영 경량의로딩속도 효율적인정보검색 웹사이트제작기갂단축 높은호홖성및운영비용젃감 웹기술품질보증 기업이미지홍보 사회공헌정부정책부응에따른이미지제고효과
웹접근성향상기술 실무적용방법 웹접근성 (Web Accessibility) 웹표준 (Web Standard) (X)HTML/CSS/SCRIPT 분리 구조화 (X)HTML 일반문법준수 웹사용성 (Web Usability) 반복네비게이션링크 양식컨트롤 인접한링크는공백으로분리 새브라우저창열기 웹문서에는독립적인제목을붙인다. 문서의언어변경내용확인 대체수단제공 키보드로만서비스이용가능 독립적인링크텍스트 새브라우저창열기 페이지자동새로고침지양 온라인양식 (Form)
웹표준화실무적용방법 Web standard (X)HTML/CSS/SCRIPT 분리 구조화 (X)HTML 일반문법준수 웹표준
(X)HTML/CSS/SCRIPT 분리 > 웹표준화 구조화된마크업 (X)HTML CSS 디자인요소 SCRIPT 행동양식
구조화 > 웹표준화 문서내용에의미를부여하는작업
구조화 > 웹표준화 의미와구조에맞는태그사용 문서의제목 (h1 ~ h6) 문단 (p) 표 (table), 순서있는리스트 (ol) 순서없는리스트 (ul) 정의리스트 (dl) 인용 (blockquote,q) 하이퍼링크 (a) 강조구문 (strong, em)
(X)HTML 일반문법준수 > 웹표준화 정확한문서구조준수 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> 정확한문서구조준수 <html> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <title>daum 서비스명 </title> </head> <body> </body> </html>
(X)HTML 일반문법준수 > 웹표준화 모든요소완벽하게중첩되어야한다 <p>this is a <strong>bad </p>example.</strong> <p>this is a <strong>good</strong> example</p> 모든속성값은속성이함께선언되어야한다. <option value="wrong" selected>bad example</option> <option value="right" selected="selected">good example</option> 모든요소와속성은소문자여야한다. <DIV ID="idbox">bad example.</div> <div id="idbox">good example.</div> 모든속성값은인용부호 ( ) 앆에표기한다. <table border=1 cellpadding=0 cellspacing=0>...</table> <table border="1" cellpadding="0" cellspacing="0">...</table>
(X)HTML 일반문법준수 > 웹표준화 모든 script 및 style 요소에는 type 속성이포함되어야한다. <style type="text/css"> </style> <link rel="stylesheet" href="common.css" type="text/css"> <script type="text/javascript" src="common.js"></script> 모든 img 및 area 요소에는 alt 속성이포함되어야한다. <img src="modify_btn.gif" alt="[description]" /> <area shape="rect" coords="26,11,163,76" href="#" alt="[description]" /> 모든요소는닫아야한다. <img src="good_sample.gif" alt=" 좋은예제이미지 " /> <input type="text" /> <hr /> <br /> <div></div> <p></p> <strong></strong> bad example: <div /> <p /> <strong />
(X)HTML 일반문법준수 > 웹표준화 text 나 URL, script 에포함된특수문자는 escape 시킨다. <, ", &, > 은 <, ", &, > 로 escape text 나 URL, script 에포함된특수문자는 escape 시킨다. <script type="text/javascript"> <!-- document.write("<\/p>"); // --> `</script> <a href= http://tab.search.daum.net/dsa/search?nil_profile=g&nil_searchtitle=1&w=k nowledge&q= >bad example</a> <a href= http://tab.search.daum.net/dsa/search?nil_profile=g&nil_searchtitle=1 &w=knowledge&q= >good example</a>
웹접근성실무적용방법 Web accessibility 웹문서에는독립적인제목을붙인다. 문서의언어변경내용확인 대체수단제공 키보드로만서비스이용가능 독립적인링크텍스트 새브라우저창열기 페이지자동새로고침지양 온라인양식 (Form) 웹접근성
웹문서에는독립적인제목을붙인다 > 웹접근성 문서제목 (title) 즐겨찾기이름 다운로드파일이름 현재위치파악요소 검색엔짂의효율성 <title> Daum 미디어다음 지역별날씨 : 제주도 </title>... <title> 웹접근성 Google 검색 </title>
문서언어변경내용확인 > 웹접근성 문서언어선언 다국어접근원홗 번역소프트웨어연동 <html lang="ko"> <html xml:lang="ko">... 한글로표현... <p lang="es">... 스페인어로표현... <p>... 다시한글로표현... <p>... 한글표현과 <em lang="ja"> 일부일본어로 </em>... 다시한글로...
대체수단제공 > 웹접근성 Flash, 음성, 동영상플러그인 : 대체콘텐츠 <!-- 플래시플러그인 --> <object data= tag.swf" type="application/x-shockwave-flash"> <!-- GIF 이미지 --> <object data="tag.gif" type="tag_images/gif"> <!-- 일반 text --> <ul> <li><a href= # > 무한도젂 </a></li> <li><a href= # > 메뚜기 </a></li> </ul> </object> </object>
대체수단제공 > 웹접근성 image : alt <img src="access.gif" alt="[description] longdesc="imgdesc_a.html" /> ifrmae : title, 대체링크 <iframe title= 꼬리말 id="commentframe" src= cmt.html" width="794" height="130" scrolling="no" frameborder="0"> 귀하의브라우저 ( 사용도구 ) 는프레임을지원하지않거나, 현재프레임이디스플레이되도록구성 (configure) 되어있지않습니다. 그러나, 방문을계속하실수있습니다. <a href= cmt.html"> 꼬리말 </a> </iframe>
대체수단제공 > 웹접근성 frame : title noframe <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <html lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> Daum UI Style Guidline </title> <link rel="stylesheet" href="common.css" type="text/css" > </head> <frameset rows="30,*" cols="*"> <frame src="frameup.html" name="topframe" scrolling= no" noresize title= 로고 > <frameset cols="160,*" rows="*"> <frame src="menu.html" name="left" noresize scrolling="no" frameborder="0" title= Daum UI 개발가이드라인메뉴 > <frame src="top.html" name="main" scrolling="yes" frameborder="0 title= 업데이트소식 > </frameset> <noframes> <P> 이프레임세트 (frameset) 는다음문서들을포함한다.</p> <ul> <li><a href="menu.html">daum UI 개발가이드라인메뉴 </a></li> <li><a href="svc.html"> 업데이트소식 </a></li> </ul> </noframes> </frameset> </html>
대체수단제공 > 웹접근성 script: noscript <script type="text/javascript"> /*... 실시간이슈검색어순위보여주는자바스크립트... */ </script> <noscript> <ol> <li><a href="hits1.htm"> 노홍철발언 <a></li> <li><a href="hits2.htm"> 브리트니포샵 <a></li> </ol> </noscript>
대체수단제공 > 웹접근성 동영상 : caption
키보드로서비스이용가능 > 웹접근성 순서에맞게구조화 가독성 Bad Good
키보드로서비스이용가능 > 웹접근성 <a href= #id" onmouseout= view() onmouseover= hide() >...</a> <a href= #id" onmouseout= view() onblur= view() onmouseover= hide() onfocus= hide() >...</a> 마우스와키보드이벤트처리기대응 onmousedown onmouseup onclick onmouseover onmouseout onkeydown onkeyup onkeypress onfocus onblur
키보드로서비스이용가능 > 웹접근성 tab / shift + tab 키로이동이가능하게적용
독립적인링크텍스트 > 웹접근성 링크텍스트가독립적으로도의미를가질수있도록수정. 한메일 Express 공지사항을보시려면 <a href="#"> 여기 </a> 를누르십시오 자세한내용이궁금하신분은 <a href="#"> 한메일 Express 공지사항 </a> 을보십시오
페이지자동새로고침지양 > 웹접근성 meta tag refresh script refresh
온라인양식 (form) > 웹접근성 양식컨트롤과레이블을명확히짝짓는다. <input type="radio" name="sex" value="m" checked="checked"/> 남 <input type="radio" name="sex" value="f" /> 여 <input type="radio" id="sex_m" name="sex" value="m" checked="checked"/> <label for="sex_m"> 남 </label> <input type="radio" id="sex_f" name="sex" value="f" /> <label for= sex_f > 여 </label> 제어요소갂의표시순서가일정
웹사용성실무적용방법 Web usability 반복네비게이션링크 양식컨트롤 인접한링크는공백으로분리 새브라우저창열기 웹사용성
반복네비게이션링크 > 웹사용성 숨은 Text 링크를사용하라 <div id= skiptocontent"> <ul> <li><a href="#ch_logo" onclick="skipid('ch_logo')">global 메뉴로바로가기 </a></li> <li><a href="#left" onclick="skipid('left')"> 왼쪽메뉴로바로가기 </a></li> <li><a href="#wrap_content" onclick="skipid('wrap_content')"> 콘텐츠로바로가기 </a></li> <li><a href="#search_euckr" onclick="skipid('search_euckr')"> 카페검색창으로바로가기 </a></li> <li><a href="#footer" onclick="skipid('footer')">copyright 바로가기 </a></li> </ul> </div>
양식컨트롤 > 웹사용성 Value 속성값을넣어준다. <input type="text" id= subject" value =" 메일제목입력 " /> <textarea id= context row= 30 col= 30 > 메일내용입력 </textarea> Title 속성으로양식컨트롤설명 <input type="text" id="login_id" value="" title=" 아이디입력 " /> <input type="password" id="login_pw" value="" title=" 비밀번호입력 " /> <input type="submit" id="login_btn" value=" 로그인 " />
인접한링크는공백으로분리 > 웹사용성 Bad: <a href="#blog"> 블로그 </a><a href="#videoclip"> 동영상 </a><a href="#search"> 검색 </a> Good: <a href="#blog"> 블로그 </a> <a href="#videoclip"> 동영상 </a> <a href="#search"> 검색 </a>
새브라우저창열기 > 웹사용성 새창열림을사용자의선택으로제공 사용성문제 뒤로가기버튼사용불가 현재창을가린다. 장애인사용성저하
웹의기본
웹접근성향상을위한노력 2006 웹접근성향상을위한 TFT 결성 UI 워크숍 - 공평한인터넷홖경제공을위한창의적 UI 발상프로젝트 ( 커뮤니티 UI 디자인팀장조제희 ) 2007 UI개발직굮 IWA(Improve Web Accessibility) TFT 결성웹표준화 UI개발가이드라인제공시각장애인 UT - IWA주최 (Daum 주요서비스 ) 시각장애인 UT 참관 - 한국정보문화징흥원주최 (6대포탈 )
To be.. 웹접근성향상을위한노력 UI 개발가이드라인 - 웹접근성향상기술업데이트 신규서비스및기존서비스웹접근성향상기술적용외부배포및한국웹콘텐츠접근성지침반영
웹접근성향상을위한노력은 개발자만의몪이아니라 웹서비스를기획하고디자인하고개발하는 모든웹제작자의몪입니다.
세상을즐겁게변화시키는 Daum 보다더많은사람들을즐겁게변화시킬수있도록노력합시다 ~
감사합니다 최재성 : UI개발팀 / 02-6718-0519 / j5bbada@daumcorp.com 유순 : UI개발팀 / 02-6718-0615 / sprout@daumcorp.com