웹 접근성 향상을 위한 웹 표준화 가이드

chaeya 2008. 1. 31. 13:11

2008. 1. 31. 13:11

2. 접근성 향상 적용 과제

웹 표준 준수
구조,표현,행동 분리
최소한의 디버깅을 거쳐라.
효율적인 웹 개발 방법론을 가져라.
의미에 맞는 HTML 태그 사용 (가독성)
올바른 표(table) 사용
대체 수단 제공 (이미지,플래시,동영상,음성)
반복 네비게이션 링크
키보드로만 서비스 이용 가능
독립적인 링크 텍스트
웹 문서에는 독립적인 제목을 붙인다
양식 컨트롤과 양식 이름표를 명확히 짝짓는다.

2.6 올바른 표(table) 사용

2.6.1 리스트형 표 사용법

HTML 표(table) 모델은 제작자에게 데이터를 줄(low)과 컬럼(column)의 셀(cell)들에, 텍스트, 양식화 된 텍스트, 이미지, 연결, 폼(form), 폼 휠드(field), 다른 표(table), 등으로, 정돈 할 수 있게 한다.

테이블은 레이아웃이 아닌 본래 목적에 맞게 표로만 사용한다.
summary,Caption에 표의 목적을 간단하게 기술하는 제목을 갖는다.
제목은 th 에 내용은 td 에 넣는다.
리스트형 표의 th 에는 scope="col" 을 넣는다.

<table class="list" width="100%" summary="표의 목적을 간단하게 기술하는 제목">
<caption>표의 목적을 간단하게 기술하는 제목</caption>
<tr>
	<th scope="col">제목</th>		
	<th scope="col">제목</th>
	<th scope="col"><a href="#">제목</a></th>
</tr>
<tr>
	<td>내용</td>
	<td><a href="#">긴 내용내용내용내용내용내용내용 내용내용내용내용내용내용내용내용내용</a></td>
	<td>내용</td>		
</tr>
<tr>
	<td>내용</td>
	<td><a href="#">긴 내용내용내용내용내용내용내용 내용내용내용내용내용내용내용내용내용</a></td>
	<td> </td>		
</tr>
</table>

2.6.2 Table layout vs CSS layout

Table layout

장점: FrontPage 나 Dreamwever 같은 위지윅(WISIWYG) 에디터에서 테이블로 개발하기가 매우 쉽다.
단점: 표현데이타와 컨텐츠의 혼용 (페이지 크기를 불필요하게 증가); 사이트 재디자인시 많은 작업과 비용을 유발; 사이트 전체의 일관성을 유지하는데 매우 힘들고 과도한 비용을 발생시킴; 장애인,핸드폰,PDA..등에서 접근성을 떨어뜨린다.; 프로그램에서 데이터를 알기 힘들고, pc이외의 기계에서 렌더의 어려움이있다.; 내부 Td안의 데이터가 모두 로드 되기 전까지 전체를 표시하지 않아 속도가 느리다

CSS layout

장점: 효율적인 마크업; 페이지 용량감소; 유지보수 편리 비용절감; 이해하기 쉬운 구조; 메인 컨텐츠를 먼저 보여주고 그래픽을 나중에 로드할 수 있게 한다.; HTML/텍스트 비율을 낮게 유지함으로써 로딩 시간을 감소시킨다.; 리퀴드 디자인을 추구함으로써 사용성을 증가시킨다.; 포지셔닝에 있어 극단적인 유연성을 가능하게 한다.
단점: 어렵고 구현하는데 시간이 많이 소요

2.7 대체 수단 제공 (이미지,플래시,동영상,음성)

Flash

플러그인을 사용하는 경우 대체 콘텐츠를 제공해야 한다.

<!-- 플래시 플러그인 -->
<object data="hello.swf" type="application/x-shockwave-flash">
	<!-- PNG 이미지 -->
	<object data="hello.png" type="images/png">
		<!-- GIF 이미지 -->
		<object data="hello.gif" type="images/gif">
			<!-- 일반 text -->
			<p>Hello!</p>
		</object>
	</object>
</object>

image

Alt, title, longdesc

<img src="images.gif" alt="[Description]“ longdesc="imgdesc_a.html" />

iframe

title

<iframe
title=“꼬리말” id="commentFrame" src=“cmt.html" width="100%" height="100"
scrolling="no" frameborder="0"></iframe>

frame

title,noframes

<!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="SHORTCUT ICON" href="http://guideline.hosts.daum.net/uidev2006/file/favicon.ico">
<link rel="stylesheet" href="common.css" type="text/css" >	
</head>

