1. 키보드 접근성을 고려한 tabindex의 사용
tabindex를 적절히 사용하여 스크린리더 사용자를 위한 키보드 접근성 제공 방법에 대해 살펴봄
tabindex는 기본적으로 키보드의 Tab키를 눌렀을 때 포커스의 이동 순서를 임의로 조정할 수 있는 HTML 속성입니다. tabindex의 포커스의 순서를 부여하는 방식은 tabindex 값에 양의 정수를 넣어주면 됩니다.
예를 들어 어떤 HTML 요소에 tabindex="1"을 주었다면 해당 웹 페이지 상에서 Tab 키를 눌렀을 때 tabindex="1"이 부여된 요소가 가장 먼저 포커스 됩니다.
그러나 tabindex는 신중하게 사용해야할 필요가 있습니다. 일반적으로 키보드의 tab키를 눌렀을 때, 포커스는 HTML의 마크업 순서를 따르며 링크 요소 또는 폼 요소 등 tab키로 포커를 가질 수 있는 요소에 마크업 순서에 따라 자연스럽게 이동합니다. 기본적으로 마크업이 논리적으로 이루어져 있다면 굳이 tabindex를 사용해야할 이유는 없습니다. 오히려 잘못된 tabindex를 사용함으로써 스크린리더 사용자가 웹 페이지의 구조를 이해하는데 어려움으로 작용하게 될 수 있습니다.
2. tabindex 어떤 경우에 사용하나?
tabindex는 위에서 설명한 것과 같이 마크업 순서가 논리적으로 잘 구성되어 있다면 대체로 사용할 필요가 없습니다. 임의의 페이지에 처음 접속 시, 필수로 회원 로그인을 해야 하는 경우 폼 요소에 tabindex를 부여하여 먼저 회원 로그인을 하도록 유도하는 등의 이유로 사용할 수는 있습니다. 그러나 이러한 경우에도 페이지 로딩 시, autofocus 기능을 사용하여 회원 로그인을 유도하는 것이 바람직하다고 생각합니다. 그러면 tabindex는 언제 사용할까요?
웹 페이지를 구성하다 보면 불가피하게 시각적인 디자인 때문에 폼 요소나 링크 요소가 논리적이지 않게 만들어야 하느 경우가 있습니다. 이때 tabindex로 페이지 탐색에 논리적 순서를 부여하여 사용자가 자연스럽게 페이지를 탐색할 수 있도록 합니다.
3. tabindex 0과 -1
tabindex 속성은 양의 정숫값 외에
0과-1의 값을 가질 수도 있습니다.
먼저 tabindex="0"은 Tab키를 눌렀을 때 포커스를 받을 수 없는 요소, 이를테면 <span> 등의 요소에 포커스를 받게 할 수 있습니다.
반면 tabindex="-1"은 기본적으로 Tab키를 눌렀을 때 포커스를 받을 수 있는 폼 요소나 링크 요소를 강제로 포커스를 받지 못하도록 하는 값 입니다.
여기서는 키보드 접근성에 있어 중요하다고 할 수 있는 tabindex="0"에 대해 살펴보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지제목 | 국가 </title>
</head>
<body>
<p tabindex="0">안녕하세요?</p>
<p tabindex="-1">반갑습니다.</p>
<p tabindex="0">감사합니다.</p>
</body>
</html>브라우저 실행 시,
👆 tabindex="0" 예제의 브라우저 상 표시 화면
위 예제는 3개의 문단으로 이루어져 있습니다. 그중 두개의 <p>요소에 tabindex="0"속성이 적용되어 있습니다. Tab 키를 눌러 예제 페에지 영역을 이동해보면 첫 번째와 두 번째 문단에 포커스가 위치하는 것을 알 수 있습니다. 따라서 tabindex="0"은 불가피하게 <span>등에 onclick 속성을 사용할 때 키보드 사용자가 Tab 키만으로 쉽게 해당 요소에 접근하도록 할 수 있습니다.
👆 첫 번째 tab키 눌렀을 때
👆 두 번째 tab키 눌렀을 때
tabindex="-1"을 적용한 반갑습니다.는 Tab 키로 이동되지 않음.
경애님 피드백: p 태그는 원래 탭이 가지 않는 요소이다.
button등 탭으로 이동 가능 한 태그로 바꾸는 것이 적절하다. 👇
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지제목 | 국가 </title>
</head>
<body>
<button type="button" tabindex="0">안녕하세요?</button>
<button type="button" tabindex="-1">반갑습니다.</button>
<button type="button" tabindex="0">감사합니다.</button>
</body>
</html>4. tabindex="0"과 "-1"의 활용 방법
Tab 키를 눌렀을 때 일반적으로 포커스를 받을 수 있는 요소를 포커스를 받지 못하도록 하는 tabindex="-1"은 스크린리더 사용자가 복잡한 위젯 등의 메뉴를 탐색할 때 유용할 수 있습니다. 또한, 특정 요소에 Tab 키로 접근할 필요가 없을 때 임시로 사용할 수도 있습니다.
예를 들어 여러 개의 폼 요소가 있고, 일부 요소에 사용자가 잘못된 값을 입력했을 때 에러를 리턴하면서 제대로 입력된 폼 요소에는 Tab 키를 이용해 접근하지 않아도 되도록 임시로 tabindex="-1"을 적용할 수 있습니다.
또, 몇 개의 상위 항목 목록이 있고 각 상위 항목에 수많은 하위 항목들이 있는 계층 구조의 페이지일 경우 각 상위 항목들만 Tab키로 접근하도록 하여 페이지 탐색을 효육적으로 만들어 줄 수 있습니다. 아울러 포커스를 받지 못하닌 요소 이를테면 <p>, <h1> 등의 요소에 tabindex="0"을 적용해 주면 해당 요소로 포커스 이동이 가능합니다.
참고 사이트: 널리-키보드 접근성을 고려한 tabindex의 사용
