- 프로젝트 진행 마무리단계에서 큰 문제가 발생했다. 그것은 접근성인데… 진행중인 프로젝트의 메인페이지에 사용된 슬라이드 라이브러리가 bx-slide인데 이게 tab키로 이동할 때에 번거로운 부분이 한두군데가 아니었다. 일단 tab키로 해당 슬라이드로 focus가 이동되었을 때 슬라이드 autoPlay를 정지시키는 작업부터 진행했다.
focus-visible 시 autoplay stop
- autoplay 정기는 생각보다 간단했는데 구글링을 하니 저와같은 상황이 일어난 적이 있는 분이 있었기에 금방 해결할 수 있었다
$('#visual .card-news-box .list .thumb a').focusin(function(){
$visual.stopAuto();
})
- 위와같은 코드를 통해 현재 활성화 된 슬라이드에 (링크가 있는 경우) tab 키를 이용하여 focus-visible이 됬을 경우 슬라이드를 정지시켜준다!
참조 블로그 : 수유산장
Prev. Next 를 이용하여 슬라이드 넘길 시 tabindex 설정
- 이부분부터 초보자인 나에게 큰 시련이었는데 자주 사용했던 slick-slide 의 경우 활성화 된 슬라이드에 자동으로 active 라는 클래스를 지정해주던 것으로 기억하는데 bx-slide에는 없는거 같다. 혹은 내가 옵션을 못찾아서 그런거 같기도 한데… 현재 프로젝트가 유지보수팀에 넘어간 상황이기도 하고 철수날짜도 1주도 안남은 상황이라 bx-slide를 slick-slide 로 바꾸는 것이 정답인지는 모르겠다. 현재는 Next를 클릭했을 때 활성화 된 슬라이드에 따로 지정한 클래스를 주고 해당 슬라이드에 (링크가 있는 경우) tabindex를 지정할 수 있게 수정했다.
onSlideAfter: function(currentIndex){
var $silde_box = $('.section2 .acrc-briefs .list');
var $index = $('.section2 .acrc-briefs .list .thumb').length;
var $Current_Nindex = $('.section2 .acrc-briefs .list .thumb.active').next().index();
var $Current = $('.section2 .acrc-briefs .list').find('.thumb.active');
$Current.find('a.cover').attr('tabindex','-1');
$Current.find('a.download-btn').attr('tabindex','-1');
$Current.removeClass('active').next('.thumb').not('.bx-clone').find('a.cover').prop('tabIndex','0');
$Current.removeClass('active').next('.thumb').not('.bx-clone').find('a.download-btn').prop('tabIndex','0');
$Current.removeClass('active').next('.thumb').not('.bx-clone').addClass('active');
if ($Current_Nindex == $index - 1 ) {
$silde_box.find('.thumb:nth-child(2)').addClass('active');
}
$('.section2 .acrc-briefs .list .thumb.active').find('a.cover').prop('tabIndex','0');
$('.section2 .acrc-briefs .list').children('.thumb a').each(function(){
if($(this).attr('aria-hidden') == 'false'){
$(this).find('a').attr('tabIndex','0');
}else {
$(this).find('a').attr('tabIndex','-1');
}
}
- 코드가 너무 더럽습니다… 현재 위의 코드를 활용하여 Prev 기능에도 따로 지정한 클래스명과 tabindex를 지정해주었는데 작동을 안해서 지운 상태입니다… 아직도 공부가 많이 부족하다.
Comments