NARADESIGN

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


tabindex=”1″? tabindex=”0″? tabindex=”-1″?

본문 건너 뛰기

요 며칠 사이 tabindex 속성이 저를 좀 당황스럽게 했습니다. 일반적으로 tabindex 속성은 키보드 접근성을 훼손할 우려가 있기 때문에 평소에 거들떠 보지도 않던 속성인데요. 해외 오픈소스 위지윅 에디터를 벤치마킹 하다가 tabindex=”-1″ 이라는 코드를 발견한 겁니다. 제가 알기로 소시적에 이런 코드는 표준이 아니었거든요.

HTML4 명세는 tabindex를 다음과 같이 설명합니다. 이 설명은 XHTML 문서에도 동일하게 적용됩니다.

  • 이 속성은 문서의 탭 순서 안에서 현재 요소의 순번을 결정한다. 값은 0부터 32767 사이의 숫자여야 한다. 브라우저는 값 앞에 0이 붙어있으면 무시해야 한다.
  • 탭 순서는 사용자가 키보드를 통해 탐색할 때 어떤 요소가 초점을 받는 순서가 되는지를 결정한다.
  • 초점을 받을 요소는 브라우저에서 다음과 같은 규칙에 따라 탐색되어야 한다.
    1. 요소가 tabindex 속성을 지원하고 양의 값이 할당되어 있으면 먼저 탐색되어야 한다. 탐색은 tabindex 값의 가장 작은 수에서 시작하여 가장 큰 값으로 향한다. 값은 연속되는 일련의  숫자가 아니어도 상관이 없고 어떤 수로 시작해도 무방하다. 요소에 동일한 tabindex 값이 지정되어 있다면 코드 안에서 먼저 등장하는 순서대로 탐색되어야 한다.
    2. tabindex 속성 지원 여부에 관계 없이 “0”의 값이 할당된 요소는 그 다음으로 탐색된다. 이 요소들은 코드 안에서 등장하는 순서대로 탐색된다.
    3. disabled 속성이 사용된 요소는 탭 순서에 관여하지 않는다.
  • a, area, button, input, object, select, textarea 요소가 tabindex 속성을 지원하는 요소이다.

어쨌거나 표준에 따르면 tabindex 속성에는 음수 값을 사용할 수 없습니다. 그러나 현존하는 브라우저들은 tabindex=”-1″ 속성이 부여된 요소에 대해 키보드가 접근하지 않는 방식으로 구현을 해놨더라구요. 결국 이 방식이 사실상 표준이거나 또는 공식 표준이 아닐까 하는 생각이 들어 HTML5 명세를 찾아 봤습니다.

HTML5 명세는 tabindex 속성의 음수 값을 다음과 같이 설명합니다.

  • tabindex 값이 음의 정수라면 요소에 초점이 도달하지 않도록 해야 한다.

결국 tabindex 속성에서 음수 값을 사용하여 초점을 받을 수 없도록 하는 스펙을 추가한 것입니다. 그리고 현존하는 웹 브라우저들은 문서의 DTD에 관계 없이 이런 새로운 스펙을 낡은 문서에서도 사용할 수 있도록 구현해 둔 것입니다.

지구인들이 가장 많이 사용하고 있는 위지윅 에디터 TinyMCECKEditor는 이런 코드를 도구모음 버튼에 적용하여 키보드 사용자들이 도구모음 블럭을 아예 건너 뛰도록 해 놨더라구요. 이런 구현방식에 대해 어떤 분들은 키보드 사용자를 고려하지 않았다고 주장할 수 있는데요. 제가 보기에는 이 친구들 센스있게 잘 처리한 것으로 봅니다. 키보드만으로 위지윅 에디터를 사용해 본 분들은 이런 처리를 이해할 수 있습니다.

