WAI-ARIA 요소 - TreeView

트리뷰의 정의 - TreeView가 뭔가요?

트리뷰(TreeView)는 한글로 단순하게 풀어보면 "나무 구조로 보기" 정도로 해석됩니다.

이름 그대로 나무처럼 한 줄기에서 여러 개의 가지로 나뉘는 세로 막대 형태로 나열된 항목의 목록을 말합니다.

 

어디서 볼 수 있는 요소인가요?

windows의 UI를 상속받아서 사용하는 응용 프로그램에서 주로 볼 수 있습니다.

멀리 가지 않고, Logo + E 를 눌러 탐색기 (explorer)를 열면 따로 보이지 않게 설정하지 않았다면 기본값으로 탐색기 좌측에 있는 폴더 디렉토리를 이동하는 트리뷰를 볼 수 있습니다.

보이지 않는다면, 탐색기의 윗 부분에 있는 리본 탭에서 "보기"를 선택하고, 가장 왼쪽에 있는 "탐색 창" 메뉴를 확장하여 "탐색 창" 항목을 활성화해보세요.

 

트리뷰의 구성요소

트리뷰의 구성 요소는 크게 두 가지로 나눌 수 있습니다.

 

1. Tree (트리 목록 컨테이너 role="tree")

트리 항목을 넣기 위해 사용되는 컨테이너 요소입니다. 트리뷰는 반드시 이 컨테이너를 사용하여 구현해야 합니다.

마치 li가 ul이나 ol 컨테이너에, dt나 dd가 dl 컨테이너에 있어야 하는 것 처럼

 

2. Treeitem (트리 항목 role="treeitem")

트리 항목 요소입니다. 부모 컨테이너 중에 role="tree"가 있어야 합니다. 트리 항목 요소는 아래와 같은 속성값을 가질 수 있습니다.

 

속성 1. aria-setsize="int"

목록의 크기를 임의의 값으로 강제 조절하는 속성입니다. 현재 보이는 목록의 개수가 제한되어 있다면 실제 있는 목록보다 많거나 작은 수로 강제로 읽는 항목 전체 수를 설정할 때 필요합니다.

특별한 사례가 아니라면 잘 사용하지 않습니다.

예) aria-setsize="5"

<출력내용> : (OOO lebel 1, 1 of 5)

 

속성 2. aria-posinset="int" (선택)

aria-setsize를 사용했을 때만 사용할 수 있는 속성으로, 항목에서 스크린리더가 읽어주는 순서를 임의로 조절합니다. 마찬가지로 특별한 사례가 아니라면 사용하지 않습니다.

예) aria-posinset="3"

<출력내용> : (OOO lebel 1, 3 of 5)

 

속성 3. aria-lebel="int" (필수)

트리뷰 항목은 제목(헤딩) 태그처럼 깊이 수준을 스크린리더에 알려야 합니다. 컨테이너에 사용하여 일괄 적용되면 더 좋겠지만, 아쉽게도 트리 항목에 적용해야 동작합니다.

예) aria-level="5"

<출력내용> : (OOO, lebel5, 1 of 3)

 

속성 4. aria-expanded="boolean" (조건필수)

트리뷰 항목에는 자식 트리뷰 목록이 있을 수 있습니다. 자식 트리뷰 목록이 있다면 aria-expanded로 확장/축소가 가능하다는 것을 스크린리더 사용자에게 상태로 알려야 합니다.

또한 앞에 확장/축소 마크를 두어 눈으로도 구분 가능해야 합니다.

예) aria-expanded="false"의 출력내용

<출력내용> : (OOO, collapsed, level 2, 1 of 4)

 

3. group (role="group")

하위 트리뷰 항목에 대한 목록 그룹을 형성하기 위해 컨테이너에 사용합니다.

 

 

트리뷰 사용자 상호작용 구현

1. 마우스 동작 구현

트리뷰는 마우스로 클릭하여 확장하고, 상호작용이 가능해야 합니다.

 

동작 1. 마우스 클릭으로 하위 목록 확장

마우스 클릭으로 하위 목록 확장이 가능해야 합니다.

windows의 UI에서는 텍스트 상자를 더블클릭하거나, 확장/축소 마크를 한 번 클릭하는 것이 기본입니다. 하지만 텍스트 상자를 한 번 클릭하여 확장할 수 있어도 무방합니다.

 

동작 2. 마우스로 항목 클릭 시 활성화 기능 구현

windows의 탐색기와 같이 누르면 디렉토리 파일을 타일형으로 보여주는 항목 보기 목록과 같은 패널이 변형되는 구조라면 트리 항목을 눌렀을 때 해당 항목에 맞게 패널을 바꿔줘야 합니다.

 

2. 키보드 탐색 동작 구현

트리뷰는 키보드로 접근했을 때, 키보드로 탐색할 수 있어야 하며, 하위 항목이 있는 트리 항목은 확장과 축소 동작을 수행할 수 있어야 합니다.

 

