Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML><!-- HTML 5 -->
<html lang="en">
<head>
<title>ARIA Tree Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./css/treebox.css" type="text/css">
<script src="./js/prototype.js"></script>
<script src="./js/aria.js"></script>
<script src="./js/init.js"></script>
</head>
<body>
<h1>Directions</h1>
<ol>
<li>Tab into the tree control.</li>
<li>Use the up/down arrow keys to change the active descendant.</li>
<li>Use the right/left arrow keys to expand/collapse appropriate nodes.</li>
</ol>
<p>Some <a href="javascript:$('tree0').focus();">focusable</a> content before the ARIA application.</p>
<div role="application">
<h1 id="treelabel">ARIA Tree Example</h1>
<ul id="tree0" role="tree" aria-labelledby="treelabel" aria-activedescendant="tree0_item0_2_0_1" tabindex="0">
<!-- all the ids and aria-* attributes are hardcoded here for sake of example (final version will use javascript to assign ids as needed) -->
<li id="tree0_item0" role="treeitem" aria-level="1" aria-expanded="true">
<!-- .expander becomes the javascript trigger for expand/collapse -->
<span>
<span class="expander"></span>
Animals
</span>
<ul role="group">
<li id="tree0_item0_0" role="treeitem" aria-level="2"><span>Birds</span></li>
<li id="tree0_item0_1" role="treeitem" aria-level="2" aria-expanded="false">
<span>
<span class="expander"></span>
Cats
</span>
<ul role="group">
<li id="tree0_item0_1_0" role="treeitem" aria-level="3"><span>Siamese</span></li>
<li id="tree0_item0_1_1" role="treeitem" aria-level="3"><span>Tabby</span></li>
</ul>
</li>
<li id="tree0_item0_2" role="treeitem" aria-level="2" aria-expanded="true">
<span>
<span class="expander"></span>
Dogs
</span>
<ul role="group">
<li id="tree0_item0_2_0" role="treeitem" aria-level="3" aria-expanded="true">
<span>
<span class="expander"></span>
Small Breeds
</span>
<ul role="group">
<li id="tree0_item0_2_0_0" role="treeitem" aria-level="4"><span>Chihuahua</span></li>
<li id="tree0_item0_2_0_1" role="treeitem" aria-level="4"><span>Italian Greyhound</span></li>
<li id="tree0_item0_2_0_2" role="treeitem" aria-level="4"><span>Japanese Chin</span></li>
</ul>
</li>
<li id="tree0_item0_2_1" role="treeitem" aria-level="3" aria-expanded="false">
<span>
<span class="expander"></span>
Medium Breeds
</span>
<ul role="group">
<li id="tree0_item0_2_1_0" role="treeitem" aria-level="4"><span>Beagle</span></li>
<li id="tree0_item0_2_1_1" role="treeitem" aria-level="4"><span>Cocker Spaniel</span></li>
<li id="tree0_item0_2_1_2" role="treeitem" aria-level="4"><span>Pit Bull</span></li>
</ul>
</li>
<li id="tree0_item0_2_2" role="treeitem" aria-level="3" aria-expanded="false">
<span>
<span class="expander"></span>
Large Breeds
</span>
<ul role="group">
<li id="tree0_item0_2_2_0" role="treeitem" aria-level="4"><span>Afghan</span></li>
<li id="tree0_item0_2_2_1" role="treeitem" aria-level="4"><span>Great Dane</span></li>
<li id="tree0_item0_2_2_2" role="treeitem" aria-level="4"><span>Mastiff</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="tree0_item1" role="treeitem" aria-level="1" aria-expanded="true">
<span>
<span class="expander"></span>
Minerals
</span>
<ul role="group">
<li id="tree0_item1_0" role="treeitem" aria-level="2"><span>Zinc</span></li>
<li id="tree0_item1_1" role="treeitem" aria-level="2" aria-expanded="false">
<span>
<span class="expander"></span>
Gold
</span>
<ul role="group">
<li id="tree0_item1_1_0" role="treeitem" aria-level="3"><span>Yellow Gold</span></li>
<li id="tree0_item1_1_1" role="treeitem" aria-level="3"><span>White Gold</span></li>
</ul>
</li>
<li id="tree0_item1_2" role="treeitem" aria-level="2"><span>Silver</span></li>
</ul>
</li>
<li id="tree0_item2" role="treeitem" aria-level="1" aria-expanded="true">
<span>
<span class="expander"></span>
Vegetables
</span>
<ul role="group">
<li id="tree0_item2_0" role="treeitem" aria-level="2"><span>Carrot</span></li>
<li id="tree0_item2_1" role="treeitem" aria-level="2"><span>Tomato</span></li>
<li id="tree0_item2_2" role="treeitem" aria-level="2"><span>Lettuce</span></li>
</ul>
</li>
</ul>
</div>
<p>More <a href="javascript:$('tree0').focus();">focusable</a> content after the ARIA application.</p>
</body>
</html>