HTML의 tabindex 속성은 문서 내에서 요소가 Tab 키로 포커스를 받는 순서를 정의하는 속성입니다. 전역(global) 속성에 해당하므로 모든 HTML 요소에 적용할 수 있다는 것이 특징입니다.
tabindex 속성값의 의미
tabindex 속성은 숫자 값을 가지며, 값에 따라 동작이 달라집니다.
- 양수(1, 2, 3...) : 지정한 숫자 순서대로 Tab 키 이동 순서가 결정됩니다.
- 0 : 기본 문서 흐름 순서대로 포커스를 받습니다.
- 음수(-1) : Tab 키 탐색에서는 제외되지만, 프로그래밍적으로는 포커스를 받을 수 있습니다.
문법(Syntax)
tabindex 속성의 기본 문법은 다음과 같습니다.
<tagname tabindex="number"></tagname>
예제(Example)
다음은 HTML tabindex 속성을 활용한 예제 코드입니다. 각 단락(p) 요소에 서로 다른 tabindex 값을 부여하여 Tab 키를 누를 때 역순으로 포커스가 이동하도록 설정했습니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
p {
font-size: 1.2rem;
}
</style>
<body>
<h1>HTML tabindex Attribute</h1>
<p tabindex="5">I'm paragraph.</p>
<p tabindex="4">I'm paragraph.</p>
<p tabindex="3">I'm paragraph.</p>
<p tabindex="2">I'm paragraph.</p>
<p tabindex="1">I'm paragraph.</p>
<p>Now, try to navigate through paragraph using tab key</p>
</body>
</html>실행 결과(Output)
위 코드를 브라우저에서 실행하면 아래와 같은 화면을 볼 수 있습니다.
이제 Tab 키를 눌러 각 단락 사이를 이동해 보세요.
tabindex 값이 5인 첫 번째 단락부터 시작하여, 4 → 3 → 2 → 1 순서로 포커스가 이동하는 것을 확인할 수 있습니다.
마무리
tabindex 속성은 키보드 접근성(웹 접근성)을 고려할 때 매우 유용하게 활용됩니다. 다만 양수 값을 남발하면 예상치 못한 탐색 순서로 인해 사용자 경험을 해칠 수 있으므로, 가능하면 논리적인 DOM 구조를 먼저 설계하고 필요한 경우에만 tabindex를 사용하는 것이 좋습니다.