키보드 focus 접근성을 지정하는 tabindex 속성

tabindex

html 요소에 tabindex 속성을 추가하면 키보드로 tab 했을 때 요소가 focus 된다.

기본적으로 div 등의 태그는 키보드 tab을 사용하여 요소들을 훑을 때 focus 되지 않는다.

tabindex="0" 속성을 추가하면 키보드를 이용해 focus 가능하다.

div에 keydown 등의 키보드 이벤트를 등록했는데 동작하지 않는 경우 tabindex 속성을 추가하면 된다.

또한 요소에 웹 접근성을 적용해야 할 때도 해당 속성을 추가하는 것이 좋다.

<div>Not tabbable: no tabindex.</div>
<!-- 키보드 tab해도 focus 되지 않음 -->

<div tabindex="0">Tabbable due to tabindex.</div>
<!-- 키보드 tab하면 focus 됨 -->

참고사이트

tabindex