tabindex

키보드의 tab 키를 눌렀을 때 포커스의 이동 순서를 임의로 조정할 수 있는 HTML 속성.
잘못된 사용으로 스크린리더 사용자가 웹페이지의 구조를 이해하는데 어려움을 줄 수 있으므로 신중하게 사용해야한다.

어떻게 사용해야하는지

tab-index의 값은 -1, 0, 양수값이 사용가능하나 주로 -1이나 0을 주로 사용한다.

• tabindex="-1" : 비대화형 콘텐츠의 기본 값. 키보드 탐색으로는 접근할 수 없지만 Javascript나 시각적(마우스클릭)으로는 포커스가 가능하다.
  보통 Javascript를 사용한 위젯의 접근성 확보를 위해 사용하여 특정 이벤트에만 나타나는 요소에 유용하다.
  탭 순서에서 제외되지만, 스크립트로 focus() 메서드를 호출해서 포커스를 부여할 수 있다.

• tabindex="0": 대화형 콘텐츠의 기본 값. 키보드 탐색으로 접근할 수 있으며 문서 소스 코드의 순서에 따른다.

• tabindex="1" : 문서 안에서 가장 먼저 초점을 받을 수 있다. 하지만 자연스러운 Html 순서를 벗어나 스크린리더기 사용자의 페이지 탐색에 방해가 될 수 있으므로 주의해야한다.

주의할 점

• 0보다 큰 tab-index는 피하자. 스크린 리더기 사용자의 페이지 탐색에 방해될 수 있다.
  요소의 순서를 논리적으로 배치할 것.

• 비대화형 콘텐츠에 tabindex를 추가하는 것을 피하자.
  (예시로 버튼을 나타낼 때, <button> 대신 <div>를 사용하는 것.)

대화형 콘텐츠

사용자와의 상호작용을 위해 특별하게 설계된 요소.
<a>, <button>, <label>, <select>, <textarea>, <embed>
특정 조건을 만족할 경우 대화형 콘텐츠에 속하는 요소도 있다.

• <img> : usemap 속성을 가진 경우.
• <input> : type="hidden" 속성이 아닌 경우.
• <video>, <audio> : controls 속성을 가진 경우.
• <menu> : type="toolbar" 속성을 가진 경우.
• <object> : usemap 속성을 가진 경우.

팝업창의 경우, tab-index="-1"과 자바스크립트의 focus() 메서드로 조정

참고

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

mdn 콘텐츠 카테고리 https://developer.mozilla.org/ko/docs/Web/HTML/Content_categories