[웹 접근성] focus를 위한 tabindex

 

웹 접근성을 위한 키보드 Tab 클릭을 통해 focus 이동시,
interactive element인 <a>, <span>, <button>, <input>, <select> 등의 요소들은 자동으로 focus가 잡힙니다.

 

tabindex = "0"

이외의 <span>이나 <div> 등의 요소에도 focus를 잡고 싶다면
tabindex="0"를 추가하시면 됩니다.

<div id="test1" name="test1" tabindex="0">
</div>

 

tabindex = "-1"

기본적으로 focus가 잡히는 요소에 자동으로 focus가 잡히지 않게 하려면
tabindex="-1"를 추가하시면 됩니다.

<a id="test2" name="test2" tabindex="-1">
</a>

 

tabindex = "양수"

원하는 순서대로 focus를 잡고 싶다면
tabindex="1", tabindex="2", tabindex="3", ...., tabindex="0" 이러한 양수 순서대로 추가하시면 됩니다.

<input type="text" id="test3" name="test3" tabindex="3" />

<button id="test2" name="test2" tabindex="2" />

<a id="test1" name="test1" tabindex="1" />

focus 잡히는 순서 : id test1 > test2 > test3

 

참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/tabindex