[HTML] 전역 속성(7) - tabindex

 

▶ tabindex 속성

• Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 숫자로 지정.
• 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨.
  - 대화형 콘텐츠? 사용자와의 상호작용을 위해 특별하게 설계된 요소. ex) <input>, <img>, ...
  - 대화형 콘텐츠: developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories#%EB%8C%80%ED%99%94%ED%98%95_%EC%BD%98%ED%85%90%EC%B8%A0
• 비대화형 콘텐츠에도 tabindex="0"을 지정하면 대화형 콘텐츠와 같이 탭 순서를 사용할 수 있음. 
• tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능. 
  - 탭 이동을 통해 포커스가 안 되는 것으로 클릭 시 포커스 자체는 가능.
• tabindex="1" 이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음.
  - HTML에 작성된 순서대로 탭 이동이 가능하도록 두는 것을 권장.