웹접근성 aria-haspopu, aria-expanded

by hohoya33

HTML

<div tabindex="0">
<h3>Button: aria-expanded, aria-haspopup</h3>
<p>VoiceOver: 통합 카테고리 보기 팝업버튼</p>
<button aria-expanded="false" aria-haspopup="true">통합 카테고리 보기</button>

<br>
<br>
<hr>


<h3>Button: aria-expanded</h3>
<p>VoiceOver: 통합 카테고리 보기 확장됨/축소됨, 버튼</p>
<button aria-expanded="false">통합 카테고리 보기</button>

<br>
<br>
<hr>


<h3>A: aria-expanded, aria-haspopup</h3>
<p>VoiceOver: 확장됨/축소됨, 방문함, 메뉴 팝업 링크, 통합카테고리 보기</p>
<a href="#" aria-haspopup="true" aria-expanded="false">통합 카테고리 보기</a>

<br>
<br>
<hr>
<h3>A: role=button, aria-expanded, aria-haspopup</h3>
<p>VoiceOver: 통합 카테고리 보기 팝업버튼</p>
<a href="#" role="button" aria-haspopup="true" aria-expanded="false">통합 카테고리 보기</a>


</div>

CSS

:focus{outline:4px solid #FF0000}
body{color:#fff;text-align:center;background:#282c34}
p{margin-top:0;padding-left:20px;text-align:left;}
h3{margin-bottom:0;padding-left:20px;text-align:left;color:#13daec;}
button, a{
  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
}
button.on, a.on{background-color:#E57373}

JavaScript

$('button, a').on('click', function(e){
    var welTarget = $(e.currentTarget);

    if (welTarget.hasClass('on')) {
        welTarget.removeClass('on').attr('aria-expanded', 'false');
    } else {
        welTarget.addClass('on').attr('aria-expanded', 'true');
    }
});