[UX/UI] web focus 적용하기(tabindex)

키보드 포커싱에 대해 알아보자. 기본적으로 마우스 없어도 tab을 이용해서 input 값들을 넣을 수 있다. 그리고 사용자 기준으로 tab을 눌렀을 때 포커싱(마우스 커서)의 위치가 예상 되는 곳에 존재할 수 있도록 만들어 보자. 중요하지 않지만, 매우 중요한 기능이다. 웹 접근성관 관련된 키보드 포커싱에 대해 알아보자. 

 

0. 기본 포커싱

우리는 input창을 누르면 자연스럽게 input창에 커서가 들어간다. 즉, 웹은 사용자가 사용하는 부분에 대해서는 기본적으로 자동으로 포커싱을 시켜준다. 상호작용하는 element로는 a 태그, input 태그, select 태그, button 태그들이 있다. 그리고 이러한 태그들을 tab키를 이용해서 키보드로 이동을 할 수 있다. (반대로 이동은 shift + tab으로 실행가능하다.) 

 

그렇다면 위의 상호작용하는 태그 말고, 다른 태그들은 포커싱이 불가능 할까? 가능하다.

 

1. tabindex

tabindex는 기본적으로 element들의 포커스를 설정할 수 있는 기능이라고 할 수 있다. 단순하게 아래와 같이 tag에 넣어서 사용가능하다.

 

// 일반 HTML
<div tagindex="1"></div>

// react
<div tagIndex={1}></div>

 

tabindex를 이용하여 포커스를 설정할 수 있는 경우의 수는 아래와 같다.

 

1. 포커싱 되지 않는 element를 포커싱 시키기
2. 포커싱 되는 element를 포커싱 안시키기
3. 포커싱 순서 변경하기

 

위의 내용을 토대로 하나씩 알아나가 보자.

 

2. tabindex="0"

기본적으로 div나 h1 같은 태그는 포커싱이 되지 않는다. 그러나 아래와 같이 tabindex를 0으로 속성값을 추가 할 수 있다.

 

<h1 tabindex="0">h1도 포커싱이 가능합니다.</h1>
<div tabindex="0">div도 포커싱이 가능합니다.</div>

 

3. tabindex="-1"

위와 같이 -1을 설정을하면, 기존에 포커싱 잡히던 element들이 포커싱이 잡히지 않게 된다. 

 

<button tabindex="0">button은 포커싱이 안 됩니다.</button>
<a tabindex="0">a도 포커싱이 안 됩니다.</a>

 

4. 순차적인 포커싱

키보드 포커싱에 대한 기본적인 예제를 알아보았다. 기본적으로 우리는 포커싱을 웹 내부에서 tab으로 확인을 하였다. 그리고 반대로 포커싱을 확인하는 방법으로는 shift + tab 으로 확인을 하였다. 이제는 포커싱을 적용하는 방법 외에도, 포커싱을 하는 순서를 지정해 보자. 아래의 예시를 보자.

 

<div tabindex="4">4번째로 포커싱이 됩니다.</div>
<div tabindex="1">1번째로 포커싱이 됩니다.</div>
<div tabindex="0">5번째로 포커싱이 됩니다.</div>
<div tabindex="2">2번째로 포커싱이 됩니다.</div>
<div tabindex="3">3번째로 포커싱이 됩니다.</div>

 

포커싱의 순서는 생각보다 단순하다. tabindex가 양수 기준으로 1부터 숫서대로 2, 3, 4가 포커싱 된 후에 0이 포커싱 된다. 위의 테스트 내용을 판단해서 직접 테스트 해보면 될 것이다.

 

사용자가 조금 더 편리하게 사용할 수 있도록 개발을 시작해보자!