탭 UL 접근성
탭 경우 "tab-linker"(탭영역) , "tab-contents" (탭패널) 부분으로 나뉘어 지고,
접근성 작업을 하면서 수정 부분들이 전달 왔습니다.
아래와 같이 코드를 작업했는데 뭐가 잘 못 된건지 모르겠어서
자료를 찾아보니 컨텐츠에는 selected 가 아니라 expanded 를 적용해야 한다고 합니다.
이유는 role="tabpanel"에는 제공하지 않고 role="tab" 등 초점을 받을 수 있는 요소에 제공하는 것이 원칙이라서
이 와 같은 실수를 하지 않기위해 기록하겠습니다.
<div class="tab-area">
<div class="tab-linker"> 탭 버튼 </div>
<div class="tab-contents">
<ul>
<li role="tabpanel" id="tab1-tab2" aria-labelledby="tab1" aria-selected="true" tabindex="0">
<ul class="comp-payment-list">
<li class="comp-list">
<a href="">컨텐츠 리스트-1</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="tab-area">
<div class="tab-linker">
<ul role="tablist" lass="tab-accessibility">
<li role="presentation">
<a href="javascript:;" role="tab" aria-selected="true" aria-controls="tab1-tab" tabindex="0" id="tab1"> TAB-1</a>
</li>
<li role="presentation">
<a href="javascript:;" role="tab" aria-selected="false" aria-controls="tab2-tab" tabindex="-1" id="tab2"> TAB-2</a>
</li>
</ul>
</div>
<div class="tab-contents">
<ul>
<li role="tabpanel" id="tab1-tab2" aria-labelledby="tab1" aria-expanded="true" tabindex="0">
<ul class="comp-payment-list">
<li class="comp-list">
<a href="">컨텐츠 리스트-1</a>
</li>
<li class="comp-list">
<a href="">컨텐츠 리스트-2</a>
</li>
</ul>
</li>
<li role="tabpanel" id="tab1-tab2" aria-labelledby="tab2" aria-expanded="true">
컨텐츠-2
</li>
</ul>
</div>
</div>
자세한 내용 참고
w3c 공식문서: https://www.w3.org/TR/wai-aria-1.1/#tab