Chrome, Firefox 브라우저에서 제공하는 접근성 트리 검사 기능 살펴보기
안녕하세요. 엔비전스입니다.
접근성 이슈를 진단하는 데에는 여러 방법이 있으며, 대표적으로 스크린 리더와 같은 보조 기술을 직접 사용하여 페이지의 접근성 상태를 판단할 수 있습니다. 오래전부터 Windows와 같은 운영체제에서는 접근성 API를 제공해 왔습니다. 접근성 API는 스크린 리더와 같은 보조 기술이 운영체제에서 제공하는 체크 상자, 라디오 버튼과 같은 UI와 상호작용할 수 있는 메커니즘을 제공합니다. 접근성 트리를 검사할 수 있는 다양한 도구가 있으나, 운영체제 및 스크린 리더와 같은 보조 기술에 대한 지식이 요구되기도 하는 등 웹 페이지 제작자가 접근하기 다소 어려웠습니다. Chrome, Firefox 브라우저에서는 페이지에 요소의 접근성 트리를 확인할 수 있는 접근성 속성 조사와 같은 접근성 트리를 보다 친숙한 UI로 검사하는 기능을 제공합니다.
Single Page APP와 같이 웹의 복잡도는 점점 증가하고 있으며, 그에 따라 스크린 리더와 같은 보조 기술로의 테스트만으로 접근성 이슈를 진단하기 쉽지 않습니다. 또한, 스크린 리더만을 사용하여 페이지 테스트 시 스크린 리더의 버그로 인해 제작자가 의도한 데로 요소가 동작하지 않는 등의 문제 또한 발생합니다. 이러한 점들을 효과적으로 발견하기 위해서는 요소의 접근성 트리를 검사하여 제작자가 의도한 데로 페이지 요소가 랜더링 되었는지 확인해야 합니다. 브라우저별로 제공하는 접근성 트리 검사기의 경우 웹 브라우저에서의 접근성 트리만을 표시하므로, 웹 제작자 등의 관련 종사자가 웹 요소의 접근성 문제를 효율적으로 발견할 수 있는 이점이 있습니다.
이번 아티클에서는 Chrome, Firefox 웹 브라우저에서 제공하는 접근성 트리 검사 기능 사용 방법을 통해 요소의 접근성 이슈를 진단하는 방법을 살펴보겠습니다.
접근성 트리란
접근성 트리는 DOM 트리의 하위 집합입니다. 접근성 트리는 화면 내용을 스크린 리더와 같은 보조 기술에서 사용되는 데 유용한 DOM 트리의 요소만 포함되며, 보조 기술 사용자에게 중요한 개체의 모든 속성이 포함됩니다. 예를 들어, aria- * 속성은 부분적으로 접근성 트리를 렌더링하는 방법에 대한 지침을 브라우저에 제공합니다. 개발자는 지정된 객체에 접근성 트리의 기본값을 무시하거나 객체를 사용자에게 더 잘 설명하기 위해 추가 값을 제공할 수 있습니다. span 요소를 WAI-ARIA 역할 중 button role로 제공하여 보조 기술 사용자가 해당 요소를 버튼으로 인식할 수 있도록 제공할 수 있는 것이 대표적입니다.
클라이언트 측 코드가 보조 기술 사용자에게 도움이 되는 방법
사용자가 사이트에 액세스하면 브라우저는 마크업을 통해 사이트 UI 인터페이스를 렌더링합니다. 브라우저는 해당 마크업을 DOM 트리라고 하는 내부 표현으로 바꿉니다. 때에 따라 브라우저는 보조 기술 사용자의 요구와 경험을 더욱 잘 이해하기 위한 도구로 DOM 트리를 기반으로 접근성 트리를 만듭니다. 접근성 트리는 플랫폼별 접근성 API에 정보를 제공한 다음 보조 기술에 알립니다. 따라서 클라이언트 측 코드는 보조 기술 사용자의 경험에 영향을 미칩니다. HTML, CSS, Javascript 세 섹션을 통해 클라이언트 측 코드가 접근성 트리에 미치는 영향에 대해 간단히 살펴보겠습니다.
HTML
<button>, <input> 등의 HTML을 사용하면 페이지의 내용을 구체적으로 지정할 수 있습니다.
- 체크 상자 또는 라디오 버튼
- 구조화된 데이터 테이블
- 순서가 있거나 정렬되지 않은 또는 정의 목록
- navigation 또는 footer 영역
CSS
CSS는 접근성 트리에도 영향을 줄 수 있습니다. display: none 또는 visibility: hidden과 같이 화면이 보이지 않도록 설정된 요소는 접근성 트리에서 제거됩니다. 또한, 사이트에서 CSS의 ::before 및 ::after 에서 생성된 콘텐츠를 동적으로 변경하는 경우 접근성 트리에 표시되거나 사라질 수 있습니다.
Javascript
JavaScript를 사용하면 요소의 상태를 변경할 수 있습니다. 요소의 상태 변경은 접근성과 관련이 있습니다. 다음과 같은 예를 들 수 있습니다:
- 메뉴가 확장 또는 축소되었을 때
- 체크 상자를 선택 또는 해제했을 때
- 이메일 주소 필드의 메일 주소가 유효한지 또는 유효하지 않은지를 검사하여 사용자에게 결과를 알릴 때
접근성 트리 구현은 다양할 수 있으며 브라우저마다 차이가 있을 수 있음으로 다양한 브라우저에서 페이지의 요소의 접근성 트리를 확인하는 것이 좋습니다.
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 탭은 스크린 리더의 객체 탐색 기능을 통해 접근해야 합니다.
Firefox에서 접근성 트리 검사하기
Firefox의 접근성 검사기가 Context Menu에 표시되지 않는다면, 다음의 과정을 통해 접근성 검사기를 활성화합니다:
- 개발자 도구 상자의 설정 및 피드백 메뉴 버튼으로 이동하여 설정을 선택하고 접근성 체크 상자로 이동한 다음, Space 키를 눌러 선택합니다.
도구상자에 접근성 검사기가 추가되고, context menu에 <접근성 조사> 항목이 추가됩니다.
접근성 트리를 검사하려면 다음 과정을 따릅니다.
- 접근성 트리를 검사하려는 요소로 초점을 이동합니다.
- 마우스 오른쪽 버튼을 눌러 context menu를 엽니다.
- <접근성 속성 조사> 항목을 클릭합니다.
Firefox의 접근성 검사 패널은 키보드로의 탐색을 지원하므로 Tab 키로 요소에 접근하고 운용할 수 있습니다. Firefox의 접근성 탭은 크게 다음 부분으로 나뉠 수 있습니다:
- 접근성 트리 트리 뷰: 접근성 API를 통해 노출된 접근성 트리를 표시합니다. 키보드의 왼쪽 또는 오른쪽 방향 키로 요소를 확장 또는 축소합니다. 위 또는 아래 방향 키로 다음 또는 이전 요소로 이동할 수 있습니다.
- 속성 트리 뷰: 요소의 이름(Label), 역할(Role), 초점 가능 여부 등과 같은 요소의 다양한 속성을 확인할 수 있습니다.
접근성 트리를 효율적으로 검사하기
접근성 트리에는 요소의 이름, 역할, 키보드 단축키, 초점 가능 상태와 같이 다양한 정보를 제공합니다. 이러한 정보를 알고 있다면 접근성 트리를 검사하는 데 효과적일 것입니다. 다음은 대표적인 것들을 나열한 것입니다:
- 이름(name): 요소의 이름(Label)입니다.
- 역할(role): 체크 상자, 라디오 버튼, 헤딩과 같은 요소의 역할입니다.
- 값(value): 항목의 값이며 요소에 따라 다르게 제공됩니다. singline 또는 multiline 텍스트 필드에서 입력한 값이거나 링크의 경우 href 값이므로 링크의 URL입니다.
- keyboardShortcut: accesskey 속성으로 제공된 단축키값입니다.
- 상태(states): 선택됨, 확장됨, 사용 가능하지 않음과 같이 요소의 상태 정보입니다.
이러한 정보는 브라우저마다 다르게 표시될 수 있습니다.
더 읽어보기
- Gecko states: 접근성 트리에 표시된 요소의 상태 목록이 정리되어 있습니다(Firefox 기준)
- Gecko object attributes: 접근성 트리에 표시된 요소의 속성 목록이 정리되어 있습니다(Firefox 기준).
Chrome, Firefox의 접근성 탭에는 접근성 트리 외에도 키보드 접근성, 색약 사용자를 위한 콘트라스트 체크 도구와 같은 다양한 접근성 이슈를 진단할 수 있는 도구가 포함되어 있습니다.
이번 아티클에서는 Chrome, Firefox에서 요소의 접근성 트리를 검사하는 방법에 대해 살펴보았습니다. 이 아티클이 접근성 이슈를 효과적으로 진단할 수 있는데 도움이 되길 바라봅니다.