개요(Overview)

트리뷰는 큰 목록에서 작은 항목으로 마치 나무처럼 한 줄기에서 여러 가지로 뻗어 나가는 것에서 유례된 이름으로 큰 범주의 목록부터 시작해서 계층이 높아질 수록 조금더 세분화된 항목을 볼 수 있는 형태의 목록 상자이다.

트리뷰는 Windows 운영체제에서 많이 볼 수 있으며, 파일 탐색기의 왼쪽에 있는 폴더 목록이 대표적이다.

트리뷰 구성 역할

role="tree"

트리뷰 목록의 컨테이너입니다. ul의 역할과 같다고 보시면 됩니다. 선택된 하위 항목으로는 role="treeitem"을 가질 수 있습니다.

role="treeitem"

트리뷰의 항목입니다. ul의 li와 같다고 보시면 됩니다.

트리뷰 항목은 하위 트리뷰를 가질 수 있으며, 키보드나 마우스로 선택하여 콘텐츠를 볼 수 있습니다.

트리뷰 항목에는 확장/축소 동작을 클릭 한 번으로 수행할 수 있고, 시각적으로 확장됨과 축소됨을 구분할 수 있는 확장/축소 마크 요소를 넣을 수 있습니다.

더블 클릭이 어려운 사용자가 있으므로 해당 마크를 단순한 아이콘이 아닌 확장/축소 동작을 지원하는 버튼으로 추가하는 것을 권장합니다.

패널 영역

트리뷰 목록을 선택하면 나타날 콘텐츠 영역을 정의할 수 있습니다. 따로 정해진 요소 유형은 없습니다.

트리뷰 구현을 위한 속성

aria-label="String(treeview name)"

트리뷰 컨테이너에는 트리뷰에 담긴 콘텐츠를 예측할 수 있는 사용자 친화적인 텍스트를 aria-label로 제공하는 것이 좋습니다.

aria-expanded="boolean"

(하위 항목이 있을 경우) 트리 항목은 aria-expanded 속성을 사용하여 하위 항목의 확장 및 축소를 스크린리더로 안내할 수 있습니다.

aria-level="int"

트리 항목에는 DOM 계층에 맞게 aria-level에 정수값을 주어 몇 단계 트리 항목인지 명시해야 합니다.

tabindex="0"

키보드로 탐색했던 마지막 위치, 마지막으로 클릭한 트리 항목은 tabindex="0"로 초점을 주어 트리뷰에 초점을 보낼 수 있도록 해야합니다.

tabindex="-1"

반대로, 마지막으로 탐색한 항목이 아닌 항목들은 모두 tabindex="-1"을 사용하여 키보드 초점을 받지 않도록 해야합니다.

트리뷰 조작 구현

항목 탐색

keyboard_arrow_up 위쪽 화살표 키

이전 트리 항목 탐색

이전 트리 항목을 탐색합니다. 하위 트리 항목의 첫 번째 요소에 초점이 있다면 위쪽 화살표 키를 눌러 부모 트리 항목으로 이동할 수 있어야 합니다.

keyboard_arrow_down 아래쪽 화살표 키

다음 트리 항목 탐색

다음 트리 항목을 탐색합니다. 하위 트리 항목의 첫 번째 요소에 초점이 있다면 아래쪽 화살표 키를 눌러 부모 트리 항목의 형재 항목으로 이동할 수 있어야 합니다.

Home 홈 키

첫 번째 트리 항목으로 초점 이동

트리뷰에서는 Home 키를 눌러 하위 항목을 포함한 전체 항목의 첫 번째 트리 항목으로 초점을 이동할 수 있어야 합니다. 없어도 지장은 없으나, 트리 항목이 너무 많다면 이 기능을 반드시 제공해야 합니다.

End 엔드 키

마지막 트리 항목으로 초점 이동

트리뷰에서는 End 키를 눌러 하위 항목을 포함한 전체 트리의 마지막 항목으로 초점을 이동할 수 있어야 합니다. 없어도 지장은 없으나, 트리 항목이 너무 많다면 이 기능을 반드시 제공해야 합니다.

마우스 왼쪽 버튼 클릭 mouse 트리 항목 탐색 및 선택

원하는 트리 항목을 선택합니다. 초점이 해당 트리 항목으로 이동됨과 동시에 해당 트리의 기능이 실행되어야 합니다.

트리 확장 또는 축소

keyboard_arrow_left 왼쪽 화살표 키

항목 축소 또는 벗어나기

현재 탐색중인 트리 항목이 하위 트리일 때, 탐색 중인 트리 항목의 순서와 상관없이 왼쪽 화살표 키를 눌러서 하위 목록으로부터 상위 항목으로 벗어날 수 있어야 합니다.

그리고 하위 항목이 확장된 트리 항목에서 왼쪽 화살표 키를 누르면 하위 항목이 축쇠되어야 합니다.

keyboard_arrow_right 오른쪽 화살표 키

항목 확장 또는 들어가기

하위 트리 목록이 있으며, 확장되지 않은 상태라면 오른쪽 화살표 키를 눌러 목록을 확장할 수 있어야 합니다.

그리고, 하위 트리 목록이 확장된 상태라면, 오른쪽 화살표 키를 눌러 하위 목록 안의 첫 번째 항목으로 들어갈 수 있어야 합니다.

마우스 왼쪽 버튼 더블클릭mousex2

마우스로 트리 항목의 텍스트 상자를 더블클릭하여 하위 항목 확장/축소 토글이 가능해야 합니다.

마우스 왼쪽 버튼 클릭mouse

또는 확장/축소 화살표 마크를 마우스 왼쪽 버튼으로 클릭하여 확장/축소 동작이 가능해야 합니다.