접근성 트리
접근성 트리는 DOM 트리의 하위 집합입니다. 접근성 트리는 화면 내용을 스크린리더와 같은 보조기술에서 사용되는 데 유용한 DOM 트리의 요소만 포함되며, 보조 기술 사용자에게 중요한 개체의 모든 속성이 포합됩니다. 예를 들어, aria-* 속성은 부분적으로 접근성 트리를 렌더링하는 방법에 대한 지침을 브라우저에 제공합니다. 개발자는 지전된 객체에 접근성 트리의 기본값을 무시하거나 객체를 사용자에게 더 잘 설명하기 위해 추가 값을 제공할 수 있습니다. <span> 요소를 WAI-ARIA 역할 중 button role로 제공하여 보조 기술 사용자가 해당 요소를 버튼으로 인식할 수 있도록 제공할 수 있는 것이 대표적입니다.
클라이언트 측 코드가 보조 기술 사용자에게 도움이 되는 방법
사용자가 사이트에 액세스하면 브라우저는 마크업을 통해 사이트 UI 인터페이스를 렌더링합니다. 브라우저는 해당 마크업을 DOM Tree라고 하는 내부 표현으로 바꿉니다. 때에 따라 브라우저는 보조 기술 사용자의 요구와 경험을 더욱 잘 이해하기 위한 도구로 DOM Tree를 기반으로 접근성 트리를 만듭니다. 접근성 트리는 플랫폼별 접근성 API에 정보를 제공한 다음 보조 기술에 알립니다. 따라서 클라이언트 측 코드는 보조 기술 사용자의 경험에 영향을 미칩니다. HTML, CSS Javascript 세가지 섹션을 통해 클라이언트 측 코드가 접근성 트리에 미치는 영향에 대해 간단히 살펴보겠습니다.
HTML
<button>, <input> 등의 HTML을 사용하면 페이지의 내용을 구체적으로 지정할 수 있습니다.
- check box 또는 radio button
- 구조화된 데이터 테이블
- 순서가 있거나 정렬되지 않은 또는 정의 목록
- navigation 또는 footer 영역
CSS
CSS는 접근성 트리에도 영향을 줄 수 있습니다. display: none 또는 visibility: hidden과 같이 화면이 보이지 않도록 설정된 요소는 접근성 트리에서 제거됩니다. 또한 사이트에서 CSS의 :before, :after(가상 선택자)에서 생성된 콘텐츠를 동적으로 변경하는 경우 접근성 트리에 표시되거나 사라질 수 있습니다.
Javascript
Javascript를 사용하면 요소의 상태를 변경할 수 있습니다. 요소의 상태 변경은 접근성과 관련이 있습니다.
- 메뉴가 확장 또는 축소되었을 때
- check box를 선택 또는 해제했을 때
- 이메일 주소 필트의 메ㅔ일 주소가 유효한지를 검사하여 사용자에게 결과를 알릴 때
접근성 트리 구현은 다양할 수 있으며 브라우저마다 차이가 있을 수 있으므로 다양한 브라우저에서 페이지의 요소의 접근성 트리를 확인하는 것이 좋습니다.
Chrome에서 접근성 트리 검사하기
- 웹 페이지에서 마우스 우클릭
검사
- Elements(요소) 탭 클릭
- DOM 트리에서 검사하려는 요소를 선택합니다.
- Accessibility 탭을 클릭합니다. Accessibility 탭은 숨겨져 있을 수 있으므로,
<More tabs>버튼을 눌러 Accessibility 탭을 추가해야 할 수 있습니다.
Chrome의 Accessibility 탭은 크게 다음과 같은 하위 탭으로 구성되어 있습니다.
Accessibility Tree: 접근성 API를 통해 노출된 접근성 트리를 표시합니다.ARIA Attributes: 검사하려는 요소에 ARIA Attributes를 표시합니다.Computed Properties: 일부 접근성 속성은 브라우저에서 동적으로 계산됩니다. Computed Properties 탭에서는 선택한 요소의 이름(Label), 요소 역할(Role), title 속성, 요소에 초점 가능 여부 등을 확인할 수 있습니다.
주의
스크린 리더 사용자는 <More tabs> 버튼에 키보드 초점이 제공되지 않으므로, 스크린 리더의 가상 커서의 빠른 탐색 키로 접근해야 합니다. 또한, ARIA Attributes, Computed Properties 탭은 스크린 리더의 객체 탐색 기능을 통해 접근해야 합니다.
