aria-selected indicates the currently selected node.aria-expanded indicates a node's expanded or collapsed state.role='group' marks a set of child nodes.role='treeitem' identifies each node in the tree.role='tree' identifies the tree container.ARIA Tree View Roles and Propertiesīasic tree views use the following ARIA attributes: Fortunately, ARIA provides a number of roles and properties that can be used to accomplish this. While they are very common, tree views are not the simplest of interactive widgets, and ensuring they are accessible to screen readers users means providing good keyboard and focus support, as well as relaying information about the structure and state of the tree. It is also used in web applications that include file or document management functionality. It's available in some form or another for viewing and navigating the folder and file hierarchies in major operating systems. This type of navigational component should be familiar. Any number of nodes can be expanded at a time and child nodes may contain children. There is generally some sort of visual indication whether a node has children and can be expanded. When collapsed the children are not visible. Nodes with children can be expanded or collapsed - when expanded its child nodes are visible. A node may have children or it may be an end node. It is made up of one or more top level nodes. What's a Tree View?įrom the WAI-ARIA 1.0 Authoring Practices:Ī tree view is a component to navigate hierarchical lists. That is to say, feel free to repurpose it to your own end, but your mileage may vary. The example tree views and test results come after, should you be interested.Īlso note that I'm not a real JavaScript or jQuery developer by any stretch, so while the scripting behind the tree view examples does work, its construction is certainly kinda naff. I have, however, drawn on the test results to develop an approach that I think provides the best support for current screen reader and browser combinations, albeit with some compromises. I found no single way to build a simple tree view that provides what I'd call a fully decent experience in current, popular screen readers. It also turns out that there's significant variability across screen readers in how they handle different ARIA tree views. It turns out there's a bit going on with screen readers and tree views, so the research got a little lengthy. I started testing a number of screen readers with different ARIA tree views.

Does nvda screen reader work with a mac