[웹접근성 완벽가이드 ②] WAI-ARIA 속성’s

WAI-ARIA는 Web Accessibility Initiative – Accessible Rich Internet Applications의 약자로, 장애가 있는 사용자도 웹 콘텐츠를 보다 쉽게 접근할 수 있도록 도와주는 속성 모음입니다. 주로 스크린리더와 같은 보조 기술이 복잡한 UI 요소를 인식할 수 있게 하는 데 사용됩니다.

1. WAI-ARIA 개요

기본적으로 HTML은 button, nav, form 등의 시맨틱 태그로 요소의 역할을 정의합니다. 그러나 커스텀 UI 구성 요소(예: 드롭다운, 탭, 모달 등)는 시맨틱 정보가 부족할 수 있어, 보조 기술이 이를 이해하지 못합니다.

이때 WAI-ARIA 속성을 추가해 보완합니다.

WAI-ARIA는 세 가지 주요 구성요소로 나뉩니다:

1-1. Role (역할)

• 요소가 어떤 **역할(기능)**을 하는지를 명확히 함
• 예시: button, navigation, dialog, tablist, tooltip 등

1-2. State (상태)

• 요소의 현재 상태를 나타냄
• 예시: aria-checked, aria-disabled, aria-expanded, aria-selected

1-3. Property (속성)

• 요소의 특성, 관계, 설명 정보를 추가 제공
• 예시: aria-label, aria-labelledby, aria-describedby, aria-controls

2. 사용 예시

버튼 역할이 필요한 div

<div role="button" tabindex="0" aria-pressed="false">좋아요</div>

• role="button": 버튼 역할 부여
• tabindex="0": 키보드 포커스 가능하게 함
• aria-pressed: 상태 표현 (State)

커스텀 아코디언

<button aria-expanded="false" aria-controls="section1">자세히 보기</button>
<div id="section1" hidden>내용입니다.</div>

• aria-expanded: 펼쳐짐 상태
• aria-controls: 이 버튼이 제어하는 요소

시각적으로 숨기되, 스크린리더에게는 읽히는 경우

<h2 aria-hidden="true">메인 타이틀</h2>
<span class="sr-only" aria-hidden="false">메인 타이틀</span>

3. 주의사항

• 기본 HTML 요소가 제공하는 시맨틱 정보를 우선 사용하세요.
  • 예: <button>을 role="button"이 있는 <div>보다 우선 사용
• ARIA는 보조 기술용이지, 시각적인 동작은 직접 처리해야 합니다.
• 정해진 Role 값과 조합만 사용해야 보조 기술이 정확하게 인식합니다.

4. 대표 Role 값 정리

Role 설명

button	버튼 역할
navigation	내비게이션 블록
dialog	모달 창
tooltip	툴팁 정보 제공
tablist	탭 목록 (container)
tab	탭 버튼
tabpanel	탭의 내용 영역
alert	중요한 알림 (스크린리더 우선)

5. 대표 State & Property 정리

속성 설명

aria-disabled	비활성화 여부 (true/false)
aria-checked	체크 상태 (true, false, mixed)
aria-expanded	펼쳐짐 여부 (true/false)
aria-selected	선택 여부 (true/false)
aria-label	요소의 텍스트 레이블
aria-labelledby	다른 요소의 ID를 참조하여 레이블 제공
aria-describedby	설명 텍스트를 참조
aria-controls	제어하는 대상 요소의 ID 참조

 

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.