{"id":377,"date":"2018-12-10T17:32:32","date_gmt":"2018-12-10T17:32:32","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=377"},"modified":"2022-12-16T17:17:54","modified_gmt":"2022-12-16T17:17:54","slug":"activity-13-accessible-tree-navigation","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/activity-13-accessible-tree-navigation\/","title":{"raw":"Activity 13: Accessible Tree Navigation","rendered":"Activity 13: Accessible Tree Navigation"},"content":{"raw":"<img src=\"http:\/\/pressbooks.library.ryerson.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/activity_sm.png\" alt=\"\" class=\"alignright size-full wp-image-152\" style=\"float: right;\" width=\"150\" height=\"158\" \/>\r\nBased on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/6-4-tree-menus\/\">Tree Menu details<\/a> on the previous page, apply what you have learned to the associated activity files to make the tree menu there accessible.\r\n\r\nFiles for this activity include:\r\n<ul>\r\n \t<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/tree.html\">tree.html<\/a><\/li>\r\n \t<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_treemenu.js\">assets\/ik_treemenu.js<\/a><\/li>\r\n<\/ul>\r\nUse the surroundings of the highlighted code on the previous page as a guide to find where the fixes should be applied. Repair the accessibility of the tree menu by applying the highlighted code to the \/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_treemenu.js\">assets\/ik_treemenu.js<\/a> file.\r\n\r\n<strong>Note:<\/strong> While we suggest using the highlighted code we\u2019ve provided, you are free to come up with your own solutions provided they produce the expected results listed in the marking rubric below.\r\n\r\nTest your updated tree menu with ChromeVox to ensure each element described in the marking rubric below is functioning as suggested.\r\n<h2>Requirements<\/h2>\r\nWhen you have applied your changes and tested to be sure your tree menu functions as described, submit the URL to your tree.html file on your GitHub Pages site, to the file on the web server you are using to host your copy of the activity files, or a <a href=\"https:\/\/raw.githack.com\">GitHack\u00a0<\/a>URL.\r\n<h2>Grading Rubric<\/h2>\r\n<div>\r\n<table class=\"addborder\" style=\"height: 218px;\" title=\"\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\r\n<thead>\r\n<tr style=\"height: 14px;\">\r\n<th style=\"width: 671.062px; height: 14px;\">Criteria<\/th>\r\n<th style=\"width: 102.062px; height: 14px;\">Points<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr style=\"height: 44px;\">\r\n<td style=\"width: 671.062px; height: 44px;\">Instructions Provided:\r\nWhen the tree menu receives focus, instructions are announced on how to use the menu with a keyboard.<\/td>\r\n<td style=\"width: 102.062px; height: 44px;\">1.0 pts<\/td>\r\n<\/tr>\r\n<tr style=\"height: 44px;\">\r\n<td style=\"width: 671.062px; height: 44px;\">Tree Menu Semantics:\r\nWhen navigating through the tree menu with a keyboard, elements are announced with tree menu semantics.<\/td>\r\n<td style=\"width: 102.062px; height: 44px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr style=\"height: 44px;\">\r\n<td style=\"width: 671.062px; height: 44px;\">Tree Submenus:\r\nWhen a tree menu item with a submenu receive focus, the submenu state is announced as expanded when open or collapsed when closed.<\/td>\r\n<td style=\"width: 102.062px; height: 44px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr style=\"height: 29px;\">\r\n<td style=\"width: 671.062px; height: 29px;\">Focus Control:\r\nOnly elements of the tree menu that are in view are able to receive focus.<\/td>\r\n<td style=\"width: 102.062px; height: 29px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr style=\"height: 29px;\">\r\n<td style=\"width: 671.062px; height: 29px;\">Keyboard Operable:\r\nTree menu functions with a keyboard as described in Adding Keyboard Operability for tree menus.<\/td>\r\n<td style=\"width: 102.062px; height: 29px;\">3.0 pts<\/td>\r\n<\/tr>\r\n<tr style=\"height: 14px;\">\r\n<td style=\"width: 671.062px; height: 14px;\">Total Points:<\/td>\r\n<td style=\"width: 102.062px; height: 14px;\">10.0<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>","rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/activity_sm.png\" alt=\"\" class=\"alignright size-full wp-image-152\" style=\"float: right;\" width=\"150\" height=\"158\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/activity_sm.png 150w, https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/activity_sm-65x68.png 65w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><br \/>\nBased on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/6-4-tree-menus\/\">Tree Menu details<\/a> on the previous page, apply what you have learned to the associated activity files to make the tree menu there accessible.<\/p>\n<p>Files for this activity include:<\/p>\n<ul>\n<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/tree.html\">tree.html<\/a><\/li>\n<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_treemenu.js\">assets\/ik_treemenu.js<\/a><\/li>\n<\/ul>\n<p>Use the surroundings of the highlighted code on the previous page as a guide to find where the fixes should be applied. Repair the accessibility of the tree menu by applying the highlighted code to the \/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_treemenu.js\">assets\/ik_treemenu.js<\/a> file.<\/p>\n<p><strong>Note:<\/strong> While we suggest using the highlighted code we\u2019ve provided, you are free to come up with your own solutions provided they produce the expected results listed in the marking rubric below.<\/p>\n<p>Test your updated tree menu with ChromeVox to ensure each element described in the marking rubric below is functioning as suggested.<\/p>\n<h2>Requirements<\/h2>\n<p>When you have applied your changes and tested to be sure your tree menu functions as described, submit the URL to your tree.html file on your GitHub Pages site, to the file on the web server you are using to host your copy of the activity files, or a <a href=\"https:\/\/raw.githack.com\">GitHack\u00a0<\/a>URL.<\/p>\n<h2>Grading Rubric<\/h2>\n<div>\n<table class=\"addborder\" style=\"height: 218px; border-spacing: 0px;\" title=\"\" cellpadding=\"0\">\n<thead>\n<tr style=\"height: 14px;\">\n<th style=\"width: 671.062px; height: 14px;\">Criteria<\/th>\n<th style=\"width: 102.062px; height: 14px;\">Points<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"height: 44px;\">\n<td style=\"width: 671.062px; height: 44px;\">Instructions Provided:<br \/>\nWhen the tree menu receives focus, instructions are announced on how to use the menu with a keyboard.<\/td>\n<td style=\"width: 102.062px; height: 44px;\">1.0 pts<\/td>\n<\/tr>\n<tr style=\"height: 44px;\">\n<td style=\"width: 671.062px; height: 44px;\">Tree Menu Semantics:<br \/>\nWhen navigating through the tree menu with a keyboard, elements are announced with tree menu semantics.<\/td>\n<td style=\"width: 102.062px; height: 44px;\">2.0 pts<\/td>\n<\/tr>\n<tr style=\"height: 44px;\">\n<td style=\"width: 671.062px; height: 44px;\">Tree Submenus:<br \/>\nWhen a tree menu item with a submenu receive focus, the submenu state is announced as expanded when open or collapsed when closed.<\/td>\n<td style=\"width: 102.062px; height: 44px;\">2.0 pts<\/td>\n<\/tr>\n<tr style=\"height: 29px;\">\n<td style=\"width: 671.062px; height: 29px;\">Focus Control:<br \/>\nOnly elements of the tree menu that are in view are able to receive focus.<\/td>\n<td style=\"width: 102.062px; height: 29px;\">2.0 pts<\/td>\n<\/tr>\n<tr style=\"height: 29px;\">\n<td style=\"width: 671.062px; height: 29px;\">Keyboard Operable:<br \/>\nTree menu functions with a keyboard as described in Adding Keyboard Operability for tree menus.<\/td>\n<td style=\"width: 102.062px; height: 29px;\">3.0 pts<\/td>\n<\/tr>\n<tr style=\"height: 14px;\">\n<td style=\"width: 671.062px; height: 14px;\">Total Points:<\/td>\n<td style=\"width: 102.062px; height: 14px;\">10.0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"author":100,"menu_order":5,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-377","chapter","type-chapter","status-publish","hentry"],"part":37,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":17,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/377\/revisions"}],"predecessor-version":[{"id":2029,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/377\/revisions\/2029"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/37"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/377\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=377"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=377"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=377"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}