[HTML] TabIndex - 에이블런 프론트엔드부트캠프 25일차

TabIndex로 키보드 포커스 여부와 우선순위 제어를 할 수 있다.

 

1. 키보드 포커스

웹은 상호작용 가능한 요소는 기본적으로 키보드 포커스가 잡힐 수 있도록 구현되어있다. 대표적으로 input, select 와 같은 form 관련 요소나 a 요소를 예로 들 수 있다. 

2. tabindex='0'

상호작용이 불가능한 div나 span과 같은 요소에도 키보드 포커스가 잡히도록 구현하고 싶을 경우에는 tabindex의 값을 0으로 바꾸어주면 키보드 포커스가 잡히는 것을 볼 수 있다.

<a href="#">홈으로</a>

<form>
  <h2 tabindex="0">연락처</h2>
  <p>
    <label>
      <span>이름: </span>
      <input type="text" name="name" />
    </label>
  </p>
  <p>
    <label>
      <span>이메일: </span>
      <input type="email" name="email" />
    </label>
  </p>
  <p>
    <button>제출</button>
  </p>
</form>

3. tabindex='-1'

상호작용이 가능한 요소가 키보드 포커스에 잡히지 않게 하기 위해서는 해당 요소의 tabindex값을 -1로 주면 된다.

<a href="#">홈으로</a>

<form>
  <h2 tabindex="0">연락처</h2>
  <p>
    <label>
      <span>이름: </span>
      <input type="text" name="name" />
    </label>
  </p>
  <p>
    <label>
      <span>이메일: </span>
      <input type="email" name="email" />
    </label>
  </p>
  <p>
    <button>제출</button>
  </p>
</form>