tab키 접근성을 고려하여 코딩을 진행하였습니다.
💚 언어선택 구간
서울시청 내 언어선택 구간에서 option 안 value에 이동 할 주소를 입력하고 제이쿼리 클릭이벤트를 통해 'GO'버튼을 누르면 이동할 수 있게 해주었다.
// 제이쿼리 소스
$('#langBtn').click(function(){
url=$('#langList').val();
window.open(url);
})
💚 아코디언 메뉴
해당버튼을 누를 때 메뉴들이 slideUp이 될 수 있도록 구현되었으며 버튼이 눌렸을 때 화살표도 돌아가도록 애니메이션을 구현하였습니다.
// 제이쿼리
$('.sc-related .btn-related').click(function(){
if($(this).hasClass('active')){
$('.sc-related .btn-related').removeClass('active').siblings('.sub-area').slideUp();
return false;
}
$('.sc-related .btn-related').removeClass('active').siblings('.sub-area').slideUp();
$(this).addClass('active').siblings('.sub-area').slideDown();
})
💚 tab키 접근성
시각장애인분들은 tab키를 통해 메뉴를 읽기 때문에 tab키로 이동로 이동 할 수 있도록 구현하였다.
keydown(): 키 입력 시 발생되는 이벤트
버튼이 아닌 a태그를 사용한 곳(중앙행정기관 부분)에는 target:_blank를 주는 것이 좋음.
제이쿼리 구현
// 직접 구현한 소스
$('.sc-related .sub-item:first-child a').keydown(function(e){
key = e.keyCode;
if(key === 9 && e.shiftKey){
$('.sc-related .btn-related').removeClass('active').siblings('.sub-area').slideUp();
}
})
$('.sc-related .sub-item:last-child a').keydown(function(e){
key = e.keyCode;
if(key === 9 && !e.shiftKey){
$('.sc-related .btn-related').removeClass('active').siblings('.sub-area').slideUp();
}
})
// 리팩토링 한 소스
$('.sc-related .sub-item a').keydown(function(e) {
const key = e.keyCode;
const firstChild = $(this).parent().is(':first-child');
const lastChild = $(this).parent().is(':last-child');
const shift = e.shiftKey;
console.log(firstChild);
if((key === 9 && shift && firstChild) || (key === 9 && !shift && lastChild)){
$('.sc-related .btn-related').removeClass('active').siblings('.sub-area').slideUp();
}
});
💚 업버튼 구현
.btn-up{
position: fixed;
bottom: -100px;
left: 50%;
display: block;
width: 34px;
height: 34px;
margin-left: 600px;
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 1s,bottom 1s;
}
.btn-up.show{
visibility: visible;
opacity: 1;
bottom: 100px;
}
// 웹용 홈페이지이기 때문에 정확한 높이를 정해줘야한다.
$(window).scroll(function(){
curr=$(this).scrollTop();
if(curr >= 100){
$('#topBtn').addClass('show')
} else{
$('#topBtn').removeClass('show')
}
})
$('#topBtn').click(function(e){
e.preventDefault();
window.scrollTo({top:0,behavior:"smooth"})
})
// html
<div class="group-nav">
<a href="" role="button" class="btn-nav news active" data-idx="0" aria-selected="true"><span>주요뉴스</span></a>
<a href="" role="button" class="btn-nav citizen" data-idx="4" aria-selected="false"><span>시민참여</span></a>
</div>
// 제이쿼리
on:{
"slideChange":function(){
if(this.realIndex >= 4){
$('.sc-slide .group-nav .btn-nav.citizen').addClass('active').siblings().removeClass('active')
}else{
$('.sc-slide .group-nav .btn-nav.news').addClass('active').siblings().removeClass('active')
}
}
}
$('.sc-slide .group-nav .btn-nav').click(function(e){
e.preventDefault();
idx=$(this).data('idx');
$(this).addClass('active').siblings().removeClass('active');
mainSlide.slideTo(idx);
})