[HTML] tabindex 속성

tabindex란?

Tab 키를 사용해 Focus할 수 있는 순서를 지정하는 속성

tabindex 속성을 통해 focus가 될 수 있는 요소를 만들 수 있다

한 페이지에서 하나의 포커스만 가능

값으로는 정수를 지정할 수 있으며, 수에 따라 결과가 달라진다.

• 음의 정숫값(보통 tabindex="-1") :  연속 키보드 탐색으로 접근할 수는 없으나, JavaScript나 시각적(마우스 클릭)으로는 포커스 가능함
• tabindex="0" : 연속 키보드 탐색으로 요소에 접근할 수 있으며 문서 소스 코드의 순서에 따른다는 것을 나타냄, 양의 정숫값을 가진 요소가 존재할 경우 순서는 그 이후가 됨
• 양의 정숫값은 요소를 연속 키보드 탐색으로 접근할 수 있으며, 그 순서는 해당 값으로 지정하겠다는 것을 뜻. 즉, tabindex="4"인 요소는 tabindex="5"와 tabindex="0"인 요소 이전에, 그러나 tabindex="3"인 요소 이후에 접근할 수 있다. 다수의 요소가 하나의 값을 공유할 경우 그 안에서 문서 소스 코드의 순서를 따르며, 최댓값은 32767

순서값으로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않는다

포커스가 가능한 input 요소에는 부여하면 안된다

 

 

tabindex - HTML: Hypertext Markup Language | MDN