Home / Menu & Accordion / a11yTree - Expanding and collapsing tree
a11yTree - Expanding and collapsing tree

a11yTree - Expanding and collapsing tree

Download Demo
  • Overview
  • Documents
User Rating: 0/5 ( 0 votes)
Your Rating:

a11yTree is a very lightweight and uninvasive jQuery plugin that transforms an HTML tree of nested unorded lists into an expanding and collapsing tree that's universally accessible.


a11yTree was built with universal web accessibility in mind. So, not only does it provide the typical mouse navigation via toggles, it also adds keyboard navigation, and additional semantics to the markup using WAI-ARIA roles and attributes.


The tree toggle controls are identifed with the class .at-toggle and are intended to be styled as expand  and collapse  controls. Handlers listening to the click event are attached to these elements.


The tree can be navigated via the keyboard as described below. This navigation is inspired by the example on the Using ARIA Trees WAI wiki page.

 down: navigates down to the next expanded tree node
 up: navigates up to the previous expanded tree node
 right: expands the tree node in focus if it's collapsed and has children, or navigates to the first child node of an expanded parent
 left: collapses the tree node in focus if it's expanded, or navigates to the parent node
enter: expands/collapses the current tree node in focus if it has children
home: navigates to the first node in the parent tree
end: navigates to the last expanded node in the tree


The following ARIA roles and attributes add even more semantic meaning to the HTML markup which is utilized by assistive technologies, and can be used as CSS selectors as opposed to classes that don't have meaning outside of the context of your markup.

tree and group: roles that identify the parent tree ul and the child ul elements
treeitem: role that identifies each li as an item in the tree
aria-level: attribute applied to each li element to identify which nesting level it belongs to
aria-expanded: attribute applied to each li element that has children—this is set to true when the child list is expanded
aria-selected: attribute applied to each li element and set to true when the item is navigated to—only one item in the entire tree can be identified as selected at once
aria-activedescendant: attribute applied to parent tree ul element and set to the id of the li element currently identified as selected
aria-labelledby: attribute applied to each ul element and set to the id of the text/label container of the list

Source: longmatthewh.github.io

Scroll To Top