{"id":360,"date":"2018-12-10T17:14:53","date_gmt":"2018-12-10T17:14:53","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=360"},"modified":"2022-12-16T17:13:32","modified_gmt":"2022-12-16T17:13:32","slug":"activity-10-accessible-tab-panel","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/activity-10-accessible-tab-panel\/","title":{"raw":"Activity 10: Accessible Tab Panel","rendered":"Activity 10: Accessible Tab Panel"},"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\" width=\"150\" height=\"158\" \/>\r\n<h2>Accessible Tab Panel<\/h2>\r\nBased on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-6-tab-panels\/\">Tab Panel details<\/a> on the previous page, apply what you have learned to the associated activity files to make the tab panel 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\/tabs.html\">tabs.html<\/a><\/li>\r\n \t<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_tabs.js\">assets\/ik_tabs.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 tab panel by applying the highlighted code to the \/assets\/ik_tabs.js 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 tab panel with ChromeVox to be sure 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 ensure your tab panel functions as described, submit the URL to your tabs.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\" title=\"\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\r\n<thead>\r\n<tr>\r\n<th style=\"width: 749.062px;\">Criteria<\/th>\r\n<th style=\"width: 73.0625px;\">Points<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 749.062px;\">List to Tab Semantics:\r\nList semantics are replaced with tab panel semantics.<\/td>\r\n<td style=\"width: 73.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 749.062px;\">Tab Position:\r\nFocus position in the tablist is announced.<\/td>\r\n<td style=\"width: 73.0625px;\">1.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 749.062px;\">Tab Focus opens Panel:\r\nWhen a tab is in focus, its associated panel displays.<\/td>\r\n<td style=\"width: 73.0625px;\">1.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 749.062px;\">Arrow Key Between Tabs:\r\nArrow keys can be used to navigate between tabs.<\/td>\r\n<td style=\"width: 73.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 749.062px;\">Tab Key from Tab to Panel:\r\nTab key can be used to move from a selected tab directly to its associated panel, Shift+Tab to move back to tabs.<\/td>\r\n<td style=\"width: 73.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 749.062px;\">Panels Focusable:\r\nPanels are keyboard focusable.<\/td>\r\n<td style=\"width: 73.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 749.062px;\">Total Points:<\/td>\r\n<td style=\"width: 73.0625px;\">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\" 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\" \/><\/p>\n<h2>Accessible Tab Panel<\/h2>\n<p>Based on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-6-tab-panels\/\">Tab Panel details<\/a> on the previous page, apply what you have learned to the associated activity files to make the tab panel 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\/tabs.html\">tabs.html<\/a><\/li>\n<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_tabs.js\">assets\/ik_tabs.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 tab panel by applying the highlighted code to the \/assets\/ik_tabs.js 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 tab panel with ChromeVox to be sure 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 ensure your tab panel functions as described, submit the URL to your tabs.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\" title=\"\" cellpadding=\"0\" style=\"border-spacing: 0px;\">\n<thead>\n<tr>\n<th style=\"width: 749.062px;\">Criteria<\/th>\n<th style=\"width: 73.0625px;\">Points<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"width: 749.062px;\">List to Tab Semantics:<br \/>\nList semantics are replaced with tab panel semantics.<\/td>\n<td style=\"width: 73.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 749.062px;\">Tab Position:<br \/>\nFocus position in the tablist is announced.<\/td>\n<td style=\"width: 73.0625px;\">1.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 749.062px;\">Tab Focus opens Panel:<br \/>\nWhen a tab is in focus, its associated panel displays.<\/td>\n<td style=\"width: 73.0625px;\">1.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 749.062px;\">Arrow Key Between Tabs:<br \/>\nArrow keys can be used to navigate between tabs.<\/td>\n<td style=\"width: 73.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 749.062px;\">Tab Key from Tab to Panel:<br \/>\nTab key can be used to move from a selected tab directly to its associated panel, Shift+Tab to move back to tabs.<\/td>\n<td style=\"width: 73.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 749.062px;\">Panels Focusable:<br \/>\nPanels are keyboard focusable.<\/td>\n<td style=\"width: 73.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 749.062px;\">Total Points:<\/td>\n<td style=\"width: 73.0625px;\">10.0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"author":100,"menu_order":7,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-360","chapter","type-chapter","status-publish","hentry"],"part":35,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/360","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":15,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/360\/revisions"}],"predecessor-version":[{"id":2020,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/360\/revisions\/2020"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/35"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/360\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=360"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=360"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=360"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}