Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 애플리케이션 콘텐츠 구현 예 >
내비게이션 제작기법
아래의 예제는 가로 2단, 5개의 아이템으로 만든 메뉴의 구성 예로써 Tab 키를 이용하여 메뉴를 사용할 수 있도록 만든 것이다. 주 메뉴에 초점이 주어지면 하위 메뉴가 자동적으로 펼쳐지며, Tab에 의해 이동하는 경우 이동 순서는 초점이 주어진 주 메뉴를 읽고, 이어서 Tab 키를 누를 때마다 하위 메뉴로 하나씩 이동한다. 또한 하위 메뉴를 마지막까지 이동한 후에는 다음번 주 메뉴로 이동한다.
Shift + Tab 키를 이용하는 경우에는 펼쳐있는 하위 메뉴를 역순으로 이동한 후에 이전 주 메뉴로 이동한다. 이후에는 주 메뉴 간을 역순으로 이동한다.
[그림] 가로 2단 메뉴 예제
화면 낭독 프로그램이 사용되더라도 Tab 키에 의한 초점 이동과정은 화면 낭독 프로그램이 설치되지 않았을 때와 동일하여야 한다. 그러나 Shift + Tab 키를 이용하여 역순으로 이동하는 경우에는 열려있는 하위 메뉴를 역순으로 하나씩 이동한 후에 주 메뉴로 초점이 이동한다. 이후에는 주 메뉴에 초점이 있는 경우에 Shift + Tab 키를 누르면 직전 주 메뉴로 초점이 이동하여야 한다.
가로 2단 메뉴의 HTML 코드와 JavaScript 코드는 하위 메뉴가 있다는 것을 제외하면 가로 1단 메뉴의 코드와 그 구조가 동일하므로 이 문서에서 코드에 대한 자세한 설명을 기술하지 않는다.
//HTML Document
<body>
<div id="TopMenu">
<div id="TopMenuSub">
<ul><li class="menu1"><a href="./menu1.htmlf">
<img src="./img/menua_off.gif" alt="고객민원" /></a>
<div class="TopSubMenu"><ul>
<li><a href="./고객센터.html">
<img src="./img/menua_1_off.gif" alt="고객센터" /></a>
</li>
<li><a href="./질의응답.html">
<img src="./img/menua_2_off.gif" alt="질의응답" /></a>
</li>
<li><a href="./국민제안.html">
<img src="./img/menua_3_off.gif" alt="국민제안" /></a>
</li>
<li><a href="./국민신고.html">
<img src="./img/menua_4_off.gif" alt="국민신고" /></a>
</li></ul></div>
</li>
..
<li class="menu5">
<a href="./행정안전부.html">
<img src="./img/menue_off.gif" alt="행정안전부" /></a>
<div class="TopSubMenu"><ul>
<li><a href="./소개.html">
<img src="./img/menue_1_off.gif" alt="소개" /></a>
</li>
<li><a href="./조직.html">
<img src="./img/menue_2_off.gif" alt="조직" /></a>
</li>
<li><a href="./장관소개.html">
<img src="./img/menue_3_off.gif" alt="장관소개"/></a>
</li>
<li><a href="./차관소개.html">
<img src="./img/menue_4_off.gif" alt="차관소개" /></a>
</li>
</ul></div>
</li></ul>
</div>
</div>
<script type="text/javascript">
var TopMenu1 = new fnTopMenu1_Type1;
TopMenu1.DivName = "TopMenuSub";
TopMenu1.fnName = "TopMenu1";
TopMenu1.DefaultMenu = 0;
TopMenu1.DefaultSubMenu = 0;
TopMenu1.Start();
</script>
</body>// JavaScript Document
function fnTopMenu1_Type1() {
this.menu = new Array();
this.menuseq = 0;
this.Start = function() { this.MenuBox = document
.getElementById(this.DivName).getElementsByTagName("ul")[0].childNodes;
// 메뉴의 갯수를 파악하는 부분
this.MenuLength = this.MenuBox.length;
// 메뉴의 주 메뉴 링크부분에
// 마우스나 키보드의 반응을 넣는 부분
for ( var i=0; i<this.MenuLength; i++ ) {
if(this.MenuBox.item(i).tagName != "LI" ){continue;}
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.MenuSubBox=this.MenuBox.item(i).getElementsByTagName("div")[0];
this.MenuSubMenu= this.MenuSubBox.getElementsByTagName("ul")[0]
.getElementsByTagName("li");
= this.MenuSubMenuLength;
= this.MenuSubMenu.length;
// 메뉴 2뎁스 링크에 마우스나 키보드의 반응 넣는 부분
for ( var j=0; j<this.MenuSubMenuLength; j++ ) {
this.MenuSubLink = this.MenuSubMenu.item(j)
.getElementsByTagName("a")[0];
this.MenuSubLink.i=i;
this.MenuSubLink.j=j;
this.MenuSubLink.fnName = this.fnName;
this.MenuSubLink.onmouseover=
this.MenuSubLink.onfocus = function() {
eval(this.fnName+".fnMouseSubOver(" + this.i + "," + this.j + ")") }
this.MenuSubLink.onmouseout= this.MenuSubLink.onblur=function(){
eval(this.fnName +".fnMouseSubOut(" + this.i + "," + this.j + ")")}
}
this.MenuSubBox.style.display = "none";
this.menuseq++;
this.menu[this.menuseq] = i
}
if(this.DefaultMenu!=0){this.fnMouseOver(this.menu[this.DefaultMenu]);
if(this.DefaultSubMenu!= 0){this.fnMouseSubOver(this.menu[this.DefaultMenu];
this.DefaultSubMenu- 1);
}
}
}
// 메뉴의 주 메뉴 링크부분에
// 마우스나 키보드의 반응에 의해 실행하는 부분
this.fnMouseOver = function(val) {
for ( var i=0; i<this.MenuLength;i++){
if ( this.MenuBox.item(i).tagName!="LI"){continue;}
this.MenuImg= this.MenuBox.item(i)
.getElementsByTagName("a")[0]
.getElementsByTagName("img")[0];
this.MenuSDiv=this.MenuBox.item(i)
.getElementsByTagName("div")[0];
if ( i == val ){this.MenuImg.src
= this.MenuImg.src.replace("_off.gif","_on.gif");
this.MenuSDiv.style.display = "block";}
else{this.MenuImg.src= this.MenuImg.src.replace("_on.gif","_off.gif");
this.MenuSDiv.style.display="none";}
}
}
// 메뉴의 하위 메뉴 링크부분에
// 마우스나 키보드의 반응에 의해 실행하는 부분
this.fnMouseSubOver = function(mnum,snum) {
this.SubMenuImg
= this.MenuBox.item(mnum).getElementsByTagName("div")[0]
.getElementsByTagName("ul")[0].getElementsByTagName("li")
[snum].getElementsByTagName("a")[0]
.getElementsByTagName("img")[0];
this.SubMenuImg.src
= this.SubMenuImg.src.replace("_off.gif","_on.gif");
}
this.fnMouseSubOut = function(mnum,snum) {
this.SubMenuImg
= this.MenuBox.item(mnum).getElementsByTagName("div")[0]
.getElementsByTagName("ul")[0].getElementsByTagName("li")
[snum].getElementsByTagName("a")[0]
.getElementsByTagName("img")[0];
this.SubMenuImg.src= this.SubMenuImg.src.replace("_on.gif","_off.gif");
}
}
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)
팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)