HTML tabindex로 키보드 탭 선택순서 조정하기

일반적으로 웹 페이지에서 tab으로 input이나 a태그와 같은 요소에 접근할 때 나열된 서순대로 접근하게 된다.

이 순서는 절대적이지 않고 수정이 가능한데, tabindex 속성이 이를 가능케 한다.

  <input type="text" tabindex="2" placeholder="Name">
  <input type="text" tabindex="1" placeholder="Email">
  <input type="text" tabindex="3" placeholder="NickName">

탭으로 input에 접근하면, email, name, nickname 순서가 된다.

 

  <a href="#" tabindex="-1">Home</a>
  <a href="#" tabindex="3">Services</a>
  <a href="#" tabindex="2">About</a>
  <a href="#" tabindex="1">Contact</a>

tab으로 a태그 링크에 접근하면 Contract, About, Services 순서로 접근된다.

tabindex가 음수이면, tab으로 포커싱할 수 없다.