[HTML] tabindex

키보드 focus

마우스가 고장나거나 키보드로만 조작해야 할 일이 있을 때 주로 Tab 키를 사용해 웹 페이지의 기능을 사용해야합니다. 웹은 사용자와 상호작용이 가능한 요소들을 focus되도록 합니다.

대표적으로 <input>, <select>, <button> 같은 양식(form) 관련 요소(element)와 <a>요소를 들 수 있습니다.

 

tabindex

요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정합니다.

 

웹 페이지를 구성하다 보면 불가피하게 시각적인 디자인 때문에 폼 요소나 링크 요소가 논리적이지 않게 만들어야 하는 경우가 있습니다. 이때 tabindex로 페이지 탐색에 논리적 순서를 부여하여 사용자가 자연스럽게 페이지를 탐색할 수 있도록 합니다.

 

tabindex=“0”

<div>나 <span>과 같은 요소에도 키보드 포커스가 잡히게 하고 싶을 경우에는 해당 요소의 tabindex 속성을 0으로 설정해주면 마치 상호작용이 가능한 요소처럼 해당 요소로 포커스가 이동하게 됩니다.

이 기능은 복잡한 UI를 <div>나 <span>과 같이 tab 키로 포커스가 불가능한 요소를 기반으로 구현한 후 포커스가 오게 하고 싶을 때 주로 사용됩니다.

tabindex=“-1”

반대로 원래 상호작용하는 요소에 포커스가 잡히지 않게 하려면 해당 요소의 tabindex 속성을 -1로 설정해주면 상호작용이 가능한 요소라도 포커스가 이동하지 않게 됩니다.

어떤 요소에 tabindex="-1"을 설정하여 tab 키로 포커스가 불가능해졌더라도 자바스크립트의 focus() 함수를 이용하여 해당 요소에 포커스를 잡아줄 수 있습니다.

tabindex=“양수”

기본적으로 키보드 포커스는 tab 키를 누르면 HTML 문서 상에서 요소들이 배치된 순서대로, shift 키와 tab 키를 함께 누르면 역순으로 이동하는데요. tabindex 속성에 1 이상의 양수값을 설정하여 요소들 간에 포커스가 잡히는 순서를 강제로 변경할 수도 있습니다.

 

예를 들어, 첫번째 <input> 요소의 tabindex 속성을 2로, 두번째 <input> 요소의 tabindex 속성을 1로 설정 하면 1번인 요소를 먼저, 후에 2번인 요소를 나중에 방문하게 됩니다.

 

즉, 어떤 요소의 tabindex 속성을 양수로 지정하면 해당 요소가 HTML 문서 내에 어디에 위치하는지 상관없이 우선적으로 포커스를 받습니다. 그리고 한 HTML 문서 내에서 tabindex 속성이 양수로 지정된 요소가 여러 개라면 오름차순으로 포커스 우선순위가 설정됩니다. 다시 말해, tabindex="1", tabindex="2", tabindex="3", …, tabindex="0" 순으로 포커스가 이동하게 됩니다.

 

웹 접근성(accessibility) 측면에서 봤을 때 tabindex 속성을 양수로 설정하여 포커스 순서를 제어하는 것은 피해야합니다. 왜냐하면 위 예제에서 보시다시피 키보드 포커스가 중구난방으로 이동하면 사용자에게 큰 혼란을 주게 되기 때문입니다. 가급적 tabindex 속성을 사용하는 대신에 HTML 문서에 요소를 재배치하는 것이 바람직할 것입니다.하지만 적절히 사용하면 페이지 탐색을 매우 효율적으로 바꿀 수 있습니다.

 

 

 

참고

https://www.daleseo.com/html-tabindex/

[HTML] tabindex 속성과 키보드 포커스

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/tabindex

tabindex - HTML: Hypertext Markup Language | MDN

https://nuli.navercorp.com/community/article/1132726

키보드 접근성을 고려한 tabindex의 사용