JS / 웹접근성 팝업에서 탭 이동시 벗어나지 않게 하기

작업을 하다보면 팝업창(모달)을 띄어야 할 때가 많다.

웹접근성을 고려했을때 팝업창을 열면, 팝업창으로 포커스 해주고 아웃라인(시각적),탭인덱스0(키보드접근성) 처리를 해줘야 한다.

그래야 팝업을 열고 나서 탭을 눌러이동하면 팝업으로 이어진다.

 

문제는 팝업을 열고 탭을 계속누르면 포커스가 팝업창 밖으로 이동한다.

그래서 팝업을 닫기 전까지는 팝업창을 빠져 나가지 못하도록 처리해줘야 한다.

 

1) 모달의 닫기 버튼은 마크업에서 하단에 배치한다. 

2) 아래와 같이 스크립트를 짜준다.

$(".modal-wrap").off('keydown.modal').on('keydown.modal', function(e) {
    if ($(".modal-wrap").is(':focus') && e.shiftKey && e.keyCode == 9) {
        e.preventDefault();
        $(".modal-wrap__btn-close").trigger('focus');
    }
});
$(".modal-wrap__btn-close").off('keydown.modal').on('keydown.modal', function(e) {
    if (!e.shiftKey && e.keyCode == 9) {
        e.preventDefault();
        $(".modal-wrap").trigger('focus');
    }
});