프론트엔드 노트

웹 접근성을 위한 ARIA 사용법

현대 웹 개발에서 웹 접근성은 매우 중요한 요소 중 하나입니다. 다양한 사용자들이 웹사이트를 이용할 수 있도록 보장하는 것은 개발자의 의무입니다. ARIA(Accessible Rich Internet Applications)는 이러한 웹 접근성을 향상시키기 위한 표준입니다. 이 글에서는 ARIA의 기본 개념과 함께 실용적인 사용법을 살펴보겠습니다.

ARIA란 무엇인가?

ARIA는 특히 동적인 웹 애플리케이션이나 복잡한 UI 구성 요소에 대한 접근성을 개선하기 위해 설계된 속성 집합입니다. 기본적으로, ARIA는 스크린 리더와 같은 보조 기술이 사용자에게 웹 콘텐츠를 보다 잘 이해할 수 있도록 돕는 역할을 합니다.

ARIA 속성의 종류

ARIA 속성은 크게 네 가지로 분류할 수 있습니다:

ARIA 역할(Role): UI 요소의 기능을 정의합니다. 예를 들어, 버튼, 대화상자, 탭 등의 요소에 대해 명시적으로 역할을 지정할 수 있습니다.
ARIA 상태(State): UI 요소의 현재 상태를 설명합니다. 예를 들어, aria-expanded는 요소가 확장되었는지 여부를 나타냅니다.
ARIA 속성(Property): UI 요소의 특정 특성을 설명합니다. aria-label, aria-labelledby, 등과 같은 속성을 통해 요소의 레이블을 정의할 수 있습니다.
ARIA 참조(Reference): DOM 내 다른 요소를 참조하는 속성입니다. 예를 들어, aria-owns는 특정 요소가 소속하는 요소를 나타냅니다.

ARIA 사용 예제

버튼에 ARIA 역할 추가하기

일반적인 버튼의 경우, 브라우저는 자동으로 역할을 인식하지만, 커스텀 버튼이나 클릭 가능한 요소에 대해 명확한 역할을 지정해야 할 필요가 있습니다. 다음은 ARIA 역할을 사용한 예제입니다.

<div role="button" tabindex="0" aria-pressed="false">
    클릭하세요
</div>

위 예제에서 role="button"은 해당 요소가 버튼 역할을 한다고 명시합니다. tabindex="0"은 이 요소가 포커스를 받을 수 있도록 하며, aria-pressed는 버튼의 상태를 나타냅니다.

메뉴에 ARIA 속성 사용하기

메뉴 바와 같은 복잡한 UI 요소에서는 상태 속성을 사용하는 것이 유용합니다. 다음은 드롭다운 메뉴의 예입니다.

<nav>
    <ul aria-label="메뉴">
        <li>
            <button aria-haspopup="true" aria-expanded="false">메뉴 1</button>
            <ul class="submenu" aria-hidden="true">
                <li>서브 메뉴 1</li>
                <li>서브 메뉴 2</li>
            </ul>
        </li>
    </ul>
</nav>

이 코드에서 aria-haspopup="true"는 메뉴가 서브 메뉴를 가지고 있음을 나타내고, aria-expanded는 메뉴의 확장 여부를 설명합니다. 서브 메뉴는 기본적으로 aria-hidden="true"로 숨겨져 있습니다.

ARIA 속성의 올바른 사용법

실제 역할을 반영하라: ARIA 역할은 실제 HTML 요소의 역할을 반영해야 합니다. 예를 들어, <button> 요소에는 별도로 role="button"을 추가할 필요가 없습니다.
상태 속성 유지: UI 상태가 변경될 때는 관련된 ARIA 상태 속성도 업데이트해야 합니다. 예를 들어, 드롭다운 메뉴가 열리면 aria-expanded를 true로 변경합니다.
시맨틱 HTML 우선: 가능하면 시맨틱 HTML을 우선 사용하고, ARIA는 보조 수단으로 활용합니다. 예를 들어, <header>, <nav>와 같은 태그를 사용하는 것이 좋습니다.

ARIA의 한계

ARIA는 웹 접근성을 개선하는 데 유용하지만, 몇 가지 한계가 있습니다. ARIA 속성을 지원하지 않는 구형 브라우저나 보조기기에서는 ARIA가 무시될 수 있습니다. 따라서 기본적으로 시맨틱 HTML을 사용하는 것이 가장 좋습니다.

마무리

웹 접근성을 높이기 위한 ARIA의 사용은 보조 기술을 사용하는 사용자에게 큰 도움이 됩니다. 하지만 ARIA의 올바른 사용법을 숙지하는 것이 중요하며, 실제 웹 애플리케이션에서 적용해 보아야 합니다. 시맨틱 HTML을 우선적으로 고려하고 ARIA는 보조적으로 활용함으로써, 모두가 쉽게 접근할 수 있는 웹을 만들어 나가길 바랍니다.