Eojin Han

접근성 트리(Accessibility Tree)란?사용 목적 작동 방식 변환 예시 접근성 트리 확인 방법

접근성 트리(Accessibility Tree)란?

접근성 트리는 웹 페이지의 DOM 트리를 단순화한 버전으로, 보조 기술(Assistive Technologies, AT)이 웹 콘텐츠와 상호작용할 수 있도록 정보를 제공하는 구조다.

이 트리는 스크린 리더, 시선 추적 시스템(eye-tracking systems), 음성 입력 소프트웨어(speech input software) 등에서 사용된다.

사용 목적

보조 기술(AT)은 접근성 트리를 이용해 웹 콘텐츠를 이해하고 상호작용한다.

접근성 트리는 장애를 가진 사용자들이 인터넷을 보다 쉽게 이용할 수 있도록 돕는다.

작동 방식

브라우저는 HTML 마크업을 DOM 트리로 변환하여 웹 페이지의 구조와 콘텐츠를 나타낸다.

브라우저는 DOM 트리 + ARIA 속성을 기반으로 접근성 트리를 생성한다.

접근성 트리는 접근성과 관련 없는 불필요한 노드를 제거한 DOM 트리의 수정된 버전이다.

접근성 트리는 시멘틱 HTML 요소의 접근성 관련 정보와 설정한 ARIA 속성을 포함한다.

변환 예시


<html>
<head>
  <title>How old are you?</title>
</head>
<body>
  <label for="age">Age</label>
  <input id="age" type="number" name="age" value="42">
  <div>
    <button>Back</button>
    <button>Next</button>
  </div>
</body>
</html>

Chromium의 렌더러인 Blink는 다음과 같은 내부 접근성 트리를 파생한다.


role='rootWebArea' focusable name='How old are you?'
  role='genericContainer' ignored
    role='genericContainer' ignored
      role='labelText'
        role='staticText' name='Age'
      role='spinButton' editable focusable name='Age' value='42'
        role='genericContainer' editable
          role='staticText' editable name='42'
      role='genericContainer'
        role='button' focusable name='Back'
          role='staticText' name='Back'
        role='button' focusable name='Next'
          role='staticText' name='Next'

접근성 트리 확인 방법

Chrome for DevelopersChrome DevTools의 전체 접근성 트리 | Blog | Chrome for Developers

Chrome DevTools의 전체 접근성 트리 | Blog | Chrome for Developers

DevTools의 새로운 전체 페이지 접근성 트리와 이 트리의 디자인과 구현을 검토합니다.

추천영상 :

YouTubeHow to use Chrome’s accessibility tree

How to use Chrome’s accessibility tree

Learn how to use Chrome's accessibility tree including how to access it, what information is shows, and how to use it for debugging and checking custom widgets. Check out these other resources: How to use Chrome’s accessibility tree: https://blog.pope.tech/2023/11/27/how-to-use-chromes-accessibility-tree/ Other accessibility tools: https://blog.pope.tech/2022/12/02/december-accessibility-focus-wave/ Chapters: 0:00 Introduction 0:45 What is the accessibility tree 1:55 Accessing the accessibility tree in Chrome 2:37 Information exposed in the accessibility tree 4:17 Debugging with the accessibility tree 5:18 Check custom widgets with accessibility tree

Chrome DevTools에서 전체 접근성 트리를 확인할 수 있는 툴을 만들었다.

Chrome에서 확인하기:

페이지에서 오른쪽 클릭 후 "검사(Inspect)" 선택

Chrome DevTools의 접근성(A11y) 패널에서 접근성 정보를 확인

이를 통해 웹 콘텐츠가 보조 기술에 어떻게 노출되는지 확인할 수 있다.

full-age accessibility tree를 활성화하고, disability 버튼을 누르면 접근성 트리를 보여준다.