Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 애플리케이션 콘텐츠 구현 예 >
내비게이션 제작기법
드롭다운(Drop-down)메뉴는 마우스 롤오버(mouse rollover)에 의하여 하위 메뉴가 펼쳐지는 형태의 메뉴이다. 따라서 키보드 조작에 따른 결과는 앞에 예로 든 가로 2단 메뉴의 경우와 동일하다.
[그림] 드롭다운 메뉴 예제
드롭다운 메뉴의 키보드 내비게이션은 다음과 같다. Tab 키를 이용하여 '관련사이트' 링크 메뉴로 초점이 이동하면, Enter 키를 눌러 하위 메뉴를 화면에 보여주고, 첫 번째 하위 메뉴('정부청사관리소')로 초점이 이동한다. 이어서 Tab 키를 누를 때마다 다음 하위 메뉴로 이동한다. 마지막 하위 메뉴('소청심사위원회')로 초점이 이동한 후에는 드롭다운 메뉴를 빠져나가면서 드롭다운 메뉴가 비활성화 된다.
Shift + Tab 키에 의한 이동시에는 현재의 메뉴가 주 메뉴('관련사이트')이면 드롭다운 메뉴를 빠져나가면서 드롭다운 메뉴가 비활성화 되어야 하며, 하위 메뉴에 초점이 있을 경우에는 Shift + Tab 키를 누를 때마다 역순으로 이동하여 주 메뉴로 초점이 이동한다.
화면 낭독 프로그램을 사용할 경우에는 Tab 키와 Shift + Tab 키의 조작에 따라 초점이 주어지는 메뉴를 읽어주어야 한다. 예를 들어 '관련사이트' 링크 메뉴에 초점이 주어지면 대체 텍스트('관련사이트, 엔터키를 누르시오')를 읽어주어야 한다.
// HTML Document
<body>
<div id="Content">
</div>
<div id="LinkSite">
<div id="LinkSiteSub">
<dl><dt><a href="#LinkSiteList">
<img src="./img/linksite_menu_off.gif" alt="관련사이트" />
</a></dt>
<dd id="LinkSiteList"><ul>
<li><a href="http://./정부청사관리소.html">
<img src="./img/linksite_menus_1_off.gif" alt="정부청사관리소" />
</a></li>
<li><a href="#"><img src="./img/linksite_menus_2_off.gif" alt="국가기록원" />
</a></li>
<li><a href="#">
<img src="./img/linksite_menus_3_off.gif" alt="지방행정연구원" /></a></li>
<li><a href="#">
<img src="./img/linksite_menus_4_off.gif" alt="국립과학수사연구소" /></a></li>
<li><a href="#">
<img src="./img/linksite_menus_5_off.gif" alt="중앙공무원교육원" /></a></li>
<li><a href="#">
<img src="./img/linksite_menus_6_off.gif" alt="소청심사위원회" /></a></li></ul>
</dd></dl>
</div>
</div>
<script type="text/javascript">
var isShiftDown = false;
document.body.onkeydown = function(e){
var eCode = (window.netscape) ? ev.which:event.keyCode;
if(eCode == 16)
isShiftDown = true;}
document.body.onkeyup = function(e){ isShiftDown = false;}
var LinkSite1 = new fnLinkSite_Type1;
LinkSite1.DivName = "LinkSiteSub";
LinkSite1.fnName = "LinkSite1";
LinkSite1.Start();
</script>
</body>// JavaScript Document
function fnLinkSite_Type1() {
this.Start=function() {
this.LinkSite=document.getElementById(this.DivName)
.getElementsByTagName("dl")[0];
this.MainLink=this.LinkSite.getElementsByTagName("dt")[0]
.getElementsByTagName("a")[0];
this.SubMenuBox=this.LinkSite.getElementsByTagName("dd")[0];
this.MainLink.fnName = this.fnName;
// 관련사이트 메뉴의 클릭에 반응 하는 부분
this.MainLink.onclick = function() {
eval( this.fnName +".fnMouseOver(0,this)") }
// 관련사이트 메뉴의 MouseOut시 발생하는 부분
this.MainLink.onmouseout = function() {
eval( this.fnName +".fnMouseOut(0,this)") };
// 관련사이트 서브메뉴의 박스 부분에
// 마우스나 키보드의 반응을 넣는 부분
this.SubMenuBox.style.display = "none";
this.SubMenuBox.fnName = this.fnName;
this.SubMenuBox.onmouseover=this.SubMenuBox.onfocus = function() {
eval(this.fnName +".fnMouseOver(1,this)") }
this.SubMenuBox.onmouseout = this.SubMenuBox.onblur
=function(){eval(this.fnName +".fnMouseOut(1,this)")}
this.SubMenuList=this.SubMenuBox.getElementsByTagName("ul")[0]
.getElementsByTagName("li");this.SubMenuListTotal = this.SubMenuList.length;
// 관련사이트 서브메뉴의 링크 부분에
// 마우스나 키보드의 반응을 넣는 부분
for ( var i=0; i<this.SubMenuListTotal; i++ ) {
this.SubLink=this.SubMenuList.item(i)
.getElementsByTagName("a")[0];
this.SubLink.i=i;
this.SubLink.fnName=this.fnName;
this.SubLink.onmouseover=this.SubLink.onfocus
=function(){eval( this.fnName +".fnSubMouseOver("+this.i+")")}
this.SubLink.onmouseout = this.SubLink.onblur
=function(){eval( this.fnName +".fnSubMouseOut("+this.i+")") }
}
}
// 관련사이트 메뉴의 마우스나 키보드의 반응에 의해 실행하는 부분
this.fnMouseOver=function(num,val){
if ( num == 0 ){
this.MainMenuImg=val.getElementsByTagName("img")[0];}else if(num == 1)
{this.MainMenuImg=this.MainLink.getElementsByTagName("img")[0];}
this.SubMenuBox.style.display = "block";
this.MainMenuImg.src=this.MainMenuImg.src.replace("_off.gif","_on.gif");
}
this.fnMouseOut=function(num,val){
if(num==0) {this.MainMenuImg=val.getElementsByTagName("img")[0];}
else if ( num == 1 ) {
this.MainMenuImg=this.MainLink.getElementsByTagName("img")[0];}
this.SubMenuBox.style.display = "none";
this.MainMenuImg.src= this.MainMenuImg.src.replace("_on.gif","_off.gif");}
// 관련사이트 서브메뉴의 링크 부분에
// 마우스나 키보드에 의해 실행하는 부분
this.fnSubMouseOver = function(val) {
for(var i=0; i<this.SubMenuListTotal; i++ ){
this.MenuImg=this.SubMenuList.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");}
}
}
// 관련사이트 서브메뉴에서 포커스를 벗어날 때
this.fnSubMouseOut = function(val) {
if(isShiftDown)
return;
if(val == this.SubMenuListTotal - 1){
this.SubMenuBox.style.display = "none";
this.MainMenuImg.src=this.MainMenuImg.src.replace("_on.gif","_off.gif");
for ( var i=0; i<this.SubMenuListTotal; i++ ){
this.MenuImg=this.SubMenuList.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");}}
}
}
}
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)