항목 1.1 텍스트 아닌 콘텐츠의 인식
웹페이지에서 제공되는 콘텐츠 중에 텍스트 형태가 아닌 것들은 텍스트 형태의 대체 콘텐츠를 제공하여야 한다. 텍스트 형태는 다른 형태로 변형이 용이하기 때문에 이미지를 볼 수 없는 경우나 스크린 리더와 같이 텍스트 데이터에 의존해서 데이터를 전달하는 경우 아주 용이하게 사용될 수 있다. 또한 검색 엔진의 경우에도 이러한 텍스트 데이터를 이용하여 정보를 분석하게 된다.
이미지에 대한 대체 콘텐츠를 제공하는 방법은 아래와 같이 이미지 엘리먼트의 alt속성을 이용하면 된다. 대체 텍스트를 제공할 때에는 이미지를 대체 할 수 있는 텍스트를 이용해야 하고 이미지에 대한 충분한 정보를 제공하지 않는 '지도이미지', '조직도 도표'와 같은 내용은 피해야 한다.
<img src="/Lab/images/accessibility/WhyDiagram.gif" alt="웹접근성이라는 용어를 처음 들어봄 : 74%, 나머지 : 26%">적절한 대체 텍스트가 제공된 예
이미지에 대한 대체콘텐츠가 alt로 나타내기에 너무 긴 경우에는 longdesc속성을 이용하여 외부 페이지에서 대체 텍스트를 제공하는 방법을 이용한다.
<img src="organization.png" longdesc="organication.html" alt="정보통신 접근성 향상 표준화 포럼 조직도"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>정보통신 접근성 향상 표준화 포럼 조직도</title>
</head>
<body>
<ol>
<li>정보통신 접근성 향상 표준화 포럼</li>
<li>고문위원</li>
<li>운영위원회</li>
<li>사무국 (한국정보문화진흥원)</li>
<li>
<ul>
<li>정책분과</li>
<li>정보통신분과</li>
<li>웹접근성분과</li>
</ul>
</li>
</ol>
</body>
</html>organization.html
항목 1.2 영상매체의 인식
동영상이나 소리로 구성된 콘텐츠를 제공하고자 할 경우에는 이 콘텐츠와 동등하게 대응되는 대체 콘텐츠를 제공해야한다. 일반적으로 동영상이나 음성파일의 경우 화면이나 소리와 동기화 되어 있는 캡션파일을 제공하여 플러그인이 이 캡션파일을 제공할 수 있도록 한다.
Windows Media Player에서 캡션 제공하는 방법
동영상을 웹페이지에서 사용할 때 접근성을 위해서 가장 좋은 방법은 웹페이지에서 동영상 파일을 직접 볼 수 있게 제공하는 것이 아니라 동영상 파일의 링크를 제공하여 사용자가 가지고 있는 플레이어에서 동영상 파일을 사용할 수 있게 하는 것이다. 일반적으로 웹페이지에 포함된 플레이어 보다는 사용자 환경에서 직접 구동되는 플레이어가 더 많은 접근성 기능을 제공한다.
이러한 단점에도 불구하고 동영상파일을 웹페이지에서 플레이할 경우에는 아래와 같은 방법으로 SMIL파일과 Windows Media Player영상을 동기화 할 수 있다.
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="320" height="304">
<param name="URL" value="mediafile.wmv">
<param name="autoStart" value="True">
<param name="uimode" value="full">
<param name="captioningID" value="captions">
<param name="SAMIFileName" value="samifile.smi">
</object>
<div id="captions" style="background-color:black; color:white; width:320px; height:70px">
</div>captioningID값을 같게 해 줌으로써 SMIL파일과 동영상 파일을 동기화 해서 제공할 수 있다. 단, 위의 코드는 windows에서의 미디어 플레이어용 코드 이므로 항목 4.1의 방법으로 대체 콘텐츠를 같이 제공해 주어야 한다.
항목 1.3 색상에 무관한 인식
색상에만 의존해서 정보를 구분하는 콘텐츠를 제공할 경우 색상을 구분 할 수 없는 환경에서는 정확한 정보를 제공 할 수 없기 때문에 피해야 한다. 아래 도표의 경우 색상만으로 각 항목을 구분해야만 하기 때문에 이러한 경우 색상 외에도 패턴을 넣거나 각 항목 별로 텍스트를 제공하여 구분 할 수 있도록 해야한다.
색상만으로 항목을 구분할 수있는 도표
항목 2.1 이미지 맵 기법 사용 제한
서버측 이미지 맵의 경우 포인팅 기기(마우스, 터치스크린 등)외의 기기로는 사용이 불가능하기 때문에 클라이언트측 이미지 맵을 사용해야 한다.
<a href="server-image-map.php">
<img src="http://pcsi.go.kr//img/main_2005_07/quick_banner.gif" ismap="ismap" alt="Quick Menu" />
</a>포인팅 기기로만 접근할 수 있는 서버측 이미지 맵
항목 2.2 프레임 사용 제한
과도하거나 불필요한 곳에 프레임을 사용할 경우 콘텐츠를 선형화하여 인식하는데 어려움이 따르기 때문에 되도록 프레임은 사용하지 않는 것이 좋다. 예를 들어서 브라우저 창의 주소를 고정하기 위해서 사용되는 프레임이나 탭형태의 콘텐츠를 구성하는데 프레임을 사용하는 것은 올바른 프레임의 사용이 아니기 때문에 피해야 한다.
프레임을 사용할 때에는 각 프레임이 어떠한 역할을 하는지를 프레임 태그의 title속성으로 제공하여 프레임에 접근했을 때 손쉽게 프레임의 용도를 파악 할 수 있게 해 주어야 한다.
<noframe>태그의 경우 의미 없는 '프레임이 지원되는 브라우져를 사용하시기 바랍니다.'와 같은 안내문 보다는 각 프레임에 접근 할 수 있게 프레임이 지원되지 않을 때 페이지를 이용할 수 있는 의미 있는 내용으로 구성되어야 한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<base href="http://pcsi.go.kr/publish/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>frames</title>
</head>
<frameset rows="100,*">
<frame src="top.html" title="상단 대메뉴" />
<frameset cols="180,*">
<frame src="nav.html" title="좌측 서브메뉴" />
<frame src="content.html" title="메인 콘텐츠" />
</frameset>
<noframes>
<body>
<ul>
<li><a href="top.html">상단 대메뉴</a></li>
<li><a href="nav.html">좌측 서브메뉴</a></li>
<li><a href="content.html">메인 콘텐츠</a></li>
</ul>
</body>
</noframes>
</frameset>
</html>항목 2.3 깜빡거리는 객체 사용 제한
과도하게 깜빡이는 콘텐츠는 광과민성발작을 일으킬 수 있기 때문에 피해야 한다. 또한 불필요하게 콘텐츠에 움직임을 줄 경우 사용성이나 콘텐츠의 인식도가 떨어지기 때문에 글자가 흐르는 콘텐츠나 과도한 움직임을 가지고 있는 네비게이션 등은 피해야 한다.
글자가 깜빡이게하거나 흐르게 하는 비표준 태그인 <marquee>나 <blink>태그는 사용하지 말아야한다.
항목 2.4 키보드로만 운용 가능
마우스와 같은 포인팅장치만으로 제어할 수 있는 콘텐츠의 경우 이러한 기기를 사용할 수 없는 환경의 사용자는 콘텐츠를 이용할 수 없기 때문에 키보드로도 마우스와 동일한 작동이 가능하도록 기능을 제공하여야 한다.
항목 2.5 반복 네비게이션 링크
콘텐츠를 선형화 하여 인식할 경우 상단의 네비게이션은 매 페이지에서 반복되기 때문에 이를 건너뛸 수 있는 스킵 네비게이션 기능을 제공해 주어야 한다. 스킵네비게이션은 HTML코드 상에 콘텐츠로의 앵커를 제공하고 CSS로 이를 감추어 줌으로써 구현할 수 있다.
<div id="accessibility">
<ul>
<li><a href="#body">콘텐츠 바로가기</a></li>
<li><a href="#topmenu">주메뉴 바로가기</a></li>
<li><a href="#submenu">하위메뉴 바로가기</a></li>
</ul>
</div>#accessibility {
display: none;
}항목 2.6 반응시간의 조절 가능
시간에 따라서 자동적으로 변하는 콘텐츠의 경우 이를 사용자에게 미리 알리고 이 시간 제한 기능을 사용자가 스스로 제어할 수 있게 해 주어야 한다. 예를 들어서 팝업창으로 메시지를 제공하고 5초가 지난 후에 자동으로 닫히는 경우 메시지 내용을 사용자가 5초안에 내용을 이해하지 못할경우 사용자가 콘텐츠를 이해하지 못하게 되기 때문에 사용자가 시간을 제어할 수 있는 기능을 제공해 주어야 한다.
항목 3.1 데이터 테이블 구성
데이터 테이블을 이용해서 콘텐츠를 제공할 때에는 의미에 맞는 태그를 사용하여서 테이블의 정보를 전달해야한다. 데이터 테이블을 구성하는데 사용되는 태그와 속성들은 다음과 같다.
- <caption>과 summary
- <caption>은 표의 제목을 나타내고 summary는 표의 내용에 대한 요약을 제공한다.
- <thead>, <tbody>, <tfoot>
- 표의 행단위 그룹핑을 위해서 사용한다.
- <colgroup>, <col>
- 표의 열단위 그룹핑을 위해서 사용한다.
- <th>, <td>
- 표의 제목을 나타내는 칸을 표시하기 위해서 <th>를 사용하고 <th>에 따른 데이터는 <td>를 이용한다.
<table class="data" summary="각 전정별로 야스쿠니 신사 합사자 수와 총계, 연도별 합사자수, 전쟁별 합사자 수의 백분율">
<caption>전쟁별 야스쿠니 신사 합사자 수</caption>
<thead>
<tr>
<th>번호</th>
<th>전쟁의 명칭</th>
<th>합사자수<br>1972.10）</th>
<th>합사자수<br>2000.10）</th>
<th>합사자수<br>2004.10）</th>
<th>백분솔<br>(％)</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2">計</th>
<td>2,444,185</td>
<td>2,466,344</td>
<td>2,466,532</td>
<td>100.00%</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<th>명치유신</th>
<td>7,399</td>
<td>7,751</td>
<td>7,751</td>
<td>0.31%</td>
</tr>
<tr>
<td>2</td>
<th>서남역전후</th>
<td>7,292</td>
<td>6,971</td>
<td>6,971</td>
<td>0.28%</td>
</tr>
<tr>
<td>3</td>
<th>청일전쟁</th>
<td>13,619</td>
<td>13,619</td>
<td>13,619</td>
<td>0.55%</td>
</tr>
<tr>
<td>4</td>
<th>대만 및조선침략 사건</th>
<td>1,375</td>
<td>1,130</td>
<td>1,130</td>
<td>0.05%</td>
</tr>
<tr>
<td>5</td>
<th>북청사변</th>
<td>1,256</td>
<td>1,256</td>
<td>1,256</td>
<td>0.05%</td>
</tr>
<tr>
<td>6</td>
<th>러일전쟁</th>
<td>88,243</td>
<td>88,429</td>
<td>88,429</td>
<td>3.59%</td>
</tr>
<tr>
<td>7</td>
<th>대정3~9년전쟁</th>
<td>4,850</td>
<td>4,850</td>
<td>4,850</td>
<td>0.20%</td>
</tr>
<tr>
<td>8</td>
<th>제남사변</th>
<td>157</td>
<td>185</td>
<td>185</td>
<td>0.01%</td>
</tr>
<tr>
<td>9</td>
<th>만주사변</th>
<td>17,137</td>
<td>17,175</td>
<td>17,176</td>
<td>0.70%</td>
</tr>
<tr>
<td>10</td>
<th>지나사변</th>
<td>187,288</td>
<td>191,218</td>
<td>191,250</td>
<td>7.75%</td>
</tr>
<tr>
<td>11</td>
<th>태평양전쟁</th>
<td>2,115,569</td>
<td>2,133,760</td>
<td>2,133,915</td>
<td>86.52%</td>
</tr>
</tbody>
</table>의미에 맞는 태그를 사용하여 접근성을 높인 표의 예
항목 3.2 페이지의 논리적 구성
페이지의 논리적인 구성을 위해서는 HTML태그를 사용할 때 각각의 태그를 표현의 수단으로 사용하지 않고 의미에 맞게 사용해야 한다. 이 과정에서 가장 중요한 것은 문서의 의미는 HTML로만 기술하고 문서의 겉모양은 CSS로 구현하여 문서의 구조와 표현을 분리하는 것이다. 문서를 의미에 맞게 마크업 하기 위해서는 레이아웃을 설정할 때 테이블을 이용하지 않고 CSS를 이용해서 레이아웃을 설정하며, <h1>~<h6>, <p>, <ul>, <ol>, <dl>, <table>과 같은 태그들을 각각의 의미에 맞게 사용해야 한다.
항목 3.3 온라인 서식 구성
서식을 구성할 때에는 용도에 맞는 태그를 사용하고 각 서식들간의 연결 정보를 제공하여 제작하여야 한다.
<label>
<label>은 사용자 입력 콘트롤과 입력 콘트롤의 제목을 연결시켜주는 역할을 한다. <label>과 콘트롤을 연결하기 위해서는 <label>의 for와 콘트롤의 id를 동일하게 맞추면 된다.
<label for="main-login-id">아이디</label>
<input id="main-login-id" type="text"><fieldset>, <legend>
<fieldset>은 폼 콘트롤 들을 그루핑 하는 데에 사용되고 각각의 그루핑된 콘트롤 들은 <legend>을 사용하여 제목을 설정한다.
<form action="/admin/login.php" method="post">
<fieldset>
<legend>로그인</legend>
<label for="user-password">비밀번호</label>
<input id="user-password" type="password" name="password" />
<input type="submit" value="로그인" />
</fieldset>
</form>항목 4.1 신기술의 사용
플래시나 자바스크립트와 같은 신기술을 사용할 때에는 각 기술들이 자체적으로 접근성을 가지고 있어야 하고 각 기술들에 대한 대체 콘텐츠가 제공되어야 한다.
자체적인 접근성을 가지고 있는 신기술 콘텐츠는 각 콘텐츠를 제작할 때에 저작도구에서 제공하는 방법을 이용해야 한다. 예를 들어서 플래시로 제작된 콘텐츠의 접근성을 보장하기 위해서는 플래시에서 제공하는 접근성 패널을 이용하여 무비클립이나 버튼에 대체 텍스트를 제공해 주고 탭인덱스를 입력한다. 이렇게 제작된 플래시 콘텐츠는 스크린리더로 접근을 할때 대체 텍스트를 이용할 수 있고 키보드로 이용할 때에 입력된 탭인덱스에 따라서 이용할 수 있기 때문에 높은 접근성을 갖게 된다.
<object>태그는 하위에 포함하고 있는 콘텐츠를 상위 <object>의 대체 콘텐츠로 인식을 한다. 이 기능과 함께 Internet Explorer의 conditional comment기능을 이용해서 아래와 같이 플래시를 불러들일 때 대체 콘텐츠를 제공 할 수 있다.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="660" height="76">
<param name="movie" value="/images/nav/top_navi.swf?xmlPath=/share/link.xml&selectedMM=0&selectedSM=">
<!--[if !IE]> <-->
<object type="application/x-shockwave-flash" data="/images/nav/top_navi.swf?xmlPath=/share/link.xml&selectedMM=0&selectedSM=" width="660" height="76">
<ul>
<li><a href="/About/">재단소개</a></li>
<li><a href="/Inform/">알림마당</a></li>
<li><a href="/SupportWork/">재단사업</a></li>
<li><a href="/History/">올바른역사</a></li>
<li><a href="/DataGarden/">자료마당</a></li>
<li><a href="/Public/">참여마당</a></li>
</ul>
</object>
<!--> <![endif]-->
</object>자바스크립트의 기능을 이용하여 콘텐츠를 제공하는 경우 자바스크립트에 의존하여 기능을 구현하면 안되고 HTML만으로도 핵심 기능이 작동할 수 있게 제작을 한 후에 자바스크립트로 추가 효과나 UI를 입히는 순서로 제작을 하여야 한다.
<a href="popup.html" onclick="window.open(this.href, 'popupName', 'width=300,height=200'); return false;"><img src="openWindow.gif"></a>자바스크립트가 작동하지 않을 때에서 팝업을 이용할 수 있게 제작된 팝업 스크립트
폼의 값을 체크하는 스크립트의 경우 많은 경우에 스크립트 만으로 폼을 서밋하는 방식을 이용하는 경우가 많은데 자바스크립트가 작동하지 않을 때에도 폼을 이용할 수 있게 제작을 하고 서밋이 발생했을 때 onsubmit 이벤트 핸드러를 이용하여 기능을 해치지 않고 폼을 이용할 수 있게 제작 하여야 한다.
<script type="text/javascript">
function submitForm(formEl) {
//TrimAll(formEl);
var errorMessage = null;
var objFocus = null;
if (formEl.loginId.value.length == 0) {
errorMessage = "아이디를 넣어주세요.";
objFocus = formEl.loginId;
} else if (formEl.loginPassword.value.length == 0) {
errorMessage = "비밀번호를 넣어주세요.";
objFocus = formEl.loginPassword;
}
if(errorMessage != null) {
alert(errorMessage);
objFocus.focus();
return false;
}
return true;
}
</script>
<form id="loginForm" name="loginForm" action="" onsubmit="return submitForm(this)">
<label for="loginId">아이디</label> <input type="text" id="loginId" name="loginId" />
<label for="loginPassword">비밀번호</label> <input type="password" id="loginPassword" name="loginPassword" /><br />
<input type="image" src="login.gif" alt="Login" />
</form>자바스크립트가 작동하지 않을 때에도 폼 서밋이 정상적으로 이루어지는 폼 체크 구현 방법
All rights reserved. IAB FORUM | email to : dezaki@nia.or.kr
