tabindex란 무엇일까?
tabindex는 HTML 요소가 focus를 받도록하는 global attribute로 정수값을 가진다. 0 이상인 경우 tab key를 통해서 선택이 가능하며, 음수인 경우 개발자가 js를 이용해 프로그래밍적으로 요소가 focus될수 있게 만들어주어야 한다.
tab index를 잘못 사용하는 경우
첫 번째는 아래와 같이 수동으로 tab index를 부여하는 경우다.
<button tabindex="1">Save</button> <button tabindex="2">Cancel</button> <button tabindex="3">Discard</button>
두번째는 paragraph, heading과 같은 non-interactive 요소에 tabindex="0"을 두는 것이다. 이렇게하면 스크린 리더가 모든 컨텐츠에 접근이 가능하여 web accessibility가 개선될 것이라는 신화(?)에 기반한 시도이다. 의도는 좋으나 되려 악화시키는 상황이 발생할 수 있다.
<p tabindex="0">...</p>
이러한 방식으로 tabindex를 남발하면 오히려 요소의 role이 흐려져 스크린 리더 사용자에게 잘못된 정보 전달이 가능하고, 잘못된 tab 순서가 만들어질 수 있다. Accessibility Tenchology는 이미 컨텐츠를 탐색하고 소비하는 방법을 알고 있기 때문에, interactive요소든 interactive하지 않은 요소든 tabindex를 직접 부여하기보단 올바른 interactive 요소를 사용하고 알맞은 순서대로 배치하는 것에 집 중하자.
그렇다면 tabindex는 언제 사용해야할까?
1. 상호작용형 위젯
상호작용형 위젯이나 콤보박스, 트리, 차트 등에서 tabindex="-1"을 사용한다. 이때 focus 메서드를 이용하여 내부적으로 focus를 처리한다.
2. overflow="scroll"이 적용된 요소
overflow="scroll" 요소에는 tabindex="0"을 적용하기 좋다. 이유는 non-interactive한 scroll 요소는 포커스를 못 받기 때문에 scroll이 불가능한데, 이때 tabindex="0"을 적용하면 포커스를 받고 스크롤이 가능해지기 때문이다.