위 예제는 3개의 문단으로 이루어져 있습니다. 그중 두 개의 <p> 요소에 tabindex=”0” 속성이 적용되어 있습니다. Tab 키를 눌러 예제 페이지 영역을 이동해 보면 첫 번째와 두 번째 문단에 포커스가 위치하는 것을 알 수 있습니다. 따라서 tabindex=”0”은 불가피하게 <span> 등에 onclick 속성을 사용할 때 키보드 사용자가 Tab 키만으로 쉽게 해당 요소에 접근하도록 할 수 있습니다.
tabindex 어떤 경우에 사용하나?
tabindex는 위에서 설명한 것과 같이 마크업 순서가 논리적으로 잘 구성되어 있다면 대체로 사용할 필요가 없습니다. 임의의 페이지에 처음 접속 시 필수로 회원 로그인을 해야 하는 경우 폼 요소에 tabindex를 부여하여 먼저 회원 로그인을 하도록 유도하는 등의 이유로 사용할 수는 있습니다. 그러나 이러한 경우에도 페이지 로딩 시 autofocus 기능을 사용하여 회원 로그인을 유도하는 것이 바람직하다고 생각합니다. 그럼 tabindex는 언제 사용할까요?
웹 페이지를 구성하다 보면 불가피하게 시각적인 디자인 때문에 폼 요소나 링크 요소가 논리적이지 않게 만들어야 하는 경우가 있습니다. 이때 tabindex로 페이지 탐색에 논리적 순서를 부여하여 사용자가 자연스럽게 페이지를 탐색할 수 있도록 합니다.
tabindex 0과 -1
tabindex 속성은 양의 정숫값 외에 0과 -1의 값을 가질 수도 있습니다. 먼저 tabindex=”0”은 Tab키를 눌렀을 때 포커스를 받을 수 없는 요소, 이를테면 <span> 등의 요소에 포커스를 받게 할 수 있습니다. 반면 -1은 기본적으로 Tab키를 눌렀을 때 포커스를 받을 수 있는 폼 요소나 링크 요소를 강제로 포커스를 받지 못하도록 하는 값입니다. 여기서는 키보드 접근성에 있어 중요하다고 할 수 있는 tabindex=”0”에 대해 살펴보도록 하겠습니다. 먼저 아래의 링크를 눌러 tabindex=”0”의 실제 예를 확인할 수 있습니다.
tabindex=”0”과 “-1”의 활용 방법
Tab 키를 눌렀을 때 일반적으로 포커스를 받을 수 있는 요소를 포커스를 받지 못하도록 하는 tabindex”-1”은 스크린리더 사용자가 복잡한 위젯 등의 메뉴를 탐색할 때 유용할 수 있습니다. 또한, 특정 요소에 tab 키로 접근할 필요가 없을 때 임시로 사용할 수도 있습니다.
예를 들어 여러 개의 폼 요소가 있고, 일부 요소에 사용자가 잘못된 값을 입력했을 때 에러를 리턴하면서 제대로 입력된 폼 요소에는 Tab 키를 이용해 접근하지 않아도 되도록 임시로 tabindex=”-1”을 적용할 수 있습니다.
또, 몇 개의 상위 항목 목록이 있고 각 상위 항목에 수많은 하위 항목들이 있는 계층 구조의 페지일 경우 각 상위 항목들만 Tab 키로 접근하도록 하여 페이지 탐색을 효율적으로 만들어 줄 수 있습니다. 아울러 포커스를 받지 못하는 요소 이를테면 <p>, <h1>등의 요소에 tabindex=”-1”을 적용해 주면 해당 요소로 포커스 이동이 가능합니다.
