[웹접근성] 키보드 접근성 고려 tabindex 사용

tabindex?

• 키보드의 Tab키를 눌렀을 때 포커스의 이동 순서를 임의로 조정할 수 있는 HTML의 속성

마크업 순서가 논리적으로 잘 구성되어 있다면 대체로 사용할 필요가 없지만 웹페이지를 구성할 때

디자인 요소 등 때문에 순서대로 배치되어 있지 않을 때 사용해 자연스럽게 페이지를 탐색할 수 있도록 구성한다

 

 

 

1. tabindex="1"

문서 안에서 가장 먼저 초점을 받을 수 있다

먼저 초점을 받기 때문에 사용 시 주의가 필요하다

 

2. tabindex="0"

키보드 초점을 받을 수 없는 div, span과 같은 요소도 초점을 받을 수 있도록 만들어 준다

초점 받는 순서는 마크업 순서를 따른다

 

2. tabindex="-1"

키보드 초점을 받을 수 있는 요소도 초점을 받을 수 없도록 한다