접근성 트리와 접근성 API

접근성 트리란

접근성 트리(accessibility tree)는 브라우저가 DOM을 바탕으로 만드는, 보조기술용 “요약본” 트리입니다. DOM에는 모든 요소가 들어 있지만, 접근성 트리에는 보조기술에 의미 있는 정보만 담깁니다.

접근성 트리의 각 노드(접근성 객체)는 주로 다음 정보를 가집니다.

• 이름(name) — “저장”, “검색어” 같은 부르는 말
• 역할(role) — button, link, heading 같은 종류
• 상태·속성(states and properties) — 펼쳐짐, 선택됨, 필수, 수준 2 등
• 값(value) — 입력창의 글자, 슬라이더의 숫자
• 설명(description), 위치·크기, 부모·자식 관계, 가능한 동작(누르기, 펼치기 등)

이 네 가지 핵심 정보는 이름·역할·상태·값 문서에서 자세히 다룹니다.

DOM과 접근성 트리의 차이

같은 HTML이라도 DOM과 접근성 트리는 모양이 다릅니다. 브라우저는 레이아웃용 <div>처럼 의미 없는 요소를 생략하거나 무시하고, display: none이나 aria-hidden으로 숨긴 요소를 빼며, CSS로 넣은 ::before 콘텐츠 같은 텍스트를 포함하기도 합니다.

<nav aria-label="주 메뉴">
  <div class="wrap">
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/notice" aria-current="page">공지사항</a></li>
    </ul>
  </div>
</nav>
<button type="button" aria-expanded="false">
  <svg aria-hidden="true">…</svg> 필터
</button>

navigation "주 메뉴"
  list (항목 2개)
    listitem
      link "홈"
    listitem
      link "공지사항"  current: page
button "필터"  expanded: false

<div class="wrap">는 의미가 없어(generic) 트리에서 생략되고, 장식용 SVG는 aria-hidden="true" 때문에 빠집니다. 화면낭독기 사용자는 이 트리를 기준으로 페이지를 탐색합니다.

브라우저에서 보조기술까지의 흐름

화면낭독기는 웹 페이지의 HTML을 직접 읽지 않습니다. 브라우저가 만든 접근성 트리를 운영체제의 접근성 API로 받아서 읽습니다.

1. 작성자가 HTML·CSS·ARIA로 코드를 씁니다.
2. 브라우저가 DOM을 만들고 스타일을 계산합니다.
3. 브라우저가 DOM과 스타일, ARIA 속성을 합쳐 접근성 트리를 만듭니다. 이때 HTML-AAM, Core-AAM, AccName 명세의 규칙을 따릅니다.
4. 접근성 트리는 운영체제별 접근성 API 객체로 노출됩니다.
5. 보조기술은 API에서 정보를 읽어 음성·점자로 전달하고, 바뀐 내용이 있으면 이벤트(“상태가 바뀜”, “포커스 이동” 등)를 받아 알립니다.
6. 사용자가 보조기술로 “누르기” 같은 명령을 내리면, API를 거쳐 브라우저에 전달되어 클릭 이벤트 등이 발생합니다.

운영체제별 접근성 API

접근성 API는 운영체제가 제공하는 표준 인터페이스입니다. 브라우저뿐 아니라 모든 데스크톱·모바일 앱이 이 API로 보조기술과 소통합니다.

같은 ARIA 역할이라도 API마다 표현 방식이 조금씩 다릅니다. 예를 들어 role="button"은 MSAA/IA2에서 ROLE_SYSTEM_PUSHBUTTON, UIA에서 Button 컨트롤 유형, AX API에서 AXButton으로 노출됩니다. 이 차이와 화면낭독기마다 다른 안내 방식 때문에, 같은 코드라도 보조기술에 따라 들리는 표현이 다를 수 있습니다.

ARIA가 접근성 트리를 바꾸는 방식

ARIA 속성은 DOM과 화면은 그대로 두고 접근성 트리의 노드만 바꿉니다. 브라우저는 네이티브 HTML 의미보다 ARIA를 우선 적용합니다.

<h2 role="button">자주 묻는 질문</h2>
<!-- 트리: button "자주 묻는 질문" (제목 정보가 사라짐) -->

<h2>
  <button type="button" aria-expanded="false">자주 묻는 질문</button>
</h2>
<!-- 트리: heading 수준 2 > button "자주 묻는 질문" -->

이처럼 ARIA는 강력한 만큼 네이티브 의미를 쉽게 망가뜨릴 수 있습니다. 덮어쓰기 전에 ARIA 사용 규칙과 HTML 요소의 암묵적 역할을 확인하세요.

개발자 도구로 접근성 트리 보기

주요 브라우저의 개발자 도구에서 요소별 접근성 정보와 전체 접근성 트리를 확인할 수 있습니다.

Chrome · Edge

1. F12로 개발자 도구를 열고 Elements(요소) 패널에서 요소를 선택합니다.
2. 오른쪽 하위 패널에서 Accessibility(접근성) 탭을 엽니다. 이름(Name), 역할(Role), 계산된 속성(Computed Properties), 이름이 어디서 왔는지(aria-labelledby, 콘텐츠 등)가 표시됩니다.
3. 같은 탭에서 Enable full-page accessibility tree를 켜면 Elements 패널 상단의 전환 버튼으로 DOM 트리 대신 전체 접근성 트리를 볼 수 있습니다.

Firefox

1. 개발자 도구의 접근성(Accessibility) 패널을 엽니다.
2. 전체 접근성 트리와 노드별 이름·역할·상태가 표시됩니다. 탭 순서 표시, 문제 검사(대비, 키보드, 텍스트 레이블), 색각 이상 시뮬레이션 기능도 있습니다.

Safari

1. 설정의 고급 탭에서 개발자용 메뉴를 켜고, 웹 속성 보기(Web Inspector)를 엽니다.
2. 요소(Elements) 탭에서 요소를 선택하고 오른쪽 노드(Node) 사이드바의 접근성(Accessibility) 항목을 확인합니다.