WAI-ARIA : tab

tab이란?

 

: 한 주제에 대해 여러개의 섹션을 가지고 있는 메뉴

---

• tab list

: tab, tab panel을 하나의 그룹으로 묶어 tab list라고 부름

: role = "tablist" 해당되는 영역이 tab메뉴라는 것을 알려줌

 

• tab

: tab list의 하위 영역으로 각각의 tab을 말함

: role = "tab"

: aria-selected = "true"/"false" 현재 선택된 tab을 스크린리더 사용자에게 알려줌

: aria-controls = "해당되는 panel의 id값" 현재 tab과 해당된는 panel의 id값을 적용하여 서로 연결해줌

 

• tab panel

: 각각의 tab의 하위 콘텐츠 영역을 말함

: role = "tabpanel"

: aria-labelledby = "해당되는 tab의 id값" 현재 panel과 해당되는 tab의 id값을 적용하여 서로 연결해줌

: aria-hidden = "true"/"false" tab의 활성화 유무에 따라 현재 panel의 숨겨짐 여부를 결정해 스크린리더기의 탐색 가능 여부를 결정

---

tab panel과 tab list를 연결하는 방법

 

1. tab list의 aria-controls 속성과 tab panel의 id를 연결
2. tab list의 id와 tab panel의 aria-labelledby를 연결

 

<div class="tab">
	<div class="tab__list" role="tablist">
  		<button class="tab__item" role="tab" aria-controls="panel-01" aria-selected="true" id="tab-01">tab01</button>
		<button class="tab__item" role="tab" aria-controls="panel-02" aria-selected="false" id="tab-02">tab02</button>
 		<button class="tab__item" role="tab" aria-controls="panel-03" aria-selected="false" id="tab-03">tab03</button>
  	</div>
	<div class="tab__panel" role="tabpanel" id="panel-01" aria-labelledby="tab-01" aria-hidden="false">panel01</div>
  	<div class="tab__panel" role="tabpanel" id="panel-02" aria-labelledby="tab-02" aria-hidden="true">panel02</div>
  	<div class="tab__panel" role="tabpanel" id="panel-03" aria-labelledby="tab-03" aria-hidden="true">panel03</div>
</div>

 

---

참고

https://nuli.navercorp.com/community/article/1132879

https://redbinalgorithm.tistory.com/685

https://velog.io/@yijaee/aria%EB%A1%9C-tab-%EB%A9%94%EB%89%B4-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0