<frameset rows="30,*" cols="*" frameborder="NO" border="0" framespacing="0"> 
<frame src="frameup.html" name="topFrame" scrolling="NO" noresize title=“로고”>
<frameset cols="160,*" frameborder="NO" border="0" framespacing="0" rows="*"> 
<frame src="menu.html" name="left" noresize  scrolling="no" border="0" title=“Daum UI 개발 가이드라인 메뉴”>
<frame src="top.html" name="main" scrolling="yes" border="0“ title=“ 업데이트 소식” >
</frameset>
</frameset>
<noframes>
<body>
<P>이 프레임세트(frameset)는 다음 문서들을 포함한다.</p>
<ul>
	<li><a href="menu.html">Daum UI 개발 가이드라인 메뉴</a></li>
	<li><a href="svc.html">업데이트 소식</a></li>
</ul>
</body>
</noframes>
</html>

동영상

caption 지원

동영상 caption 지원

2.8 반복 네비게이션 링크

숨은 Text 링크를 사용하라

웹 콘텐츠는 반복적인 네비게이션 링크(repetitive navigation link)를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 구성하여야 한다.

카페 탑

<div
id=“skiptocontent">
<ul>
<li><a href="#cH_logo" onclick="skipid('cH_logo')"
onkeypress="skipid('cH_logo')" >Global 메뉴로 바로가기</a></li>
<li><a href="#left" onclick="skipid('left')"
onkeypress="skipid('left')">왼쪽 메뉴로 바로가기</a></li>
<li><a href="#wrap_content" onclick="skipid('wrap_content')"
onkeypress="skipid('wrap_content')">콘텐츠로 바로가기</a></li>
<li><a href="#search_euckr" onclick="skipid('search_euckr')"
onkeypress="skipid('search_euckr')">카페검색창으로
바로가기</a></li>
<li><a href="#footer" onclick="skipid('footer')"
onkeypress="skipid('footer')" >copyright 바로가기</a></li>
</ul>
</div>

2.9 키보드로만 서비스 이용 가능

2.9.1 순서에 맞게 구조화

보통 마크업 구조상으로 보면 아레와 같이 분리되어 있어 텝메뉴 순서상으로도 카페>블로그>플래닛>포커스>랭킹... 순으로 되어 포커스가 카페 depth 안에 포함된 카테고리인지 인식 할 수가 없게 된다..

잘못된 소스

카페
블로그
플래닛

포커스
랭킹
서포터즈
공식커뮤니티

아레와 같이 순서에 맞게 구조화 되면 올바르게 표현할수 있다

잘된 소스

카페
- 포커스
- 랭킹
- 서포터즈
- 공식커뮤니티
블로그
플래닛

예제) 순서에 맞게 구조화된 문서

순서에 맞게 구조화된 GNB

<div id="gnbTabNav" class="home">
<ul id="gnbList">
	<li id="home"><a href="#" title="동영상 홈" class="menu">동영상 홈</a>
		<ul>
			<li class="sub"><a href="#">동영상 올리기</a></li>
			<li class="on"><a href="#"><b>MY 동영상</b></a></li>
			<li><a href="#">MY 동영상 댓글 모아보기</a></li>
		</ul>
	</li>
	<li id="new"><a href="#" title="NEW 동영상" class="menu">NEW 동영상</a></li>
	<li id="popular"><a href="#" title="뜨는 동영상" class="menu">뜨는 동영상</a></li>
	<li id="channel"><a href="#" title="채널" class="menu">채널</a></li>
	<li id="ranking"><a href="#" title="동영상 랭킹" class="menu">동영상 랭킹</a></li>
	<li id="producer"><a href="#" title="동영상 PD" class="menu">동영상 PD</a></li>
	<li id="event"><a href="#" title="이벤트" class="menu">이벤트</a></li>
	<li id="pie"><a href="#" title="파이" class="menu">파이</a></li>
</ul>
</div>

2.9.2 마우스와 키보드 이벤트 처리기 대응

이벤트 처리기가 장치 독립적인지 확인하십시오. 이 이벤트 처리기는 필수적인 정보나 이 페이지를 사용하는 데 필요합니다. 이벤트 처리기를 "onfocus", "onblur" 및 "onselect"와 같은 장치 독립적인 처리기로 제한할 것을 고려하십시오. 장치 독립적인 특성을 사용해야 하는 경우 키보드 방식을 제공하십시오. 예를 들어, "onmousedown"의 경우 "onkeydown"도 지정하십시오. 마우스 좌표에 의존하는 이벤트 처리기는 장치가 독립적이지 않으므로 사용할 수 없습니다.

마우스와 키보드 이벤트 처리기 대응표
마우스	키보드
onmousedown	onkeydown
onmouseup	onkeyup
onclick	onkeypress
onmouseover	onfocus
onmouseout	onblur

