HTML에서 요소의 탭 순서를 지정하려면 tabindex 속성을 사용하면 됩니다. 이 속성을 활용하면 키보드의 TAB 키로 요소 간에 이동하는 순서를 원하는 대로 변경할 수 있습니다.
tabindex 속성이란?
tabindex 속성은 링크(<a>), 버튼(<button>), 입력 필드(<input>) 등 포커스를 받을 수 있는 요소에 적용할 수 있으며, 속성 값으로 지정한 숫자 순서대로 TAB 키 이동 순서가 결정됩니다. 값이 작은 요소부터 먼저 포커스가 이동합니다.
tabindex 값의 의미
- 양수(1, 2, 3...): 지정한 숫자 순서대로 탭 이동이 진행됩니다.
- 0: 문서 내 기본 순서를 따릅니다.
- -1: TAB 키 이동에서 제외되지만, JavaScript 등으로는 포커스를 받을 수 있습니다.
예제 코드
아래 코드를 실행하면 tabindex 속성으로 탭 순서를 변경한 결과를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <body> <a href="https://www.tutorialspoint.com/current_affairs/index.htm" tabindex="1">시사 상식</a><br> <a href="https://www.tutorialspoint.com/codingground.htm" tabindex="2">코딩 그라운드</a><br> <a href="https://www.tutorialspoint.com/verbal_ability/index.htm" tabindex="4">언어 능력</a><br> <a href="https://www.tutorialspoint.com/quantitative_aptitude/index.htm" tabindex="3">수리 능력</a><br> <p>위 예제에서는 탭 순서를 변경했습니다. 키보드의 TAB 키를 눌러 변경된 순서를 확인해 보세요.</p> </body> </html>
실행 결과 설명
화면에는 링크가 '시사 상식 → 코딩 그라운드 → 언어 능력 → 수리 능력' 순서로 배치되어 있지만, 실제 TAB 키를 누르면 '시사 상식(1) → 코딩 그라운드(2) → 수리 능력(3) → 언어 능력(4)' 순서로 포커스가 이동합니다. 즉, 화면상의 배치 순서와 관계없이 tabindex 값에 따라 이동 순서가 결정되는 것입니다.
주의 사항
tabindex를 남용하면 화면 낭독기(스크린 리더)를 사용하는 사용자에게 혼란을 줄 수 있습니다. 웹 접근성을 고려한다면 가능한 한 HTML 구조 자체를 논리적인 순서로 작성하고, tabindex는 꼭 필요한 경우에만 사용하는 것이 좋습니다.