동작 3. 위 또는 아래 화살표 키로 목록 탐색 구현

트리뷰는 항목의 깊이 수준과 관계없이 현재 눈에 보이는 모든 항목을 위 또는 아래 화살표 키로 탐색할 수 있어야 합니다.

또한, 탐색 중인 트리 항목 객체가 아니라면 Tab으로 초점이 이동되어서는 안됩니다.

 

동작 4. Home과 End 키로 전체 트리뷰의 첫 번째 항목, 마지막 항목으로 탐색 포커스 이동 기능 구현

트리뷰는 Home 또는 End 키로 전체 트리뷰 항목의 첫 번째 항목과 마지막 항목으로 탐색 포커스를 보내주는 기능을 구현해 주어야 합니다.

 

동작 5. 상위 항목의 확장/축소 기능 구현

확장 가능한 트리 항목은 오른쪽 화살표 키로 확장할 수 있어야 하며, 왼쪽 화살표 키로 축소할 수 있어야 합니다. 이미 하위항목이 열려있다면 오른쪽 화살표 키로 첫번째 하위 항목이 탐색되어야 합니다.

 

동작 6. 마우스 클릭과 동등하게 Enter 키로 활성화 기능 구현

탐색 초점이 해당 트리 항목에 있을 때, Enter를 눌러 탐색기의 "항목 보기 목록"과 같이 패널 내용이 선택된 트리 항목에 맞게 바뀌는 동작을 구현해 주어야 합니다.

 

 

트리뷰 스타일링

1. 익숙한 형태로 스타일 제공

사용자가 한 눈에 알아볼 수 있도록 windows의 TreeView와 유사한 스타일을 적용해 주세요.

 

시각 디자인 1. 깊이 수준에 따른 목록 들여쓰기를 margin이나 padding으로 구현해 주세요.

트리뷰 항목은 가지가 나뉘면서 점점 깊이 들어가는 구조입니다. 이를 눈으로 알 수 있도록 들여쓰기 효과를 적용해주세요.

 

시각 디자인 2. 확장/축소 가능한 항목은 확장/축소 가능을 표시하는 삼각형 화살표를 트리항목 이름 왼쪽에 넣어주세요.

트리뷰 항목 이름 상자 왼쪽에는 삼각형 화살표가 있습니다. 축소된 트리뷰는 오른쪽을 가리키는 삼각형이나 화살표로 확장이 가능함을 시각적으로 안내해야 합니다.

확장된 트리 항목은 아래를 가리키는 화살표느 삼각형으로 아래 화살표 키로 하위 항목을 탐색할 수 있음을 시각적으로 안내해야 합니다.

 

시각 디자인 3. 트리뷰 항목의 키보드 초점 활성화 유무를 구분해 주어야 합니다.

트리뷰 항목에 초점이 없다면 마지막으로 탐색한 항목의 색상을 옅게 표시하고, 트리뷰 항목에 초점이 있다면 진하게 표시하여 현재 키보드 초점이 트리뷰에 있고, 키보드로 탐색할 수 있음을 인지할 수 있도록 해야 합니다.

 

 

지금까지 트리뷰를 만드는 방법에 대해 알아보았습니다. 트리뷰는 구현에 많은 작업을 요구하는 위젯입니다. 커스텀 위젯을 만드는 이유는 웹페이지의 스타일 테마와 최대한 비슷하게 만들어 웹페이지의 몰입감, 아름다움을 추구하기 위한 것임을 압니다.

 

Electron과 같은 프레임워크로 웹 엔진을 기반으로 하는 데스크탑용 애플리케이션을 제작할 때, 특히 문서 에디터와 같은 프로그램을 만들 때 사이드 바를 구현하거나, 특정 네트워크 드라이브에 대한 커스텀 파을 탐색기를 응용 프로그램으로 구현하는 등의 작업을 수행할 때 이렇게 트리뷰를 구현한다면 접근성이 좋은 응용 프로그램이 나올 것을 의심치 않습니다. 대표적으로 Microsoft에서 만든 Visual Studio Code를 예로 들 수 있습니다.

 

하지만 웹페이지 내에서는 되도록 간단한 파일의 업로드와 같은 작업을 수행할 때는 웹브라우저에서 제공하는 파일 업로드 UI를 불러와 사용할 수 있도록 하는 것이 가장 좋습니다. 커스텀보다는 네이티브 요소를 사용하는 것이 작업량을 줄이고 다양한 디바이스를 지원하는 방법임을 늘 강조해 드립니다.

 

https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/#tree1

Navigation Treeview Example

W3C에서 제공하는 WAI-ARIA widget의 예제 페이지인 Authoring Practices의 트리뷰 페이지입니다.

 

 

 

 

참고:)

https://nuli.navercorp.com/community/article/1133102

WAI-ARIA 바르게 사용하기 10부 - TreeView