[TIL] tabIndex

tabindex란？

tabindex는 element에 키보드 포커스를 주는 프로퍼티로 값에 따라 결과가 다르게 나타난다.

interactive content(대화형 콘텐츠)는 탑→다운의 코드 순서대로 탭 순서가 적용되고 tabindex”=0”가 default값이다.

반면, div와 같은 비대화형 콘텐츠에서는 키보드 포커스 속성이 적용되지 않는 것을 기본으로 tabindex=”-1”이 default값이다.

tabindex 속성값의　종류

값에 따른 포커스 결과는 아래와 같다.

tabindex=”0” : 키보드 [tab]을 누르면 엘리먼트에 포커스를 줄 수 있고, 이는 비대화형 콘텐츠에도 적용이 가능하다.

tabindex=”-1” : 키보드 [tab]을 눌러도 엘리먼트의 포커스를 잃게 하며, 대화형 콘텐츠에서 포커스가 필요없을 때 해당 값을 적용하면 된다.

tabindex=”0`_32768” : 숫자가 낮을수록 우선순위가 높으며 포커스가 순차적으로 이루어져야 할 때 적용할 수 있다.

tabindex　사용예시

그렇다면 언제 포커스를 적용 혹은 해제해야 할까?

먼저, 포커스 적용이 필요할 때를 코드로 살펴보자.

<template v-for="(item, index) of state.itemList" :key="index">
		<div tabindex="0" @click="$emit('click-item', option)">
	    {{ item }}
	  </div>
</template>

• div 엘리먼트가 itemList의 length만큼 생기고, 각각의 div에 키보드 포커스를 적용하기 위해 tabindex=”0” 을 명시해준다.
• div는 비대화형 콘텐츠이기 때문에 tabindex=”-1”(포커스 해제) 기본 값이지만 tabindex=”0”을 명시해줌으로써 포커스를 줄 수 있다.
• customized된 combobox혹은 selectbox에서 위와 같이 사용되기도 한다.

반대로, 포커스 해지가 필요할 때가 언제인지 코드를 확인해보자.

<a class="h3">회원가입, 필수 정보는 꼭 입력해주세요</a><br />
<a class="body-1">필수 정보는 꼭 입력해주세요.</a><br />
<a href="" tabindex="-1" class="body-1">필수 정보는 클릭하여 확인해주세요.</a><br />
<a href="" tabindex="-1" class="body-1">이름이 5자이상인 경우 클릭해주세요.</a><br />
<a href="" tabindex="-1" class="body-1">나이는 만나이 기준이며, 헷갈리는 경우 클릭해주세요.</a><br />
<a href="" tabindex="-1" class="body-1">이름은 실명 기준이며 외국인의 경우 클릭해주세요.</a><br />

<input type="text" name="name" placeholder="이름" class="border-2" />
<input type="number" name="age" placeholder="나이" class="border-2" />

• 대화형 콘텐츠인 a태그는 tabindex=”０”(포커스 적용)　기본　값이기　때문에　［ｔａｂ］버튼으로　이동　시，　포커스가　적용된다．
• 사용자로서는　［ｔａｂ］버튼을　５번　눌러야만　ｉｎｐｕｔ태그에　접근할　수　있기　떄문에　불편할　수　있다．
• 즉　ａ태그의　default　값인　tabindex=”０”은　웹접근성을　떨어뜨리는　요소가　될　수　있다．
• 따라서　값을　－１로　지정하여　포커스를　해제시켜　실직적　입력요소인　input태그에　바로　접근이　가능하도록　한다．
• ａ태크의　href속성이　없다면　tabindex의　값은　”-1”로　인식한다．