aria-* 속성

스크린 리더(Screen Reader) 등 보조 기술에게 정보를 제공함.

 

aria-label: 요소가 어떤 동작을 수행하는지 설명하고 싶을 때 사용

aria-labelledby: 다른 요소가 목표 요소의 라벨 역할을 할 때 라벨 요소의 ID를 명시

aria-describedby: 다른 요소가 목표 요소의 부가 설명을 할 때 설명 요소의 ID를 명시

<button aria-label="메뉴 열기">Open Menu</button>

<h2 id="button-label">메뉴 열기</h2>
<button aria-labelledby="button-label">Open Menu</button>

<p id="button-description">이 버튼은 메뉴를 엽니다.</p>
<button aria-describedby="button-description">Open Menu</button>

 

ir의 반대 aria-hidden="true"