wai-aria 이용해서 탭 UI 만들기

왜... 조회수가 높지...
우연히 해당 글 조회수가 높은 것을 발견해서 새 블로그에 글을 옮길 겸 내용을 업데이트해서 업로드 합니다! 자세한 내용은 아래에서 확인해주세요😙
https://s-ryung.tistory.com/80

평소에 사용하던 탭 UI를 제작하고 수정하던 와중에 동료분이 wai-aria 한 번 이용해보면 어떨까 말씀을 남겨주셔서 찾아보게 됐다.
이번 기회에서는 기존에 작성된 dom에 수정을 해야하는 불가피한 상황에 놓여 결국 적용하지 못했지만 다음에 처음부터 탭 UI를 제작하는 경우가 생긴다면 '확실히 접근성 면에서 훨씬 좋겠다' 생각이 들어 기록 겸 확인한 내용을 정리해본다.

1. 기본 구조

기존에 제작한 단순 UI는 다음과 같다.
(중간에 들어간 div.depth1은 ul.depth1로 녹여서 활용해도 무방하다. 오히려 그게 더 나을 것이다.)

<div class="tab_wrap">
    <div class="depth1">
        <ul>
            <li><a href="#">한글</a></li>
            <li><a href="#">영어</a></li>
        </ul>
    </div>
    <ul class="depth2">
        <li><a href="#">가</a></li>
        <li><a href="#">나</a></li>
        <li><a href="#">다</a></li>
    </ul>
    <ul class="depth2">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
    </ul>
</div>

2. aria-role

탭 UI는 크게 탭버튼 영역과 탭패널로 구분되기 때문에 역할을 먼저 부여한다.
탭 목록(tablist), 탭(tab), 탭 패널(tabpanel)을 각각 적용한다.

<div class="tab_wrap">
    <div class="depth1">
        <ul role="tablist">
            <li role="tab"><a href="#">한글</a></li>
            <li role="tab"><a href="#">영어</a></li>
        </ul>
    </div>
    <ul class="depth2" role="tabpanel">
        <li><a href="#">가</a></li>
        <li><a href="#">나</a></li>
        <li><a href="#">다</a></li>
    </ul>
    <ul class="depth2" role="tabpanel">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
    </ul>
</div>

3. aria properties

이제 탭의 요소들끼리 서로 상호 반응을 할 수 있도록 연결해주는 작업이 필요하다.
tabpanel에 id를 부여하고 각각의 tab에서 연결하도록 aria-controls 속성을 사용한다.
그리고 각 탭에도 id를 부여하고 각각의 tabpanel과 연결하도록 aria-labelledby 속성을 사용한다.

<div class="tab_wrap">
    <div class="depth1">
        <ul role="tablist">
            <li id="kor_tab" role="tab" aria-controls="tabpanel1"><a href="#">한글</a></li>
            <li id="eng_tab" role="tab" aria-controls="tabpanel2"><a href="#">영어</a></li>
        </ul>
    </div>
    <ul id="tabpanel1" class="depth2" role="tabpanel" aria-labelledby="kor_tab">
        <li><a href="#">가</a></li>
        <li><a href="#">나</a></li>
        <li><a href="#">다</a></li>
    </ul>
    <ul id="tabpanel2" class="depth2" role="tabpanel" aria-labelledby="eng_tab">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
    </ul>
</div>

4. jQuery

이제 제이쿼리를 이용해서 동작을 추가한다. 추가하는 동작은 다음과 같다.
1. 활성화됨을 눈으로 보여주는 on 클래스 add/remove
2. tabindex
3. aria-selected

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        /* 초기화 : 첫번째 탭이 기본적으로 활성화 되어있도록 */
        $(".depth1 li:first-of-type, .depth2:first-of-type").addClass("on").attr("tabindex","0").attr("aria-expanded","true");
        $(".depth1 li:first-of-type").attr("aria-selected","true");

        /* 탭 클릭 시 전환 */
        $('.depth1 li').click(function(e){
            e.preventDefault();
            $(this).addClass("on").attr("aria-selected", "true").siblings().removeClass("on").attr("aria-selected","false");
            $("#" + $(this).attr("aria-controls")).attr("tabindex","0").addClass("on").siblings(".depth2").attr("tabindex","-1").removeClass("on");
        })
    })
</script>

5. 완성

6. 비고

jquery가 익숙해서 사용하기는 했으나 js로 구현해보도록 노력하기를 숙제로.
현재 업무에서는 ui확인용 스크립트만을 짜고 있는데 이를 적용할 경우 FE에는 어떤식으로 전달해야 할지 고민이 필요한 것 같다.

참고 문서
mulder21c - 접근 가능한 탭 UI 만들기
AOA - 항공사 ARIA 탭 UI 적용 사례
Minllagher - ARIA의 속성,상태,역할 및 사용 예시/주의사항