NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


tabindex 속성이 오히려 접근성을 해친다.

본문 건너 뛰기

tabindex라는 속성이 있습니다. 말 그대로 tab의 접근 순서를 인위적으로 변경할 수 있는 속성 입니다. tabindex는 다음 요소에 적용할 수 있습니다.

  • a
  • area
  • button
  • input
  • object
  • select
  • textarea

이 요소들 이외의 요소에 tabindex 속성이 지정되면 문법적으로 유효하지 않습니다. 그러나 문법적으로 옳고 그름을 떠나 한 가지 질문을 던져 보겠습니다.

tabindex 속성을 왜 사용하시나요?

여러분은 아마도 아래 두 가지 경우중 하나의 대답을 선택할 것입니다.

  • 사용성을 높이기 위하여.
  • 접근 순서를 보완하기 위하여.

tabindex, 사용성을 높인 사례.

포털 초기화면에서 가장 많은 포커스를 가져가는 곳을 순서대로 정렬시켜 보면 어떨까요?

  1. 검색 인풋
  2. 아이디 인풋
  3. 비밀번호 인풋
  4. 로그인 버튼

맞나요? 객관적으로 제시할 근거 자료는 없지만 저는 거의 확신하고 있습니다. 국내 양대 포털인 DAUMNAVER에 가서 키보드만으로 웹 페이지를 탐색해 보세요. tab 키는 ‘검색 인풋-아이디 인풋-비밀번호 인풋-로그인 버튼’ 순으로 이동할 것입니다. 양대 포털은 누가 먼저랄 것도 없이 이 네 가지 요소에 tabindex를 적용 했습니다. 굳이 누가 먼저 했는지를 따지는 것은 의미는 없는 일입니다. 어느 한쪽이 뒤늦게 이것을 했다고 해서 따라했다는 소리를 들을 필요는 없다고 생각하니까요. 키보드만으로 웹 페이지를 탐색하는 사람들은 보통 장애인이거나 또는 숙련된 사람들 입니다. 이 사람들에게 포털에서 제공한 tabindex키는 분명 도움이 되었을 것입니다. 굳이 제공하지 않더라도 접근에 제한이 되는것은 아니지만 제공함으로써 효율적인 탐색이 가능하게 되었으니 사용성을 높였다고 평가할 수 있습니다. ‘검색 인풋-아이디 인풋-비밀번호 인풋-로그인 버튼’ 탐색이 끝나면 포커스는 페이지에서 가장 처음 등장하는 a, area, button, input, object, select, textarea 요소를 찾고 그 이후로는 순차적으로 웹 페이지를 탐색할 것입니다.

tabindex, 키보드 접근 순서를 보완한 사례.

tabindex가 접근성을 높여준다는 오해가 있는데 완전히 잘못된 상식입니다. 만약 여러분이 사용성을 높이기 위한 목적이 아니라 HTML의 접근 순서를 보완하기 위하여 tabindex를 사용했다면 그것은 여러분의 HTML이 논리적인 순서로 마크업 되지 않았다는 것을 반증하는 것입니다. HTML의 마크업 순서가 논리적으로 작성되었다면 tabindex 속성은 애시당초 필요하지 않습니다. 심지어 tabindex 속성은 HTML 스펙에서 사라지더라도 전혀 문제가 없는 속성이라고 생각합니다. 빈번하게 발견되는 예를 한번 들어 보겠습니다.

다음과 같이 table을 이용하여 로그인 서식을 배치하는 경우 키보드 접근 순서는 ‘아이디 인풋-로그인 버튼-비밀번호 인풋’이 됩니다. 이 순서는 HTML 마크업 순서에 따라 발생하는 순서로써 논리적이라고 보기 어려운 순서 입니다. 

HTML 코드를 보면 왜 이런 순서로 탐색이 되는지 알 수 있습니다.

<table border="1">
  <tbody>
    <tr>
      <th scope="row"><label for="uid">아이디 :</label></th>
      <td><input type="text" id="uid" /></td>
      <td rowspan="2"><input type="submit" value="로그인" /></td>
    </tr>
    <tr>
      <th scope="row"><label for="upw">비밀번호 :</label></th>
      <td><input type="password" id="upw" /></td>
    </tr>
  </tbody>
