{"id":351,"date":"2018-12-10T17:04:50","date_gmt":"2018-12-10T17:04:50","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=351"},"modified":"2022-12-16T17:10:38","modified_gmt":"2022-12-16T17:10:38","slug":"activity-8-accessible-slider","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/activity-8-accessible-slider\/","title":{"raw":"Activity 8: Accessible Slider","rendered":"Activity 8: Accessible Slider"},"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 Slider<\/h2>\r\nBased on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-2-sliders\/\">Slider details<\/a> on the previous page, apply what you have learned to the associated activity files to make the slider 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\/slider.html\">slider.html<\/a><\/li>\r\n \t<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_slider.js\">assets\/ik_slider.js<\/a><\/li>\r\n<\/ul>\r\nUse the code surrounding the highlighted solutions on the previous page as a guide to find where the fixes should be applied. Repair the accessibility of the slider by applying the highlighted code to the \/assets\/ik_slider.js file.\r\n\r\n<strong>Note:<\/strong> While we suggest using the highlighted solutions we\u2019ve provided, you are free to come up with your own solutions as long as they produce the expected results listed in the marking rubric below.\r\n\r\nTest your updated slider with ChromeVox to ensure each element described in the marking rubric below is functioning as suggested.\r\n<h2><span>Requirements<\/span><\/h2>\r\n<span>When you have applied your changes and tested to be sure your slider functions as described, submit the URL to your slider.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 to a <a href=\"https:\/\/raw.githack.com\" class=\"external\" target=\"_blank\" rel=\"noreferrer noopener\">GitHack<\/a>\u00a0URL.<\/span>\r\n<h2>Grading Rubric<\/h2>\r\n<div>\r\n<table class=\"addborder\" style=\"width: 640px;\" title=\"\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\r\n<thead>\r\n<tr>\r\n<th style=\"width: 535.062px;\">Criteria<\/th>\r\n<th style=\"width: 76.0625px;\">Points<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 535.062px;\">Slider Focusable:\r\nSlider thumb is keyboard focusable.<\/td>\r\n<td style=\"width: 76.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 535.062px;\">Keyboard Operable:\r\nSlider thumb moves using Left and Right Arrow keys, and the Home and End keys.<\/td>\r\n<td style=\"width: 76.0625px;\">5.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 535.062px;\">Min\/Max Values Announced:\r\nMinimum and maximum values are announced.<\/td>\r\n<td style=\"width: 76.0625px;\">1.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 535.062px;\">Value Announced:\r\nWhen the slider moves, its new value is announced.<\/td>\r\n<td style=\"width: 76.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 535.062px;\">Total Points:<\/td>\r\n<td style=\"width: 76.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 Slider<\/h2>\n<p>Based on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/5-2-sliders\/\">Slider details<\/a> on the previous page, apply what you have learned to the associated activity files to make the slider 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\/slider.html\">slider.html<\/a><\/li>\n<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_slider.js\">assets\/ik_slider.js<\/a><\/li>\n<\/ul>\n<p>Use the code surrounding the highlighted solutions on the previous page as a guide to find where the fixes should be applied. Repair the accessibility of the slider by applying the highlighted code to the \/assets\/ik_slider.js file.<\/p>\n<p><strong>Note:<\/strong> While we suggest using the highlighted solutions we\u2019ve provided, you are free to come up with your own solutions as long as they produce the expected results listed in the marking rubric below.<\/p>\n<p>Test your updated slider with ChromeVox to ensure each element described in the marking rubric below is functioning as suggested.<\/p>\n<h2><span>Requirements<\/span><\/h2>\n<p><span>When you have applied your changes and tested to be sure your slider functions as described, submit the URL to your slider.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 to a <a href=\"https:\/\/raw.githack.com\" class=\"external\" target=\"_blank\" rel=\"noreferrer noopener\">GitHack<\/a>\u00a0URL.<\/span><\/p>\n<h2>Grading Rubric<\/h2>\n<div>\n<table class=\"addborder\" style=\"width: 640px; border-spacing: 0px;\" title=\"\" cellpadding=\"0\">\n<thead>\n<tr>\n<th style=\"width: 535.062px;\">Criteria<\/th>\n<th style=\"width: 76.0625px;\">Points<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"width: 535.062px;\">Slider Focusable:<br \/>\nSlider thumb is keyboard focusable.<\/td>\n<td style=\"width: 76.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 535.062px;\">Keyboard Operable:<br \/>\nSlider thumb moves using Left and Right Arrow keys, and the Home and End keys.<\/td>\n<td style=\"width: 76.0625px;\">5.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 535.062px;\">Min\/Max Values Announced:<br \/>\nMinimum and maximum values are announced.<\/td>\n<td style=\"width: 76.0625px;\">1.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 535.062px;\">Value Announced:<br \/>\nWhen the slider moves, its new value is announced.<\/td>\n<td style=\"width: 76.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 535.062px;\">Total Points:<\/td>\n<td style=\"width: 76.0625px;\">10.0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"author":100,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-351","chapter","type-chapter","status-publish","hentry"],"part":35,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/351","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":18,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/351\/revisions"}],"predecessor-version":[{"id":2014,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/351\/revisions\/2014"}],"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\/351\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=351"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=351"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=351"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}