FORM 내 일부 항목의 tab index 순서를 재정의 하기

HTML 문서 안에서 <A> ,  <INPUT> , <SELECT> , <TEXTAREA>  등의 태그는 키보드나 마우스 입력을 통해 focus를 가지며, 키보드의 tab 키를 눌러 다음 항목으로, shift + tab 을 눌러 이전 항목으로 focus를 이동할 수 있다.

항목(태그)에 tabindex 속성이 주어지지 않았을 경우, 일반적으로, HTML에 코딩된 순서대로 위에서 아래로, 왼쪽에서 오른쪽으로 focus가 이동을 한다.

정상적인 탭 순서

위와 같은 화면에서는 왼쪽에서 오른쪽으로 tab 이 이동하는데, 위에서 아래로 먼저 이동하도록 설정하고 싶을 수 있을 것이다. 그럴 때는  tabindex="1" 과 같이 각 태그에 부여하면 이 값의 순서에 따라 focus 순서가 재배치 된다.

변경하고자 하는 탭 순서

하지만, 문서 전체에 아주 많은 항목들이 있고, 그 중 일부의 항목에 대해서만 tab index 를 변경하려면, 그 문서 내에 모든 항목에 전부 tabindex 속성을 지정해야한다. 이는 너무 비효율적이다.

변경하지 않을 항목에 tabindex 속성을 생략하면, 생략된 항목들은  tabindex 속성이 있는 항목들보다 나중 순서에 focus를 갖게 된다. 즉,  tabindex 가 부여된 항목을 모두 지난 후,  tabindex 가 없는 항목을 다시 지나가게 된다. 이것은 의도하지 않은 결과이다.

현재로서는 Javascript의 도움을 받지 않고 HTML 내에서 일부의 항목만 변경된 index를 갖는 방법은 없는 듯 하다.

How to create tabindex groups?

이 문서의 솔루션을 참고하여 새로 코드를 작성하였다. 일단 jquery 와 underscore 라이브러리가 필요하다.

data-tabgroup 속성으로 변경된 tab 순서를 가질 항목들을 제한하고,  data-tabgroupindex 속성으로 순서를 재정의한다. 이 값을 가지는 항목(태그)들은 위 아래 tabindex 속성을 가지지 않은 다른 태그들과 잘 어울려 의도한 대로 tab 순서를 갖게 된다.

윈 소스와 다른 점은,

  • tab index가 같은 tabgroup 항목들 안에서만 이동하지 않고, 위 아래의 (tab index 가 지정되지 않은) 다른 항목들로 자연스럽게 이동.
  • tabgroup 에 처음 진입할 때, 해당 항목의 index 가 첫번째가 아니어도 지정된 index 로 이동.
    • 마우스로 focus 를 얻을 때는 동작하지 않도록 (키보드로만 동작하도록) 개선 필요.
  • 문서 내에  <form> 이 여러 개 존재하더라도 관계없이 동작.

Source Code:

JSFiddle:

도큐멘트 에 올린 글 태그됨: , , ,

댓글 남기기