웹 접근성 tabindex 속성 :: 마이구미

이번 글은 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="양수" 를 보자.

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

<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를 통해 키보드 접근성을 효율적으로 만들어 줄 수 있다.

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

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