[HTML] role : tablist, tab, tabpanel

탭을 구현할 때, aria 속성을 이용하여 웹 접근성에 맞게 나타낼 수 있다.

role="tablist" & role="tab"

<!-- O: 앵커 형식 탭 -->
<div>
    <div role="tablist">
        <a id="first" href="#" role="tab" aria-selected="true">첫 번째 탭</a>
        <a id="second" href="#" role="tab" aria-selected="false">두 번째 탭</a>
    </div>
    <div role="tabpanel" aria-labelledby="first">
		첫 번째 컨텐츠
    </div>
    <div role="tabpanel" aria-labelledby="second" hidden>
        두 번째 컨텐츠
    </div>
</div>

<!-- O: 버튼 형식 탭 -->
<div>
    <div role="tablist">
        <button type="button" id="first" role="tab" aria-selected="true">첫 번째 탭</button>
        <button type="button" id="second" role="tab" aria-selected="false">두 번째 탭</button>
    </div>
    <div role="tabpanel" aria-labelledby="first">
        첫 번째 컨텐츠
    </div>
    <div role="tabpanel" aria-labelledby="second" hidden>
		두 번째 컨텐츠
    </div>
</div>

• role 속성은 값에 따라 적용할 수 있는 HTML 요소가 제한되어 있다. 예를 들면 role="tabpanel" 속성은 ul 요소에 사용할 수 없으므로 적용 시 HTML5 요소 명세를 확인해야 한다.
• 서로 연결되는 tab과 content 의 id와 aria-labelledby의 값이 동일해야 한다.

REFERENCE

https://github.com/lezhin/accessibility/blob/master/aria/README.md#tab