tabindex 사용하여 focus처리

 

 

웹 접근성에서 키보드의 포커스 이동은 굉장히 중요한 요소입니다.  그리고 웹 접근성이 아니더라도 마크업이 순차적으로 잘 적용되어 있으면 콘텐츠의 논리적인 흐름에 따라서 focus가 당연히 올바르게 이동하겠지만 프로젝트상의 우리가 제어할 수 없는 환경적 이슈라던지 상황에 따른 여러 이유로 인해 포커스의 흐름이 우리가 원치 않는 방향으로 이동하는 경우가 발생합니다. 

 

그럴 때는 어쩔 수 없이 강제적으로 포커스의 이동을 처리해 줘야 하는데 조금 더 이해하기 쉽게 예를 들어 볼게요.

특정 버튼을 클릭할 때 해당 Event로 레이어 팝업이 화면에 보이게 된다고 가정해 봅시다. 

 

여기서 레이어 팝업에 조건을 둘게요.

이 레이어 팝업이 처음부터 화면에 마크업으로 되어 있지 않고 버튼을 클릭하면 그때 스크립트에서 동적으로 생성하여 화면에 노출되는 팝업이라고 가정해 보겠습니다. 

그렇다면 이 팝업의 포커스 이동은 과연 정상적일까요? (이미 질문 속에 답이 있음.)

 

정답은 그렇지 않다입니다. 스크립트에서 동적으로 생성된 팝업은 강제적으로 focus처리를 해 주어야만 합니다. 이유는 웹은 처음에 한번 로드될 때 문서(DOM)를 일괄적으로 읽어 들인 후 처리하기 때문에 동적으로 생성되는 콘텐츠는 인지를 하지 못합니다.(화면에 보이지 않는다는 이야기가 아닙니다.)

이럴 때 강제로 포커스 처리를 할 경우 tabindex 속성을 사용하여 처리를 하면 되고 레이어 팝업을 닫거나 또는 콘텐츠의 포커스 이동이 있을 때는 강제로 주었던 tabindex 속성을 반드시 제거해 주어야 의도하지 않은 포커스 이동이 발생하지 않습니다.

 

// tabindex 속성 추가
$('.popup-layer').css('display','block' ).attr('tabindex','0').focus();

// tabindex 속성 삭제
$('.popup-layer').css('display', 'none').removeAttr('tabindex');