ARIA: vai trò tree

Mô tả

Widget tree là một danh sách phân cấp với các nút cha và con có thể mở rộng và thu gọn. Bất kỳ mục nào trong thứ bậc cũng có thể có các tree item con, được đặt bằng role="treeitem". Các tree item có con có thể được mở rộng hoặc thu gọn, hiển thị và ẩn các con của chúng.

Một ví dụ về tree là giao diện người dùng chọn hệ thống tệp: dạng cây hiển thị thư mục và tệp. Các mục thư mục có thể mở rộng để lộ nội dung của thư mục - có thể là tệp, thư mục, hoặc cả hai - và thu gọn để ẩn nội dung đó.

Các tree view ARIA chủ yếu được điều hướng bằng các phím mũi tên trên bàn phím thay vì phím Tab. Kiểu điều hướng này không phổ biến với hầu hết nội dung web, mặc dù là bình thường và quen thuộc trong ứng dụng gốc. Vì lý do này, trước khi tạo tree view, hãy cân nhắc các tùy chọn thay thế để đáp ứng chức năng bạn cần.

Cây chọn một và nhiều mục

Cây có thể là "single-select", cho phép người dùng chỉ chọn một mục cho một hành động, hoặc "multi-select", nơi người dùng có thể chọn nhiều hơn một mục cho một hành động. Trong cây multi-select, tree có aria-multiselectable đặt thành true. Nếu không, aria-multiselectable hoặc được đặt thành false hoặc giá trị mặc định false được ngầm hiểu. Trong cả hai trường hợp, để có thể truy cập bằng bàn phím, focus phải được quản lý cho tất cả phần tử con của tree.

Trong một số triển khai cây single-select, mục đang được focus cũng có trạng thái được chọn; điều này được gọi là "selection follows focus". Khi một cây single-select nhận focus, nếu chưa có tree item nào được chọn trước khi cây nhận focus, focus được đặt vào nút đầu tiên. Nếu một tree item đã được chọn trước khi cây nhận focus, focus được đặt vào tree item đã chọn. Trong cây single-select, aria-selected được đặt thành true cho các tree item đã chọn và không xuất hiện trên bất kỳ tree item nào khác trong cây.

Trong cây multi-select, tất cả tree item đã chọn đều có aria-selected="true" và tất cả các node tree item có thể chọn nhưng hiện chưa được chọn đều có aria-selected="false". Không thêm thuộc tính aria-selected vào các tree item không thể chọn.

Khi một cây multi-select nhận focus, nếu chưa có tree item nào được chọn trước khi cây nhận focus, focus được đặt vào tree item đầu tiên. Nếu có một hoặc nhiều tree item đã được chọn trước khi cây nhận focus, focus được đặt vào node đã chọn đầu tiên.

Trong cây multi-select, trạng thái đã chọn luôn độc lập với focus. Ví dụ, trong một trình điều hướng hệ thống tệp thông thường, người dùng có thể di chuyển focus để chọn bất kỳ số lượng tệp nào cho một hành động như sao chép hoặc di chuyển. Thiết kế trực quan nên làm rõ mục nào được chọn và mục nào đang có focus.

Cấu trúc thứ bậc của tree

Trong tree view, node tree là node gốc; nó có thể có các node treeitem con, cháu, và hậu duệ sâu hơn.

Mỗi phần tử đóng vai trò là một node tree có vai trò treeitem, ngoại trừ node tree gốc có vai trò tree. Một tree không có node tree cha - nó là node gốc. Nếu một node vừa được lồng trong tree vừa có các tree item hậu duệ, thì nó có vai trò treeitem và thuộc tính aria-expanded; aria-expanded="false" được đặt khi node ở trạng thái đóng, aria-expanded="true" được đặt khi node ở trạng thái mở.

Các node treeitem có thể là con trực tiếp của node tree gốc, được lồng trong node treeitem, hoặc tùy chọn lồng trong một phần tử group, khi được lồng trong một tree thì đó là một tập hợp treeitem có thể mở rộng.

Không thêm aria-expanded vào các node cuối - những node không có con tree item - vì như vậy sẽ mô tả sai node đó như một node cha đối với công nghệ hỗ trợ.

Vị trí và sự hiện diện trong DOM

Tất cả treeitem đều được chứa trong hoặc được sở hữu bởi một phần tử mang vai trò tree. Nếu có tree item nào không phải là hậu duệ trực tiếp của tree trong đánh dấu, hãy bao gồm aria-owns trên vùng chứa tree sở hữu để bao gồm các phần tử không phải con DOM của vùng chứa. Các phần tử được sở hữu không phải con này sẽ xuất hiện trong thứ tự đọc theo trình tự mà chúng được tham chiếu và sau mọi tree item là con DOM. Các script quản lý focus cần đảm bảo thứ tự focus trực quan khớp với thứ tự đọc của công nghệ hỗ trợ này.

Nếu tập đầy đủ các node có sẵn không có trong DOM do tải động khi người dùng di chuyển focus trong hoặc cuộn cây, mỗi node có aria-level, aria-setsize, và aria-posinset được chỉ định.

Tên truy cập được

tree phải được cung cấp một tên truy cập được. Hoặc tham chiếu tới một nhãn hiển thị bằng aria-labelledby, hoặc chỉ định một nhãn bằng aria-label.

Hướng menu

Các phần tử mang vai trò tree có giá trị aria-orientation ngầm định là vertical. Nếu phần tử tree được định hướng ngang, hãy bao gồm aria-orientation="horizontal".

Các vai trò, trạng thái và thuộc tính WAI-ARIA liên quan

role="treeitem"

Một mục trong tree.

role="group"

Một tập hợp có thể mở rộng của các tree item.

aria-labelledby

Xác định phần tử (hoặc các phần tử) gắn nhãn cho tree, cung cấp tên truy cập được bắt buộc khi có nhãn hiển thị. Nếu không, dùng aria-label.

aria-label

Xác định một giá trị chuỗi gắn nhãn cho tree khi không có nhãn hiển thị.

aria-orientation

cho biết hướng của tree là ngang hay dọc; mặc định là vertical nếu bỏ qua.

aria-multiselectable

Khi đặt thành true, cho biết người dùng có thể chọn hơn một tree item từ các hậu duệ có thể chọn hiện tại của tree.

Tương tác bàn phím

Đối với một tree có định hướng dọc, là hướng mặc định:

* Type-ahead được khuyến nghị cho mọi cây, đặc biệt là các cây có hơn 7 node gốc

Tương tác bàn phím cho multi-select

Có hai mô hình tương tác cho cây multi-select: Mặc dù bạn có thể yêu cầu người dùng nhấn một phím bổ trợ, như Shift hoặc Control khi điều hướng danh sách để tránh mất trạng thái chọn, nhưng mô hình không yêu cầu người dùng giữ phím bổ trợ được khuyến nghị.

Mô hình multi user select được khuyến nghị

Mô hình chọn nhiều thay thế

Mô hình chọn nhiều thay thế là mô hình phím bổ trợ trong đó việc di chuyển focus mà không giữ phím bổ trợ như Shift hoặc Control sẽ bỏ chọn tất cả node đã chọn ngoại trừ node đang có focus:

Thông số kỹ thuật