3.1 내비게이션 제작기법
3.1.1 가로 1단 메뉴
아래의 예제는 가로 1단, 5개의 주 메뉴만으로 구성한 메뉴의 예로, Tab 키를 이용하여 메뉴간의 이동이 가능한 예제이다.
[그림] 가로 1단 메뉴 예제
위의 예제는 Tab키를 누를 때마다 초점이 ‘고객민원’, ‘행정정보’ ... ‘행정안전부’ 등의 순서로 이동한다.
화면 낭독 프로그램을 사용하는 경우에는 초점의 이동 순서에 따라 메뉴의 내용을 읽어주어야 한다. Shift +Tab 키를 누를 때마다 초점의 이동 순서는 Tab 키의 이동 순서와 반대가 되어야 한다.
이 문서에서는 우리나라에서 구입할 수 있는 화면 낭독 프로그램인 센스리더 Professional Edition(센스), 드림보이스 7.0(드림-이번 평가에서는 드림보이스 7.0 베타 버전을 사용하였음.) 및 Jaws for Window 10.0(JAWS)의 세 가지 화면 낭독 프로그램을 이용하여 초점의 이동이 가능한가를 확인하였다. 참고로 이 문서는 화면 낭독 프로그램의 기능이나 성능을 평가하는 것이 목적이 아니다. 이 문서에서 화면 낭독 프로그램에 대한 시험 결과를 제시하는 것은 개발자들이 자체평가 단계에서 어떤 문제점에 봉착했을 때에 이 문제가 웹 콘텐츠 자체의 문제인지, 아니면 화면 낭독 프로그램의 문제인지를 구별할 수 있는 기준을 알려주기 위함이다.
위에 예로 든 세 가지 화면 낭독 프로그램은 초점이 주어진 요소를 읽어주는 것 외에도 매우 많은 기능을 가지고 있다. 그러나 이 문서에서는 여타의 기능에 대해서는 언급하지 않을 것이다. 이들 화면 낭독 프로그램에 대한 자세한 기능과 웹 콘텐츠의 내비게이션에 관한 기능 등은 각각의 화면 낭독 프로그램과 함께 제공되는 기술 자료나 웹 사이트를 참고하라.
웹 페이지는 HTML의 하이퍼텍스트 링크로 구성되어 있으며 메뉴 선택 기능은 JavaScript로 구성하였다. 위의 예제에 대한 HTML 코드는 다음과 같다.
우수 사례HTML 코드 부분
사례 코드
//HTML Document
<div id="TopMenu">
<div id="TopMenuSub">
<ul>
<li><a href="./고객민원.html"><img src="./img/menua_off.gif" alt="고객민원" />
</a></li>
<li><a href="./행정정보.html"><img src="./img/menub_off.gif" alt="행정정보" />
</a></li>
<li><a href="./뉴스소식.html"><img src="./img/menuc_off.gif" alt="뉴스/소식" />
</a></li>
<li><a href="./정책홍보.html"><img src="./img/menud_off.gif" alt="정책홍보" />
</a></li>
<li><a href="./행정안전부.html"><img src="./img/menue_off.gif" alt="행정안전부" />
</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var TopMenu1 = new fnTopMenu1_Type1;
TopMenu1.DivName = "TopMenuSub";
TopMenu1.fnName = "TopMenu1";
TopMenu1.DefaultMenu = 0;
TopMenu1.Start();
</script>위의 HTML 문서와 같이 사용하는 JavaScirpt는 다음과 같다.
우수 사례스크립트 코드 부분
사례 코드
// JavaScript Document
function fnTopMenu1_Type1() {
this.Start = function() {
this.MenuBox = document.getElementById(this.DivName
.getElementsByTagName("ul")[0].getElementsByTagName("li");
// 메뉴의 갯수를 파악하는 부분
this.MenuLength = this.MenuBox.length;
// 메뉴의 링크부분에 마우스나 키보드의 반응을 넣는 부분
for ( var i=0; i<this.MenuLength; i++ ) {
this.MenuLink = this.MenuBox.item(i)
.getElementsByTagName("a")[0];
this.MenuLink.i = i;
this.MenuLink.fnName = this.fnName;
this.MenuLink.onmouseover =this.MenuLink.onfocus = function() {
eval( this.fnName +".fnMouseOver("+this.i+")")}
this.MenuLink.onmouseout= this.MenuLink.onblur
=function() {eval( this.fnName+".fnMouseOver()")}
}
if ( this.DefaultMenu != 0 ) {this.fnMouseOver(this.DefaultMenu - 1);}
}
//메뉴의 링크부분에 마우스나 키보드의 반응에 의해 실행하는 부분
this.fnMouseOver = function(val) {
for ( var i=0; i<this.MenuLength; i++ ) {
this.MenuImg=this.MenuBox.item(i).getElementsByTagName("a")[0]
.getElementsByTagName("img")[0];
if(i==val){this.MenuImg.src= this.MenuImg.src.replace("_off.gif","_on.gif");}
else {this.MenuImg.src= this.MenuImg.src.replace("_on.gif","_off.gif");}
}
}
}