네이버 스마트에디터다음 에디터는 도구모음 블럭에 키보드가 접근할 수 있도록 처리해 놨지만 실제로는 키보드만으로는 절대로 사용할 수가 없습니다. 일단 본문 영역에 초점이 들어가면 빠져나올 방법이 없기 때문에 문제가 시작됩니다. 편집 영역에 초점이 들어가면 Tab 키를 눌러서 빠져 나와야 하는데 Tab 키에 들여쓰기 기능을 맵핑해 놓았기 때문에 편집 영역에서 빠져나올 수 없습니다. 결국 키보드만 사용하는 시각 장애인 또는 상지 장애인(팔이 없거나 불편한)은 글쓰기 과업을 수행할 수 없었습니다.

tabindex=”1″

문서 안에서 가장 먼저 초점을 받을 수 있습니다. 그러나 자연스러운 마크업 순서를 거스르기 때문에 주의해서 사용해야 합니다. 검색엔진 사이트에서 검색창에 사용하면 적합하지만(이 대신 autofocus=”autofocus” 속성이 더 적절할 듯 해요) 그 외 적합한 경우는 잘 떠오르지 않는군요.

tabindex=”0″

키보드 초점을 받을 수 없는 div, span과 같은 요소도 초점을 받을 수 있도록 만들어 줍니다. 초점을 받되 초점을 받는 순서는 자연스러운 마크업 순서를 따릅니다.

tabindex=”-1″

키보드 초점을 받을 수 있는 요소도 초점을 받을 수 없도록 만들어 줍니다. 초점을 받을 수 없기 때문에 “-1” 이외의 다른 음의 정수 값은 사실상 의미가 없습니다.

분류: 웹 기획,웹 접근성,웹 표준 | 2012년 5월 10일, 23:59 | 정찬명 | 댓글: 12개 |
트랙백URI - http://naradesign.net/wp/2012/05/10/1786/trackback/

12개의 댓글이 있습니다.

  1. 댓글:

    잘 읽었습니다.
    유익한 포스팅 고맙습니다 : )

  2. 장호연 댓글:

    도움 감사합니다^^

  3. 흐드러지다 댓글:

    요새 한창 접근성 관련 작업중인데..
    좋은 정보 감사합니다~

  4. 익명 댓글:

    좋은 정보 감사합니다. 트랙백 전송이 실패하였다고 해서 댓글 남깁니다.

  5. 정찬명 댓글:

    @익명
    수동 트랙백이라도 달아주시면 좋습니다. 감사해요. ^^;

  6. 눈팅하는오승환 댓글:

    항상 눈팅만 하다가 댓글 남기는데, 선구자의 사이트에는 정말 항상 앞서가는 정보가 있네요… 이런 고급 정보를 이렇게 무료로 눈팅만 해도 되는게 참 신기할 정도입니다;;

    항상 운영자님께 감사합니다.

  7. 익명 댓글:

    현재 우리네 웹 UX/UI를 보면 보면 마우스를 이용한 화면조작을 너무 강조하는 거 같고, 마우스 사용자를 위한 컨트롤 요소가 너무 많이 있습니다.
    tabindex=”-1″은 활용하기에 따라서 접근성 및 사용성에 큰 향상을 가져올수 있는 요소라 생각합니다.

  8. 익명 댓글:

    좋은 정보 얻고 갑니다. ~~~

  9. ㅇㅇ 댓글:

    좋은정보 잘보고 갑니다.

  10. muggle 댓글:

    -1 의 의미를 찾다가 읽게 되었습니다. 지식 감사합니다~

  11. 물재 댓글:

    좋은 정보감사합니다. 접근성을 올리려고 적용하려고 했는데 오히려 해칠수 있는거군요!

  12. […] 상지 장애인(팔이 없거나 불편한)은 글쓰기 과업을 수행할 수 없었습니다. tabindex=”1″? tabindex=”0″? tabindex=”-1″? – 정찬명의 NARADESIGN에서 […]

댓글 쓰기

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

필수 아님

필수 아님