[ HTML ] tabindex 키보드 포커스

 tabindex는 해당 엘리먼트를 포커스 가능하게 해준다. 이름으로부터 알 수 있듯이, "tab"으로 접근 하게 되는 순서를 결정할 때 사용할 수 있다.

 회원가입이나 로그인을 위하여 우리는 tab을 자주 활용한다. 기본적으로 사용자의 입력을 받는 input류의 태그들은 포커스(키보드 입력)를 받을 수 있다.

 tabindex를 활용하면 포커스를 지원하지 않는 태그에도 불구하고 해당 엘리먼트에 포커스에 포커스를 지원을 할 수 있다. 마우스를 사용 할 수 없는 사용자에게 악영향을 끼치기 때문에 지양하자.

 예/아니오 vs 아니오/예

 퍼블리싱을하다보면, 디자인과 태그상에 논리적 순서가 맞지 않는 경우가 생기기도 한다. 예를 들면 나는 취소를 그 예로 들고 싶다.

 예/아니오의 순서 논쟁은 꾸준히 있어왔다. 과연 누가 옳은 것인가? 이건 누가 옳다/틀리다를 말할 내용은 아니다. 서로 다를 뿐이다. 세간의 말에 따르면....

 "예/아니오"의 경우 긍정을 하는 경우가 더 많으니, 예가 먼저온것이고,

 "아니오/예"의 경우 예를 누르기 전에 부정할 수 있는 옵션이 있다고 알려주는 것이라고 한다.

 아니오/예

 내가 이야기하고자 하는 부분은 "아니오/예"를 개발할 때 생기는 디자인과 논리적 순서상의 오류이다.

 간단하게 컨펌창을 퍼블리싱을 한다고 해보자.

<div>
  <div>어쩌고 저쩌고 동의?</div>
  <div><button>아니오</button><button>예</button></div>
</div>

 뭐 태그는 어찌되었든 "아니오/예"를 개발하는 경우 위와 같은 형태가 될 것이다. 개발자라서 정확히 어떠한 이유가 있는지는 몰라도, 디자이너들은 맥을 쓰는 것을 선호한다. 뭐 물론 개발자들도 맥을 선호하는 비중은 꽤나 높다.

 다시 한번 위의 이미지 차이를 자세히 들여다 보자. 뭐 물론 다크모드/라이트모드 차이 말고도 미세하게 보일 것이다. 윈도우 - 크롬의 경우 "확인" 버튼에 포커스가 되어있는 것이다. 하지만 맥의 경우에는 포커스가 들어있지 않고, 아무리 tab을 눌러도 포커스가 어떤 곳에도 되지 않는다.

 비단, 크롬만의 차이가 아니다. 아래는 mac에서 pages앱을 사용하여 작성한 문서를 저장하고자 할 때, 열리는 시스템 도큐먼트이다. 

 아래에서 포커스 가능한 요소는 이름부분과 태그 부분 뿐이다.

 하지만 우리가 작성한 코드는 어떠한가? tab을 누르면 첫 포커스는 "아니오" 그 후에 "예"이다.

 즉 내가 하고자 하는 말은 위의 태그작성을 아래와 같이 하는 것이 디자이너가 원한 방식이라는 것을 말하고 싶다.

<div>
  <div>어쩌고 저쩌고 동의?</div>
  <div>
    <button tabindex="-1">아니오</button>
    <button tabindex="-1">예</button>
  </div>
</div>

 tabindex

 tabindex 속성은 값으로 양의정수(최대값 3276)/0/-1을 사용 할 수 있다. 그 외에는 해당 브라우저의 해석 나름이라고 생각하면 된다. 기본적인 포커스 가능한 컨텐츠는 0이다.

 -1: -1의 값은 특이한 성질을 갖는다. tab으로는 접근 할 수는 없지만, 클릭을 하게되면 포커스를 갖게 된다. 이 특성이 있기 때문에 태그를 위 처럼하면 tab으로는 접근 할 수 없게 된다.

 0: 0은 기본적으로 포커스 가능한 속성들이 갖는 값이다. 따라서 태그 작성의 순서에 따라서 tab의 순서가 결정 된다.

 양의정수: tab의 우선순위를 인위적으로 변경 할 수 있다. 값이 클수록 더 먼저 포커스가 된다. 하지만 될 수 있으면 사용하지 말도록 하자. 태그 순서 변경이 우선이다.

 마무리

 특정 엘리먼트가 포커스 되면, :focus css를 사용 할 수 있고, 해당 엘리먼트의 위치로 스크롤을 이동시켜주는 브라우저의 특성을 사용 할 수 있다. 그렇다고해서 div, span등 상호작용이 불가능한 태그를 tabindex를 주는 것은 가급적으로 피하도록 하자.