ARIA: 역할(Roles), 상태(States), 속성(Properties) 사용하기

ARIA(Accessible Rich Internet Applications)는 접근성을 높이기 위해 웹 요소에 의미(semantics)를 부여할 수 있게 해주는 기술입니다.
ARIA는 크게 세 가지로 나뉩니다:

• Roles (역할): UI 요소의 종류를 정의
• States (상태) & Properties (속성): 그 역할에 부가적인 정보나 동작을 부여

---

🔧 사용 방법 요약

• 웹 요소가 이미 적절한 의미를 가진 HTML 태그일 경우에는 추가적인 ARIA 역할을 부여하지 않아도 됩니다.
• 필요한 경우에만, 적절한 ARIA 역할과 상태/속성을 생명 주기 동안 요소에 부여해야 합니다.
• ARIA 속성은 DOM 구조를 변경하지 않으며, 단지 브라우저의 접근성 API에 추가 정보만 제공합니다.

---

🧩 주요 역할(Role) 종류

✅ 위젯 역할 (Widget Roles)

사용자와 직접 상호작용하는 요소에 사용:

• button, checkbox, textbox, link, menuitem, switch, slider, gridcell 등

<div role="gridcell">Potato</div>
<div role="gridcell">Cabbage</div>
<div role="gridcell">Onion</div>

🧱 복합 역할 (Composite Roles)

다른 역할들을 포함하는 복합 구조에 사용:

• combobox, grid, menu, listbox, radiogroup, tablist, tree, treegrid 등

<label for="jokes">Pick what type of jokes you like</label>
<div class="combo-wrap">
  <input
    type="text"
    id="jokes"
    role="combobox"
    aria-controls="joketypes"
    aria-autocomplete="list"
    aria-expanded="false"
    data-active-option="item1"
    aria-activedescendant="" />
  <span aria-hidden="true" data-trigger="multiselect"></span>
  <ul id="joketypes" role="listbox" aria-label="Jokes">
    <li class="active" role="option" id="item1">Puns</li>
    <li class="option" role="option" id="item2">Riddles</li>
    <li class="option" role="option" id="item3">Observations</li>
    <li class="option" role="option" id="item4">Knock-knock</li>
    <li class="option" role="option" id="item5">One liners</li>
  </ul>
</div>

📄 문서 구조 역할 (Document Structure Roles)

웹 페이지의 구조를 설명:

• article, heading, table, list, row, cell, term, toolbar, tooltip 등

🧭 랜드마크 역할 (Landmark Roles)

페이지 내의 주요 구역을 정의:

• banner, main, navigation, search, form, region, contentinfo 등
• 예: role="main"은 스크린 리더가 “이곳이 주요 콘텐츠입니다”라고 이해하도록 돕습니다.

* 스크린 리더는 시각 장애인이나 저시력 사용자가 컴퓨터나 모바일 기기의 화면 내용을 음성으로 들을 수 있도록 도와주는 소프트웨어입니다

🔊 라이브 리전 역할 (Live Region Roles)

콘텐츠가 자동으로 바뀌는 영역을 설명:

• alert, status, log, timer 등

🪟 창 역할 (Window Roles)

팝업/모달 창에 사용:

• dialog, alertdialog

---

🧩 상태 및 속성 (States and Properties)

ARIA 속성은 크게 4가지 분류로 나뉩니다:

1. 위젯 속성

• 입력 및 선택 상태 등을 정의:
  aria-checked, aria-disabled, aria-expanded, aria-label, aria-required, aria-selected 등

2. 라이브 리전 속성

• 실시간 콘텐츠 변경 알림:
  aria-live, aria-atomic, aria-relevant, aria-busy

3. 드래그 앤 드롭 속성 (deprecated)

• aria-dropeffect, aria-grabbed (더 이상 사용 권장되지 않음)

4. 관계 속성

• 요소 간의 관계를 나타냄:
  aria-labelledby, aria-describedby, aria-owns, aria-controls, aria-activedescendant 등

🟦 1. role 속성 예시

✅ 버튼 역할 (role="button")

<div role="button" tabindex="0" onclick="doSomething()">
  Click me
</div>

• 사용 이유: div는 기본적으로 버튼이 아니기 때문에 스크린 리더가 이 요소를 버튼처럼 인식하도록 도와줍니다.
• tabindex="0"을 줘서 키보드 포커스를 받을 수 있게 해야 함

---

✅ 대화 상자 (role="dialog")

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Terms and Conditions</h2>
  <p>...</p>
</div>

• 스크린 리더는 이 영역을 “대화 상자”로 인식하고 제목을 dialog-title에서 가져감.

---

✅ 내비게이션 (role="navigation")

<nav role="navigation" aria-label="Main Menu">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

• 내비게이션 영역을 명확하게 설명하고, aria-label로 사용자에게 “Main Menu”라고 읽히도록 지정

---

🟩 2. aria-* 속성 예시

✅ aria-label – 숨겨진 텍스트 라벨 제공

<button aria-label="Close modal">
  <svg>...</svg> <!-- X 아이콘 -->
</button>

• 시각적으로는 아이콘만 보이지만, 보조 기술은 "Close modal"이라고 읽음

---

✅ aria-hidden – 보조 기술에서 무시하게 하기

<div aria-hidden="true">
  This won't be read by screen readers.
</div>

• 사용자에게 보여지는 요소지만, 접근성 도구에서는 무시됨

---

✅ aria-expanded – 열림/닫힘 상태

<button aria-expanded="false" aria-controls="menu1" onclick="toggleMenu()">Menu</button>
<ul id="menu1" hidden>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

• 메뉴가 펼쳐졌는지 여부를 스크린 리더가 알 수 있음
• 메뉴가 열릴 때 JS로 aria-expanded="true"로 바꾸는 방식으로 동기화

---

✅ aria-describedby – 설명 연결

<input type="text" id="email" aria-describedby="email-help" />
<p id="email-help">Please enter a valid email address.</p>

• 입력창과 설명 텍스트를 연결해서 스크린 리더가 "입력창, 유효한 이메일 주소를 입력하세요"라고 읽음

---

✅ aria-live – 실시간 업데이트 알림

<div aria-live="polite">
  <!-- JavaScript로 여기에 메시지를 동적으로 추가 -->
</div>

• 사용자가 무언가를 제출했을 때, 새 메시지를 자동으로 읽어줌
• aria-live="assertive"는 즉시 알림, polite는 다른 작업 끝날 때까지 기다림