msdn
Developing Accessible Web Applications Tree Control Sample

Demo

Features Summary

Usage

Both the collapsed and expanded trees are navigated with the Tab and Shift+Tab keys. Press the Enter key on main menu items to open and close submenus, and press the Enter key on submenus to select a submenu item. A message appears below the submenus indicating the item was selected.

All items can be navigated and selected with the mouse.

Sample Code

HTML

The HTML for the tree is a set of nested list elements. Be aware that the ToggleTree() event-handler is bound to the outer a href element, and that initially the "+" alt attribute is applied to the images. For text-based browsers, the a href link contains the img element alt information, indicating whether the list item is collapsible (alt="-") or expandable (alt="+").

The WAI-ARIA "tree" role is applied to the top-level, ul element, and the "treeitem" roles are applied to all the a href node elements in the tree. For the child ul elements with hideable tree node groups, a role of "group" is assigned.

The "presentation" role is applied to the inner li elements so that assistive technology user agents ignore the semantic information of these elements and go straight to the child a href elements with "treeitem" roles. This preserves the relationship among the "treeitem" elements, which otherwise are not siblings, strictly speaking, because each is under a separate li element.

The aria-expanded states are set to "false" initially because the tree nodes are hidden, and they are switched between "false" and "true" with JavaScript, as the elements' display properties change from "none" (hidden) to "block" (visible).

The a anchor links are used to provide backward compatibility with browsers that don't understand ARIA, and because it is simpler to manage focus with the browser's built-in management capability and quicker than writing script to manage focus, for browsers with ARIA capabilities.

<div id="treeBox">
<ul id="tree" role="tree" onkeydown="OnTreeKeydown(event);" onclick="ToggleTree(event);" >
  <li><a role="treeitem" aria-expanded="false" href="Documents.htm"><img height="9" width="9"
    src="img/tree-p.png" alt="+" />Documents</a>
    <ul role="group">
      <li role="presentation"><a role="treeitem" href="File1.htm">File 1</a></li>
      <li role="presentation"><a role="treeitem" href="File2.htm">File 2</a></li>
      <li role="presentation"><a role="treeitem" href="File3.htm">File 3</a></li>
    </ul>
  </li>
  <li><a role="treeitem" aria-expanded="false" href="Photos.htm"><img height="9" width="9"
    src="img/tree-p.png" alt="+" />Photos</a>
    <ul role="group">
      <li role="presentation"><a role="treeitem" href="Image1.htm">Image 1</a></li>
      <li role="presentation"><a role="treeitem" href="Image2.htm">Image 2</a></li>
      <li role="presentation"><a role="treeitem" href="Image3.htm">Image 3</a></li>
    </ul>
  </li>
  <li><a role="treeitem" aria-expanded="false" href="Music.htm"><img height="9" width="9"
    src="img/tree-p.png" alt="+" />Music</a>
    <ul role="group">
      <li role="presentation"><a role="treeitem" href="Song1.htm">Song 1</a></li>
      <li role="presentation"><a role="treeitem" href="Song2.htm">Song 2</a></li>
      <li role="presentation"><a role="treeitem" href="Song3.htm">Song 3</a></li>
    </ul>
  </li>
</ul>
</div>

Script

The ToggleTree() function cancels the default page transfer action for the a href by calling evt.preventDefault(), and then finds the list item's child list element. The display of that child list element is toggled, and the list item's image, aria-expanded, and alt are swapped.

function ToggleTree(evt,src)
{
  HarmonizeEvent(evt);
  evt.preventDefault();
  var node = src.parentNode.getElementsByTagName("UL")[0];
  if (node)
  {
    var img = src.getElementsByTagName("img")[0];
    if ("block" == node.style.display)
    {
      src.setAttribute("aria-expanded", false);
      node.style.display = "none";
      if (img)
      {
        img.src = "p.png";
        img.alt = "+";
      }
    }
    else
    {
      src.setAttribute("aria-expanded", true);
      node.style.display = "block";
      if (img)
      {
        img.src = "m.png";
        img.alt = "-";
      }
    }
  }
}

CSS

The CSS for the tree is fairly simple. Margins, padding and list bullets are turned off, and child list elements are hidden.

div#treeBox {
  width: 15em;
  font-size: 90%;
}
ul#tree, ul#tree ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: window;
  color: windowtext;
}
ul#tree a {
  color: black;
  text-decoration: none;
  display: block;
  display: inline-block;
  height: 1.5em;
  padding: 0.1em 1em 0.3em 0.5em;
}
ul#tree a:hover {
  text-decoration: underline;
}
ul#tree a:focus {
  color: highlighttext;
  background-color: highlight;
}
ul#tree a img {
  border: 0;
  vertical-align: baseline;
  margin-right: 0.5em;
}
ul#tree ul {
  display: none;
  margin-left: 2em;
}

 


© 2011 Microsoft Corporation. All rights reserved. Terms of use.