접근성 건너뛰기메뉴 수정

This commit is contained in:
com02 2021-12-02 15:32:35 +09:00
parent 87867dfe3f
commit 329f6c2ca4
3 changed files with 26 additions and 2 deletions

View File

@ -23,12 +23,17 @@ $(document).ready(function() {
$('.skip-nav').show(); $('.skip-nav').show();
$('.skip-nav a:nth-of-type(1)').focus(); $('.skip-nav a:nth-of-type(1)').focus();
}); });
$('.skip-nav a').focus(function(){
$(this).css('z-index','1');
});
$('.skip-nav a:nth-of-type(4)').focusout(function(){ $('.skip-nav a:nth-of-type(4)').focusout(function(){
$('.skip-nav').hide(); $('.skip-nav').hide();
$('.skip-nav a').css('z-index','0');
}); });
$(".skip-nav a").keydown(function (e) { $(".skip-nav a").keydown(function (e) {
if (e.keyCode == 13) { if (e.keyCode == 13) {
$('.skip-nav').hide(); $('.skip-nav').hide();
$('.skip-nav a').css('z-index','0');
} }
}); });

View File

@ -37,10 +37,29 @@ $( document ).ready(function() {
fn_setPageTitle("${pageTitle}"); fn_setPageTitle("${pageTitle}");
}); });
//--> //-->
$( document ).ready(function() {
// 접근성
$("#map").focus(function(){
$('.skip-nav').show();
$('.skip-nav a:nth-of-type(1)').focus();
});
$('.skip-nav a:nth-of-type(2)').focus(function(){
$('.skip-nav').hide();
$('.wrap header .inner h1 a').focus();
});
$(".skip-nav a").keydown(function (e) {
if (e.keyCode == 13) {
$('.skip-nav').hide();
//$('.wrap header .inner h1 a').focus();
}
});
});
</script> </script>
<!-- 찾아오시는길 섹션 --> <!-- 찾아오시는길 섹션 -->
<div class="skip-nav" style="display:none;"> <div class="skip-nav" style="display:none;">
<a href="#addr">지도 건너뛰기</a> <a href="#addr">지도 건너뛰기</a>
<a href="#addr"></a>
</div> </div>
<div class="location map"> <div class="location map">
<h2 class="blind">${pageTitle} 섹션영역</h2> <h2 class="blind">${pageTitle} 섹션영역</h2>

View File

@ -2,8 +2,8 @@
@charset "utf-8"; @charset "utf-8";
/********** 헤더 **********/ /********** 헤더 **********/
.skip-nav {position:fixed;left:0px;top:0px;z-index:999;} .skip-nav {position:fixed;left:0px;top:0px;z-index:999;display:inline-block;width:100%;}
.skip-nav a {display:block;background:#333;color:#fff;font-size:14px;padding:5px 12px;border-radius:3px;letter-spacing:-1px;margin:3px 0px;} .skip-nav a {display:block;background:#333;color:#fff;font-size:14px;padding:5px 12px;border-radius:3px;letter-spacing:-1px;margin:3px 0px;position:absolute;top:0px;left:0px;z-index:0;width:140px;text-align:center;}
.blind {display:none;} .blind {display:none;}
.wrap {display:inline-block;width:100%;min-width:1400px;} .wrap {display:inline-block;width:100%;min-width:1400px;}
.wrap header {position: fixed;top:0px;left:0px;width:100%;border-bottom:1px solid #999;background:rgba(0,0,0,0.3);z-index: 99;} .wrap header {position: fixed;top:0px;left:0px;width:100%;border-bottom:1px solid #999;background:rgba(0,0,0,0.3);z-index: 99;}