bxslider 웹 접근성 지적사항 조치

메인 화면에 bxslider를 이용한 배너 슬라이더가 있다.

웹접근성 조사에서 아래와 같은 지적사항이 나왔다.

키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

① 초점 이동 순서가 논리적이지 않거나 일관성이 없는 경우

② 초점 또는 키보드의 위치를 나타내는 개체가 시각적으로 표시되지 않은 경우

③ 숨겨진 콘텐츠 및 의미 없는 개체에 초점이 이동 되는 경우

이중 3번이 지적사항으로 나왔다.

1.숨겨진 콘텐츠에 초점이동

-키보드 tab키를 이용하여 탐색 시 숨겨진 콘텐츠에 접근되어 초점이 사라집니다.

*숨겨진 콘텐츠에 접근시 화면에 노출되거나, 숨겨진곳에 접근되지 않도록 제공해야 합니다.

우선 기존 소스를 보면

var mainSlider = $('.mainSlider').bxSlider({

auto: true,

autoControls: true,

stopAutoOnClick: true,

pager: true,

speed:500,

autoControlsCombine: true,

responsive: true,

pause: 5000

});

소스를 아래의 빨간색 부분을 추가해주었다.

var mainSlider = $('.mainSlider').bxSlider({

auto: true,

autoControls: true,

stopAutoOnClick: true,

pager: true,

speed:500,

autoControlsCombine: true,

responsive: true,

pause: 5000,

// 웹접근성 추가

onSliderLoad: function(){

$(".bx-clone").find("a").prop("tabIndex","-1");

},

onSlideAfter: function(){

$(".mainSlider").children("li").each(function(){

if($(this).attr("aria-hidden") == "false"){

$(this).find("a").attr("tabIndex","0");

}else{

$(this).find("a").attr("tabIndex","-1");

}

});

}

});

// 웹 접근성

$('.mainSlider a').focusin(function () {

mainSlider.stopAuto();

});

bxSlider 제공 함수인 

onSliderLoad 에 복사되는 항목의 포커스를 가져가는 a태그를 찾아 tabIndex를 -1로 설정합니다.

onSlideAfter 에는 현재 보여지는 슬라이드의 a태그에는 tabIndex를 0으로 설정하고

숨어있는 슬라이드는 -1로 설정합니다.

이는 탭이동시 숨어있는 슬라이드로 포커스가 들어가는 것을 방지하기 위함입니다.

그리고, 슬라이드 안의 a태크에 포커스가 갔을때 슬라이더를 중지시크는 명령을 추가합니다.

이는 포커스 상태인데 슬라이딩이 되어 포커스가 숨는 것을 방지하기 위함입니다.