DOM에서 Tab Order는 어떻게 작동하나요?

Source: Dev.to

DOM에서 탭 순서는 다음 규칙을 따릅니다

기본 동작

요소는 HTML 소스에 나타나는 순서대로(위에서 아래, 왼쪽에서 오른쪽) 포커스됩니다. 기본적으로 포커스 가능한 focusable 요소만 참여합니다: 링크, 버튼, 폼 입력, 텍스트 영역, 셀렉트, 그리고 contenteditable 속성이 있는 요소.

tabindex 속성

tabindex 속성은 기본 순서를 세 가지 방식으로 재정의합니다:

tabindex="0"

어떤 요소든 포커스 가능하게 만들고 자연스러운 DOM 순서에 배치합니다. 버튼처럼 동작하는 “와 같은 사용자 정의 인터랙티브 요소에 유용합니다.

양수 값 (tabindex="1", tabindex="2", …)

해당 요소를 자연 순서보다 앞쪽으로 이동시킵니다—양수 값이 낮은 요소가 먼저 오고, 그 뒤에 나머지 DOM이 정상적으로 흐릅니다. 모든 양수‑인덱스 요소가 처리된 후에야 나머지 요소가 순서대로 배치됩니다. 이는 키보드 사용자를 위한 경험을 급격하고 예측 불가능하게 만들기 때문에 일반적으로 권장되지 않습니다.

tabindex="-1"

요소를 프로그래밍적으로(자바스크립트의 .focus() 로) 포커스 가능하게 만들지만 순차적인 탭 순서에서는 완전히 제외합니다. 모달이나 동적으로 표시되는 패널처럼 필요할 때 포커스를 받아야 하지만 Tab 키로는 접근되지 않아야 하는 경우에 유용합니다.

빠른 사고 모델

1. 양수 tabindex 값을 가진 모든 요소를 오름차순으로 정렬.
2. tabindex="0"을 포함한 나머지 모든 요소를 DOM 소스 순서대로.
3. tabindex="-1"을 가진 요소는 탭 시 완전히 건너뛰기.

참고: 요소가 숨겨져(display: none 또는 visibility: hidden) 있거나 비활성화된 경우, tabindex 값에 관계없이 자동으로 탭 순서에서 제외됩니다.