{"id":364,"date":"2018-12-10T17:17:21","date_gmt":"2018-12-10T17:17:21","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=364"},"modified":"2022-12-16T17:15:02","modified_gmt":"2022-12-16T17:15:02","slug":"activity-11-accessible-carousel","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/activity-11-accessible-carousel\/","title":{"raw":"Activity 11: Accessible Carousel","rendered":"Activity 11: Accessible Carousel"},"content":{"raw":"<h2>Accessible Carousel<\/h2>\r\n<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\" \/>Based on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-8-carousels\/\">Carousel details<\/a> on the previous page, apply what you have learned to the associated activity files to make the carousel 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\/carousel.html\">carousel.html<\/a><\/li>\r\n \t<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_carousel.js\">assets\/ik_carousel.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 carousel by applying the highlighted code to the \/assets\/ik_carousel.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 carousel 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 ensure your carousel functions as described, submit the URL to your carousel.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=\"width: 751px;\" title=\"\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\r\n<thead>\r\n<tr>\r\n<th style=\"width: 643.062px;\">Criteria<\/th>\r\n<th style=\"width: 79.0625px;\">Points<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 643.062px;\">Instructions Provided\r\nScreen reader instructions are provided when carousel receives focus.<\/td>\r\n<td style=\"width: 79.0625px;\">1.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 643.062px;\">Carousel Focusable\r\nCarousel panels are keyboard focusable.<\/td>\r\n<td style=\"width: 79.0625px;\">1.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 643.062px;\">Carousel Navigation\r\nNavigate between panels with the Left and Right Arrow keys.<\/td>\r\n<td style=\"width: 79.0625px;\">3.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 643.062px;\">Panels Read Aloud\r\nWhile the carousel has focus, each panel reads aloud when it comes into view.<\/td>\r\n<td style=\"width: 79.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 643.062px;\">Manual while in Focus\r\nWhen in focus, or while a mouse pointer is hovering over the carousel, panels rotate manually only.<\/td>\r\n<td style=\"width: 79.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 643.062px;\">Rotate when No Focus\r\nWhen the carousel is not in focus, panels rotate automatically.<\/td>\r\n<td style=\"width: 79.0625px;\">1.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 643.062px;\">Total Points:<\/td>\r\n<td style=\"width: 79.0625px;\">10.0<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>","rendered":"<h2>Accessible Carousel<\/h2>\n<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\" \/>Based on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-8-carousels\/\">Carousel details<\/a> on the previous page, apply what you have learned to the associated activity files to make the carousel 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\/carousel.html\">carousel.html<\/a><\/li>\n<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_carousel.js\">assets\/ik_carousel.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 carousel by applying the highlighted code to the \/assets\/ik_carousel.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 carousel 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 ensure your carousel functions as described, submit the URL to your carousel.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=\"width: 751px; border-spacing: 0px;\" title=\"\" cellpadding=\"0\">\n<thead>\n<tr>\n<th style=\"width: 643.062px;\">Criteria<\/th>\n<th style=\"width: 79.0625px;\">Points<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"width: 643.062px;\">Instructions Provided<br \/>\nScreen reader instructions are provided when carousel receives focus.<\/td>\n<td style=\"width: 79.0625px;\">1.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 643.062px;\">Carousel Focusable<br \/>\nCarousel panels are keyboard focusable.<\/td>\n<td style=\"width: 79.0625px;\">1.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 643.062px;\">Carousel Navigation<br \/>\nNavigate between panels with the Left and Right Arrow keys.<\/td>\n<td style=\"width: 79.0625px;\">3.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 643.062px;\">Panels Read Aloud<br \/>\nWhile the carousel has focus, each panel reads aloud when it comes into view.<\/td>\n<td style=\"width: 79.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 643.062px;\">Manual while in Focus<br \/>\nWhen in focus, or while a mouse pointer is hovering over the carousel, panels rotate manually only.<\/td>\n<td style=\"width: 79.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 643.062px;\">Rotate when No Focus<br \/>\nWhen the carousel is not in focus, panels rotate automatically.<\/td>\n<td style=\"width: 79.0625px;\">1.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 643.062px;\">Total Points:<\/td>\n<td style=\"width: 79.0625px;\">10.0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"author":100,"menu_order":9,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-364","chapter","type-chapter","status-publish","hentry"],"part":35,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/364","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\/364\/revisions"}],"predecessor-version":[{"id":2023,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/364\/revisions\/2023"}],"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\/364\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=364"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=364"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=364"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}