Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 애플리케이션 콘텐츠 구현 예 >
효과적인 UI 제작기법
아래에 보인 롤링배너는 좌우 또는 상하로 배너를 순차적으로 교체하는 컨트롤이다. 마우스를 사용할 경우에는 좌우 또는 상하 이동 버튼을 클릭하여 사용한다. Tab 키를 이용할 경우에는 배너를 하나씩 순서대로 이동하므로 이동 버튼을 사용하지 않는다.
[그림] 가로 1단 메뉴 예제
그러므로 Tab 키에 의하여 이동 버튼을 이동하지 않도록 해야 한다. 따라서 이동 버튼을 이미지로 바꾸고, 마우스 포인터가 위치할 경우에는 포인터의 형태를 변경하도록 함으로써 동일한 효과를 내게 한다. 또한 이동 버튼의 대체 텍스트를 null(alt="")로 제공하여 그것을 읽지 않도록 한다. 프로그램에서는 이 부분을 밑줄로 표시하였다.
Shift +Tab 키에 의한 이동 방향은 Tab 키의 역순이다. 또한 세로 롤링 배너의 코딩 방법도 가로 롤링 배너의 경우와 동일하므로 따로 설명하지 않았다.
또한 이 예제에서는 이동과 관련한 기능을 JavaScript로 작성하여 JavaScript를 지원하지 않는 브라우저에서는 모든 배너들이 화면에 보이도록 함으로써 접근성을 향상시킨다. 화면 낭독 프로그램은 Tab 키에 의한 이동결과를 읽어 주어야 한다.
//HTML Document
<body>
<div id="BannerBox">
<div id="BannerList">
<div id="BannerListSub">
<ul><li><a href="./정보화마을.html">
<img src="./img/banner_01.gif" alt="정보화마을" /></a></li>
<li><a href="./주민서비스.html">
<img src="./img/banner_02.gif" alt="주민서비스" /></a></li>
<li><a href="./전자민원.html">
<img src="./img/banner_03.gif" alt="전자민원" /></a></li>
..
<li><a href="./국민신문고.html">
<img src="./img/banner_17.gif" alt="국민신문고" /></a></li>
<li><a href="./청와대.html">
<img src="./img/banner_18.gif" alt="청와대" /></a></li></ul>
</div>
</div>
<div id="BannerListMore">
<a href="./banner.html">
<img src="./img/btn_more.gif" alt="배너모음 더보기" style="cursor:pointer"/></a>
</div>
</div>
<script type="text/javascript">
var fnRolBanner = new fnRolMove_Type1;
fnRolBanner.BoxName = "BannerBox";
fnRolBanner.DivName = "BannerListSub";
fnRolBanner.fnName = "fnRolBanner";
fnRolBanner.DateWidth = 140;
fnRolBanner.Speed = 0.2;
fnRolBanner.Start();
</script>
</body>// JavaScript Document
function fnRolMove_Type1() {
this.GoodsSetTime = null;
this.BannerCurrent = 0;
this.DateNum = 6;
this.Start = function() {
this.Obj = document.getElementById(this.BoxName);
this.ObjBox = document.getElementById(this.DivName);
this.ObjUl = this.ObjBox.getElementsByTagName("ul")[0];
this.ObjLi = this.ObjUl.getElementsByTagName("li");
// 배너 갯수를 파악하는 부분
this.ObjLiNum = this.ObjLi.length;
// 배너 부분의 총 넓이를 파악하는 부분
this.TotalWidth=this.DateWidth * this.ObjLiNum;
this.ObjBox.style.width=this.TotalWidth+"px";
if( this.ObjLiNum % this.DateNum==0){this.BannerEnd
=this.TotalWidth-(this.DateWidth*this.DateNum);}
else{this.BannerEnd = this.TotalWidth - this.DateWidth;}
// 배너를 쌓고 있는 부분의 박스에 CSS를 입히기
this._Style();
// Javascript 작동시 다음, 이전 버튼을 삽입하기
this._ControlAdd();
// 다음, 이전 버튼을 클릭시 이동해야 할 위치 계산하기
this.BannerPrevLeft = this.BannerEnd;
this.BannerNextLeft = this.DateWidth * this.DateNum ;
this.PrevBtnLinkImg.Num = this.BannerPrevLeft;
this.PrevBtnLinkImg.onclick = function() {
eval(this.fnName + "._moveFrame(" + this.Num + ",'prev')" );
return false;}
this.NextBtnLinkImg.Num = this.BannerNextLeft;
this.NextBtnLinkImg.onclick = function() {
eval(this.fnName + "._moveFrame(" + this.Num + ",'next')");
return false;} }
this._ControlAdd = function() {
this.NewControl = document.createElement('div');
this.NewControl.id = "BannerListCon";
this.Obj.appendChild(this.NewControl);
//이전보기 버튼으로 구현한 경우
//this.PrevBtnLink = document.createElement('a');
//this.PrevBtnLink.fnName = this.fnName;
//this.PrevBtnLink.href = "#";
//this.NewControl.appendChild(this.PrevBtnLink);
//이전보기 버튼을 가상 이미지 버튼으로 만든 경우.
this.PrevBtnLinkImg = document.createElement('img');
this.PrevBtnLinkImg.fnName = this.fnName;
this.PrevBtnLinkImg.className = "btn";
this.PrevBtnLinkImg.src = "./img/btn_prev.gif";
this.PrevBtnLinkImg.alt = ""; //대체 텍스트를 null로 만든다
this.NewControl.appendChild(this.PrevBtnLinkImg);
//다음보기 버튼으로 구현한 경우
//this.NextBtnLink = document.createElement('a');
//this.NextBtnLink.fnName = this.fnName;
//this.NextBtnLink.href = "#";
//this.NewControl.appendChild(this.NextBtnLink);
//다음보기 버튼을 가상 이미지 버튼으로 만든 경우.
this.NextBtnLinkImg = document.createElement('img');
this.NextBtnLinkImg.fnName = this.fnName;
this.NextBtnLinkImg.className = "btn";
this.NextBtnLinkImg.src = "./img/btn_next.gif";
this.NextBtnLinkImg.alt = ""; //대체 텍스트를 null로 만든다
this.NewControl.appendChild(this.NextBtnLinkImg);}
this._Style = function() {
this.BoxStyle = this.ObjBox.parentNode;
this.BoxStyle.className = "BannerListStyle";
this.BoxUlStyle=this.ObjBox.getElementsByTagName("ul")[0];
this.BoxUlStyle.className = "BannerUlStyle";}
// 다음, 이전 버튼을 클릭시 배너를 이동시키는 부분
this._moveFrame = function(val,fnmove) {
clearTimeout(this.GoodsSetTime);
if(Math.abs(val-this.BannerCurrent)>5){
this.BannerCurrent=this.BannerCurrent+(val-this.BannerCurrent) * this.Speed;}
else{this.BannerCurrent = val;}
this.ObjUl.style.left = ( -1 * this.BannerCurrent ) + "px";
if ( this.BannerCurrent != val ) {
this.GoodsSetTime
=setTimeout(this.fnName+"._moveFrame(" + val + ",'" + fnmove + "')",10);}
else {
this.CurrentPicNum = this.BannerCurrent / this.DateWidth;
this.BannerPrevLeft
= this.BannerCurrent - ( this.DateWidth * this.DateNum );
this.BannerNextLeft
= this.BannerCurrent + ( this.DateWidth * this.DateNum );
if ( this.BannerCurrent == 0 ) {
this.BannerPrevLeft = this.BannerEnd;}
else if(this.BannerCurrent==this.TotalWidth-this.DateWidth*this.DateNum)){
this.BannerNextLeft=0;}
this.PrevBtnLinkImg.Num = this.BannerPrevLeft;
this.PrevBtnLinkImg.onclick = function() {
eval(this.fnName+"._moveFrame("+this.Num+",'prev')" );
return false;
}
this.NextBtnLinkImg.Num = this.BannerNextLeft;
this.NextBtnLinkImg.onclick = function() {
eval(this.fnName+"._moveFrame("+this.Num+",'next')" );
return false;} } } }
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)