ARIA 속성 제대로 쓰는 법 가이드

작성자:

웹 접근성 향상을 위해 꼭 알아야 할 개념 중 하나가 바로 ARIA 속성(Accessible Rich Internet Applications)입니다. ARIA는 스크린 리더와 같은 보조 기술이 웹 콘텐츠의 역할과 상태를 더 명확히 파악할 수 있도록 돕는 역할을 합니다.

이 글에서는 ARIA 속성의 기본 개념부터 실제 사용 예시까지 개발자와 디자이너 모두가 알아야 할 핵심 정보를 정리해보았습니다.

1. ARIA란 무엇인가요?

ARIA는 Accessible Rich Internet Applications의 약자로, 복잡한 사용자 인터페이스(UI)를 보조 기술 사용자에게 더 명확하게 전달하기 위해 만들어졌습니다.

ARIA의 목적

  • ✅ HTML만으로 표현되지 않는 상태나 역할 전달
  • ✅ 스크린 리더 사용자의 내비게이션 지원
  • ✅ 동적 콘텐츠에 대한 정보 제공

단, 기본 HTML 요소가 우선입니다. 시맨틱 태그가 있다면 그것을 먼저 사용하고, 부족한 경우에만 ARIA를 보완적으로 활용해야 합니다.

2. 자주 쓰는 ARIA 역할(Role)

ARIA Role은 요소의 기능 또는 목적을 설명합니다. 이는 스크린 리더가 “이 요소는 버튼이다” 혹은 “탭 메뉴다”라고 알려주는 기준이 됩니다.

주요 Role 예시

  • role="button": 버튼 역할
  • role="navigation": 내비게이션 영역
  • role="dialog": 모달 대화창
  • role="tablist", tab, tabpanel: 탭 UI 구성
  • role="alert": 즉시 알림 메시지

👉 예시:

<div role="button" tabindex="0">제출하기</div>

위처럼 일반 div를 버튼처럼 만들 때는 role과 tabindex를 함께 사용해야 합니다.

3. ARIA 속성(Properties) 사용법

ARIA 속성은 요소의 상태(state)나 추가 정보(property)를 설명하는 데 사용됩니다.

자주 쓰는 ARIA 속성

  • aria-label: 요소에 이름 부여
  • aria-labelledby: 다른 요소의 ID로 레이블 참조
  • aria-describedby: 설명 텍스트 연결
  • aria-expanded: 드롭다운/아코디언 상태 표시 (true/false)
  • aria-hidden: 보조 기술에 감출 요소 (true/false)
  • aria-disabled: 비활성화 상태 표시

예시: 아코디언 UI


&lt;button aria-expanded="false" aria-controls="faq1"&gt;
  자주 묻는 질문 보기
&lt;/button&gt;

&lt;div id="faq1" hidden&gt;
  질문에 대한 답변입니다.
&lt;/div&gt;

자바스크립트로 열릴 때 aria-expanded를 "true"로 바꾸고, hidden 속성도 제거해 접근성과 동기화를 맞춰야 합니다.

4. 스크린 리더와의 연동 체크포인트

ARIA는 사용자가 스크린 리더로 웹 콘텐츠를 탐색할 때 정확히 정보를 이해할 수 있도록 도와줍니다. 하지만 과도하거나 잘못된 사용은 오히려 혼란을 줄 수 있습니다.

ARIA 사용 시 유의사항

  • ❌ 시맨틱 태그가 있는데도 ARIA로 덮어쓰기 하지 않기
  • ❌ 사용하지 않는 속성 남발하지 않기
  • ✅ 보조 기술에서 실제 동작 확인할 것 (NVDA, VoiceOver 등)

정확한 피드백을 위해 테스트는 필수입니다.

5. ARIA와 접근성 테스트 도구

ARIA 속성은 시각적으로 드러나지 않기 때문에 접근성 점검 도구로 확인해야 합니다.

추천 도구

결론: ARIA는 ‘보완’일 뿐 ‘대체’가 아닙니다

ARIA는 웹 접근성을 향상시키는 강력한 도구입니다. 하지만 시맨틱 HTML 태그가 우선이며, ARIA는 이를 보완하는 수단이라는 점을 기억해야 합니다.

정확한 ARIA 사용은 스크린 리더 사용자에게 명확한 정보 전달로 이어지고, 이는 곧 더 많은 사용자가 불편 없이 웹을 이용할 수 있게 합니다.

웹을 더 포용적으로 만들기 위한 첫걸음, ARIA 속성을 올바르게 사용하는 것에서 시작해보세요.

키워드: ARIA 속성, 웹 접근성, 스크린 리더, aria-label, aria-expanded, role 속성

댓글 남기기