WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Tree Navigation?


From: Jonathan Avila
Date: Oct 26, 2018 4:10PM

We also have a blog post on creating accessible tree controls with a codepen example


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: Friday, October 26, 2018 5:03 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible Tree Navigation?

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.

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.