tabIndex는 마우스로 접근할 수 없는 환경에서 접근할 경우 예를 들어 키보드로만 접근할 경우 tab 키를 통해서 각각의 컴포넌트를 이동할 수 있게끔 하기 위한 기능입니다.
tabIndex를 이용하면 tab키로 접근이 가능하게 끔 만들어주는 HtmlElement들의 attribute 값입니다.
이론적으로 tabIndex는 양수의 모든 값으로 제공할 수 있습니다. 예를 들어 보겠습니다.
<div tabindex="4">Please Press Tab!</div>
<div tabindex="5">Please Press Tab!</div>
<div tabindex="2">Please Press Tab!</div>위의 경우 tab을 누른다면 어떤 요소가 포커스 될까요? 답은 당연히 tabindex가 가장 낮은 값인 2가 포커스가 됩니다. 여기서 잠깐 생각 해볼것은 div 태그가 원래 tab으로 접근이 가능한 html 요소였을까요?
그렇지 않습니다! 기존의 html 요소 중 tabindex를 속성 없이 접근이 가능한 요소들은 대화형 요소들 뿐입니다!
대화형 요소들 : a, button, details, input, select, textarea
하지만 여기서 우리가 조심해야 할 부분이 있습니다. 비 대화형 요소에 tabindex를 추가하여 대화형 요소들과 같이 사용하면 어떻게 될까요?
<div tabindex="4">Please Press Tab!</div>
<div tabindex="5">Please Press Tab!</div>
<label>
Please Press Tab!
<input type="text" />
</label>이때 input 요소는 가장 늦게 tab으로 접근할 수 있습니다. 이유가 무엇일까요? 대화형 요소는 원래 tab으로 접근한 요소였는데 말이죠. 이유는 우리가 비 대화형 요소를 tabindex를 이용하여 접근성 트리를 만들었는데 우리는 input 요소에는 tabindex 속성을 주지 않았기 때문에 포함이 되지 않기 때문입니다.
이런 부분은 문제가 될까요? 문제가 됩니다! 우리가 대화형 요소를 사용할 경우는 가장 먼저 접근하거나 사용자가 입력해주기 바라는 부분들입니다. 이러한 부분들이 비대화형 요소들 때문에 뒤에 묻히게 된다는 거죠.
예를 들면 아이디를 입력해주세요!로 시작하는 input 태그보다 20줄이 넘는 이용 약관글을 중요하게 된다면 접근성이 좋다고 할 수 있을까요? 그렇지 않습니다. 그렇기 때문에 비대화형 요소에는 tabindex 속성을 주지 않고 대화형 요소간의 우선순위를 정할때 사용하는 것이 좋습니다!