WAI-ARIA는 "Web Accessibility Initiative - Accessible Rich Internet Applications"의 약자로, 웹 콘텐츠의 접근성을 향상시키기 위한 기술 및 지침을 제공합니다. WAI-ARIA는 특히 동적인 콘텐츠와 사용자 인터페이스 구성 요소를 사용하는 웹 애플리케이션에서 접근성을 개선하는 데 중점을 두고 있습니다.
WAI-ARIA를 사용하는 이유
WAI-ARIA를 이용해서 개발자가 의도한 유저 인터페이스(User Interface) 행동이나 구조적인 정보를 스크린 리더와 같은 보조 기술에 전달하여 시각/인지 장애인들에게 일반 사용자들과 동일하게 정보를 제공하고 행동을 유도함으로써 웹페이지 탐색을 돕는 사용자 경험(UX)을 제공합니다.
WAI-ARIA 사용법
WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써
의미를 부여해줄 수 있으며, 속성에는 크게 세 가지 분류가 있습니다.
역할(role) : HTML 요소의 역할을 정의하는 속성
상태(state) : 요소의 현재 상태를 나타내는 속성
속성(property) : 요소의 특징을 정의하는 속성
역할 (Role)
역할은 HTML 요소가 수행하는 기능을 정의합니다. 역할 속성은 role 속성으로 추가되며, 주로 요소의 의미를 명확하게 하기 위해 사용됩니다.
<div role="alert">
<p>Your changes have been saved successfully!</p>
</div>상태 (State)
상태는 HTML 요소의 현재 상태를 나타내며, 일반적으로 사용자 인터페이스의 동적 변경을 표현하는 데 사용됩니다. 예를 들어, 버튼이 활성화되거나 비활성화된 상태를 나타낼 수 있습니다.
<button aria-pressed="true">Toggle</button>위의 예시에서 aria-pressed="true"는 버튼이 현재 활성화(누름 상태)되어 있음을 나타냅니다.
속성 (Property)
속성은 HTML 요소의 특정 특징을 정의합니다. WAI-ARIA 속성은 특정 정보를 제공하여 사용자가 웹 콘텐츠를 보다 쉽게 이해할 수 있도록 도와줍니다.
<input type="text" aria-label="이름" />위의 예시에서 aria-label="이름"은 스크린 리더에게 해당 입력 필드의 용도를 설명합니다.
WAI-ARIA 사용 시 주의사항
WAI-ARIA 속성은 기본 HTML 요소의 의미를 대체하는 것이 아니라 보완하는 것이므로, 가능하면 기본 HTML의 의미를 최대한 활용해야 합니다.
역할, 상태 및 속성을 과도하게 사용하면 혼란을 초래할 수 있으므로, 필요한 경우에만 사용해야 합니다.
