Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 애플리케이션 콘텐츠 구현 예 >
Javascript 대체 기법
아래 에제는 noscript 기능을 이용하여 CSS만으로도 동작하도록 프로그래밍 한 드롭다운 메뉴의 예이다. 즉 Tab 키를 이용하여 ‘검색 사이트 보기’ 링크에 초점이 주어지면, ‘google’, 'yahoo', 'naver' 등의 하위 링크 목록이 나타나는데 이때 Tab 키를 눌러 하위 링크 목록으로 이동할 수 있다.
[그림] noscript 기능을 이용한 드롭다운메뉴
Shift + Tab 키를 누르면 Tab 키의 경우와 반대 순서로 이동한다. 화면 낭독 프로그램은 초점의 이동 순서에 따라 그 내용을 읽어 주어야 한다.
JavaScirpt 코드에서 밑줄로 표시된 부분은 ‘검색 사이트들 보기’에 초점이 주어졌을 경우 하위 링크 목록을 나타나게 하는 것이고, 초점이 없어졌을 경우에는 하위 링크 목록을 보이지 않게 하는 것이다. JavaScirpt가 실행되지 않을 때 화면에 하위 링크 목록이 모두 나타나도록 noscript에서 설정한다. 이 부분도 밑줄로 표시하였다.
<link type="text/css" href="reset.css" rel="stylesheet"/>
<style type="text/css" title="">
#selectbox {padding:5px 10px; border:1px solid #aaa; width:130px;}
#selectbox a{font-size:12px; color:#333; text-decoration:none;}#sites{display:none;}
#sites{list-style: none;}
#sites a{color:black; text-decoration:none; display:block; width:110px;
height:10px; padding:10px; border-bottom:1px dashed #aaa; font-size:12px;
font-family:"dotum";}
#sites .last a{border-bottom: 0; padding-bottom: 5px;}
</style>
</head><script type="text/javascript">
<!--
var isOver = false;
var bindSelectbox = function() {
var button = document.getElementById("button");
button.onmouseover = button.onfocus = function() {
isOver = true;
document.getElementById("sites").style.display = "block";}
button.onmouseout = function() {
isOver = false;
document.getElementById("sites").style.display = "none";}
var menus
= document.getElementById("sites").getElementsByTagName("a");
for (var i=0; i<menus.length; i++) {
var menu = menus[i];
menu.onmouseover = menu.onfocus = function(){
isOver = true;
document.getElementById("sites").style.display="block";}
menu.onmouseout = menu.onblur = function(){
isOver = false;
setTimeout(function(){
if (!isOver){
document.getElementById("sites")
.style.display = "none";} }, 100);}
} }
window.onload = function(){bindSelectbox();}
//-->
</script>
<noscript>
#sites {
display: block;
}
</noscript><body>
<div id="selectbox">
<strong><a href="#sites" id="button">검색 사이트들 보기▼</a></strong>
<ul id="sites">
<li><a href="http://google.com">http://google.com</a>
</li><li><a href="http://yahoo.com">http://yahoo.com</a></li>
<li class="last"><a href="http://naver.com">http://naver.com</a></li>
</ul>
</div>
<strong></strong>
</body>
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)