웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... ·...
Transcript of 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... ·...
![Page 1: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/1.jpg)
웹 접근성 향상을 위한UI개발 표준화 가이드
UI개발팀 최재성, 유순
![Page 2: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/2.jpg)
웹 접근성 향상을 위한UI개발 표준화 가이드
• intro• 웹접근성?
• IWA TFT • 웹접근성 준수 실태• 웹접근성? 웹표준? 웹사용성?• 기대효과
• 웹접근성 향상을 위한 가이드라인• 웹 표준화 실무 적용방법• 웹 접근성 실무 적용방법• 웹 사용성 실무 적용방법
• 앞으로• 준수의 당위성
![Page 3: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/3.jpg)
IWA TFT(Improve Web Accessibility TFT)
2007/6/5
![Page 4: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/4.jpg)
국내 대표적인 스크린리더
센스리더시각장애인이스크린리더기를 이용하여미디어 다음을 이용하는 모습
IWA TFT
▼
▼
▶UT시나리오
![Page 5: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/5.jpg)
정보화 격차
![Page 6: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/6.jpg)
인터넷 이용률 (‟06)
젂체국민 장애인
74.8%
46.6%
한국정보문화짂흥원
50%
100%
정보화 격차 지수일반인(100) 대비장애인 정보화 수준 („06)
50
100
일반 장애인정보화 수준
양/질적홗용
73.964.9
28.2%
26.1% 35.1%
정보화 격차
![Page 7: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/7.jpg)
[ Web ]
Word Wide Web
[ ac·ces·si·bil·i·ty ]
n. 접근 (가능성), 접근하기 쉬움;이해하기 쉬움
웹접근성
Web Accessibility
![Page 8: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/8.jpg)
일반인, 장애인, 노인 등 모든 사용자
브라우저, 저속사양컴퓨터, PDA 등 모든 홖경
사용자의 싞체적 홖경적 조건에 관계없이웹에 접근하여 이용 가능하도록 보장하는 것
이란?웹접근성
![Page 9: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/9.jpg)
웹접근성? 웹사용성? 웹표준?
WEB
웹에 접근하고이용할 수 있는가..
웹접근성(Web Accessibility)
웹사용성
편리하고 정확하게 사용하여사용자가 만족할 수 있는가..
(Web Usability)
접근할수없는
이용할수있는
만족할수있는
웹표준(Web Standard)
• WWW관련 표준 스펙
CSS, CGI, DOM, HTML, XTHML, XML, XSLT … , JavaScript (ECMA Script)
(Web Contents Accessibility Guidelines)
웹접근성 향상을 위한 가이드라인
![Page 10: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/10.jpg)
영국
미국
호주
일본1990 미국장애인법, 통싞법 255조1998 재홗법 508조2000 웹접근성지침 508조 §1194.22
1992 장애인차별금지법(DDA)2003 W3C지침(인권동등기회보장위원회)
1995 장애인차별금지법웹접근성인증마크제도시행
2004 장애인 기본법2003 JIS X 8341-3
국제 동향
![Page 11: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/11.jpg)
• 2002 장애인 노인 등을 위한 정보통싞접근성향상을 위한 권장지침정보화촉짂기본법정보격차해소에 관한 법률
• 2003 편의 증짂법한국형 웹 콘텐츠 접근성 향상을 위한 지침 KWCAG 1.0
• 2007~ 2009년까지 공공기관 홈페이지 표준화
장애인 차별 금지법 입법, 시행령 준비 중
WCAG 2.0 짂행 중
국내 동향
![Page 12: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/12.jpg)
경량의 로딩속도
웹사이트 제작 기갂 단축
높은 호홖성 및 운영비용 젃감
효율적인 정보 검색
웹 사용성 증가
이용자 확대
소외계층 정보격차 해소로 평등한 기회 제공
생산성 향상다양한 플랫폼/다양한 홖경조건 이용확대
사회갂접비용 젃감
웹 기술 품질 보증
사회공헌정부정책 부응에 따른 이미지 제고 효과
다양한 이용자 확대플랫폼,홖경조건 이용확대
효율적 웹운영
기업이미지 홍보
웹 접근성 준수 효과
![Page 13: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/13.jpg)
웹 접근성 향상 기술실무 적용 방법
웹접근성
웹사용성
(Web Accessibility)
웹표준(Web Standard)
(Web Usability)
• (X)HTML/CSS/SCRIPT 분리
• 구조화
• (X)HTML 일반 문법 준수
• 반복 네비게이션 링크• 양식 컨트롤• 인접한 링크는 공백으로 분리• 새 브라우저 창 열기
• 웹 문서에는 독립적인 제목을 붙인다.• 문서의 언어 변경 내용확인• 대체 수단 제공• 키보드로만 서비스 이용 가능• 독립적인 링크 텍스트• 새 브라우저 창 열기• 페이지 자동 새로고침 지양• 온라인 양식 (Form)
![Page 14: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/14.jpg)
웹 표준화 실무 적용 방법Web standard
• (X)HTML/CSS/SCRIPT 분리
• 구조화
• (X)HTML 일반 문법 준수
웹표준
![Page 15: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/15.jpg)
(X)HTML
구조화된 마크업
CSS
디자인 요소
SCRIPT
행동 양식
(X)HTML/CSS/SCRIPT 분리 > 웹 표준화
![Page 16: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/16.jpg)
문서 내용에의미를 부여하는 작업
구조화 > 웹 표준화
![Page 17: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/17.jpg)
• 문서의 제목 (h1 ~ h6)
• 문단 (p)
• 표 (table),
• 순서 있는 리스트 (ol)
• 순서 없는 리스트 (ul)
• 정의 리스트 (dl)
• 인용 (blockquote,q)
• 하이퍼링크 (a)
• 강조 구문 (strong, em)
의미와 구조에맞는 태그 사용
구조화 > 웹 표준화
![Page 18: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/18.jpg)
• 정확한 문서 구조 준수
<!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 일반 문법 준수 > 웹 표준화
• 정확한 문서 구조 준수
![Page 19: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/19.jpg)
• 모든 속성 값은 인용 부호(“ ”)앆에 표기한다.
<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>
![Page 20: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/20.jpg)
<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 />
![Page 21: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/21.jpg)
• 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 일반 문법 준수 > 웹 표준화
![Page 22: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/22.jpg)
웹 접근성 실무 적용 방법Web accessibility
• 웹 문서에는 독립적인 제목을 붙인다.• 문서의 언어 변경 내용확인• 대체 수단 제공• 키보드로만 서비스 이용 가능• 독립적인 링크 텍스트• 새 브라우저 창 열기• 페이지 자동 새로고침 지양• 온라인 양식 (Form) 웹접근성
![Page 23: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/23.jpg)
…
<title> Daum 미디어다음 – 지역별 날씨 : 제주도 </title>
...<title> 웹 접근성 – Google 검색 </title>…
• 즐겨찾기 이름• 다운로드 파일이름• 현재 위치 파악 요소• 검색엔짂의 효율성
문서 제목(title)
웹 문서에는 독립적인 제목을 붙인다 > 웹 접근성
![Page 24: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/24.jpg)
…<html lang="ko">…<html xml:lang="ko">…
... 한글로 표현 ... <p lang="es">... 스페인어로 표현 ... <p> ... 다시 한글로 표현 ... <p> ... 한글 표현과<em lang="ja">일부 일본어로</em>... 다시 한글로 ...
• 다국어 접근 원홗• 번역 소프트웨어 연동
문서언어 변경 내용확인 > 웹 접근성
문서 언어 선언
![Page 25: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/25.jpg)
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>
대체수단 제공 > 웹 접근성
![Page 26: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/26.jpg)
<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 , 대체 링크
대체수단 제공 > 웹 접근성
![Page 27: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/27.jpg)
<!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
대체수단 제공 > 웹 접근성
![Page 28: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/28.jpg)
<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
대체수단 제공 > 웹 접근성
![Page 29: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/29.jpg)
• 동영상:
caption
대체수단 제공 > 웹 접근성
![Page 31: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/31.jpg)
<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
> 웹 접근성키보드로 서비스 이용 가능
![Page 32: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/32.jpg)
• tab / shift + tab 키로 이동이 가능하게 적용
> 웹 접근성키보드로 서비스 이용 가능
![Page 33: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/33.jpg)
자세한 내용이 궁금하신 분은 <a href="#">한메일 Express 공지사항</a>을 보십시오
한메일 Express 공지사항을 보시려면 <a href="#">여기</a>를 누르십시오
독립적인 링크 텍스트
• 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 수정.
> 웹 접근성
![Page 34: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/34.jpg)
• meta tag refresh• script refresh
페이지 자동 새로 고침 지양 > 웹 접근성
![Page 35: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/35.jpg)
• 제어 요소갂의 표시순서가 일정
• 양식 컨트롤과 레이블을 명확히 짝짓는다.
<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) > 웹 접근성
![Page 36: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/36.jpg)
웹 사용성 실무 적용 방법Web usability
• 반복 네비게이션 링크• 양식 컨트롤• 인접한 링크는 공백으로 분리• 새 브라우저 창 열기
웹사용성
![Page 37: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/37.jpg)
<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 링크를 사용하라
반복 네비게이션 링크 > 웹 사용성
![Page 38: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/38.jpg)
<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 속성으로 양식 컨트롤 설명
양식 컨트롤 > 웹 사용성
![Page 39: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/39.jpg)
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>
인접한 링크는 공백으로 분리 > 웹 사용성
![Page 40: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/40.jpg)
• 뒤로가기 버튼 사용 불가• 현재창을 가린다.• 장애인 사용성 저하
사용성 문제
• 새 창 열림을 사용자의 선택으로 제공
새 브라우저 창 열기 > 웹 사용성
![Page 41: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/41.jpg)
웹의 기본
![Page 42: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/42.jpg)
• 2006 웹 접근성 향상을 위한 TFT 결성
UI워크숍 - 공평한 인터넷홖경 제공을 위한 창의적 UI발상프로젝트 (커뮤니티 UI디자인 팀장 조제희)
• 2007 UI개발직굮 IWA(Improve Web Accessibility) TFT 결성
웹 표준화 UI개발 가이드라인 제공
시각장애인 UT - IWA주최 (Daum 주요 서비스)
시각장애인 UT 참관 - 한국정보문화징흥원 주최 (6대 포탈)
웹 접근성 향상을 위한 노력
![Page 43: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/43.jpg)
• To be..
UI개발 가이드라인 - 웹 접근성 향상 기술 업데이트
신규서비스 및 기존 서비스 웹 접근성 향상 기술 적용
외부 배포 및 한국 웹 콘텐츠 접근성 지침 반영
웹 접근성 향상을 위한 노력
![Page 44: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/44.jpg)
웹 접근성 향상을 위한 노력은
개발자만의 몪이 아니라
웹 서비스를 기획하고 디자인하고 개발하는
모든 웹 제작자의 몪입니다.
![Page 45: 웹접근성향상을위한 - cfs3.tistory.comcfs3.tistory.com/upload_control/download.blog?f... · 웹접근성 (Web Accessibility) 웹사용성 편리하고정확하게사용하여](https://reader035.fdocuments.us/reader035/viewer/2022081617/602228233119572491551bc9/html5/thumbnails/45.jpg)
세상을 즐겁게 변화 시키는 Daum
보다 더 많은 사람들을즐겁게 변화 시킬 수 있도록 노력합시다~