웹접근성 카테고리 최종

by hohoya33

HTML

<div tabindex="0">


<button class="ctg_open_btn" aria-expanded="false">통합 카테고리 보기</button>


<div class="ctg_total_layer" aria-hidden="true" style="display:none">
  <ul class="ctg_mall_lst" role="navigation" aria-label="SSG 통합카테고리">
    <li class="ctg_top_mn">
      <a href="http://www.ssg.com" aria-label="SSG.COM 바로가기" class="ctg_top_lnk">SSG.COM</a>
      <button aria-expanded="false" class="ctg_a11y_btn"><span class="blind">SSG.COM 하위 메뉴 3개의 항목</span></button>


      <div class=" ctg_sub_area" aria-hidden="true">
        <ul class="ctg_sub_lst" role="menu">
           <li class="ctg_sub_mn">
            <a role="menuitem" aria-label="패션 바로가기" href="#" class="ctg_sub_lnk">패션</a>
            <button aria-expanded="false" class="ctg_a11y_btn"><span class="blind">패션 하위 메뉴</span></button>
           </li>
           <li class="ctg_sub_mn">
            <a role="menuitem" aria-label="잡화 바로가기" href="#" class="ctg_sub_lnk">잡화</a>
            <button aria-expanded="false" class="ctg_a11y_btn"><span class="blind">잡화 하위 메뉴</span></button>
           </li>
           <li class="ctg_sub_mn">
            <a role="menuitem" href="#" aria-label="뷰티 바로가기" class="ctg_sub_lnk">뷰티</a>
           </li>
        </ul>
      </div>


    </li>
    <li class="ctg_top_mn">
      <a href="http://shinsegaemall.ssg.com/" aria-label="신세계몰 바로가기" class="ctg_top_lnk">신세계몰</a>
      <button aria-expanded="false" class="ctg_a11y_btn"><span class="blind">신세계몰 하위 메뉴 3개의 항목</span></button>

          <div class="ctg_sub_area" aria-hidden="true">
        <ul class="ctg_sub_lst" role="menu">
           <li class="ctg_sub_mn">
            <a role="menuitem" aria-label="여성패션 바로가기" href="#" class="ctg_sub_lnk">여성패션</a>
            <button aria-expanded="false" class="ctg_a11y_btn"><span class="blind">여성패션 하위 메뉴</span></button>
           </li>
           <li class="ctg_sub_mn">
            <a role="menuitem" aria-label="남성/캐주얼 바로가기" href="#" class="ctg_sub_lnk">남성/캐주얼</a>
            <button...

CSS

:focus{outline:4px solid #FF0000}
body{color:#fff;background:#282c34}
.blind{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;line-height:0;white-space:normal;word-wrap:break-word;word-break:break-all;clip:rect(0,0,0,0)}
.blind:before{display:block;width:0;height:0;font-size:0;content:'\00a0'}
ul li{list-style:none}


.ctg_open_btn{
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  text-transform: uppercase;
  vertical-align: middle;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  background-color: #26a69a;
  text-align: center;
  letter-spacing: .5px;
  cursor: pointer
}
.ctg_open_btn.on{background-color:#E57373}


.ctg_mall_lst{position:relative}

.ctg_top_mn{width:170px;height:46px;border-top: 1px dotted #d8d8d8;background:#fff}
.ctg_top_mn a{overflow:hidden;text-overflow:ellipsis;word-break:break-all;white-space:nowrap;text-decoration:none}
.ctg_top_lnk{display:block;height:20px;line-height:20px;padding:12px 20px;color:#777;letter-spacing:-.3px}
.ctg_top_lnk:focus{color:#222}


.ctg_a11y_btn{display:none;position:relative;z-index:10;float:right;width:20px;height:25px;overflow:hidden;margin-top:-25px;background:transparent}
.ctg_a11y_btn:after{content:'';display:inline-block;width:4px;height:4px;border-top:1px solid #888;border-right:1px solid #888;transform:rotate(45deg)}
.ctg_top_mn>.ctg_a11y_btn{height:45px;margin-top:-45px}



.ctg_sub_area{display:none;position:absolute;top:0;bottom:0;left:210px;border:1px solid #d1d1d1;background:#fff}
.ctg_sub_lst{width:140px;padding:0}
.ctg_sub_lnk{display:block;margin-left:10px;padding:1px 10px 0 10px;line-height:23px;border:1px solid...

JavaScript

$('.ctg_open_btn').on('click', function(e){
    var welTarget = $(e.currentTarget);
    
    if (welTarget.hasClass('on')) {
        welTarget.removeClass('on').attr('aria-expanded', 'false');
        $('.ctg_total_layer').hide().attr('aria-hidden', 'true');
    } else {
        welTarget.addClass('on').attr('aria-expanded', 'true');
        $('.ctg_total_layer').show().attr('aria-hidden', 'false');
    }
});


$('.ctg_total_layer').on('keydown.a11y', function(e){

  if (e.keyCode === 27) { // ESC
    var aActiveMenu = $('.ctg_mall_lst').find('li.on');
    var nActive = aActiveMenu.length;
    
    if (nActive) {
      var welCurrentMenu = $(aActiveMenu.get(nActive - 1));
      welCurrentMenu.removeClass('on');
      welCurrentMenu.find('.ctg_a11y_btn').removeClass('on').attr('aria-expanded', 'false');
      welCurrentMenu.find('>a').focus();
    } else {
      $('.ctg_total_layer').hide().attr('aria-hidden', 'true');
      $('.ctg_open_btn').removeClass('on').attr('aria-expanded', 'false').focus();
    }
  }
});



$('.ctg_mall_lst').on('click', '.ctg_a11y_btn', function(e){
  var welTarget = $(e.currentTarget);
  var welParentList = welTarget.parent();

  if (welTarget.hasClass('on')) {
    welTarget.removeClass('on').attr('aria-expanded', 'false');
    welParentList.removeClass('on');
    welParentList.find('>.ctg_sub_area').attr('aria-hidden', 'true');
  } else {
    welParentList.siblings().find('.ctg_a11y_btn').removeClass('on').attr('aria-expanded', 'false').hide();
    welTarget.addClass('on').attr('aria-expanded', 'true');
    welParentList.addClass('on').siblings().removeClass('on');
    welParentList.find('>.ctg_sub_area').attr('aria-hidden', 'false');
  }
  
}).on('focusin', '.ctg_top_mn, .ctg_sub_mn', function(e){
  var welTarget = $(e.currentTarget);
  welTarget.find('>.ctg_a11y_btn').show();
  welTarget.siblings(':not(.on)').find('>.ctg_a11y_btn').hide();
  welTarget.siblings().find('li:not(.on) .ctg_a11y_btn').hide();
  
}).on('mouseenter',...