키보드의 접근성을 고려한 tabindex의 사용.
tabindex는 기본적으로 키보드의 tab키를 눌렀을 때 이동순서를 임의로 조정 할 수 있는 html의 속성 입니다. tabindex의 포커스의 순서를 부여하는 방식을 tabintdex 값에 양의정수를 넣어주면 됩니다. 예를 들어 어떤 html요소에 taindex=”1”을 주었다면 해당 웹 페이지 상에서 tab키를 눌렀을때 tabindex=”1”이 부여하는 요소가 가장 먼저 포커스 됩니다. 그러나 taindex는 신중하게 사용해야 할 필 요가 있습니다. 일반적으로 키보드의 tab키를 눌렀을때 포커스는 html의 마크업 순서를 따르며 링크요소 또는 폼 요소등 tab키로 포커스를 가질 수 있는 요소에 마크업 순서에 따라 자연스럽게 이동합니다. 기본적으로 마크업이 논리적으로 이루어져 있다면 굳이 tabindex을 사용할 이유가 없습니다. 오히려 잘못된 tabindex를 사용함으로써 스크린 리더 사용자가 웹 페이지의 구조를 이해하는데 어려움으로 작용하게 될 수 있습니다.
tabindex는 위에서 설명한것 같이 마크업 순서가 논리적으로 잘 구성되어있다면 대체로 사용할 필요가 없습니다. 임의의 페이지에 처음 접속하는 필수 회원 로그인을 행하는 경우 폼 요소에 tabindex를 부여하여 먼저 회원 로그인을 유도하는등의 이유로 사용할 수는 있습니다. 그러나 이러한 경우에도 페이지 로딩 시autofocus기능을 사용하여 회원 로그인을 유도하는 것이 바람직하다고 생각합니다. 그럼 tabindex는 언제 사용할까요?
웹페이지를 구성하다 보면 페이지 탐색에 논리적 순서를 부여하는 사용자가 자연스럽게 페이지를 탐색할 수 있도록합니다.
tabindex속성은 양의정수값 이외에 0과 -1의 값을 가질 수도 있습니다. 먼저 tabindex=”0”은 tab키를 눌렀을때 포커스를 받을 수없는 요소 이를테면 등의 요소에 포커스를 받게 할 수 있습니다. 반면 -1은 기본적으로 tab키를 눌렀을때 포커스받을 수있는 폼 요소나 링크 요소를 강제로 포커스 받지 못하도록 하는 값입니다.