• 웹 접근성 tabindex 속성 :: 마이구미
    HTML, CSS 2016. 8. 18. 18:17
    반응형

    이번 글은 tabindex 속성에 대한 웹 접근성에 대해 알아볼 것이다.

    참고 자료 - http://nuli.navercorp.com/sharing/blog/post/1132726

    tabindex 를 활용한 하나의 테크닉 - https://mygumi.tistory.com/372


    tabindex 속성은 키보드 접근성에 근접한 속성이다.

    키보드 접근성이란,

    말 그대로 스크린 리더 사용자가 키보드를 통해 웹 페이지의 정보에 접근하는 것이다.

    스크린 리더를 쓰지 않더라도, 흔히 우리도 주로 탭이나 엔터를 통해 사용하고 있다.


    자 그렇다면,

    tabindex 란 무엇일까?

    어떤 엘리먼트에 키보드 포커스를 주는 가장 흔한 방법으로 사용된다.

    크게 3가지 속성값을 이용할 수 있다.


    0 값 - tabindex="0"

    양수 - tabindex="1~32768"

    음수 - tabindex="-1"


    속성 값이 0인 경우는 탭을 눌렀을 때 포커스가 가지 않는 엘리먼트에게 포커스를 줄 수 있다.

    예를 들어, div영역에도 포커스를 줄 수 있다는 의미이다.

    속성 값이 -1인 경우는 반대로 탭을 눌렀을 때 포커스가 가는 엘리먼트에게 포커스를 잃게 할 수 있다.

    예를 들어, 링크 엘리먼트에 포커스를 잃게 한다는 의미다.


    아래의 소스의 경우에는 tabindex="0" 을 보자.

    내 서재 목록 바로가기를 누르면 내 서재 목록으로 스크롤되어 이동한다.

    하지만 h3 태그에 포커스가 잡히지 않는다.


    <a href="#myLibrary">내 서재 목록 바로가기</a>

    <h3 id="myLibrary">내 서재 목록</h3>


    tabindex 속성을 추가한 경우를 보자.

    추가한 아래의 소스의 경우에는 다르다.

    이동도 하고, 포커스도 잡힌다.

    여기서 포커스가 잡힌다는 말은 아래 이미지를 보면 둘러싼 선들이 있는 것이다.


    <a href="#myLibrary">내 서재 목록 바로가기</a>

    <h3 id="myLibrary" tabindex="0">내 서재 목록</h3>

    tabindex 예제


    이번엔 tabindex="양수" 를 보자.

    양수는 탭의 순서를 지정해줄 수 있다.


    <h3 tabindex="6">6</h3> <h3 tabindex="4">4</h3> <h3 tabindex="5">5</h3>


    숫자가 낮을수록 우선순위가 높다.

    4 , 5, 6 순서로 포커스가 설정되는 것을 볼 수 있다.


    tabindex="-1" 경우는 위에서도 말했듯이 탭 키에 대해 포커스를 잃게 할 수 있다.

    왜 탭에 대해 포커스 해제를 할까? 의문이 들 수 있다.

    이것 또한 예를 통해 보면 쉽게 이해할 수 있다.


    <div id="rudder" role="region" aria-label="내 서재 목록 영역" tabindex="0">     <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">1000$ 게놈</a> <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">100권의 금서 - 금지된 책의 문화사</a> <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">2030 에너지 전쟁</a> <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">남이야 뭐라 하건!</a> <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">단계적 기능 향상을 이용한 모두를 위한 웹 디자인 : UX를 고려한 웹 UI 만들기</a> <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">링크: 21세기를 지배하는 네트워크 과학</a> <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">문명과 바다</a> <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">물리학 클레식</a> <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">앨런 튜링의 이미테이션 게임</a> <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">웹 접근성 & 웹 표준 완벽 가이드 : 국가표준 접근성 지침을 준수하는 웹 콘텐츠 개발</a> <a href="http:" target="_blank" title="새창" tabindex="-1" class="bb">『직관펌프, 생각을 열다: 대니얼 데닛의 77가지 생각도구</a> </div>


    현재 div 영역은 tabindex="0" 설정으로 탭을 통해 포커스가 잡힌다.

    div 하위 영역들은 tabindex="-1" 설정으로 탭을 통해 포커스가 잡히지 않게 된다.

    이렇게 한 이유는 무엇일까?

    a 태그들에게 tabindex="-1"을 설정해주지 않는다면 탭 키를 통해 a태그 각각 포커스가 잡히게 된다.

    즉, 내 서재 목록 영역 -> 1000$ 게놈 -> 100권의 금서 ..... -> 2030 에너지 전쟁 -> 남이야 뭐라 하건! -> .....

    이런 식으로 탭을 눌렀을 때 포커스가 맞춰지게 된다.

    그렇다는 건, 일일이 탭을 통해 a태그 전부를 거쳐야만 다음 주제 영역에 포커스가 맞춰질 수 있다.

    이러한 경우에는 탭이 아닌 방향키를 통해 포커스를 설정하는 것이 흐름 상으로도 그렇고, 스크린 리더 사용자에게도 효율적이다.

    그리하여 tabindex="-1" 을 통해 방향키를 통해서만 포커스가 맞춰지게 하도록 설정한 것이다.


    아래 자바스크립트 소스를 보면 keydown과 focus()를 통해 포커스를 설정하였다.

    참고바란다.


    <script> var index = -1; jQuery('#rudder').bind('keydown', function(e){ var size = jQuery(e.currentTarget).children().length - 1; if (index < -1) { return; } if (e.keyCode === 37 && index > 0) { --index; } else if (e.keyCode === 39 && index < size){ ++index; } else if(e.keyCode === 9) { index = -1; return; } else { return; } jQuery(e.currentTarget).children()[index].focus(); }) </script>


    tabindex를 통해 키보드 접근성을 효율적으로 만들어 줄 수 있다.

    하지만 너무 남용한다면, 오히려 사용성이 떨어지게 될 것이다.

    적절히 사용하여 효율적으로 만들자.

    반응형

    댓글 0

Designed by Tistory.