Aria expanded placement

Question

I am using aria-expanded in an attempt to make my tree list more accessible:

Consider the following:

<ul role="tree">
  <li role="tree-item">
     <a href="" aria-label="collapse section" aria-expanded="true"></a>
     <a href="link.html">Link</a>
     <ul role="group">
        <li role="tree-item">List item</li>
        <li role="tree-item">List item</li>
     </ul> 
  </li>
</ul>

Am I using aria-expanded in the correct place or should it be on the nested UL group?

Answer 1

aria-expanded should be on the control that opens the sub-tree, so the short answer is yes, it is in the right place assuming that the first anchor is the one that controls the opening.

However there are a few things to consider with the example given.

First of all you should never have a hyperlink that is empty. This should be a <button>.

"Buttons Do Things, Links point to URLs" is a great way to think of it, or "Buttons Do Things, Links go places".

Secondly from an ordering point of view your hyperlink "link.html" should be above the current hyperlink that I said to turn into a button. Otherwise the focus order is not logical so you might not pass WCAG 2.4.3.

Finally if you are using the first anchor (button) to expand and collapse the section you probably want to add aria-controls="idOfTheItem" to the button as well to ensure the relationship is correct (and add id="idOfTheItem" to the <ul> to correctly associate them).

Above all test it with a screen reader as there are certain behaviours expected of a tree view that may be more difficult as you aren't using a typical pattern for design (for example using arrow keys to navigate).

A typical pattern

Just so you are aware normally you would make the <li> itself open the sub tree. You might get some strange screen reader behaviour adding a button etc. into the tree-item as that is not quite expected.

You may be better building a custom widget here that has a list of links with buttons next to them to expand options / additional information.

Without seeing your use case it is very hard to tell.

If you go this route then you could utilise <details> and <summary> elements.

The following fiddle should give you an idea, notice how it all works without JavaScript (although you will need to polyfill it for IE as details / summary aren't supported in IE)

It would need some visually hidden text or aria-labels etc. to describe each of the <ul> if this is a complex tree but like I said just an idea for you to explore depending on your use case as the role="tree" doesn't seem to quite fit your pattern.

a{
   float: left;
   width: 100px;
}

<h3 id="descriptionID">An alternative</h3>
<ul aria-labelledby="descriptionID">
  <li>
     <a href="link.html">Link</a>
     <details>
        <summary>Open</summary>
        <ul>
            <li>List item</li>
            <li>List item</li>
        </ul>
     </details>
  </li>
   <li>
     <a href="link.html">Link</a>
     <details>
        <summary>Open</summary>
        <ul>
            <li>List item</li>
            <li>List item</li>
        </ul>
     </details>
  </li>
</ul>