tabindex라는 속성이 있습니다. 말 그대로 tab의 접근 순서를 인위적으로 변경할 수 있는 속성 입니다.
tabindex는 다음 요소에 적용할 수 있습니다.
a, area, button, input, object, select, textarea
이 요소들 이외의 요소에 tabindex 속성이 지정되면 문법적으로 유효하지 않습니다. 그러나 문법적으로 옳고 그름을 떠나 한 가지 질문을 던져 보겠습니다.
tabindex 속성을 왜 사용하시나요?
여러분은 아마도 아래 두 가지 경우중 하나의 대답을 선택할 것입니다.
1. 사용성을 높이기 위하여.
2. 접근 순서를 보완하기 위하여.
tabindex, 사용성을 높인 사례.
포털 초기화면에서 가장 많은 포커스를 가져가는 곳을 순서대로 정렬시켜 보면 어떨까요?
1. 검색 인풋
2. 아이디 인풋
3. 비밀번호 인풋
4. 로그인 버튼
맞나요? 객관적으로 제시할 근거 자료는 없지만 저는 거의 확신하고 있습니다. 국내 양대 포털인 DAUM과 NAVER에 가서 키보드만으로 웹 페이지를 탐색해 보세요. tab 키는 ‘검색 인풋-아이디 인풋-비밀번호 인풋-로그인 버튼’ 순으로 이동할 것입니다.
양대 포털은 누가 먼저랄 것도 없이 이 네 가지 요소에 tabindex를 적용 했습니다. 굳이 누가 먼저 했는지를 따지는 것은 의미는 없는 일입니다. 어느 한쪽이 뒤늦게 이것을 했다고 해서 따라했다는 소리를 들을 필요는 없다고 생각하니까요. 키보드만으로 웹 페이지를 탐색하는 사람들은 보통 장애인이거나 또는 숙련된 사람들 입니다. 이 사람들에게 포털에서 제공한 tabindex키는 분명 도움이 되었을 것입니다. 굳이 제공하지 않더라도 접근에 제한이 되는것은 아니지만 제공함으로써 효율적인 탐색이 가능하게 되었으니 사용성을 높였다고 평가할 수 있습니다. ‘검색 인풋-아이디 인풋-비밀번호 인풋-로그인 버튼’ 탐색이 끝나면 포커스는 페이지에서 가장 처음 등장하는 a, area, button, input, object, select, textarea 요소를 찾고 그 이후로는 순차적으로 웹 페이지를 탐색할 것입니다.
tabindex, 키보드 접근 순서를 보완한 사례.
tabindex가 접근성을 높여준다는 오해가 있는데 완전히 잘못된 상식입니다. 만약 여러분이 사용성을 높이기 위한 목적이 아니라 HTML의 접근 순서를 보완하기 위하여 tabindex를 사용했다면 그것은 여러분의 HTML이 논리적인 순서로 마크업 되지 않았다는 것을 반증하는 것입니다. HTML의 마크업 순서가 논리적으로 작성되었다면 tabindex 속성은 애시당초 필요하지 않습니다. 심지어 tabindex 속성은 HTML 스펙에서 사라지더라도 전혀 문제가 없는 속성이라고 생각합니다. 빈번하게 발견되는 예를 한번 들어 보겠습니다.
다음과 같이 table을 이용하여 로그인 서식을 배치하는 경우 키보드 접근 순서는 ‘아이디 인풋-로그인 버튼-비밀번호 인풋’이 됩니다. 이 순서는 HTML 마크업 순서에 따라 발생하는 순서로써 논리적이라고 보기 어려운 순서 입니다.
HTML 코드를 보면 왜 이런 순서로 탐색이 되는지 알 수 있습니다.
<TBODY>
<TR>
<TH scope=row><LABEL for=uid>아이디 :</LABEL></TH>
<TD><INPUT id=uid></TD>
<TD rowSpan=2><INPUT value=로그인 type=submit></TD>
</TR>
<TR>
<TH scope=row><LABEL for=upw>비밀번호 :</LABEL></TH>
<TD><INPUT id=upw value="" type=password></TD>
</TR>
</TBODY>
</TABLE>
로그인 버튼은 병합된 첫 번째 행의 세 번째 컬럼에 포함되기 때문에 아이디 인풋 다음으로 포커스를 받게 됩니다. 비밀번호를 작성하지 않은 상태로 로그인 하도록 유도하는 상황 입니다. 문제는 웹 페이지 저작자들이 이 문제를 해결하기 위하여 table을 걷어내지 않고 ‘아이디, 비밀번호, 로그인’ 콘트롤에 tabindex 속성을 사용한다는 데 있습니다. 여기서 tabindex를 사용하게 되면 tab키는 다른 어떤 항목보다 로그인 서식을 먼저 탐색하게 됩니다. 이것이 의도한 경우라면 문제가 되지 않지만 만약 ‘로그인’ 서식이 아니고 웹 페이지에서 가장 먼저 탐색이 되어야 하는 콘텐츠가 아니라면 어떨까요? 어설프게 tabindex를 사용한 다음 그 순서가 잘못 지정된 것을 바로잡지 않은 사례가 무척 많이 발견 됩니다. 또 그것을 그대로 복사해서 다른 곳에 아무 생각 없이 가져다 쓰는 사례도 많습니다. 이런 경우 tabindex가 접근성을 오히려 훼손하게 됩니다. 지금 당장 여러분이 제작한 웹 사이트를 찾아서 tabindex가 사용되었는지를 확인하고 접근 순서를 오히려 훼손하고 있지 않은지 테스트 해보세요.
tabindex 대신 HTML의 논리적인 구조를 바로잡아야.
테이블이 사용되지 않아야 할 곳에 테이블이 사용되었다면 테이블을 걷어내야 합니다. 위에서 예로 든 로그인 서식의 경우 적어도 th 요소가 있기 때문에 table이 의미에 맞지 않는다고 보기는 어렵습니다. 단지 논리적인 구조를 갖지 못할 뿐이죠. 그러나 table을 걷어낸다면 적어도 tabindex를 사용하지 않아도 될 것입니다. 매우 치밀하게 사용하고 관리하지 않는다면 tabindex를 사용하는 것은 여러분의 웹 사이트에 땜빵질을 하는 것과 같습니다. 땜빵하는 방법 대신 얼개를 바꾸기를 강력하게 권장 합니다
