메인 화면에 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태크에 포커스가 갔을때 슬라이더를 중지시크는 명령을 추가합니다.
이는 포커스 상태인데 슬라이딩이 되어 포커스가 숨는 것을 방지하기 위함입니다.
'프론트 프로그램' 카테고리의 다른 글
| 자바스크립트 정규식 - 이메일, 전화번호, 비밀번호(영문,숫자만) (0) | 2019.05.14 |
|---|---|
| 다음 API 종료 및 카카오 API 전환 적용 (0) | 2019.02.01 |
| jquery 달력 datepicker 웹접근성 (0) | 2018.08.21 |
| 웹 페이지 강제 이동시키기 (0) | 2017.09.28 |
| 스크립트 윈도우창 닫을 때 이벤트 감지 및 처리 - beforeunload - 이 페이지에서 나가시겠습니까, 이 사이트에서 나가시겠습니까 (0) | 2017.08.24 |
