WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Tree Navigation?

for

From: glen walker
Date: Oct 26, 2018 3:03PM

Going back to Mike's original question on the location of the ARIA
properties for a tree, you started off correctly by specifying role="tree"
on the <ul>, but once you change the semantics of a list, you also have to
change the semantics of all the list children (<li>), otherwise you'll have
invalid HTML with <li> items without a parenting <ul> item. So your
role="treeitem" should be on the <li> elements and not the <div> under the
<li>.

Since it's the treeitem itself (<li>) that will be expanded, the
aria-expanded should also be set on the <li>.

Same with aria-selected, set it on the <li>/treeitem.

As Birkir mentioned, the authoring practice has a decent example of a tree.
https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-1/treeview-1a.html

The example is not being used for navigation so it's not going to use
aria-selected to indicate the currently selected node. But in your case,
if the navigation tree is always shown and you have a visual indicator on
the tree as to what page is selected, then you'd want aria-selected.

Glen