[HTML] tabindex 속성 알아보기

tabindex 란?

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

tabindex 값과 의미

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

1. tabindex="0"

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

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

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

2. tabindex="-1"

요소를 키보드로 탐색에서 제외 시킨다. 비 대화형 콘텐츠 에서는 따로 지정하지 않아도 기본 값으로 -1을 가진다. Tab 키를 통해서는 focus 되지 않지만. 프로그래밍 방식으로는 가능하다.

<div id="myModalContent" tabindex="-1">모달 내용...</div>
<script>
  document.getElementById('myModalContent').focus();
</script>

3. tabindex="양수"

요소에 명시적인 탭 순서를 부여한다. 1부터 시작하여 숫자가 작은 요소부터 순서대로 포커스를 받게 된다. 같은 숫자를 가진 요소들은 HTML 소스 코드 순서대로 포커스를 받는다.

언제 사용하면 좋을까 ?

tabindex는 얼핏 보면 그냥 쓰는게 좋아 보이는 것 같지만, 신중하게 사용해야 하는 속성이다.

• tabindex="0"
  • 커스텀 인터랙티브 요소 제작: <div>, <span> 등으로 직접 만든 버튼, 탭, 슬라이더, 메뉴 항목 등 시맨틱 HTML 요소로 구현하기 어려운 커스텀 위젯에 키보드 접근성을 부여하고 싶을 때 사용한다. 이 경우, 해당 요소가 실제 인터랙티브 요소처럼 동작하도록 JavaScript로 키보드 이벤트(Enter, Space 등) 처리 로직을 추가 하고, 적절한 aria-role을 명시하여 스크린 리더 사용자에게 요소의 역할을 알려주는 것이 좋다.
  • 탭 순서에 요소 포함: 기본적으로 포커스를 받지 못하는 비 대화형 콘텐츠(예: 특별히 강조하고 싶은 텍스트 블록)를 탭 순서에 포함시키고 싶을 때 사용할 수 있다.
• tabindex="-1"
  • 모달 또는 대화 상자: 모달 창이 열렸을 때, 배경 콘텐츠에 tabindex="-1" 를 적용해 키보드 탐색을 비활성화 시킨다.

마무리

tabindex는 웹사이트의 접근성을 높이고 사용자 경험을 개선하는 데 큰 역할을 한다. 하지만 적절히 사용하지 않으면 오히려 혼란을 줄 수 있으니, 기본 동작을 잘 이해하고 신중하게 사용하도록 하자.

요약 하자면

1. 가능한 한 자연스러운 HTML 흐름을 따르자
2. 양수 tabindex 값은 피하자
3. tabindex="0"는 상호작용 요소에만 사용하자
4. tabindex="-1"는 프로그래밍 방식 포커스가 필요한 요소에만 사용하자
5. ARIA 속성과 함께 사용하여 최대한의 접근성을 확보하자