웹접근성을 높이는 ARIA 속성 완벽 가이드

728x90

SMALL

1. ARIA란 무엇인가?

ARIA는 웹접근성을 개선하기 위한 HTML속성으로, 스크린 리더 같은 보조기기가 웹페이지를 더 쉽게 이해하도록 돕는 역할을 합니다.

예를 들어, 버튼이 <div> 태그로 만들어져 있을 경우, 보조기기는 이를 버튼으로 인식하지 못하지만, role="button"을 추가하면 버튼으로 인식할 수 있다.

<div role="button" tabindex="0">클릭하세요</div>

ARIA 속성은 크게 역할(Role), 속성(Properties), 상태(States)로 나뉜다.

속성	설명	예제
aria-label	직접 라벨을 지정	<button aria-label="닫기">X</button>
aria-labelledby	다른 요소를 참조하여 라벨 지정	<input aria-labelledby="title">
aria-describedby	보조 설명을 추가	<input aria-describedby="info">
role	요소의 역할을 명확하게 지정	<div role="button">버튼</div>
aria-live	실시간 업데이트되는 콘텐츠 설정	<div aria-live="polite">업데이트됨</div>
aria-hidden	보조기기에서 숨김 처리	<div aria-hidden="true">숨김 콘텐츠</div>
aria-expanded	열림/닫힘 상태 표시	<button aria-expanded="false">메뉴</button>

1) aria-label VS aria-labelledby VS aria-describedby

이 속성들은 요소의 의미를 더 멱확하게 전달할 때 사용된다.

<button aria-label="메뉴 열기">🍔</button>

<h2 id="title">로그인</h2>
<input type="text" aria-labelledby="title">

<input type="text" aria-describedby="info">
<p id="info">비밀번호는 8자 이상 입력하세요.</p>

2) aria-live로 실시간 콘텐츠 업데이트 전달하기

스크린 리더는 기본적으로 동적 콘텐츠를 자동으로 읽지 않는다. aria-live를 활용하면, 변경 사항 을 자동으로 읽도록 설정할 수 있다.

<div aria-live="polite">새로운 알림이 없습니다.</div>

<div aria-live="assertive">긴급한 메시지!</div>

3) aria-expanded로 아코디언 메뉴 접근성 향상

아코디언 메뉴나 드롭다운의 열림/닫힘 상태를 보조기기에 전달할 수 있다.

<button aria-expanded="false" aria-controls="menu">메뉴 열기</button>
<ul id="menu" hidden>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>

4) aria-hidden으로 불필요한 요소 숨기기

<p aria-hidden="true">이 문장은 스크린 리더가 무시함</p>

728x90

LIST