Web [Study: ARIA(Accessible Rich Internet Applications)란?]

웹 접근성을 높이는 ARIA란 무엇인가?

웹사이트를 만들 때, 우리는 다양한 사용자들이 쉽게 접근할 수 있도록 고려해야 합니다. 특히 시각 장애인이나 기타 장애를 가진 사용자들이 보조 기술(스크린 리더 등)을 통해 원활하게 웹을 사용할 수 있도록 돕는 것이 중요합니다. 이를 위해 등장한 것이 ARIA(Accessible Rich Internet Applications) 입니다.

ARIA란?

ARIA는 W3C(Web Accessibility Initiative)에서 만든 기술 명세로, 웹 애플리케이션과 동적 콘텐츠의 접근성을 개선하는 것을 목표로 합니다. HTML, CSS, JavaScript로 만든 웹 애플리케이션의 요소들이 보조 기술에서도 올바르게 인식될 수 있도록 돕는 역할을 합니다.

ARIA의 주요 개념

ARIA는 세 가지 핵심 요소로 구성됩니다.

1. 역할(Roles): 특정 요소의 역할을 명확히 정의합니다.
2. 속성(Properties): 요소의 추가적인 정보를 제공하여 보조 기술이 이를 인식할 수 있도록 합니다.
3. 상태(States): 요소의 현재 상태(활성화됨, 선택됨 등)를 나타냅니다.

ARIA Roles (역할)

ARIA의 역할은 보조 기술이 특정 요소를 인식하는 데 도움을 줍니다. 예를 들어, <div> 요소는 기본적으로 의미가 없지만, role="button"을 부여하면 보조 기술이 이를 버튼으로 인식하게 됩니다.

ARIA Role	설명
role="button"	해당 요소를 버튼으로 인식
role="navigation"	네비게이션 역할을 하는 영역
role="alert"	사용자에게 중요한 메시지를 전달하는 역할
role="dialog"	모달 대화 상자를 의미

예제 코드

<button>클릭하세요</button>

<!-- 버튼이 아닌 요소를 버튼처럼 만들기 -->
<div role="button" tabindex="0">클릭하세요</div>

ARIA를 사용할 때 주의할 점

ARIA를 사용할 때 몇 가지 중요한 원칙을 기억해야 합니다.

1. 네이티브 HTML을 우선 사용하세요
   ARIA를 사용하기 전에 HTML의 기본 요소(<button>, <input> 등)를 먼저 고려하세요. 기본 요소는 이미 접근성을 보장하는 경우가 많습니다.

2. 키보드 접근성을 고려하세요
   role="button"을 사용하면 키보드 이벤트(예: Enter, Space)도 처리해야 합니다.

3. 의미를 제거하지 마세요
   aria-hidden="true"를 부적절하게 사용하면 중요한 정보가 보조 기술에서 사라질 수 있습니다.

4. 상태(State)를 동적으로 업데이트하세요
   예를 들어, aria-expanded="true"를 사용하여 메뉴의 확장 상태를 표시하면 스크린 리더가 이를 인식할 수 있습니다.

결론

ARIA는 웹 접근성을 높이는 강력한 도구이지만, 잘못 사용하면 오히려 접근성을 저하시킬 수도 있습니다. 따라서 ARIA를 적용할 때는 HTML의 기본 기능을 우선 활용하고, 필요한 경우에만 ARIA 속성을 추가하는 것이 중요합니다.

Ref: MDN ARIA