2014.04.28

web-web accessibility

드롭다운 네비게이션 키보드로 접근하기

웹접근성 연구소의 가이드라인 지침7번 내용이다.

웹접근성 준수를 위해 웹사이트의 모든 클릭가능한 곳에 키보드만으로 접근이 가능해야 한다.

Tab 으로 접근이 가능한 태그는 tabindex를요소로 가지고 있는 태그인 a, area, button, input, object, select, textarea 가 있다.

Tab 의 순서를 tabindex로 강제해줄 수도 있지만, 굳이 그럴 것 없이 DOM을 논리적으로 잘 짜주기만하면 크게 문제가 될 일은 없다.다만, Drop Down Navigation 을 이용할 경우에는 부득이하게 자바스크립트의 도움을 받아야 하는데, 단순하게 jQuery로 :focus 속성으로 메뉴를 열고 닫아버리면 IE에서 동작이 쉽지가 않다.

구글링을 통해서 찾아낸 간단한 라이브러리를 상황에 맞게 수정해 보았다.

---

원본 라이브러리

Accessible Dropdown Navigation (Handling Focus with jQuery)

---

키보드로 접근시의 Dropdown 형태 수정

Tab 을 눌러 드롭된 각메뉴들에 접근하는 것은 간단하다. 단순하게 버튼에 :focus가 왔을 때에 그 아래에 있는 메뉴들을 열어주기만 하면된다. 그러나 Shift + Tab을 눌러 반대로 움직일 경우에는 얘기가 달라진다. 간단한 메뉴접근을 위해 복잡한 코드를 짜넣는 것이 아무래도 비효율적으로 느껴졌고, 키보드만으로 메뉴에 접근하는 것은 꽤 특수한 경우이기 때문에, 그냥 네비게이션의 한 메뉴에:focus가 오면 해당 메뉴를 포함하는 네비게이션의 모든 Dropdown 메뉴들을 열어 Tab과 Shift + Tab 으로 자유롭게 이동할 수 있도록 구성하였다.

---

Navigation을 빠져나온 뒤

하나의 Navigation을 빠져나온 뒤, 다시 Shft + tab 을 이용하여 방금 빠져나온 Navigation 으로 돌아가게 되면 :focus 가 Navigation 의 상단 메뉴에 머문다.

얼핏 생각했을 때에는 빠져나오기 직전에 :focus가 Gift Certificate 라는 메뉴에 있었기 때문에 빠져나왔다 돌아갈 경우에도 :focus가 Gift Certificate를 가르켜야할 것 같았다.

그러나 Dropdown Navigation 의 원래 동작방식을 생각해 보면 Special Offer 메뉴에 마우스를 올려 Dropdown 되는다음 메뉴들로 접근하는 편이 자연스럽다.

---

HTML

<ul class="nav nav--info">
    <li class="nav__li">
        <a href="#">Menu 1</a>
        <ul class="nav__ul">
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
        </ul>
    </li><!--
    --><li class="nav__li">
        <a href="#">Menu 2</a>
        <ul class="nav__ul">
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
        </ul>
    </li>
</ul>

CSS

.nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav a {
    white-space: nowrap;
}
.nav__li {
    display: inline-block;
    * display: inline-block;
    zoom: 1;
    position: relative;
}
.nav__ul {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
}
.nav__li a {
    display: block;
}
.nav__li:hover > .nav__ul,
.nav__li:focus > .nav__ul,
.dropdown-visible .nav__ul {
    display: block;
}

Javascript

jQuery(document).ready(function(){
    // 함수실행
    dropdown_keyboard_access('.nav');
});

function dropdown_keyboard_access(nav) {
    $(nav + ' a').each(function () {
        $(this).focus(function () {
            var menuParent = $(this).parents(nav);
            $(menuParent).addClass('dropdown-visible');
        });
        $(this).blur(function () {
            var menuParent = $(this).parents(nav);
            $(menuParent).removeClass('dropdown-visible');
        });
    });
}