#TIL39

tabindex 속성

• 키보드 Tab키를 이용하여 웹페이지 정보에 접근하는 경우 포커싱이 가능하게 함

기본적으로 초점 받는 태그

• <a>, <button>, <input>, <select>, <textarea> 등

속성값

tabindex="0"

• tabindex="0"은 기본값으로, 연속 키보드 탐색으로 요소에 접근할 수 있으며 문서 소스 코드의 순서에 따른다는 것을 나타냄
• 키보드 초점을 받을 수 없는 <div>, <span> 요소도 초점을 받을 수 있도록 처리해 줌
• 초점 받는 순서는 자연스러운 마크업 순서를 따르도록 권장
• 양의 정숫값을 가진 요소가 존재할 경우 순서는 그 이후

양수

• 양의 정숫값은 요소를 연속 키보드 탐색으로 접근할 수 있으며, 그 순서는 해당 값으로 지정하겠다는 것을 뜻함
• 1이 제일 먼저 탭순서를 받으며 그 다음 번호들은 순번대로 처리 됨
• 즉, tabindex="4"인 요소는 tabindex="5"와 tabindex="0"인 요소 이전에, 그러나 tabindex="3"인 요소 이후에 접근할 수 있음
• 다수의 요소가 하나의 값을 공유할 경우 그 안에서 문서 소스 코드의 순서를 따르며 최댓값은 32767
• 그러나, 자연스러운 마크업 순서를 거르기 때문에 주의해서 사용할 것

tabindex="-1"

• 마우스 클릭으로는 포커싱이 가능하나 키보드 탐색으로 접근하는 것을 막음
• 기본적으로 키보드 초점을 받을 수 있는 요소를 받을 수 없게 만들 때 사용
• 다른 음수도 사용 가능하나 초점을 막는 결과는 동일하기에 사실상 의미가 없음