[HTML] 웹 접근성 향상을 위한 WAI-ARIA 사용법

Role

• HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성

<div role="button">div이지만 button으로 사용되는 요소</div>

State

• 현재 요소의 상태를 표현할 때 사용할 수 있는 속성

<div 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>
</div>

Property

• 요소의 기능을 표현할 때 사용할 수 있는 속성

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

더 많은 속성은 MDN 링크로