탭브라우징

ARIA

: 접근하기 쉬운 풍부한 인터넷 어플리케이션-장애인의 접근성을 향상시키기 위해 개발

1)role : 태그가 갖는 역할 및 기능(html에서 작성함)
2)property : 관계, 특징 (html에서 작성함)
3)state : 현재의 상태 (스크립트에서 작성함)
    주의점 property와 state 앞에는 반드시 aria- 가 추가됨
    

탭브라우징

1) role (html)

탭그룹 role = "tablist"
탭버튼 role = "tab"
탭내용 role = "tabpanel"

2) property(html)

탭그룹 aria-label="탭제목"
탭버튼 aria-controls="탭패널 id명" - 탭버튼이 제어하는 대상
탭내용 aria-labelledby="탭버튼 id명" - 간단한 설명 참조

3) state(script)

탭버튼 aria-selected="" - true(선택된 탭버튼) / false(선택되지 않은 탭버튼)
탭내용 aria-hidden="true/false" - true(숨겨진 탭패널) / false(보여지는 탭패널)
--> 눈에는 보여지지만 스크린리더에서는 읽혀지지않는다.
cf).blind_i,.blind_b는 눈에는 보여지지않지만 스크린리더에서는 읽어준다.

주의점
첫번째 li - .first클래스 추가
=> 첫번째 li에서 이전 방향키를 누른 경우 마지막으로 되돌리기
마지막 li - .last클래스 추가
=> 마지막 li에서 다음 방향키를 누른 경우 처음으로 되돌리기

a와 폼컨트롤 요소가 아닌 태그에 focus보내는 방법
tabindex="0"

a와 폼컨트롤 요소에게 focus가 가지 못하도록 하는 방법
tabindex="-1"

HTML

  <div id="infraTab">
        <ul role="tablist" class="tablist" aria-label="인프라점검"> <!-- 탭버튼 그룹 -->
            <li id="tab1" role="tab" class="tab first" aria-controls="tabpanel1">태양광 패널 점검</li>
            <li id="tab2" role="tab" class="tab" aria-controls="tabpanel2">해상 인프라 점검</li>
            <li id="tab3" role="tab" class="tab" aria-controls="tabpanel3">교량 점검</li>
            <li id="tab4" role="tab" class="tab last" aria-controls="tabpanel4">교통 모니터링</li>
        </ul>
        <div id="tabpanel1" role="tabpanel" class="tabpanel" aria-labelledby="tab1">
            <img src="images/infra1.jpg" alt="...">
        </div>
        <div id="tabpanel2" role="tabpanel" class="tabpanel" aria-labelledby="tab2">
            <img src="images/infra2.jpg" alt="...">
        </div>
        <div id="tabpanel3" role="tabpanel" class="tabpanel" aria-labelledby="tab3">
            <img src="images/infra3.jpg" alt="...">
        </div>
        <div id="tabpanel4" role="tabpanel" class="tabpanel" aria-labelledby="tab4">
            <img src="images/infra4.jpg" alt="...">
        </div>
    </div>

script

$(document).ready(function() {
	/* 1) 초기값 */
  $('.tab:first-of-type, .tabpanel:first-of-type').addClass('active').attr('tabIndex', 0);
  $('.tab:first-of-type').attr('aria-selected', true).siblings().attr('aria-selected', false);
  $('.tabpanel:first-of-type').attr('aria-hidden', false).siblings('.tabpanel').attr('aria-hidden', true);

  /* 2) 탭버튼에서 키보드를 누르는 이벤트(keydown) - 키보드 제어 */
  $('.tab').on('keydown', function (e) {
    var key = e.keyCode;
    console.log(key); //왼쪽방향키 37 , 오른쪽 방향키 39, 스페이스바 32 , 엔터 13
    switch (key) {
      case 37:    //왼쪽 방향키
        $(this).attr('tabIndex', -1);
        if ($(this).hasClass('first')) $(this).siblings('.last').attr('tabIndex', 0).focus();
        else $(this).prev().attr('tabIndex', 0).focus();
        break;
      case 39:  //오른쪽 방향키
        $(this) .attr('tabIndex', -1);
        if ($(this).hasClass('last')) $(this).siblings('.first').attr('tabIndex', 0).focus();
        else $(this).next().attr('tabIndex', 0).focus();
        break;
      case 36:  //HOME 키는 가장 처음으로
        e.preventDefault();
        $(this).siblings('.first').attr('tabIndex', 0).focus();
        break;
      case 35:  //END 키는 가장 마지막으로
        e.preventDefault();
        $(this).siblings('.last').attr('tabIndex', 0).focus();
        break;
      case 32:  //스페이스바
      case 13:  //엔터
        var $tg = $(this);
        activeOn($tg);
        break;
    }
  });

  //3) 탭 클릭 이벤트
  $('.tab').on('click', function () {
    var $tg = $(this);
    activeOn($tg);
  });

  function activeOn($target) {
    $target.addClass('active').attr({'aria-selected': true, tabIndex: 0}).siblings().removeClass('active').attr({'aria-selected': false, tabIndex: -1});
    $('#' + $target.attr('aria-controls')).addClass('active').attr({'aria-hidden': false, tabIndex: 0}).siblings('.tabpanel').removeClass('active').attr({'aria-hidden': true, tabIndex: -1});
  }
});