D-51
🔍 WAI-ARIA
WAI-ARIA는 웹 접근성 기술 규격이다. 단어의 의미를 살펴보면
- WAI(Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
- ARIA(Accessible Rich Internet Applications) : 장애를 가진 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록하는 기술
위 설명을 요약하면 웹 접근성을 향상할 수 있는 방법 중 하나가 WAI-ARIA 다.
📌 WAI-ARIA의 필요성
HTML 요소에 의미를 부여한 시멘틱 요소를 사용하는 것만으로도 웹 접근성을 향상할 수 있으며, HTML 요소에 추가적으로 의미를 부여할 수 있게 한다.
참고 : Semantic HTML
🔍 WAI-ARIA 사용법
WAI-ARIA는 HTML 태그 내부에 속성을 추가해 의미를 부여할 수 있다. 속성은 3가지로 나뉜다.
- role(역할) : HTML 요소의 역할을 정의하는 속성
- state(상태) : 요소의 현재 상태를 나타내는 속성
- property(속성) : 요소의 특징을 정의하는 속성
📌 role(역할)
HTML의 요소 종류와 역할이 맞지 않을 경우 어떤 요소인지 명시해 줄 때 사용 가능한 속성이다.
// 버튼 역할을 하는 요소
<div role="button">div이지만 button으로 사용되는 요소</div>
// ! 잘못된 예시 !
<button role="button">button인 요소</button>
<h1 role="button">h1인 요소</h1>📌 state(상태)
Tab 컴포넌트를 생각해보면 현재 어떤 탭이 선택되어 있는지 알아야한다. 이럴 때 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>이 외에도 아코디언 UI가 펼쳐진 상태인지 표시해 주는 aria-expanded, 요소가 숨김 상태인지를 표시하는 aria-hidden 등의 속성이 있습니다.
📌 property(속성)
💡 aria-label
aria-label 속성은 말 그대로 요소에 라벨을 붙여주는 기능이다. 해당 요소를 사용해 다음과 같이 의미 부여가 가능하다.
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>💡 aria-live
aria-live 속성은 해당 요소가 실시간으로 변경하는 영역인지 표시한다.
속성 값은 polite, assertive, off(default)가 있다.
- polite : 스크린 리더가 현재 읽고 있는 내용을 모두 읽고 변경된 내용을 사용자에게 전달한다.
- assertive : 스크린 리더가 현재 읽고 있는 내용을 중단하고 변경된 내용을 바로 사용자에게 전달한다.
