Graphical ARIA Tree View

An ARIA (Accessible Rich Internet Applications) Tree View. Despite being written for accessibility it does not lack if features or looks, in what is a very complex widget. There is an XHTML example and it can be downloaded for your own use.

How to use: keyboard works as in normal tree view. Use arrow keys to move, including left/right to collapse/expand. Double clicking with mouse also toggles expansion. Type characters to find a tree item that begins with those characters. Repeat characters to cycle through all items that begin with that character. You can also tab to the top level elements. For the mouse clicking the twisties and double clicking one any part of the tree item toggles it.

Modifying: The tree is completely styled with CSS, so it is very easy to modify. To limit the width of the tree add class="treewrapper" to it, and set the width the the CASS. This class is check for and the scripting makes sure it still displays right.

This true does not need to be sent as XHTML, as nothing is put in the HTML that is not "normal". The JavaScript applies the usability information and XHTML enabled browsers can then use that.