tabindex를 ‘0’과 ‘1’만 사용해야 하는 이유와 관련 이슈

탭인덱스는 포커서블하지 않은 요소에 포커스가 갈 수 있도록 해 주거나, 포커서블한 요소에 포커스가 가지 않도록 하는 역할을 합니다. 다만 해당 요소는 스크린리딩을 하는 시스템에 따라 잘못된 순서의 탭 포커싱을 유발할 수 있으므로, 가급적 사용을 지양하는 것이 좋습니다. 또한 사용을 하더라도 ‘0’, ‘1’만 사용되는 것이 권장됨을 MDN 문서를 통해 확인할 수 있습니다.

 

tabIndex 순서 변경의 이슈의 경우, 첫번째 포커스를 받도록 하는 요소가 아닌 요소를 대상으로 첫번째 포커스를 tabIndex를 통해 할당할 경우 정상적으로 포커스가 할당되지 않는 이슈가 있습니다. 해당 상황은 하단 코드 예제를 통해 확인할 수 있습니다. 스펙상으로는 1 이상의 숫자를 순차적으로 할당하여 포커스가 이동하는 순서를 정할 수 있지만, 앞서 말한 바와 같은 이유로 인해 ‘0’과 ‘1’을 제외하고는 값 할당을 지양하는 것이 권장됩니다.

 

참고자료

• 키보드 접근성을 고려한 tabindex의 사용