tabindex 사용 방법
[Archive] 이 글은 2024년에 다른 플랫폼에서 작성한 글을 이전한 것입니다.
내용 중 일부는 현재 기준과 맞지 않을 수 있습니다.
tabindex
tabIndex는 HTML 요소가 페이지 내에서 포커스 순서를 제어하는 데 사용되는 속성.
이 속성은 요소의 포커스 가능성을 제어하고, 키보드 내비게이션의 순서를 정의하는 역할을 한다.
1) 사용 이유
웹 접근성에 대한 기준을 정하는 W3C WCAG 2.1.2의 No Keyboard Trap 항목에서의 설명을 살펴보면
웹 접근성의 핵심 원칙 중 하나로, 키보드를 사용하여 웹 페이지의 특정 컴포넌트에 포커스를 이동시키는 것뿐만 아니라
해당 컴포넌트에서 벗어나 포커스를 다른 곳으로 이동시킬 수 있어야 한다는 것을 말한다.
이 원칙은 웹 페이지의 모든 요소가 사용자에게 명확하고 편리한 탐색을 제공해야 한다는 것을 강조한다.
(표준 키나 방법으로 포커스를 이동시킬 수 없다면, 포커스를 이동시키는 방법에 대한 정보를 제공하여야 한다고 설명)
기본적으로 tabIndex는 신중하게 사용해야 할 필요가 있다.
(MDN에서도 tabIndex는 0과 -1만 사용하는 것을 권장)
Tab을 누르면 포커스는 HTML 문서 내의 마크업 순서에 따라 포커스 가능한 요소들을 타며 이동한다.
마크업이 논리적으로 잘 구성되어 있다면 tabindex를 사용하지 않아도 키보드 탐색에 문제가 발생하지 않는다.
tabindex attribute 직접 지정은 언제 사용될 수 있을까?
웹 페이지의 디자인상 포커스 순서가 마크업 순서와 일치하지 않아야 하는 경우가 있을 수 있다.
가령, 시각적 디자인 때문에 폼 요소나 링크의 순서가 논리적이지 않아 코드가 인지하는 tabindex의 흐름과 일치하지 않을 때, tabindex를 양수로 강제하여 페이지 탐색의 논리적 흐름을 조정할 수 있다.
2) 동작 방식
Tab을 통한 이동은 화면에 렌더링된 모든 포커스 가능한 요소들에 대해 적용된다.
- 포커스 가능한 기본 HTML 요소: <button>, <a>, <input>, <textarea>, <select>, <details> 등
- tabindex 속성이 있는 요소: tabindex 속성을 통해 포커스를 받을 수 있도록 설정된 모든 요소
| tabindex | < 0 | = 0 | > 0 |
|---|---|---|---|
| 설명 | tab에서 focus를 받을 수 있는 요소를 받지 못하게 함 | tab에서 focus를 받을 수 없는 요소를 받을 수 있게 함 | tab focusing 순서를 직접 설정 |
사용 예시
1) tabindex = “0”
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- div는 기본적으로 포커스 대상이 아님 -->
<div
class="card"
tabindex="0"
role="button"
aria-label="더 보기"
>
더 보기
</div>
<input type="text" placeholder="검색어 입력" />
<button>검색</button>
tabindex=”0”을 통해 원래 포커스되지 않던 div가 DOM 순서를 그대로 유지한 채 탭 흐름에 편입.
2) tabindex = “-1”
1
2
3
4
<input type="email" placeholder="이메일" />
<!-- button은 기본적으로 포커스 대상 -->
<button tabindex="-1">제출</button>
tabindex=”-1”을 통해 의도적으로 탭 흐름에서 제거
3) tabindex = “1”, “2”, “3”
1
2
3
<input tabindex="2" placeholder="이메일" />
<input tabindex="1" placeholder="이름" />
<button tabindex="3">제출</button>
- 문제가 발생하는 상황
1
2
3
4
5
6
7
8
9
<input tabindex="1" placeholder="아이디" />
<!-- 신규 추가 -->
<label>
<input type="checkbox" /> 로그인 상태 유지
</label>
<input tabindex="2" placeholder="비밀번호" />
<button tabindex="3">로그인</button>
체크박스는 tabindex가 없으므로 모든 양수 tabindex 이후에 포커스.
이에따라 시각적 위치와 탭 순서가 불일치되며, 유지보수 환경에서 매우 취약하다.