ariatree2.html (4846B)
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/treebox.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> 29 <span class="expander"></span> 30 Animals 31 </span> 32 <ul role="group"> 33 <li id="tree0_item0_0" role="treeitem" aria-level="2"><span>Birds</span></li> 34 <li id="tree0_item0_1" role="treeitem" aria-level="2" aria-expanded="false"> 35 <span> 36 <span class="expander"></span> 37 Cats 38 </span> 39 <ul role="group"> 40 <li id="tree0_item0_1_0" role="treeitem" aria-level="3"><span>Siamese</span></li> 41 <li id="tree0_item0_1_1" role="treeitem" aria-level="3"><span>Tabby</span></li> 42 </ul> 43 </li> 44 <li id="tree0_item0_2" role="treeitem" aria-level="2" aria-expanded="true"> 45 <span> 46 <span class="expander"></span> 47 Dogs 48 </span> 49 <ul role="group"> 50 <li id="tree0_item0_2_0" role="treeitem" aria-level="3" aria-expanded="true"> 51 <span> 52 <span class="expander"></span> 53 Small Breeds 54 </span> 55 <ul role="group"> 56 <li id="tree0_item0_2_0_0" role="treeitem" aria-level="4"><span>Chihuahua</span></li> 57 <li id="tree0_item0_2_0_1" role="treeitem" aria-level="4"><span>Italian Greyhound</span></li> 58 <li id="tree0_item0_2_0_2" role="treeitem" aria-level="4"><span>Japanese Chin</span></li> 59 </ul> 60 </li> 61 <li id="tree0_item0_2_1" role="treeitem" aria-level="3" aria-expanded="false"> 62 <span> 63 <span class="expander"></span> 64 Medium Breeds 65 </span> 66 <ul role="group"> 67 <li id="tree0_item0_2_1_0" role="treeitem" aria-level="4"><span>Beagle</span></li> 68 <li id="tree0_item0_2_1_1" role="treeitem" aria-level="4"><span>Cocker Spaniel</span></li> 69 <li id="tree0_item0_2_1_2" role="treeitem" aria-level="4"><span>Pit Bull</span></li> 70 </ul> 71 </li> 72 <li id="tree0_item0_2_2" role="treeitem" aria-level="3" aria-expanded="false"> 73 <span> 74 <span class="expander"></span> 75 Large Breeds 76 </span> 77 <ul role="group"> 78 <li id="tree0_item0_2_2_0" role="treeitem" aria-level="4"><span>Afghan</span></li> 79 <li id="tree0_item0_2_2_1" role="treeitem" aria-level="4"><span>Great Dane</span></li> 80 <li id="tree0_item0_2_2_2" role="treeitem" aria-level="4"><span>Mastiff</span></li> 81 </ul> 82 </li> 83 </ul> 84 </li> 85 </ul> 86 </li> 87 <li id="tree0_item1" role="treeitem" aria-level="1" aria-expanded="true"> 88 <span> 89 <span class="expander"></span> 90 Minerals 91 </span> 92 <ul role="group"> 93 <li id="tree0_item1_0" role="treeitem" aria-level="2"><span>Zinc</span></li> 94 <li id="tree0_item1_1" role="treeitem" aria-level="2" aria-expanded="false"> 95 <span> 96 <span class="expander"></span> 97 Gold 98 </span> 99 <ul role="group"> 100 <li id="tree0_item1_1_0" role="treeitem" aria-level="3"><span>Yellow Gold</span></li> 101 <li id="tree0_item1_1_1" role="treeitem" aria-level="3"><span>White Gold</span></li> 102 </ul> 103 </li> 104 <li id="tree0_item1_2" role="treeitem" aria-level="2"><span>Silver</span></li> 105 </ul> 106 </li> 107 <li id="tree0_item2" role="treeitem" aria-level="1" aria-expanded="true"> 108 <span> 109 <span class="expander"></span> 110 Vegetables 111 </span> 112 <ul role="group"> 113 <li id="tree0_item2_0" role="treeitem" aria-level="2"><span>Carrot</span></li> 114 <li id="tree0_item2_1" role="treeitem" aria-level="2"><span>Tomato</span></li> 115 <li id="tree0_item2_2" role="treeitem" aria-level="2"><span>Lettuce</span></li> 116 </ul> 117 </li> 118 </ul> 119 </div> 120 121 <p>More <a href="javascript:$('tree0').focus();">focusable</a> content after the ARIA application.</p> 122 123 </body> 124 </html>