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
