[HTML] aria-*

aria-*

• 웹 접근성을 위한 태그 (요소에 대한 특징이나 상황을 나타낸다.)

<ul role="tablist">
  <li role="tab" aria-selected="true" aria-controls="탭_메뉴1" 
    tabindex="0" id="a1">탭 메뉴1
  </li>
  <li role="tab" aria-selected="false" aria-controls="탭_메뉴2" 
    tabindex="-1" id="b1">탭 메뉴2
  </li>
</ul>

• 위 코드를 스크린리더로 들어보면 아래와 같다.

| 탭 컨트롤
| 탭_메뉴1 탭 선택됨 1/2