[HTML] tabindex 속성 알아보기

tabindex는 HTML 요소가 키보드 포커스를 받을 수 있는지, 그리고 받는다면 어떤 순서로 받을지를 제어하는 전역 속성(Global Attribute)이다. 사용자가 키보드의 Tab 키 혹은 Shift + Tab 키를 눌러 웹 페이지 내의 요소들(링크, 버튼, 입력 필드 등) 사이를 이동할 때, 이 tabindex 속성이 그 순서와 동작 방식을 결정한다.

tabindex 속성은 정수 값을 받으며, 그 값에 따라 완전히 다른 동작을 하게 된다.

요소를 키보드로 탐색할 수 있게 한다. 대화형 콘텐츠 (a, button,input ,textarea 등...) 에서는 따로 지정하지 않아도 기본 값으로 0을 가진다. 그러나 비 대화형 콘텐츠는 기본 값으로 -1을 가지기 때문에 키보드를 통해 탐색하 고 싶을 경우 tabindex=0과 같이 0 이상의 값을 줘야 한다.

주로 기본적으로 포커스를 받지 않는 컨테이너 요소를 키보드로 접근 가능하게 만들 때 사용한다.

<div tabindex="0" role="button">div로 만들어진 버튼!</div>