[CSS] tabindex: 접근성 순서 지정

 

📌 tabindex

: tab 키로 이동할 때 HTML 요소의 포커스 되는 순서를 지정하는 속성

• 요소의 포커스 이동 순서를 변경하거나, 포커스를 받을 수 있는 요소를 추가할 수 있다.
• tabindex가 지정되지 않은 요소는 일반적으로 문서의 순서에 따라 탭 순서에 추가된다.

 

 

정수: 숫자 순서대로 포커스 된다.

• 키보드로 포커스 되며 ⭕, 접근 순서를 해당 값으로 지정
• 작은 숫자일수록 먼저 포커스를 받는다. 
• 마크업 순서를 거스르기 때문에 주의해서 사용해야 한다.
  ex. 검색엔진 사이트에서 검색창에 적용

 

0: 포커스를 받을 수 없는 요소(div, span 등)도 포커스를 받을 수 있도록 한다.

• (대화형 컨텐츠) 기본값
• 포커스를 받되 ⭕ 마크업 순서를 따른다. 

 

-1: 포커스를 받을 수 없도록 만든다.

• 키보드 포커스는 할 수는 없으나 ❌ JavaScript나 시각적(마우스 클릭)으로는 포커스 가능 
• (비대화형 컨텐츠) 기본값
• JavaScript를 사용하여 동적으로 포커스를 제어해야 할 때, tabindex를 -1로 설정하여 요소가 포커스를 받을 수 있도록 만들 수 있다.

See the Pen Untitled by nadia kwon (@nadia-kwon) on CodePen.

 

---

참고

 

tabindex - HTML: Hypertext Markup Language | MDN

 

tabindex=1, tabindex=0, tabindex=-1