[웹접근성] 5번째 교육_jQuery를 이용한 gnb만들기
https://blog.naver.com/wonder12244/60196074744
[웹접근성] 5번째 교육_jQuery를 이용한 gnb만들기
퍼블리싱: psd와 똑같이 옮기는것 웹표준 : 그안의 컨텐츠들이 목적에 맞게 구성하느것 웹접근성 : 사람이 ...
blog.naver.com
퍼블리싱: psd와 똑같이 옮기는것
웹표준 : 그안의 컨텐츠들이 목적에 맞게 구성하느것
웹접근성 : 사람이 접근했을때 가장 인식하기 쉽게 구성하느것
http://domfam.cafe24.com/bit_wa/html/gnb.html
.gnb>ul>li ------->gnb 바로 아래의 ul 바로 아래의 li
inline 속성은 높이를 지정해주어야만 키보드로 인식됨
Part5. 키보드로의 이동
키보드의 이동 구조
키보드로의 이동은 마크업의 구조에 큰영향을 받게 됩니다. 마크업의 구조는 항상 논리적으로 구성되어야 합니다.
1. 네비게이션 바 구조적 코딩
<div class="gnb">
<ul>
<li><a href="#">menu1</a>
<div class="dep2">
<ul>
<li><a href="#">menu1</a></li>
<li> <a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
</li>
<li><a href="#">menu2</a>
<div class="dep2">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
</li>
<li><a href="#">menu3</a>
<div class="dep2">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
</li>
<li><a href="#">menu4</a>
<div class="dep2">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
</li>
<li><a href="#">menu5</a>
<div class="dep2">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
</li>
</ul>
</div>
2. 네비게이션바 CSS
.gnb { position:relative; width:803px; height:35px; margin:0 auto; border:1px solid #036; }
.gnb>ul>li { float:left; width: 160px; height:30px; text-align:center; padding-top:5px; position:relative; }
.gnb>ul>li>a {display: block; height:30px; padding-top:5px; }
.gnb>ul>li div {position:absolute; top:35px; left:0px; display:none; width:300px;}
.gnb div li { float:left; background:#6C9; margin-right:10px;}
.gnb div li a {display:block; padding:10px;}
3. jquery를 이용한 네비게이션의 이동
zen coding : jq ctrl+,
- 가지고 있는 폴더에서 jquery를 가져올때 :
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
- zen coding에서 jquery를 가져올때 :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">>
<script type="text/javascript">
$(function(){
$('.gnb>ul>li').bind({
mouseover : function(){
$('.gnb div').hide();// 2deph 메뉴를 숨긴다
$(this).find('div').show();
},
focusin : function(){
$('.gnb div').hide();
$(this).find('div').show();
},
mouseout : function(){
$('.gnb div').hide();
}
})
$(".gnb div>ul>li>a").last().focusout(function() {
$('.gnb div').hide();
});
})
</script>
Javascript 의 키보드 구성만들기
javascript는 요즘 많이 사용하는 jQuery를 기준으로 설명을 하겠습니다.
이벤트는 mouse이벤트 메소드는 click(), mouseover(), mouseout()등이 많이 사용됩니다. 그리고 키보드 이벤트인 focusin(), focusout()이벤트가 사용됩니다.
jQuery는 이벤트를 묶을 수 있는 bind()이벤트 메소드가 있기 때문에 이벤트를 두가지 이상을 묶어서 사용 할 수 있습니다. 그래서 js보다는 좀더 효율적으로 코드를 관리 할 수 있습니다.
$('.gnb>ul>li').bind('mouseover focusin', function(){
$(this).find('div').show();
})
항상 이벤트는 마우스 이벤트와 키보드 이벤트를 동시에 적용 할 수 있도록 합니다. 그리고 키보드로도 되로록 똑같은 UI를 제공 할 수 있도록 하는게 좋습니다.
Javascript 사용시 유의사항
1. 이벤트를 동작 시키는것은 A엘리먼트에 이벤트를 제공해야합니다. A태그가 아닌 다른 엘리먼트에 제공할 경우에는 키보드가 동작하지 않기 때문에 onclick이 global이라고해도 부분적으로 사용을 합니다.
2. blur() 메소드 사용을 금지합니다. 시각적으로 표현을 할 수 없기 때문에 blur()는 사용하지 않습니다.
3. javascript를 사용할 경우 최소한의 javascript로 표현합니다. 경로나 주소는 되도록 html에서 처리 할 수 있도록 하며 js는 동작을 도와주는 형태로만 구성을 하도록 합니다.
4. 포커스를 자동으로 이동 할 수 없도록 합니다. 페이지이동 뿐만 아니라 커서의 이동 역시 강제로 이동시키지 않습니다.