tabindex
Last updated
Last updated
tabindex는 크게 양의 값, 0, 음의 값을 사용하는 경우로 나눌 수 있다.
tabindex="양수"
임의로 tabindex의 순서를 지정하는 것이다. 지정한 값에 따라 작은 값부터 높은 값으로 이동한다. 이는 사용자의 자율성에 좋지 않은 경험을 줄 수 있기 떄문에 0보다 큰 값은 사용하지 않는 것이 좋다. 또한 이런 패턴은 안티패턴이라고도 한다. "제발 사용하지 말아라!"라는 이야기로 해석해도 충분하다.
tabindex="0"
비포커스 요소이지만 포커스가 될 수 있도록 한다.
⭐️tabindex="-1" (중요)⭐️
무조건적으로 포커스가 되지 않고 사용자가 선택적으로 포커스 할 수 있는 기능을 한다. 키보드만을 이용하는 사용자에게 좋은 UX를 제공할 수 있다. 말이 처음엔 어렵겠지만 그림으로 보자!
Carousel 예제를 보면 이해가 쉽다. 아래 이미지 4개가 있다. 이때 4개의 이미지에 tabindex="-1"을 설정해주면 사용자가 →버튼을 클릭하지 않는다면 자동으로 tabfocus가 가지않고 지나가게 된다.
이와 같은경우는 해외의 Carousel에서 자주 사용해주는 방법이다. 이와 같이 tabindex="-1"을 이용한다면 사용자는 이미지를 불필요하게 이미지를 전부 확인하지 않아도 다른 컨텐츠로 이동할 수 있다.
추가로, 전부는 아니지만 대부분 해당 기능은 JavaScript와 함께 사용한다. 키보드를 이용해 tabfocus를 탐색하는 기능도 JavaScript로 구현할 수 있다.
현재 우리나라에서는 위와 같은 접근성을 고려한 기능을 많이 사용해주지 않는다고 한다. 강사님과 같이 다른 사이트를 방문해보니 정말 그렇다. 모든 사용자를 고려하는 마크업을 하고 그들을 위한 접근성 기능을 구현하는 것에 사명감을 가지고 초심을 잃지 않는 내가 되기를 기도한다.
참고
