개요(Overview)
트리뷰는 큰 목록에서 작은 항목으로 마치 나무처럼 한 줄기에서 여러 가지로 뻗어 나가는 것에서 유례된 이름으로 큰 범주의 목록부터 시작해서 계층이 높아질 수록 조금더 세분화된 항목을 볼 수 있는 형태의 목록 상자이다.
트리뷰는 Windows 운영체제에서 많이 볼 수 있으며, 파일 탐색기의 왼쪽에 있는 폴더 목록이 대표적이다.
트리뷰 구성 역할
- role="tree"
-
트리뷰 목록의 컨테이너입니다. ul의 역할과 같다고 보시면 됩니다. 선택된 하위 항목으로는 role="treeitem"을 가질 수 있습니다.
- role="treeitem"
-
트리뷰의 항목입니다. ul의 li와 같다고 보시면 됩니다.
트리뷰 항목은 하위 트리뷰를 가질 수 있으며, 키보드나 마우스로 선택하여 콘텐츠를 볼 수 있습니다.
트리뷰 항목에는 확장/축소 동작을 클릭 한 번으로 수행할 수 있고, 시각적으로 확장됨과 축소됨을 구분할 수 있는 확장/축소 마크 요소를 넣을 수 있습니다.
더블 클릭이 어려운 사용자가 있으므로 해당 마크를 단순한 아이콘이 아닌 확장/축소 동작을 지원하는 버튼으로 추가하는 것을 권장합니다.
- 패널 영역
-
트리뷰 목록을 선택하면 나타날 콘텐츠 영역을 정의할 수 있습니다. 따로 정해진 요소 유형은 없습니다.
트리뷰 구현을 위한 속성
트리 컨테이너 속성 ( role="tree" )- 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"을 사용하여 키보드 초점을 받지 않도록 해야합니다.
트리뷰 조작 구현
- 항목 탐색
-
위쪽 화살표 키이전 트리 항목 탐색
이전 트리 항목을 탐색합니다. 하위 트리 항목의 첫 번째 요소에 초점이 있다면 위쪽 화살표 키를 눌러 부모 트리 항목으로 이동할 수 있어야 합니다.
아래쪽 화살표 키다음 트리 항목 탐색다음 트리 항목을 탐색합니다. 하위 트리 항목의 첫 번째 요소에 초점이 있다면 아래쪽 화살표 키를 눌러 부모 트리 항목의 형재 항목으로 이동할 수 있어야 합니다.
Home 홈 키첫 번째 트리 항목으로 초점 이동트리뷰에서는 Home 키를 눌러 하위 항목을 포함한 전체 항목의 첫 번째 트리 항목으로 초점을 이동할 수 있어야 합니다. 없어도 지장은 없으나, 트리 항목이 너무 많다면 이 기능을 반드시 제공해야 합니다.
End 엔드 키마지막 트리 항목으로 초점 이동트리뷰에서는 End 키를 눌러 하위 항목을 포함한 전체 트리의 마지막 항목으로 초점을 이동할 수 있어야 합니다. 없어도 지장은 없으나, 트리 항목이 너무 많다면 이 기능을 반드시 제공해야 합니다.
마우스 왼쪽 버튼 클릭 트리 항목 탐색 및 선택
원하는 트리 항목을 선택합니다. 초점이 해당 트리 항목으로 이동됨과 동시에 해당 트리의 기능이 실행되어야 합니다.
- 트리 확장 또는 축소
-
왼쪽 화살표 키항목 축소 또는 벗어나기
현재 탐색중인 트리 항목이 하위 트리일 때, 탐색 중인 트리 항목의 순서와 상관없이 왼쪽 화살표 키를 눌러서 하위 목록으로부터 상위 항목으로 벗어날 수 있어야 합니다.
그리고 하위 항목이 확장된 트리 항목에서 왼쪽 화살표 키를 누르면 하위 항목이 축쇠되어야 합니다.
오른쪽 화살표 키항목 확장 또는 들어가기하위 트리 목록이 있으며, 확장되지 않은 상태라면 오른쪽 화살표 키를 눌러 목록을 확장할 수 있어야 합니다.
그리고, 하위 트리 목록이 확장된 상태라면, 오른쪽 화살표 키를 눌러 하위 목록 안의 첫 번째 항목으로 들어갈 수 있어야 합니다.
마우스 왼쪽 버튼 더블클릭마우스로 트리 항목의 텍스트 상자를 더블클릭하여 하위 항목 확장/축소 토글이 가능해야 합니다.
마우스 왼쪽 버튼 클릭또는 확장/축소 화살표 마크를 마우스 왼쪽 버튼으로 클릭하여 확장/축소 동작이 가능해야 합니다.