tabindex는 사용자가 tab 키로 웹을 이용시 접근할 수 있도록
접근가능 또는 접근이 가능하지 않도록 만들 수 있습니다.
요즘 레이어 팝업의 접근성 문제로 작업을 하는 중 새삼 tabindex 에 대한 내용을 공부해봐야 겠다 생각이 들어 정리하게 됩니다.
제가 실무에서 작업해 본 tabindex는 아래와 같았습니다.
1. tabindex 사용법
tabindex는 tab으로 접근할 수 없는 부분에 사용할 수 있습니다.
| <span tabindex="0">text</span> | cs |
위 처럼 설정하면 a, button, input 태그등 tab으로 접근가능한 태그가 아니더라도 접근 가능해 집니다.
2. tabindex 값 (-1, 0 ,1~)
tabindex의 값은 -1, 0, 1~ 로 설정할 수 있습니다.
그럼 위의 값으로 설정하면 어떠한 일이 일어 날까요?? 예제로 실험해 보겠습니다.
| <p tabindex="0">p 태그</p> <span tabindex="-1">span 태그</span> <div tabindex="1">div 태그</div> | cs |
위와 같이 tabindex 를 설정하고 tab으로 접근 하였을때 어떠한 순차적으로 접근할까요?
정답은 div > p 태그 순으로 접근합니다.
0과 1은 tab탭으로 접근 가능합니다. 하지만 -1의 값은 tab으로 접근하지 못하게 합니다.
이는 a, button, input 태그등이 tab의 접근이 가능하더라도 -1의 값을 가지면 접근을 차단 합니다.
3. tabindex 주의 사항
위에서 설명 드린 부분에서 0과 1의 값은 tab으로 접근가능하다고 했는데
만약 기존의 a, button, input 태그처럼 기본 접근가능한 태그와 혼용하여 사용하였을시 어떻게 진행 되는지 확인해 보겠습니다.
| <p tabindex="0">p 태그</p> <a href="#" tabindex="-1">a 태그 -1</a> <a href="#">a 태그</a> <span tabindex="0">span 태그</span> <div tabindex="1">div 태그</div> <div tabindex="2">div 태그 2</div> | cs |
위처럼 설정면 tab의 진행 순은 다음과 같습니다.
div > p > a태그 > span
여기서 확인할 수 있는것은 0의 값은 마크업의 흐름상의 tab 진행으로 이루어지며 a태그 이어도 먼저 tab접근이 이루어지지 않는다는점
그리고 -1의 값을 가지면 a태그 이어도 tab 접근이 안된다는점
1의 값은 a가 있더라도 제일 먼저 접근 가능하다는점
숫자가 큰것이 먼저접근이 아니라 123... 순으로 tab이 접근한다는 점을 알 수 있습니다.
- 원래 접근가능한 태그더라도 tab으로 접근이 안됩니다.
- tab으로 접근이 안되는 태그를 접근 가능하도록 해줍니다.
- 기존의 접근가능한 태그(a, button, input)와 함께 문서의 순서대로 tab접근을 합니다.
- tab으로 접근하면 가장 먼저 접근합니다.
- tabindex의 값이 크다고 먼저 접근하는 것이 아니라 12345....순으로 제일 먼저 1부터 접근합니다.
이상 tabindex의 설명을 마치며
기타 새로운 내용의 추가적인 부분은 댓글로 부탁드립니다. ^^
