[HTML] tabindex란?

토이 프로젝트를 진행하다가 엔터를 누르면 로그인 버튼 혹은 ok 버튼이 클릭되도록 설정을 하려고 했다. 

 

근데 input 태그에서는 onKeyDown 속성이 잘 작동하지만 div 태그에서는 작동이 되지 않는 문제가 발생했다. 

 

이것저것 찾아보니 미국 성님들께서 tabindex 속성을 부여해야 한다는 글을 발견했다. 

 

실제로 tabindex 속성을 넣으니 잘 작동되었다. 

 

그렇다면 tabindex란 무엇일까?

 

Use the tabindex attribute

tabindex는 HTML 엘리먼트가 포커스를 받을 수 있도록 하는 글로벌 특성을 말한다. 엘리먼트에 접근하기 위해 tabindex의 값에 0 혹은 음의 값을 넣어주어야 한다. 

tabindex의 값이 0 혹은 양의 수를 넣으면 해당 엘리먼트는 tab키를 이용해 탐색이 가능해진다. 음의 값을 넣으면 자바스크립트를 통해 프로그래밍적으로 포커스가 가능해진다. 

 

Common mistakes

불행히도, tabindex 특성은 보통 잘못 이해되거나 종종 잘못 사용되어진다. 아래는 해당 예제를 모아보았다. 

 

Using a positive tabindex value

1, 2, 3 등과 같이 tabindex의 값을 설정하면 해당에따라 탭 순서가 설정된다. 이는 탭키를 활용해 버튼을 이동하는 유저에게는 혼란을 줄 수 있다. 

 

Setting a manual tab order

모든 웹사이트아 어플의 페이지에 일일이 순서를 설정할 필요는 없다. 불필요할 뿐만 아니라 유지하기가 어려워진다. 그리고 이용자가 예상하거나 바랬던 방향과 다를 수 있다. 이는 불편하고 짜증 나는 유저 경험을 만들 여지가 있다. 

 

대신에 인터렉티브한 엘리먼트( a 태그, button 태그)를 문서의 읽기 방향으로 넣어라. 인터렉티브 한 엘리먼트들은 브라우저에서 따로 설정하지 않더라도 탭을 활용해 이동할 수 있는 기능을 지원하고 있다. 

 

Making non-interactive elements focusable

인터렉티브하지 않은 엘리먼트에 tabindex를 0으로 설정하면 유저가 스크린리더를 이용해 웹페이지의 콘텐츠를 더욱 쉽게 접근할 수 있도록 도와준다는 미신이 있다. 하지만 이러한 생각은 실제로 좋은 기술적 경험을 만들어 내지 않는다. 

 

tabindex를 인터렉티브 엘리먼트에 따로 추가하지 않아도 되는 원인과 마찬가지로 인터렉티브 하지않은 엘리먼트도 따로 추가할 필요가 없다. 

 

왜냐하면 스크린 리더와 같은 보조 기술들은 별도로 콘텐츠 이동 방법이 정해져 있다. 이러한 이유로 tabindex를 인터렉티브 하지 않은 엘리먼트에 추가하면 아래와 같은 문제들이 발생할 수 있다. 

 

- 어떤 것이 인터렉티브하고 어떤 것이 인터렉티브하지 않은가를 헷갈리게 만든다.

- 보조 기술을 이용하지 않는 사람에게는 특히 추가로 키보드를 이용해 이동을 해야 한다. 

- 엘리먼트의 이름과 열활을 밝히지 않아 어떤 엘리먼트인지 어떻게 작동하는지 제대로 코딩이 되었는지 헷갈리게 할 수 있다. 

 

tabindex declared on a non-interactive element nested inside of an interactive element

만약 부모 엘리먼트가 인터렉티브한 엘리먼트라면 자식 엘리먼트에 tabindex를 부여할 필요는 없다. 

 

 

출저: https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/#:~:text=tabindex%20is%20a%20global%20attribute,via%20the%20keyboard%27s%20Tab%20key