{"id":355,"date":"2018-12-10T17:12:47","date_gmt":"2018-12-10T17:12:47","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=355"},"modified":"2022-12-16T17:11:59","modified_gmt":"2022-12-16T17:11:59","slug":"activity-9-accessible-accordion","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/activity-9-accessible-accordion\/","title":{"raw":"Activity 9: Accessible Accordion","rendered":"Activity 9: Accessible Accordion"},"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 Accordion<\/h2>\r\nBased on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-4-accordions\/\">Accordion details<\/a> on the previous page, apply what you have learned to the associated activity files to make the accordion 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\/accordion.html\">accordion.html<\/a><\/li>\r\n \t<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_accordion.js\">assets\/ik_accordion.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 accordion by applying the highlighted code to the \/assets\/ik_accordion.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 accordion 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 accordion functions as described, submit the URL to your accordion.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<\/a> URL.\r\n<h2>Grading Rubric<\/h2>\r\n<div>\r\n<table class=\"addborder\" style=\"width: 669px;\" title=\"\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\r\n<thead>\r\n<tr>\r\n<th style=\"width: 571.062px;\">Criteria<\/th>\r\n<th style=\"width: 69.0625px;\">Points<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 571.062px;\">Header Focus:\r\nAccordion headers are keyboard focusable.<\/td>\r\n<td style=\"width: 69.0625px;\">1.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 571.062px;\">Headers as Buttons:\r\nAccordion headers are announced as buttons instead of list items.<\/td>\r\n<td style=\"width: 69.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 571.062px;\">Open Panels:\r\nAccordion headers open panels with a click or key press.<\/td>\r\n<td style=\"width: 69.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 571.062px;\">Expand\/Collapse:\r\nAccordions announce expanded when a panel is opened and collapsed when closed.<\/td>\r\n<td style=\"width: 69.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 571.062px;\">Panels Focusable:\r\nAccordion panels are focusable with a Tab key press when opened.<\/td>\r\n<td style=\"width: 69.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 571.062px;\">Header Navigation:\r\nNavigation between accordion headers with Up and Down Arrow keys, and the Tab key.<\/td>\r\n<td style=\"width: 69.0625px;\">1.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 571.062px;\">Total Points:<\/td>\r\n<td style=\"width: 69.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 Accordion<\/h2>\n<p>Based on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-4-accordions\/\">Accordion details<\/a> on the previous page, apply what you have learned to the associated activity files to make the accordion 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\/accordion.html\">accordion.html<\/a><\/li>\n<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_accordion.js\">assets\/ik_accordion.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 accordion by applying the highlighted code to the \/assets\/ik_accordion.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 accordion 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 accordion functions as described, submit the URL to your accordion.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<\/a> URL.<\/p>\n<h2>Grading Rubric<\/h2>\n<div>\n<table class=\"addborder\" style=\"width: 669px; border-spacing: 0px;\" title=\"\" cellpadding=\"0\">\n<thead>\n<tr>\n<th style=\"width: 571.062px;\">Criteria<\/th>\n<th style=\"width: 69.0625px;\">Points<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"width: 571.062px;\">Header Focus:<br \/>\nAccordion headers are keyboard focusable.<\/td>\n<td style=\"width: 69.0625px;\">1.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 571.062px;\">Headers as Buttons:<br \/>\nAccordion headers are announced as buttons instead of list items.<\/td>\n<td style=\"width: 69.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 571.062px;\">Open Panels:<br \/>\nAccordion headers open panels with a click or key press.<\/td>\n<td style=\"width: 69.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 571.062px;\">Expand\/Collapse:<br \/>\nAccordions announce expanded when a panel is opened and collapsed when closed.<\/td>\n<td style=\"width: 69.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 571.062px;\">Panels Focusable:<br \/>\nAccordion panels are focusable with a Tab key press when opened.<\/td>\n<td style=\"width: 69.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 571.062px;\">Header Navigation:<br \/>\nNavigation between accordion headers with Up and Down Arrow keys, and the Tab key.<\/td>\n<td style=\"width: 69.0625px;\">1.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 571.062px;\">Total Points:<\/td>\n<td style=\"width: 69.0625px;\">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-355","chapter","type-chapter","status-publish","hentry"],"part":35,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/355","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":13,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/355\/revisions"}],"predecessor-version":[{"id":2017,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/355\/revisions\/2017"}],"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\/355\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=355"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=355"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=355"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}