웹접근성 카테고리 레이어 aria hidden

by hohoya33

HTML

<div tabindex="0" style="display:inline-block;width:60%">

<div style="float:left">
  <h3>aria-hidden="false"</h3>
  <div class="ctg_total_layer" aria-hidden="false">

    <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 하위 메뉴</span></button>
      </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">신세계몰 하위 메뉴</span></button>
      </li>
      <li class="ctg_top_mn">
        <a href="http://department.ssg.com/" aria-label="신세계백화점 바로가기" class="ctg_top_lnk">신세계백화점</a>
        <button aria-expanded="false" class="ctg_a11y_btn"><span class="blind">신세계백화점 하위 메뉴 </span></button>
      </li>
      <li class="ctg_top_mn">
        <a href="http://emart.ssg.com/" aria-label="이마트몰 바로가기" class="ctg_top_lnk">이마트몰</a>
        <button aria-expanded="false" class="ctg_a11y_btn"><span class="blind">이마트몰 하위 메뉴</span></button>
      </li>
    </ul>

  </div>

</div>


<div style="float:right">

  <h3>aria-hidden="true"</h3>
  <div class="ctg_total_layer" aria-hidden="true">

    <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 하위 메뉴</span></button>
      </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">신세계몰 하위 메뉴</span></button>
      </li>
      <li class="ctg_top_mn">
        <a...

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}
h3{margin-bottom:0;padding-left:40px;text-align:left;color:#13daec;}

.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}