[HTML] ARIA는 어떻게 접근성을 향상시키는가? 🌟

ARIA란 무엇인가 톺아보기! 🌟

웹 접근성(WA: Web Accessibility)은 단순히 “누구나 웹을 사용할 수 있다”는 것을 넘어, 장애가 있거나 다양한 환경에서 웹을 사용하는 사람들까지도 고려하는 개념입니다. ARIA(Accessible Rich Internet Applications)는 바로 이런 접근성을 보완하고, 웹을 더 나은 공간으로 만드는 데 중요한 역할을 합니다.

ARIA란 무엇인가요?

ARIA는 WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)의 약자로, 웹 콘텐츠와 애플리케이션을 보조 기술(screen reader, 화면 확대기 등)에서도 쉽게 이해할 수 있도록 돕는 HTML 속성의 표준입니다.

---

🎯 ARIA의 목표

1. 리치 콘텐츠 접근성 향상: 동적인 콘텐츠(모달, 탭 등)를 더 잘 이해하고 사용할 수 있도록 보조 기술과 연결
2. 역할과 상태 명시: UI 요소의 역할(role), 상태(state), 속성(property)을 명확히 정의
3. 보완적인 접근성 제공: HTML 자체로는 부족한 부분을 ARIA 속성으로 보완

---

📇 ARIA의 주요 속성

ARIA는 역할(Role), 속성(Properties), 상태(States)로 나뉩니다.

1️⃣ 역할(Role)

ARIA의 역할(role)은 HTML 요소가 어떤 역할을 하는지 명확히 정의합니다.

ARIA Role	설명	예제
role="button"	해당 요소가 버튼임을 명시	<div role="button" tabindex="0">클릭!</div>
role="alert"	알림 메시지임을 명시	<div role="alert">저장되었습니다!</div>
role="dialog"	대화 상자(모달)임을 정의	<div role="dialog" aria-labelledby="title">
role="tablist"	탭 컨테이너임을 나타냄	<div role="tablist">
role="progressbar"	진행률을 표시하는 UI 요소	<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">

2️⃣ 속성(Properties)

ARIA 속성은 UI 요소의 성질이나 설명을 정의합니다.

ARIA Property	설명	예제
aria-labelledby	요소가 다른 요소에 의해 설명됨	<div id="title">메뉴</div><ul aria-labelledby="title">
aria-label	요소의 이름을 제공	<button aria-label="닫기">X</button>
aria-describedby	요소를 설명하는 추가 정보 제공	<button aria-describedby="desc">X</button><div id="desc">닫기 버튼</div>
aria-hidden	보조 기술에 의해 무시할 요소를 지정	<div aria-hidden="true">숨김</div>

3️⃣ 상태(States)

ARIA 상태는 UI 요소의 현재 상태를 나타냅니다.

ARIA State	설명	예제
aria-checked	체크박스의 상태를 나타냄	<input type="checkbox" aria-checked="true">
aria-expanded	드롭다운이나 메뉴가 열렸는지 표시	<button aria-expanded="true">메뉴</button>
aria-disabled	요소가 비활성화 상태임을 명시	<button aria-disabled="true">비활성화</button>
aria-selected	선택된 항목을 나타냄	<li aria-selected="true">선택된 항목</li>

---

📇 ARIA의 규칙과 모범 사례

ARIA를 사용할 때는 다음 규칙과 모범 사례를 기억하세요. “ARIA는 좋지만, 필요할 때만 사용하자!” 😄

1️⃣ 기본 HTML 사용 우선

HTML 요소는 기본적으로 접근성을 제공하는 경우가 많습니다. 예를 들어:

• <button>: 이미 역할과 상태를 제공하므로 role="button"을 따로 추가할 필요가 없습니다.

2️⃣ aria-hidden 남용 금지

aria-hidden="true"는 보조 기술에서 요소를 완전히 숨깁니다. 중요한 정보를 숨기지 않도록 주의하세요.

3️⃣ 상태와 속성의 동기화

ARIA 속성이나 상태는 JavaScript와 동적으로 연동해야 합니다. 상태 변화가 시각적 업데이트뿐 아니라 접근성에도 반영되도록 코드를 작성하세요.

 

예제: 상태 동기화

<button id="toggle" aria-expanded="false">메뉴 열기</button>
<div id="menu" aria-hidden="true">여기 메뉴!</div>

<script>
  const button = document.getElementById('toggle');
  const menu = document.getElementById('menu');

  button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !expanded);
    menu.setAttribute('aria-hidden', expanded);
  });
</script>

---

💼 ARIA의 주요 사용 사례

1️⃣ 모달(Dialog)

<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
  <h2 id="dialog-title">로그인</h2>
  <p id="dialog-desc">로그인을 진행하세요.</p>
  <button>닫기</button>
</div>

2️⃣ 탭(Tab Navigation)

<div role="tablist">
  <button role="tab" aria-selected="true">탭 1</button>
  <button role="tab" aria-selected="false">탭 2</button>
</div>
<div role="tabpanel">탭 1 내용</div>
<div role="tabpanel" hidden>탭 2 내용</div>

---

🧐 ARIA는 왜 중요할까?

1. 접근성 강화: ARIA를 사용하면 다양한 사용자(특히 장애가 있는 사용자)가 콘텐츠를 더욱 쉽게 이해하고 사용할 수 있습니다.
2. 규범적인 웹 개발: 웹 표준과 접근성을 준수하면 더 많은 사용자가 웹에 접근 가능하게 됩니다.
3. SEO에도 긍정적: 접근성이 뛰어난 콘텐츠는 검색 엔진 크롤러에도 유리하게 작용할 수 있습니다.

🌷전설의 개발자가 되어봅시당!🌷