1. 역할(role) : HTML 요소의 역할을 정의하는 속성: role

<ul role="tabList">
  <li role="tab">Tab1</li>
  <li role="tab">Tab2</li>
  <li role="tab">Tab3</li>
</ul>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

2. 상태(state) : 요소의 현재 상태를 나타내는 속성: aria-selected

<ul role="tabList">
  <li role="tab" aria-selected="true">Tab1</li>
  <li role="tab" aria-selected="false">Tab2</li>
  <li role="tab" aria-selected="false">Tab3</li>
</ul>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

3. 속성(property) : 요소의 특징을 정의하는 속성(attribute): aria-label

1) aria-label

<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

2) aria-live

• 속성 값으로는 polite, assertive, off(default)가 있습니다.

polite : 스크린 리더가 현재 읽고 있는 내용을 모두 읽고 나서 변경된 내용을 사용자에게 전달합니다.
assertive : 스크린 리더가 현재 읽고 있는 내용을 중단하고 변경된 내용을 바로 사용자에게 전달합니다.