</table>

로그인 버튼은 병합된 첫 번째 행의 세 번째 컬럼에 포함되기 때문에 아이디 인풋 다음으로 포커스를 받게 됩니다. 비밀번호를 작성하지 않은 상태로 로그인 하도록 유도하는 상황 입니다. 문제는 웹 페이지 저작자들이 이 문제를 해결하기 위하여 table을 걷어내지 않고 ‘아이디, 비밀번호, 로그인’ 콘트롤에 tabindex 속성을 사용한다는 데 있습니다. 여기서 tabindex를 사용하게 되면 tab키는 다른 어떤 항목보다 로그인 서식을 먼저 탐색하게 됩니다. 이것이 의도한 경우라면 문제가 되지 않지만 만약 ‘로그인’ 서식이 아니고 웹 페이지에서 가장 먼저 탐색이 되어야 하는 콘텐츠가 아니라면 어떨까요? 어설프게 tabindex를 사용한 다음 그 순서가 잘못 지정된 것을 바로잡지 않은 사례가 무척 많이 발견 됩니다. 또 그것을 그대로 복사해서 다른 곳에 아무 생각 없이 가져다 쓰는 사례도 많습니다. 이런 경우 tabindex가 접근성을 오히려 훼손하게 됩니다. 지금 당장 여러분이 제작한 웹 사이트를 찾아서 tabindex가 사용되었는지를 확인하고 접근 순서를 오히려 훼손하고 있지 않은지 테스트 해보세요.

tabindex 대신 HTML의 논리적인 구조를 바로잡아야.

테이블이 사용되지 않아야 할 곳에 테이블이 사용되었다면 테이블을 걷어내야 합니다. 위에서 예로 든 로그인 서식의 경우 적어도 th 요소가 있기 때문에 table이 의미에 맞지 않는다고 보기는 어렵습니다. 단지 논리적인 구조를 갖지 못할 뿐이죠. 그러나 table을 걷어낸다면 적어도 tabindex를 사용하지 않아도 될 것입니다. 매우 치밀하게 사용하고 관리하지 않는다면 tabindex를 사용하는 것은 여러분의 웹 사이트에 땜빵질을 하는 것과 같습니다. 땜빵하는 방법 대신 얼개를 바꾸기를 강력하게 권장 합니다.

분류: 웹 기획,웹 디자인,웹 접근성,웹 표준 | 2009년 4월 7일, 3:00 | 정찬명 | 댓글: 30개 |
트랙백URI - http://naradesign.net/wp/2009/04/07/744/trackback/

