ariatree.html (4354B)
1 <!DOCTYPE HTML><!-- HTML 5 --> 2 <html lang="en"> 3 <head> 4 <title>ARIA Tree Example</title> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 6 <link rel="stylesheet" href="./css/treesimple.css" type="text/css"> 7 <script src="./js/prototype.js"></script> 8 <script src="./js/aria.js"></script> 9 <script src="./js/init.js"></script> 10 </head> 11 <body> 12 13 <h1>Directions</h1> 14 <ol> 15 <li>Tab into the tree control.</li> 16 <li>Use the up/down arrow keys to change the active descendant.</li> 17 <li>Use the right/left arrow keys to expand/collapse appropriate nodes.</li> 18 </ol> 19 20 <p>Some <a href="javascript:$('tree0').focus();">focusable</a> content before the ARIA application.</p> 21 22 <div role="application"> 23 <h1 id="treelabel">ARIA Tree Example</h1> 24 <ul id="tree0" role="tree" aria-labelledby="treelabel" aria-activedescendant="tree0_item0_2_0_1" tabindex="0"> 25 <!-- all the ids and aria-* attributes are hardcoded here for sake of example (final version will use javascript to assign ids as needed) --> 26 <li id="tree0_item0" role="treeitem" aria-level="1" aria-expanded="true"> 27 <!-- .expander becomes the javascript trigger for expand/collapse --> 28 <span class="expander"></span> 29 Animals 30 <ul role="group"> 31 <li id="tree0_item0_0" role="treeitem" aria-level="2"><span>Birds</span></li> 32 <li id="tree0_item0_1" role="treeitem" aria-level="2" aria-expanded="false"> 33 <span class="expander"></span> 34 Cats 35 <ul role="group"> 36 <li id="tree0_item0_1_0" role="treeitem" aria-level="3">Siamese</li> 37 <li id="tree0_item0_1_1" role="treeitem" aria-level="3">Tabby</li> 38 </ul> 39 </li> 40 <li id="tree0_item0_2" role="treeitem" aria-level="2" aria-expanded="true"> 41 <span class="expander"></span> 42 Dogs 43 <ul role="group"> 44 <li id="tree0_item0_2_0" role="treeitem" aria-level="3" aria-expanded="true"> 45 <span class="expander"></span> 46 Small Breeds 47 <ul role="group"> 48 <li id="tree0_item0_2_0_0" role="treeitem" aria-level="4">Chihuahua</li> 49 <li id="tree0_item0_2_0_1" role="treeitem" aria-level="4">Italian Greyhound</li> 50 <li id="tree0_item0_2_0_2" role="treeitem" aria-level="4">Japanese Chin</li> 51 </ul> 52 </li> 53 <li id="tree0_item0_2_1" role="treeitem" aria-level="3" aria-expanded="false"> 54 <span class="expander"></span> 55 Medium Breeds 56 <ul role="group"> 57 <li id="tree0_item0_2_1_0" role="treeitem" aria-level="4">Beagle</li> 58 <li id="tree0_item0_2_1_1" role="treeitem" aria-level="4">Cocker Spaniel</li> 59 <li id="tree0_item0_2_1_2" role="treeitem" aria-level="4">Pit Bull</li> 60 </ul> 61 </li> 62 <li id="tree0_item0_2_2" role="treeitem" aria-level="3" aria-expanded="false"> 63 <span class="expander"></span> 64 Large Breeds 65 <ul role="group"> 66 <li id="tree0_item0_2_2_0" role="treeitem" aria-level="4">Afghan</li> 67 <li id="tree0_item0_2_2_1" role="treeitem" aria-level="4">Great Dane</li> 68 <li id="tree0_item0_2_2_2" role="treeitem" aria-level="4">Mastiff</li> 69 </ul> 70 </li> 71 </ul> 72 </li> 73 </ul> 74 </li> 75 <li id="tree0_item1" role="treeitem" aria-level="1" aria-expanded="true"> 76 <span class="expander"></span> 77 Minerals 78 <ul role="group"> 79 <li id="tree0_item1_0" role="treeitem" aria-level="2">Zinc</li> 80 <li id="tree0_item1_1" role="treeitem" aria-level="2" aria-expanded="false"> 81 <span class="expander"></span> 82 Gold 83 <ul role="group"> 84 <li id="tree0_item1_1_0" role="treeitem" aria-level="3">Yellow Gold</li> 85 <li id="tree0_item1_1_1" role="treeitem" aria-level="3">White Gold</li> 86 </ul> 87 </li> 88 <li id="tree0_item1_2" role="treeitem" aria-level="2">Silver</li> 89 </ul> 90 </li> 91 <li id="tree0_item2" role="treeitem" aria-level="1" aria-expanded="true"> 92 <span class="expander"></span> 93 Vegetables 94 <ul role="group"> 95 <li id="tree0_item2_0" role="treeitem" aria-level="2">Carrot</li> 96 <li id="tree0_item2_1" role="treeitem" aria-level="2">Tomato</li> 97 <li id="tree0_item2_2" role="treeitem" aria-level="2">Lettuce</li> 98 </ul> 99 </li> 100 </ul> 101 </div> 102 103 <p>More <a href="javascript:$('tree0').focus();">focusable</a> content after the ARIA application.</p> 104 105 </body> 106 </html>