File Directory Treeview Example Using Computed Properties

Important Note About Use of This Example

Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

The below example implements the Treeview Design Pattern to simulate a file selector. When users activate an item that represents a file name in the below tree, the name of the selected file appears in the read-only edit field next to the tree.

This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level. The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute their values. So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared. If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a File Directory Treeview using declared properties.

Similar examples include:

Example

File Viewer

Accessibility Features

To make the focus indicator easier to see, nodes in the tree have a custom focus and hover styling created using CSS focus and hover pseudo-classes.

Terms Used to Describe Trees

A tree item that can be expanded to reveal child items is called a parent node. It is a closed node when the children are hidden and an open node when it is expanded. An end node does not have any children. For a complete list of terms and definitions, see the Treeview Design Pattern.

Keyboard Support

Key Function
Enter
or Space
  • Performs the default action (e.g. onclick event) for the focused node.
  • In this example, the default action is to update the File or Folder Selected textbox.
Down arrow
  • Moves focus to the next node that is focusable without opening or closing a node.
  • If focus is on the last node, does nothing.
Up arrow
  • Moves focus to the previous node that is focusable without opening or closing a node.
  • If focus is on the first node, does nothing.
Right Arrow
  • When focus is on a closed node, opens the node; focus does not move.
  • When focus is on a open node, moves focus to the first child node.
  • When focus is on an end node, does nothing.
Left Arrow
  • When focus is on an open node, closes the node.
  • When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
  • When focus is on a root node that is also either an end node or a closed node, does nothing.
Home Moves focus to first node without opening or closing a node.
End Moves focus to the last node that can be focused without expanding any nodes that are closed.
a-z, A-Z
  • Focus moves to the next node with a name that starts with the typed character.
  • Search wraps to first node if a matching name is not found among the nodes that follow the focused node.
  • Search ignores nodes that are descendants of closed nodes.
* (asterisk)
  • Expands all closed sibling nodes that are at the same level as the focused node.
  • Focus does not move.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
tree ul
  • Identifies the ul element as a tree widget.
  • Because focus movement in the tree is managed with a roving tabindex, the tree container does not need a tabindex attribute.
aria-labelledby="IDREF" ul Refers to the heading element that contains the label that identifies the purpose of the tree.
treeitem li Identifies the element as a treeitem.
tabindex="-1" li
  • Makes the treeitem element focusable without including it in the tab sequence of the page.
  • All treeitem elements are focusable, but only one is included in the tab sequence.
tabindex="0" li
  • Includes the treeitem element in the tab sequence.
  • Only one treeitem in the tree has tabindex="0".
  • In this implementation, the first treeitem in the tree is included in the tab sequence when the page loads.
  • When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus as described in the section on roving tabindex.
aria-expanded="false" li
  • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
  • Indicates the parent node is closed, i.e., the descendant elements are not visible.
  • The visual indication of the collapsed state is synchronized by a CSS attribute selector.
aria-expanded="true" li
  • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
  • Indicates the parent node is open, i.e., the descendant elements are visible.
  • The visual indication of the expanded state is synchronized by a CSS attribute selector.
group ul
  • Identifies the ul element as a container of treeitem elements that form a branch of the tree.
  • The group is contained in the element that serves as the parent treeitem.
  • Browsers use the grouping to compute aria-level, aria-setsize and aria-posinset values for the nodes contained in the branch.

Javascript and CSS Source Code

HTML Source Code

<h3 id="tree_label">
  File Viewer
</h3>
<ul role="tree" aria-labelledby="tree_label">
  <li role="treeitem" aria-expanded="false">
    <span>
      Projects
    </span>
    <ul role="group">
      <li role="treeitem" class="doc">
        project-1.docx
      </li>
      <li role="treeitem" class="doc">
        project-2.docx
      </li>
      <li role="treeitem" aria-expanded="false">
        <span>
          Project 3
        </span>
        <ul role="group">
          <li role="treeitem" class="doc">
            project-3A.docx
          </li>
          <li role="treeitem" class="doc">
            project-3B.docx
          </li>
          <li role="treeitem" class="doc">
            project-3C.docx
          </li>
        </ul>
      </li>
      <li role="treeitem" class="doc">
        project-4.docx
      </li>
      <li role="treeitem" aria-expanded="false">
        <span>
          Project 5
        </span>
        <ul role="group">
          <li role="treeitem" class="doc">
            project-5A.docx
          </li>
          <li role="treeitem" class="doc">
            project-5B.docx
          </li>
          <li role="treeitem" class="doc">
            project-5C.docx
          </li>
          <li role="treeitem" class="doc">
            project-5D.docx
          </li>
          <li role="treeitem" class="doc">
            project-5E.docx
          </li>
          <li role="treeitem" class="doc">
            project-5F.docx
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" aria-expanded="false">
    <span>
      Reports
    </span>
    <ul role="group">
      <li role="treeitem" aria-expanded="false">
        <span>
          report-1
        </span>
        <ul role="group">
          <li role="treeitem" class="doc">
            report-1A.docx
          </li>
          <li role="treeitem" class="doc">
            report-1B.docx
          </li>
          <li role="treeitem" class="doc">
            report-1C.docx
          </li>
        </ul>
      </li>
      <li role="treeitem" aria-expanded="false">
        <span>
          report-2
        </span>
        <ul role="group">
          <li role="treeitem" class="doc">
            report-2A.docx
          </li>
          <li role="treeitem" class="doc">
            report-2B.docx
          </li>
          <li role="treeitem" class="doc">
            report-2C.docx
          </li>
          <li role="treeitem" class="doc">
            report-2D.docx
          </li>
        </ul>
      </li>
      <li role="treeitem" aria-expanded="false">
        <span>
          report-3
        </span>
        <ul role="group">
          <li role="treeitem" class="doc">
            report-3A.docx
          </li>
          <li role="treeitem" class="doc">
            report-3B.docx
          </li>
          <li role="treeitem" class="doc">
            report-3C.docx
          </li>
          <li role="treeitem" class="doc">
            report-3D.docx
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" aria-expanded="false">
    <span>
      Letters
    </span>
    <ul role="group">
      <li role="treeitem" aria-expanded="false">
        <span>
          letter-1
        </span>
        <ul>
          <li role="treeitem" class="doc">
            letter-1A.docx
          </li>
          <li role="treeitem" class="doc">
            letter-1B.docx
          </li>
          <li role="treeitem" class="doc">
            letter-1C.docx
          </li>
        </ul>
      </li>
      <li role="treeitem" aria-expanded="false">
        <span>
          letter-2
        </span>
        <ul role="group">
          <li role="treeitem" class="doc">
            letter-2A.docx
          </li>
          <li role="treeitem" class="doc">
            letter-2B.docx
          </li>
          <li role="treeitem" class="doc">
            letter-2C.docx
          </li>
          <li role="treeitem" class="doc">
            letter-2D.docx
          </li>
        </ul>
      </li>
      <li role="treeitem" aria-expanded="false">
        <span>
          letter-3
        </span>
        <ul role="group">
          <li role="treeitem" class="doc">
            letter-3A.docx
          </li>
          <li role="treeitem" class="doc">
            letter-3B.docx
          </li>
          <li role="treeitem" class="doc">
            letter-3C.docx
          </li>
          <li role="treeitem" class="doc">
            letter-3D.docx
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<p>
  <label>
    File or Folder Selected:
    <input id="last_action"
           type="text"
           size="15"
           readonly="">
  </label>
</p>