[html] ARIA(Accessible Rich Internet Applications)란?

📌 ARIA(Accessible Rich Internet Applications)란?

ARIA(Accessible Rich Internet Applications)는 웹 접근성을 높이기 위한 속성을 제공하는 기술이다.
특히 동적 콘텐츠(예: JavaScript 기반 인터페이스)나 스크린 리더를 사용할 때 사용자가 더 잘 이해할 수 있도록 보조 기술에 정보를 추가하는 역할을 한다.

---

🎯 ARIA가 왜 필요할까?

일반적인 HTML 태그(<button>, <input> 등)는 기본적으로 의미(semantic)를 가지고 있어, 브라우저와 보조 기술(스크린 리더 등)이 쉽게 해석할 수 있다.
하지만 JavaScript로 동적으로 UI를 변경하는 웹 애플리케이션에서는 HTML 태그만으로는 충분하지 않을 수 있다.

 

• 비표준 UI 요소 (예: <div> 버튼) 
  • <div> 태그는 기본적으로 버튼이 아니므로 보조 기술이 이를 버튼으로 인식하지 못함.

<div class="custom-button">클릭하세요</div>

• ARIA를 추가한 경우
  • role="button"을 사용하면 이 <div>가 버튼처럼 동작함을 보조 기술이 인식할 수 있음.
  • tabindex="0"을 추가하면 키보드 Tab 키로 접근 가능.

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

 

👉 즉, ARIA는 웹 페이지에서 시각적 요소를 보조 기술(스크린 리더 등)에서도 인식할 수 있도록 돕는 역할을 한다.

---

🏗️ ARIA 주요 속성

ARIA 속성은 크게 역할(role), 상태 및 속성(aria-*), 라이브 리전(aria-live) 으로 나눌 수 있다.

🔹 1. 역할(role) 속성

• role 속성은 HTML 요소의 역할을 정의하여 보조 기술이 올바르게 인식할 수 있도록 한다.

역할 (role)	설명
button	요소를 버튼처럼 동작하도록 정의
alert	경고 메시지를 보조 기술이 즉시 읽도록 설정
dialog	모달 창(팝업)처럼 작동하도록 설정
menu	내비게이션 메뉴 역할을 정의
progressbar	진행 표시줄 역할을 정의
tablist, tab, tabpanel	탭 인터페이스를 설정

 

🔹 예제 1: <div>를 버튼처럼 만들기

<div role="button" tabindex="0" onclick="alert('버튼 클릭!')">클릭하세요</div>

• role="button": <div> 요소가 버튼 역할을 함.
• tabindex="0": 키보드 Tab 키로 초점 받을 수 있도록 함.

🔹 예제 2: 경고 메시지(role="alert")

<div role="alert"> 오류가 발생했습니다! 다시 시도하세요. </div>

• role="alert"을 사용하면 스크린 리더가 즉시 이 메시지를 읽어줌.

---

🔹 2. ARIA 속성 (aria-*)

ARIA 속성(aria-*)은 요소의 상태나 속성을 정의하여 보조 기술이 이를 이해할 수 있도록 한다.

속성 (aria-*)	설명
aria-label	요소의 대체 텍스트를 제공
aria-labelledby	다른 요소의 ID를 참조하여 레이블을 지정
aria-describedby	다른 요소의 설명을 연결
aria-hidden	요소를 보이지 않도록 설정 (스크린 리더 무시)
aria-expanded	요소가 열려(true)/닫힘(false) 상태인지 표시
aria-controls	현재 요소가 제어하는 다른 요소의 ID를 참조
aria-live	실시간 업데이트되는 콘텐츠를 스크린 리더가 읽게 함

 

🔹 예제 1: aria-label 사용 (스크린 리더용 텍스트)

<button aria-label="장바구니 추가">🛒</button>

• 아이콘 버튼에는 텍스트가 없기 때문에 aria-label을 추가해 스크린 리더가 내용을 읽을 수 있도록 함.

🔹 예제 2: aria-expanded (드롭다운 메뉴)

<button aria-expanded="false" onclick="toggleMenu()">메뉴 열기</button> 
<div id="dropdown" hidden> 
   <a href="#">항목 1</a> 
   <a href="#">항목 2</a> 
</div> 

<script> 
   function toggleMenu() { 
      let btn = document.querySelector("button"); 
      let menu = document.getElementById("dropdown"); 
      let isExpanded = btn.getAttribute("aria-expanded") === "true";
      
      btn.setAttribute("aria-expanded", !isExpanded); 
      menu.hidden = isExpanded; 
   } 
</script>

 

• aria-expanded="false": 기본적으로 닫힌 상태.
• 버튼 클릭 시 aria-expanded="true"로 변경되며 드롭다운이 열림.

---

🔹 3. 라이브 리전(aria-live)

aria-live는 실시간으로 업데이트되는 콘텐츠를 스크린 리더가 자동으로 읽을 수 있도록 한다.

값	설명
off	기본값, 변경 사항을 읽지 않음
polite	변경 사항이 있으면 사용자 작업이 끝난 후 읽음
assertive	변경 사항이 있으면 즉시 읽음

 

🔹 예제 1: aria-live="polite" (사용자가 입력하면 안내 메시지 자동 읽기)

<div role="status" aria-live="polite"> 검색어를 입력하세요. </div> 
<input type="text" oninput="updateMessage()"> 

<script> 
   function updateMessage() { 
      document.querySelector("[role='status']").textContent = "입력 중..."; 
   } 
</script>

• 사용자가 입력할 때 "입력 중..." 메시지를 스크린 리더가 읽어줌.

---

📌 ARIA의 올바른 사용법

• HTML 태그를 우선적으로 활용하자!
  • <button> 대신 role="button"을 사용하기보다는 원래 <button>을 쓰는 것이 좋음.

// ❌ 나쁜 예제
<div role="button" tabindex="0">버튼</div>

// ✅ 좋은 예제
<button>버튼</button>

• 불필요한 aria-* 속성 사용은 피하기!
  • 이미 <button>은 기본적으로 버튼 역할을 하므로 role="button"을 추가할 필요 없음.
  • 올바른 HTML 태그가 존재한다면 ARIA를 사용하지 않는 것이 좋음.
• 스크린 리더 사용자 테스트 필요!
  • aria-live, aria-hidden 등의 속성은 화면 낭독기(Screen Reader)에서 어떻게 동작하는지 확인해야 함.

---

🎯 결론

• ARIA는 웹 접근성을 향상시키기 위한 속성이며, 특히 동적인 UI에서 보조 기술(스크린 리더 등)이 올바르게 인식할 수 있도록 돕는다.
• 그러나 기본 HTML 태그가 제공하는 접근성 기능을 먼저 활용하는 것이 중요하며, 불필요한 ARIA 사용을 지양해야 한다.