30개의 댓글이 있습니다.

  1. 나상욱 댓글:

    아 저도 로그인폼은 테이블로 짜여져있는데
    rowspan때문에 저도 tabindex를 쓰고 있었거든요.

    제가 관리하는 사이트의 로그인폼은 따로 단일페이지에 로그인폼만 달랑 있는거라 큰 문제는 안되겠지만 외부로그인방식으로 쓰는거라면 문제가 있겠네요.

    좋은거 하나 배워갑니다

  2. 정찬명 댓글:

    HTML 코드를 재사용하면서 문제가 발생하는 경우가 많은것 같습니다. 되도록 tabindex를 잘 모르는 누군가 복사해서 가져다 쓰더라도 문제가 없는 방식이 더 좋겠습니다. 늦은밤까지 잠을 못이루셨군요. ^^;

  3. 희주 댓글:

    그러니깐요.. 논리적인 구조로만 마크업을 한다면 tabindex가 필요가 없는데요. 서식이나 버튼 위치는 CSS로 얼마든지 조정할 수 있는 부분이니깐요.

  4. 나에 댓글:

    항상 궁금했던 점입니다. 논리적인 구조로 되어 있으면 tabindex가 필요하지 않을텐데
    왜 쓰는지 이해가 좀 안됐었거든요.

  5. Outsider 댓글:

    테이블로 짜맞추기로 해서 tabindex를 쓰는건 저도 반대인데요.
    괜찮은 div구조로 했을때 예로 드신 검색포털같은 경우 검색창 다음에 로그인으로 이동하게 하려면요 디자인에 생관없이 검색창과 로그인 사이에 tab으로 선택될 요소가 없게 한다음에 디자인을 위해서 재배치를 해야되는데요. 이렇게 할경우 오히려 구조적인 div를 깰수도 있는거 아닌가요?
    의도한 tabindex랑 논리구조랑 항상 일치하진 않을수도 있다는 생각이 들어서요.

  6. 진사야 댓글:

    전 2번 사례에 해당되네요. 키보드 접근 순서 보완…. 로그인폼 짤 때 간혹 써 왔는데, 이런 함정이 있었군요. 앞으로는 얼개를 다듬는 방향으로 나가봐야겠습니다.
    좋은 가르침 고맙습니다. :-)

  7. 정찬명 댓글:

    @Outsider

    논리적인 배치 순서와 tab 접근 순서가 일치하는 것이 가장 좋지만 tab 순서를 위해서 논리적인 순서를 어거지로 바꿀 필요는 없다고 생각합니다.

    포털에서 사용중인 tab 순서는 논리적인 순서를 고려한 것이 아니라 논리적인 순서를 건너 뛰면서 효율을 높일 수 있는 방법을 제공한 것이므로 이런 경우 키보드 접근 순서와 논리적인 순서가 일치하지 않더라도 문제가 없다는 것입니다.

    논리적인 HTML 문서에 논리적인 tab 순서가 자연스럽게 따라오는 것이지
    사용자 경험 확장을 위한 tab 순서에 HTML 구조를 끼워맞추는 것은 Outsider님께서 우려하시는 것처럼 논리적인 구조를 깨기 때문에 그럴 필요가 없다고 생각 합니다.

    단, HTML 마크업 순서와 tab의 접근 순서가 전혀 무관하지는 않으므로 이 순서가 반대(tab이 HTML을 거꾸로 거슬러 오르는)가 되는 경우는 지양하는것이 바람직하다고 생각합니다.

  8. Hwan 댓글:

    정찬명님의 의견에 동의합니다. ‘논리적인 순서’ = ‘사용자가의 포커스를 많이 받는 요소 순서’는 아닐 수 있고, 이럴 경우 효율성의 차원에서 tabindex를 사용할 수 있겠죠. 다만, 오용되거나 남발되어 오히려 해를 끼칠 가능성이 많은 속성이라는 것은 맞는 것 같습니다.

    예를 들어 스마트폰(터치가 안되는)에서 모바일 브라우져로 CSS 적용 없이 사용할 경우 포털의 검색 결과 화면에서는 포털의 메인 메뉴나 로그인 창, 검색 창 등은 건너 뛰고 검색 결과의 첫번째 a tag부터 포커스를 받는다면 편리하겠다는 생각을 하곤 했습니다.

  9. chatii 댓글:

    tabindex는 접근성이 아니라 사용성을 위한 것이군요
    간결한 설명입니다

  10. 이태임 댓글:

    고민했던 부분인데 고민이 해결된거같아서 시원하네요. 근데 ‘논리적인 구조’ 가 마음에 걸리네요.

  11. 정찬명 댓글:

    차차 좋아 지겠지요. 주신 의견들 감사합니다. ^^

  12. 라이 댓글:

    글 잘 읽었습니다.
    그런데 죄송하지만 위 예시에서 논리적인 구조를 바로잡는 예시도
    함께 보여주셨으면 더욱 좋았을 것 같습니다.
    웹접근성과 css에 취약해서 질문드립니다.^^;;
    즉, html코딩은 논리적 구조로 작성하고
    모든 디자인(구조, 위치 등)적 요소는 css를 통해 구현하라는 의미인 것이죠?
    예외적으로 접근순서가 논리적이지 않을 경우는 제외하고 말이죠?..^^
    위의 경우라면 tabindex를 사용할 수 밖에 없겠죠?
    제가 이해한 것이 맞는지 궁금합니다.

  13. 정찬명 댓글:

    CSS를 이용하면 접근 순서를 얼마든지 논리적으로 배치할 수 있습니다. 이 글에서 tabindex는 사용하지 않아야 한다고 설명 했고 논리적인 순서를 위해 table을 걷어내야 한다고 말했습니다. 즉, 예외적인 경우란 존재하지 않는다고 보며 예외적인 경우를 만들지 않아도 된다는 뜻입니다.

    예제 두 개를 소개해 드립니다. 마크업은 각기 다르지만 CSS를 이용하여 콘텐츠의 순서를 논리적으로 마크업 한 사례들 입니다.

    웹 접근성 연구소 로그인
    http://wah.or.kr/Member/Login.asp

    네이버 로그인(플래시와 아이프레임 사용을 제외한 보안 1단계 부분만 참조)
    http://html.nhndesign.com/guidelines/pattern/naver/login/default_popup_v2.html

  14. 라이 댓글:

    빠른 답변 감사드립니다..
    그런데 제가 문의드린 사항은 로그인 서식에 국한한 것이 아니라
    페이지 전반적으로 tabindex를 사용하여 접근성을 높히려는 경우를 말합니다.
    예를 들어 아래와 같은 경우도 예외라고 볼 수 없는지요..

    상단에 버튼등의 접근할 개체가 있고 그 아래
    탭으로 [가] [나] [다] [전체] 가 있다고 가정할때
    논리적으로 구현하면 가,나,다,전체가 출력되도록 구성해야 하고
    물론 이에 따라 순차적으로 접근순서가 정해질 것으로 예상됩니다.
    그런데 순서를 아래와 같이 변경해야 할 경우라면 어떤가요?
    상단의 버튼 – 전체 – 가 – 나 – 다
    저는 이럴 경우라면 논리적으로 순서가 순차적이지 않기 때문에
    tabindex를 사용해야하지 않을까하는 생각이 들거든요..
    이런 부분도 css에서 구현이 가능한가요?
    답변 부탁드립니다..^^

  15. 정찬명 댓글:

    지금 예를 들어주신 상황은 탭키가 논리적 순서를 인위적으로 거스르도록 만들어 내려고 하는 상황인데요. 실제로 이렇게 구성되어야 할 콘텐츠가 현실세계에서 무엇인지 궁금 합니다.

  16. 김일규 댓글:

    디자인이 완전히 엉진망창의 순서로 되어 있지을라도
    아무 문제없이 이것을 마크업 할 수 있다고 생각되구요
    그런데 명찬님,
    실제로 이렇게 구성되어야 할 콘텐츠가 있수을 있죠.
    클라이언트가 접웹근성도 필요없고 아이디입력후 자동그로인으로 포커스를 원하고 체크폼을 비밀번호하단에 달아달고라 합니다.
    고객에게는 웹표준과 웹접근성, 아무것도 필요하지 않을때..
    어떤 순서로 배되열어 있는가 하것는은 중하요지 않을수도 있습니다.

  17. 정찬명 댓글:

    고객이 키보드 접근 순서까지 주문할 정도의 지식이라면 어떤 순서가 논리적인 순서가 되는지에 대하여도 잘 알고 있을꺼라 생각 됩니다.

    따라서 만약 상식적인 순서를 벗어나는 요구를 구체적으로 해오는 경우라면 상황을 이해 시켜서 올바른 마크업과 키보드 접근순서를 가질 수 있도록 설명할 수 있어야 한다고 생각합니다.

    일규님이 만들어주신 예도 인위적으로 탭키가 논리적 순서를 거스르도록 만들어 내려고 하는 예 가운데 하나일 뿐이라고 생각 되네요. 실제로 그렇게 구현해 달라는 요구가 발생할 수 없다는 뜻입니다.

  18. 마약 댓글:

    로그인 폼이 테이블로 짜여진것에 대해서 태그의 용도가 올바르지 않다고 생각합니다…
    굳이 테이블로 하고 싶다면 그나마 접근성이라도 높일 수 있도록,
    로그인인풋+비밀번호인풋 테이블1개
    로그인버튼 테이블1개

    이렇게 만들면 포커스라도 순서에 맞게 이동하겠군요 ㅎㅎ

  19. 익명 댓글:

    블러그에 좋은 내용이 많네요..

    개인적으로 제 블러그에 이 내용을 게시 하고 싶은데 괜찮을까요?

    출처는 남기 겠습니다..

    만약 문제가 된다면… 비공개로 해 놓겠습니다.

    http://towis.net

  20. 정찬명 댓글:

    @익명
    제 포스트들은 블로그 하단에 적힌대로 ‘저작자표시, 비영리, 변경금지’ 조건에 따라서 이용이 가능하십니다. ^^

  21. 똑디 댓글:

    사이트를 새롭고침하고 탭키를 누르면 특정부분에서만 탭키가 먹고 빠져나가버리는것을 무엇때문일까요?

    해당 영역을 한번 클릭을 하고 탭키를 누르면 그 영역에서 탭키가 먹히는데 순전히 탭키로만 하면 문제가 생기니…

  22. 똑디 댓글:

    자문자답이네요. K-WAH를 돌려보고 질문을 드릴걸…
    소스중에 onfocus=this.blur() 이 하나 포함되어 있었네요.. ㅡㅡ;; 이런 원초적인 실수를 하다니..

  23. 정찬명 댓글:

    @똑띠
    원인이 밝혀져서 다행입니다. ^^

  24. 익명 댓글:

    탭 인덱스 관련하여 자료를 찾던중에 좋은 내용을 보았습니다.
    근데, 포스트 제목아래 탭 이동시 “본문 건너 뛰기”부분이 활성화되는 것을 확인 하였으나 클릭시 탭 이동이 되지 않네요. 어떤 동작을 위해 넣어두셨는지 궁금합니다.

  25. 정찬명 댓글:

    @익명
    마우스를 사용하지 않고 키보드에만 의존하는 장애인(시각장애, 상지장애 -팔이 없거나 사용하기 불편한-)이 본문을 건너 뛰어서 주 메뉴로 갈 수 있도록 의도한 부분입니다. 건너뛰기 링크가 초점을 받을 때 엔터를 치면 화면 우측에 자리잡은 #nav 영역으로 초점이 이동합니다. 한편 웹킷엔진을 사용하는 브라우저(크롬, 사파리)는 초점 이동을 제대로 지원하지 않는 버그가 있습니다.

  26. 익명 댓글:

    우선 친절한 답변 감사합니다.^^
    제가 궁금한점은 탭 이동중에 “본문 건너 뛰기” 영역이 화면에 표시되어 엔터실행시 tabIndex가 #nav부터 이동되지 않는 부분입니다.(저는 건너뛰기를 누르면 tabIndex가 #nav 부터 이동해야 하는 거 아닌가 하는 의문이 생겨서요.)
    정찬명님이 말씀하시는 접근성 부분은 이해합니다. 그러나 일반인에게 그 건너뛰기 기능이 주어졌다면, 기능이 활성화 되어 행동이 발생하였다면 그에 대한 내용이 진행되어야 되지 않나 싶은 생각에 의견을 남겨봅니다.

  27. 정찬명 댓글:

    @익명
    네, 앞서 말씀드린대로 #nav 영역으로 초점이 이동하지 않는 것은 웹킷 브라우저 버그 입니다. 지금 사용하는 브라우저가 무엇인지요?

  28. […] tabindex 속성이 저를 좀 당황스럽게 했습니다. 일반적으로 tabindex 속성은 키보드 접근성을 훼손할 우려가 있기 때문에 평소에 거들떠 보지도 않던 속성인데요. 해외 오픈소스 […]

  29. 익명 댓글:

    jpwshort2.blog.me 에 주소 공유했습니다.

  30. hax0r 댓글:

    전 찬성하는 입장인데, 일반인 기준에서 보면 불편해 보일수있는 속성중하나일수도있겠지만요.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님