tabindex 속성은 키보드 접근성에 근접한 속성입니다.

tabindex는 기본적으로 키보드의 Tab키를 눌렀을 때 포커스의 이동 순서를 임의로 조정할 수 있는 HTML의 속성입니다.

tabindex는 전역속성으로 일반적으로 다음 2가지를 제어합니다.

1. 사용자가 키보드를 통해 페이지와 상호 작용할 때 어떤 시점에서 요소가 포커스 가능하게 되는지
   
2. 요소가 키보드와 같은 입력 방법이나 focus() 메서드와 같은 프로그램 방식으로 포커스를 받을 수 있는 경우
   

Focus 순서

기본적으로 다음 6개 HTML 요소가 포커스가 있습니다.

• href 속성을 가진 <a> 요소들
  
• href 속성을 가진 <link> 요소
  
• <button> elements
  
• type = "hidden"이 아닌 <input> 요소
  
• <select> elements
  
• <textarea> elements
  

기본적으로 키보드를 사용하여 페이지 주위를 탭 이동하거나 Javascript의 focus() 메서드를 통해 이러한 요소만 포커스를 받을 수 있습니다.

document.querySelector("a").focus();

HTML 문서에 이러한 요소가 배치되는 순서에 따라 키보드로 탐색 할 때 포커스를 받을 수 있는 순서가 제어됩니다.

tabindex 속성은 기본적으로 포커스가 있는지 여부에 관계없이 거의 모든 요소에 적용 할 수 있습니다.

속성의 값은 유효한 정수여야 하며 음수, 양수 ,0 일 수 있습니다.

음수 tabindex 값 

음의 tabindex (예 : -1)는 요소를 포커스 순서에서 완전히 생략합니다.

키보드를 사용하여 페이지를 탐색하는 사용자는 요소에 전혀 액세스 할 수 없습니다.

<button type="button" tabindex="-1">키보드 탭으로 접근 안됨.</button>

음수 값을 지정하면 요소가 포커스에서 제거되므로 값이 -1 또는 -99999 인 경우에는 차이가 없습니다. 따라서 가독성과 일관성을 유지하려면 -1을 유지하는 것이 가장 좋습니다.

0의 tabindex 값 

tabindex가 정확하게 0 인 경우, 요소는 소스 HTML의 위치에 따라 결정되는 기본 포커스 순서로 배치됩니다.

<div tabindex="0">html에 지정된 순서에 따라 focus</div>

양수 tabindex 값 

양의 tabindex는 요소를 포커스 순서대로 배치하지만 위치는 1에서 시작하여 위로 이동하는 특정 숫자로 결정됩니다.

탭 인덱스가 양수인 요소는 tabindex 속성이 없는 요소 앞에 배치됩니다.

<button type="button" tabindex="1">첫번째 포커스</button>

<button type="button" tabindex="3">두번째 포커스</button>

Tabindex 속성은 키보드와 포커스 순서를 통해 포커스가 가능한 요소를 제어하는 ​​것 외에도 Javascript를 통해 포커스를받을 수 있는 요소를 제어합니다. 값에 관계없이 tabindex 속성을 요소에 추가하면 Javascript를 통해 포커스를받을 수 있습니다.

tabindex 속성은 매우 유용 할 수 있지만 올바르게 사용되지 않으면 파괴적인 결과를 초래할 수 있습니다. tabindex 값의 각 범주는 다른 상황에서 사용해야 합니다.