탭 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

https://aoa.gitbook.io/skymimo/aoa-2018/2018-aria/tab