각각의 메뉴 링크에 onMouseOut, onMouseOver 이벤트만을 사용하여 키보드를 이용한 접근은 제한됩니다.
onFocus, onBlur를 추가하여 작성하면 이론적으로 최소의 키보드 접근이 가능하게 됩니다.
ondblclick, onmousemove 등에 상응하는 키보드 이벤트 처리기는 HTML 4.0 현재 존재하지 않으므로 그러한 이벤트 처리기는 되도록 사용을 피하는 것이 좋습니다.

<a href=“#" onmouseout=“view()“ onblur=“view()“ onmouseover=“hide()” onfocus=“hide()” >...

예제) 키보드로 텝 메뉴 컨텐츠 구현

cssw 제거된 콘텐츠

<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ko">
<head> <meta http-equiv="Content-Type" content="text/html;
charset=euc-kr"> <meta http-equiv="imagetoolbar" content="no">
<title>Youth Voice - 퍼져라, 대한민국 젊은 목소리</title> <script
type="text/javascript"
src="http://image.youthvoice.daum.net/yv2/js/common.js"></script>
<link rel="stylesheet" type="text/css"
href="http://image.youthvoice.daum.net/yv2/css/common.css">
<style type="text/css"> /* common */ body
{margin:0;padding:0;text-align:center;} h1,h2,h3,h4,h5
{padding:0;margin:0;} hr {display: none;} textarea,input
{font-size:12px;} img {vertical-align:middle;} dl,dt,dd
{margin:0;padding:0;} .var
{font-family:dotum;font-weight:normal;font-size:11px;color:#ccc;}
#yv_mediazone
{text-align:left;position:relative;width:600px;height:170px;margin-top:30px;background:url(http://image.youthvoice.daum.net/yv2/site_img/tb_bg2.gif)
10px 25px no-repeat;} #yv_mediazone h3 {padding-left:7px;height:49px;}
#yv_mediazone h3 a
{display:block;width:149px;height:15px;background:url(http://image.youthvoice.daum.net/yv2/site_img/tt_04.gif)
no-repeat;font-size:1px;line-height:0%;text-indent:-1000em;overflow:hidden;}
#yv_mediazone h4 {border:none;padding:0;margin:0;} #yv_mediazone h4 a
{position:absolute;top:25px;left:7px;display:block;text-align:center;width:65px;padding:8px
0 2px
0;background:url(http://image.youthvoice.daum.net/yv2/site_img/tb_gr_bl.gif)
no-repeat #fff;font-weight:normal;} #yv_mediazone h4.on a
{width:65px;background:url(http://image.youthvoice.daum.net/yv2/site_img/tb_wh_bl.gif)
left 1px no-repeat;font-weight:bold;padding:8px 0 3px 0;} #yv_mediazone
h4#y_1 a {left:10px;} #yv_mediazone h4#y_2 a {left:80px;} #yv_mediazone
h4#y_3 a {left:146px;} #yv_mediazone h4#y_4 a {left:212px;}
#yv_mediazone ul {clear:left;padding:14px 0 0 23px;} #yv_mediazone li
{float:left;padding:0 10px;} #yv_mediazone li p {padding-top:7px;}
#yv_mediazone li p a {font-family:dotum;font-size:11px;color:#666;}
</style> <script type="text/javascript"> <!-- function
viewYear(tab){ var
stYear=document.getElementById("yv_mediazone").getElementsByTagName("ul");
for(i=0;i<stYear.length;i++){ var sty = stYear[i];
sty.style.display="none"; } var
stYearH4=document.getElementById("yv_mediazone").getElementsByTagName("h4");
for(i=0;i<stYearH4.length;i++){ var sth = stYearH4[i];
sth.className=""; }
document.getElementById('y_'+tab+'_list').style.display="block";
document.getElementById('y_'+tab).className="on"; } -->
</script>
</head>
<body> <div id="yv_mediazone">
<h3><a href="#" title="유스크리에이터 미디어존">유스크리에이터
미디어존</a></h3> <h4 id="y_1" class="on"><a
href="javascript:;" onmouseover="viewYear('1')"
onfocus="viewYear('1')">2005년</a></h4> <ul
id="y_1_list"> <li> <a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">2005..억울함없는 </a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> </ul>
<h4 id="y_2"><a href="javascript:;"
onmouseover="viewYear('2')"
onfocus="viewYear('2')">2004년</a></h4> <ul
id="y_2_list" style="display:none;"> <li> <a
href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">2004. 억울함없는 </a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> </ul>
<h4 id="y_3"><a href="javascript:;"
onmouseover="viewYear('3')"
onfocus="viewYear('3')">2003년</a></h4> <ul
id="y_3_list" style="display:none;"> <li> <a
href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">2003..억울함없는 </a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt="" /></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> </ul>
<h4 id="y_4"><a href="javascript:;"
onmouseover="viewYear('4')"
onfocus="viewYear('4')">2002년</a></h4> <ul
id="y_4_list" style="display:none;"> <li> <a
href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt=""/></a> <p><a
href="#">2002..억울함없는 </a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt=""/></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt=""/></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> <li>
<a href="#"><img
src="http://image.youthvoice.daum.net/yv2/site_img/tb_10881.gif"
width="104" height="77" alt=""/></a> <p><a
href="#">억울함없는 사회를..</a></p> </li> </ul>
</div> </body> </html>

2.10 독립적인 링크 텍스트

2.10.1 링크 텍스트 자체로서 독립적인 의미를 갖는다.

시각 장애인의 경우, 홈페이지를 순차적으로 읽어 주는 기계를 통해서 탐색하는데, 빠른 탐색을 위해 키보드의 Tab key로 링크에서 다음 링크로 건너 띄는 경우가 많이 있다. 그럴 때에 음성으로 그 링크의 성질을 설명해주는데 ‘여기’라고 나오면 도대체 그 링크가 어디로 연결될 지를 짐작 할 수 없다.
따라서 아래에 같이 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 수정해야 한다.

좋지 않은 예

Abc 제품에 대한 자세한 설명을 보리면 <a href="#">여기</a>를 누르십시오.

좋은 예

자세한 내용이 궁금하신 분은 <a href="#"> Abc 제품에 제품에 대한 셜명서</a>를 보십시오

2.10.2 반복적인 이미지 링크도 구별되는 독립적인 의미를 갖는다.

"더보기", "자세히보기" 등 각 콘텐츠에 반복적으로 열람되는 이미지 링크 사용시 음성으로 링크가 구체적으로 어디로 연결될 지를 짐작 할 수 없다.
따라서 아래에 같이 링크 텍스트가 독립적으로도 의미를 가질 수 있도록 "000 더보기","000 자세히 보기"로 수정해야 한다.

2.11 웹 문서에는 독립적인 제목을 붙인다

웹문서 제목

일반인들의 사용성 측면, 검색 엔진의 효율성 측면에서 제목은 매우 중요하다. 또, 시각 장애인에게는 제목이 여러 문서를 구분하고, 현재 위치를 파악하고 앞으로 계속 탐색할 것인지 말 것인지 결정하는 가장 중요한 단서가 된다.
따라서 제목은 해당 문서의 내용을 대표할 수 있도록 정확하고 간결하게 작성해야 한다.

<title> Daum 서비스명 - 서브 서비스명 : 문서제목  </title>

head테그안에서 title 선언시 주의사항

utf-8 인코딩 문서에서 head테그 맨 상단에 한글이 포함된 title 오면 IE 일부에서 문서가 하얗게 보여지는 현상이 일어난다.
따라서 head테그 맨 상단에 title선언보다 meta테그 인코딩 먼저와야 한다.

좋지 않은 예

<head>
<title> Daum tv팟 - 베스트 동영상 </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

좋은 예

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title> Daum tv팟 - 베스트 동영상  </title>

2.12 양식 컨트롤과 양식 이름표

양식 컨트롤과 양식 이름표를 명확히 짝짓는다

좋지 않은 예

<input type="radio" name="sex" value="M" 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>

참고 출처:

실전 웹 표준 가이드 : 한국소프트웨어진흥원
소수 사용자를 위한 웹 접근성 : lg전자 global elearning group, 신승식
공평한 인터넷 환경 제공을 위한 창의적 UI 발상 프로젝트 : Daum 커뮤니케이션 커뮤니티 UI팀 조제희
웹 접근성 이해 : 한국정보문화 진흥원 접근기술 연구팀 현준호
http://www.bb00dd.com/blog/entry/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1-%ED%96%A5%EC%83%81%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9B%B9-%ED%91%9C%EC%A4%80%ED%99%94-%EA%B0%80%EC%9D%B4%EB%93%9C-1

'개발도 하냐?' 카테고리의 다른 글

웹표준관련 책 (0)	2008.02.02
Internet Explorer Developer Toolbar (0)	2008.02.02
또배워야하는기술 - W3C의「스파클」 (0)	2008.01.22
2008년 비지니스 키워드 1년내에 웹접근성 준수를위한 기술컨설팅 및 사업수행필요 (1)	2008.01.20
웹2.0 지불대행서비스 이니시스 C2C Payment (0)	2008.01.20

오픈비 : 삽질은없다