[web]웹 접근성과 HTML의 tabindex 속성

✨ 웹 접근성

모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것 - 출처

ex. 웹 페이지의 확대 기능을 막아놓는 경우 -> 시력이 나쁜 사람들은 웹 사이트에서 제공하는 정보를 얻기 힘들다.

✨ tabindex란?

tabindex가 있는 요소는 포커스 될 수 있고, Tab키를 눌렀을 때 포커스의 이동 순서를 지정한다.

tabindex를 사용할 때는 주의해야한다. tabindex를 남용하면 접근성 보조기기(ex. 스크린 리더)를 사용하는 사용자의 페이지 탐색과 조작에 방해가 된다.

0보다 큰 tabindex값을 사용하면 안된다. 접근성 보조기의 페이지 탐색과 조작에 방해가 된다.
- tabindex 값을 0보다 큰 값을 쓰지말고, 마크업 순서가 논리적으로 잘 구성되어 자연스럽게 tab이동이 되도록 HTML을 작성해야한다.

기본적으로 tabindex를 가지는 요소들

대체로 대화형 콘텐츠들은 tabindex를 가지고 있다. - a태그, input 태그 ...

• 이 태그들이 기본적으로 가지는  tabindex 값은 0이다.
• 따라서 기본적으로 tabindex를 가지는 요소에 값을 -1로 변경한다면 tab키를 눌렀을 때, 해당요소로 이동하지않는다.

기본적으로 tabindex를 가지지 않는 요소들

기본적으로 tabindex를 가지지않는 요소에 tabindex값을 추가하면 해당 요소는 tab키로 접근이 가능해진다.

• tabindex를 사용하면 tab키가 사용 가능해진다.
  • tab키가 사용가능해지면 keyboard이벤트를 사용할 수 있게 된다.

✨ tabindex 0과 -1

tabindex = '0'

포커스를 받을 수 없는 요소에 포커스를 받게 할 수 있다.

tabindex = '-1'

포커스를 받을 수 있는 폼 요소나 링크 요소를 강제로 포커스를 받지 못하게 할 수 있다.

✨ 접근성 고려사항

비 대화형 콘텐츠에 tabindex를 작성하는 것을 피하라고 권장한다.

ex. button을 나타내기 위해서 div태그를 사용하고 tabindex를 사용하는 행위

비 대화형 콘텐츠를 사용해 만든 대화형 콘텐츠들은 접근성 트리에서 나타나지 않기 때문에 보조기기(ex.스크린리더)가 제대로 작동하지 않을 수 있다.

• 대화형 콘텐츠 - 대화형 콘텐츠 는 사용자와의 상호작용을 위해 특별하게 설계된 요소(ex. button, input ...)

대화형 콘텐츠는 대부분 ARIA가 관리하는 접근성 기술에게 알려줄 수 있는 자신의 역할과 상태를 내장하고 있기 때문에 최대한 대화형 콘텐츠를 사용하는 것이 좋다.

 

그렇다면 tabindex는 언제 사용해야할까?

✨ tabindex를 사용하는 경우

마크업이 논리적으로 되어있다면 사용할 필요가 없다. 시각적인 디자인때문에 폼이나 링크 요소가 논리적이지 않게 마크업된 경우가 있다. 이때 tabindex를 사용해 순서를 부여하면 자연스럽게 페이지를 탐색할 수 있게 된다.

 

혹은, keyboard이벤트가 존재하지 않는 요소에 keyboard이벤트를 사용할 수 있게 만드는 경우 사용한다.

 

tabindex로 keyboard이벤트 추가하기

기본적으로 div와 같은 태그들은 keyboard 이벤트가 작동하지않는다. 이런 경우 tabindex를 준다면 keyboard이벤트를 사용할 수 있게 된다.

요소가 tabindex에서 선택되야한다면 tabindex 값을 0을 주면 된다.

요소가 tabindex에서 선택되지않아야한다면 tabindex값을 -1로 주면된다.

 

✨ tabindex 예제

코드 샌드박스에 tabindex를 사용한 예제를 만들어봤다.

https://codesandbox.io/s/tab-index-practice-vokbcg?file=/index.html 

Tab-index-practice - CodeSandbox

 

✨ 참고 자료

https://nuli.navercorp.com/community/article/1132726

키보드 접근성을 고려한 tabindex의 사용

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

tabindex - HTML: HyperText Markup Language | MDN