Home > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 JavaScript 제작기법 > JavaScript 애플리케이션 콘텐츠 구현 예 >
효과적인 UI 제작기법
스크롤 배너란 아래와 같이 마우스 포인터를 배너에 위치시키면 해당 배너가 전면에 나타나고, 클릭하는 경우에는 해당 링크로 이동하는 컨트롤이다.
[그림] 스크롤 배너 예제
스크롤 배너는 Tab 키를 누를 때마다 순방향으로 초점이 이동하면서 해당 배너가 전면에 나타난다. Shift +Tab 키에 의해서는 Tab 키의 역순으로 이동한다. 화면 낭독 프로그램은 초점이 주어지는 배너의 내용을 읽어준다.
여기서 주의할 점은 이미지의 대체 텍스트를 너무 장황하지 않게 작성하는 것이다. 배너를 통해서 많은 내용을 전달 하려고 애쓰기 보다는 핵심적인 내용을 전달해야 하기 때문이다. 또한 설명이 필요한 경우에는 title을 사용하는 것이 바람직하다.
//HTML Document
<body>
<div id="Banner_Box">
<ul>
<li><a href="./질의응답.html">질의응답을 신청할 수 있는 공간</a></li>
<li><a href="./나의질의.html">나의질의조회-담당자의 답변을 확인하실 수 있는 공간 </a></li>
<li><a href="./FAQ.html">고객센터 FAQ - 유사질문에 대한 답변확인 공간</a></li>
<li><a href="./고객상담.html">고객상담안내-고객의 상담을 위한 안내 공간</a></li>
<li><a href="./국민제안.html">국민제안 - 행정정책과 제도에 대한 의견제안 공간 </a></li>
<li><a href="./여론광장.html">여론광장 </a></li>
</ul>
</div>
<script type="text/javascript">
var BannerName = "BannerScroll";
var BannerBox = "Banner_Box";
var BannerWidth_S = 54;
var BannerWidth_B = 154;
var BannerScroll = new BannerOver();
</script>
</body>// JavaScript Document
function BannerOver() {
this.BannerWrap=document.getElementById(BannerBox);
this.BannerList=this.BannerWrap.getElementsByTagName("ul")[0]
.getElementsByTagName("li");
this.BannerTotal = this.BannerList.length;
this.BannerLocation = new Array();
this.BannerTarget = new Array();
this.BannerTempWidth;
for(var i=0; i<this.BannerTotal; i++){
this.BannerLocation[i] = BannerWidth_S*i;
this.BannerList.item(i).style.left=this.BannerLocation[i] + "px";
this.BannerLink=this.BannerList.item(i)
.getElementsByTagName("a")[0];
this.BannerLink.Num = i;
this.BannerLink.onmouseover
=this.BannerLink.onfocus=function() {
eval(BannerName+".BannerMove("+this.Num+")"); }
}
this.BannerRandom
= Math.floor(Math.random()*this.BannerTotal);
this.BannerMove(this.BannerRandom);}
BannerOver.prototype.BannerMove = function(val){
this.BannerTargetSetting(val);
this.BannerLiMove(val);
}
BannerOver.prototype.BannerTargetSetting = function(val) {
for ( var i=0; i<this.BannerTotal; i++ ) {
this.BannerLiw=this.BannerList.item(i);
this.BannerImg=this.BannerLiw.getElementsByTagName("a")[0];
if((val+1)==i){this.BannerTempWidth=BannerWidth_B }
else{this.BannerTempWidth = BannerWidth_S}
if(i== 0){this.BannerTarget[i] = 0;}
else{this.BannerTarget[i]
=this.BannerTarget[i-1]+this.BannerTempWidth;}
if(val==i){
this.BannerLiw.className = "widthb";
this.BannerImg.className = "line_" + i + "_on";}
else {
this.BannerLiw.className = "widths";
this.BannerImg.className = "line_" + i + "_off";}
} }
BannerOver.prototype.BannerLiMove = function(val) {
for ( var i=0; i<this.BannerTotal; i++ ) {
this.BannerLocation[i] +=
(this.BannerTarget[i] - this.BannerLocation[i]) * 0.2;
if (Math.abs((this.BannerTarget[i]-this.BannerLocation[i]))< 2)
{
this.BannerTarget[i] = this.BannerTarget[i];
this.BannerList.item(i).style.left = this.BannerTarget[i] + "px";
} else {
this.BannerList.item(i).style.left
= parseInt(this.BannerLocation[i],10) + "px";
setTimeout(BannerName+".BannerLiMove("+val+")",100);
} } }
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(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)