웹접근성에 맞는 탭메뉴

jQuery 2012. 7. 2. 15:12

웹접근성에 맞는 탭메뉴

탭메뉴는 일반적으로 일반사람이 이용하기 편하도록 제작됩니다.

그렇기 떄문에 접근성을 고려하지 않는다면 장애인이 이용하기 굉장히 어려움이 있죠..

탭메뉴는 일반적으로 많이 쓰고 앞으로도 많이 쓸수 있기떄문에 한번 접근성을 고려해서 만들어보도록 하죠.

  1. 탭키로 이동가능한 탭메뉴
  2. 순차적으로 의미전달
  3. her=값에 id로 링크 전달
  4. 스크립트가 지원하지 않아도 내용전달

이 4가지 사항으로 접근성에 준수할 수 있습니다.

물론 이미지로 들어간다면 alt도 들어가야 하겠죠 ^^

예제 : http://webcss.co.kr/html5/tab.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
/* Lined Tab */
.Tab ul{ position:relative; margin:0; padding:0; list-style:none; border-bottom:1px solid #ccc; font-family:Tahoma, Sans-serif; font-size:12px; }
.Tab ul:after{ content:""; display:block; clear:both;}
.Tab li{ float:left; margin-bottom:-1px;}
.Tab li a{position:relative; float:left; text-decoration:none; border:1px solid #eee; border-bottom-color:#ccc; background:#fafafa; color:#666;}
.Tab li a span{display:inline-block; padding:6px 25px 6px 25px; letter-spacing:-1px; cursor:pointer;}
.Tab li div{display:none; width:100%; position:absolute; top:28px; left:0; list-style:none; border:0; margin:0; padding:0; white-space:nowrap; overflow:hidden;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;padding:20px 0;text-align:center;}
.Tab.m1 .m1 a,.Tab.m2 .m2 a,.Tab.m3 .m3 a{ border:1px solid #ccc; border-bottom:1px solid #fff; margin-top:-1px; background:transparent; color:#333;}
.Tab.m1 .m1 a span,.Tab.m2 .m2 a span,.Tab.m3 .m3 a span{ padding-top:7px; font-weight:bold;}
.Tab.m1 .m1 div,.Tab.m2 .m2 div,.Tab.m3 .m3 div{ display:block;}
.Tab li li a:hover,.Tab li li a:active,.Tab li li a:focus{ font-weight:bold; letter-spacing:-1px; color:#333 !important;}
.Tab.jsOff {padding:0;}
.Tab.jsOff ul {border:0 none;}
.Tab.jsOff li {float:none;}
.Tab.jsOff li a {background:none !important;border-color:#EEEEEE #EEEEEE #CCCCCC !important;border-style:solid !important;border-width:1px !important;color:#333333;display:block;float:none;font-weight:bold;}
.Tab.jsOff li div {display:block;left:0;padding:5px 0;position:static;top:0;}

</style>
<!--[if IE]>
<style type="text/css">
.Tab ul{ *zoom:1;}
.Tab li ul{ *zoom:1;}
</style>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
var tab = $('.Tab');
tab.removeClass('jsOff');
function onSelectTab(){
var t = $(this);
var myclass = [];
t.parentsUntil('.Tab:first').filter('li').each(function(){
myclass.push( $(this).attr('class') );
});
myclass = myclass.join(' ');
if (!tab.hasClass(myclass)) tab.attr('class','Tab').addClass(myclass);
}
tab.find('li>a').click(onSelectTab).focus(onSelectTab);
});
</script>
</head>
<body>
<div class="Tab m1 jsOff">
<ul>
<li class="m1"><a href="#view1"><span>메뉴 1</span></a>
<div id="view1">
메뉴 1의 내용입니다.
</div>
</li>
<li class="m2"><a href="#view2"><span>메뉴 2</span></a>
<div id="view2">
메뉴 2의 내용입니다.
</div>
</li>
<li class="m3"><a href="#view3"><span>메뉴 3</span></a>
<div id="view3">
메뉴 3의 내용입니다.
</div>
</li>
</ul>
</div>
</body>
</html>

<일반적인 화면입니다>

<자바스크립트를 지원하지 않을때 화면입니다. >

<css를 지원하지 않았을때 화면입니다.>

소스보시고 어려운것은 없으니 공부하시면 될꺼 같습니다.

그럼 열공하세요 ^^

'jQuery' 카테고리의 다른 글

신현석님 Jquery AIP 정리  (1) 2012.08.29
마우스오버 아웃  (0) 2012.07.10
jQuery IE 버전에 Placeholder 적용하기  (0) 2012.06.26
폼 요소 선택자  (0) 2012.03.13
각종 예제 사이트  (0) 2011.07.11
: