WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible Tree Navigation?

for

From: Henry, Michael (IntelliDyne)
Date: Oct 26, 2018 8:31AM

Hello, all.

I hope this isn't too rudimentary of a question, but I've been trying to unravel how to properly use ARIA to make a left navigation (structured like tree navigation) accessible via keyboard.

The more I read, though, the more turned around I get. Seems like every article I read uses a slightly different approach or different ARIA attributes, and none of them describe the exactly situation (markup structure) that we have. Hopefully you guys can help?


Here's the basic structure of our navigation tree with my best current guess at appropriate use of ARIA:

<h2 ID="tree_label" class="visiblyHidden">Submenu for current section</h2>
<ul class="LV1" role="tree" aria-labelledby="tree_label">
<li class="hasChildren">
<div role="treeitem" aria-selected="true | false" aria-expanded="true | false" tabindex="0 | -1" >
<span class="icon" role="button" onclick=""></span> [clicking here toggles the submenu open/closed]
<a href="/Plans/Eligibility">Eligibility</a>
</div>
<ul role="group" class="LV2" >Â…</ul>
</li>
</ul>

I'm afraid I'm so confused on this that I don't know exactly what to ask. But I think what I need to know is:
1) should the <li> or the <div> have the role of "treeitem"?
2) should the <li> or the <div> have the ARIA attributes?
3) should all elements that we intend to make focusable (including the <span.icon>, which expands/collapses the child <ul>) receive tabindex=-1 (making them part of the Roving Tabindex)?
4) should it be the first Root Node ("Eligibility" in this example) that should have tabindex=0 on page load?
5) where is the appropriate place for the "aria-selected" attribute?
6) where is the appropriate place for the "aria-expanded" attribute?

Thank you so much for any help.
Mike


---
Mike S. Henry
Creative Services Lead
IntelliDyne Contract Employee
Supporting Enterprise Infrastructure (formerly Military Health System Cyberinfrastructure Services - MCiS)
Desk: (703) 882-3962