웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... ·...
TRANSCRIPT
웹 접근성 향상을 위한UI개발 표준화 가이드
UI개발팀 최재성, 유순
웹 접근성 향상을 위한UI개발 표준화 가이드
• intro• 웹접근성?
• IWA TFT • 웹접근성 준수 실태• 웹접근성? 웹표준? 웹사용성?• 기대효과
• 웹접근성 향상을 위한 가이드라인• 웹 표준화 실무 적용방법• 웹 접근성 실무 적용방법• 웹 사용성 실무 적용방법
• 앞으로• 준수의 당위성
IWA TFT(Improve Web Accessibility TFT)
2007/6/5
국내 대표적인 스크린리더
센스리더시각장애인이스크린리더기를 이용하여미디어 다음을 이용하는 모습
IWA TFT
▼
▼
▶UT시나리오
정보화 격차
인터넷 이용률 (‟06)
젂체국민 장애인
74.8%
46.6%
한국정보문화짂흥원
50%
100%
정보화 격차 지수일반인(100) 대비장애인 정보화 수준 („06)
50
100
일반 장애인정보화 수준
양/질적홗용
73.964.9
28.2%
26.1% 35.1%
정보화 격차
[ Web ]
Word Wide Web
[ ac·ces·si·bil·i·ty ]
n. 접근 (가능성), 접근하기 쉬움;이해하기 쉬움
웹접근성
Web Accessibility
일반인, 장애인, 노인 등 모든 사용자
브라우저, 저속사양컴퓨터, PDA 등 모든 홖경
사용자의 싞체적 홖경적 조건에 관계없이웹에 접근하여 이용 가능하도록 보장하는 것
이란?웹접근성
웹접근성? 웹사용성? 웹표준?
WEB
웹에 접근하고이용할 수 있는가..
웹접근성(Web Accessibility)
웹사용성
편리하고 정확하게 사용하여사용자가 만족할 수 있는가..
(Web Usability)
접근할수없는
이용할수있는
만족할수있는
웹표준(Web Standard)
• WWW관련 표준 스펙
CSS, CGI, DOM, HTML, XTHML, XML, XSLT … , JavaScript (ECMA Script)
(Web Contents Accessibility Guidelines)
웹접근성 향상을 위한 가이드라인
영국
미국
호주
일본1990 미국장애인법, 통싞법 255조1998 재홗법 508조2000 웹접근성지침 508조 §1194.22
1992 장애인차별금지법(DDA)2003 W3C지침(인권동등기회보장위원회)
1995 장애인차별금지법웹접근성인증마크제도시행
2004 장애인 기본법2003 JIS X 8341-3
국제 동향
• 2002 장애인 노인 등을 위한 정보통싞접근성향상을 위한 권장지침정보화촉짂기본법정보격차해소에 관한 법률
• 2003 편의 증짂법한국형 웹 콘텐츠 접근성 향상을 위한 지침 KWCAG 1.0
• 2007~ 2009년까지 공공기관 홈페이지 표준화
장애인 차별 금지법 입법, 시행령 준비 중
WCAG 2.0 짂행 중
국내 동향
경량의 로딩속도
웹사이트 제작 기갂 단축
높은 호홖성 및 운영비용 젃감
효율적인 정보 검색
웹 사용성 증가
이용자 확대
소외계층 정보격차 해소로 평등한 기회 제공
생산성 향상다양한 플랫폼/다양한 홖경조건 이용확대
사회갂접비용 젃감
웹 기술 품질 보증
사회공헌정부정책 부응에 따른 이미지 제고 효과
다양한 이용자 확대플랫폼,홖경조건 이용확대
효율적 웹운영
기업이미지 홍보
웹 접근성 준수 효과
웹 접근성 향상 기술실무 적용 방법
웹접근성
웹사용성
(Web Accessibility)
웹표준(Web Standard)
(Web Usability)
• (X)HTML/CSS/SCRIPT 분리
• 구조화
• (X)HTML 일반 문법 준수
• 반복 네비게이션 링크• 양식 컨트롤• 인접한 링크는 공백으로 분리• 새 브라우저 창 열기
• 웹 문서에는 독립적인 제목을 붙인다.• 문서의 언어 변경 내용확인• 대체 수단 제공• 키보드로만 서비스 이용 가능• 독립적인 링크 텍스트• 새 브라우저 창 열기• 페이지 자동 새로고침 지양• 온라인 양식 (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)
의미와 구조에맞는 태그 사용
구조화 > 웹 표준화
• 정확한 문서 구조 준수
<!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 일반 문법 준수 > 웹 표준화
• 정확한 문서 구조 준수
• 모든 속성 값은 인용 부호(“ ”)앆에 표기한다.
<table border=1 cellpadding=0 cellspacing=0>...</table>
• 모든 요소와 속성은 소문자여야 한다.
<DIV ID="idbox">bad example.</DIV>
<option value="wrong" selected>bad example</option>
<option value="right" selected="selected">good example</option>
<div id="idbox">good example.</div>
<table border="1" cellpadding="0" cellspacing="0">...</table>
• 모든 속성값은 속성이 함께 선언되어야 한다.
(X)HTML 일반 문법 준수 > 웹 표준화
• 모든 요소 완벽하게 중첩되어야 한다
<p>This is a <strong>bad </p>example.</strong>
<p>This is a <strong>good</strong> example</p>
<img src="good_sample.gif" alt="좋은 예제 이미지" /> <input type="text" /> <hr /> <br />
• 모든 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]" />
<div></div> <p></p> <strong></strong>
(X)HTML 일반 문법 준수
• 모든 요소는 닫아야 한다.
> 웹 표준화
bad example: <div /> <p /> <strong />
• text나 URL, script에 포함된 특수 문자는 escape 시킨다.
• text나 URL, script에 포함된 특수 문자는 escape 시킨다.
<, ", &, > 은 <, ", &, >로 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=knowledge&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>
☆☆☆☆☆
(X)HTML 일반 문법 준수 > 웹 표준화
웹 접근성 실무 적용 방법Web accessibility
• 웹 문서에는 독립적인 제목을 붙인다.• 문서의 언어 변경 내용확인• 대체 수단 제공• 키보드로만 서비스 이용 가능• 독립적인 링크 텍스트• 새 브라우저 창 열기• 페이지 자동 새로고침 지양• 온라인 양식 (Form) 웹접근성
…
<title> Daum 미디어다음 – 지역별 날씨 : 제주도 </title>
...<title> 웹 접근성 – Google 검색 </title>…
• 즐겨찾기 이름• 다운로드 파일이름• 현재 위치 파악 요소• 검색엔짂의 효율성
문서 제목(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>
대체수단 제공 > 웹 접근성
<img src="access.gif" alt="[Description]“ longdesc="imgdesc_a.html" />
<iframe title=“꼬리말” id="commentFrame" src=“cmt.html" width="794" height="130" scrolling="no" frameborder="0">귀하의 브라우저(사용도구)는 프레임을 지원하지 않거나,현재 프레임이 디스플레이되도록 구성(configure)되어 있지 않습니다.
그러나, 방문을 계속 하실 수 있습니다. <a href=“cmt.html">꼬리말</a>
</iframe>
image : • alt
ifrmae :• title , 대체 링크
대체수단 제공 > 웹 접근성
<!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>
frame :• title
• noframe
대체수단 제공 > 웹 접근성
<script type="text/javascript">/* ... 실시간 이슈 검색어 순위 보여주는 자바스크립트 ... */
</script><noscript><ol><li><a href="hits1.htm">노홍철 발언<a></li><li><a href="hits2.htm">브리트니 포샵<a></li>
</ol></noscript>
script:• noscript
대체수단 제공 > 웹 접근성
• 동영상:
caption
대체수단 제공 > 웹 접근성
<a href=“#id" onmouseout=“view()“ onmouseover=“hide()” >...</a>
<a href=“#id" onmouseout=“view()“ onblur=“view()“ onmouseover=“hide()” onfocus=“hide()” >...</a>
• 마우스와 키보드이벤트 처리기 대응
onmousedown onkeydown
onmouseup onkeyup
onclick onkeypress
onmouseover onfocus
onmouseout onblur
> 웹 접근성키보드로 서비스 이용 가능
• tab / shift + tab 키로 이동이 가능하게 적용
> 웹 접근성키보드로 서비스 이용 가능
자세한 내용이 궁금하신 분은 <a href="#">한메일 Express 공지사항</a>을 보십시오
한메일 Express 공지사항을 보시려면 <a href="#">여기</a>를 누르십시오
독립적인 링크 텍스트
• 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 수정.
> 웹 접근성
• meta tag refresh• script refresh
페이지 자동 새로 고침 지양 > 웹 접근성
• 제어 요소갂의 표시순서가 일정
• 양식 컨트롤과 레이블을 명확히 짝짓는다.
<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>
온라인 양식 (form) > 웹 접근성
웹 사용성 실무 적용 방법Web usability
• 반복 네비게이션 링크• 양식 컨트롤• 인접한 링크는 공백으로 분리• 새 브라우저 창 열기
웹사용성
<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>
숨은 Text 링크를 사용하라
반복 네비게이션 링크 > 웹 사용성
<input type="text" id=“subject" value =" 메일 제목 입력 " /><textarea id=“context” row=“30” col=“30”>메일 내용 입력</textarea>
• Value 속성 값을 넣어준다.
<input type="text" id="login_id" value="" title="아이디 입력" /><input type="password" id="login_pw" value="" title="비밀번호 입력" />
<input type="submit" id="login_btn" value="로그인" />
•Title 속성으로 양식 컨트롤 설명
양식 컨트롤 > 웹 사용성
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
보다 더 많은 사람들을즐겁게 변화 시킬 수 있도록 노력합시다~
