{"id":346,"date":"2018-12-10T17:02:03","date_gmt":"2018-12-10T17:02:03","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=346"},"modified":"2022-12-16T17:09:21","modified_gmt":"2022-12-16T17:09:21","slug":"activity-7-accessible-progress-bar","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/activity-7-accessible-progress-bar\/","title":{"raw":"Activity 7: Accessible Progress Bar","rendered":"Activity 7: Accessible Progress Bar"},"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 Progress Bar<\/h2>\r\nBased on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/4-7-progress-bars\/\">Progress Bar details<\/a> on the previous page, apply what you have learned to the associated activity files to make the progress bar 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\/progressbar.html\">progressbar.html<\/a><\/li>\r\n \t<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_progressbar.js\">assets\/ik_progressbar.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 progress bar by applying the highlighted code to the \/assets\/ik_progressbar.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 progress bar with ChromeVox to ensure each element described in the marking rubric below is functioning as suggested.\r\n<h2>Requirements<\/h2>\r\n<span>When you have applied your changes and tested to be sure your progress bar functions as described, submit the URL to your progressbar.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> URL.<\/span>\r\n<h2>Grading Rubric<\/h2>\r\n<div>\r\n<table class=\"addborder\" style=\"width: 814px;\" title=\"\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\r\n<thead>\r\n<tr>\r\n<th style=\"width: 708.062px;\">Criteria<\/th>\r\n<th style=\"width: 77.0625px;\">Points<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 708.062px;\">Instructions Provided:\r\nWhen the progress bar begins running, instructions are provided on how to announce progress percentage.<\/td>\r\n<td style=\"width: 77.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 708.062px;\">Keyboard Announce Progress:\r\nThe keyboard can be used to announce progress percentage.<\/td>\r\n<td style=\"width: 77.0625px;\">5.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 708.062px;\">Announce Complete:\r\nWhen progress finishes, Loading Complete is announced.<\/td>\r\n<td style=\"width: 77.0625px;\">3.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 708.062px;\">Total Points:<\/td>\r\n<td style=\"width: 77.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 Progress Bar<\/h2>\n<p>Based on the <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/4-7-progress-bars\/\">Progress Bar details<\/a> on the previous page, apply what you have learned to the associated activity files to make the progress bar 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\/progressbar.html\">progressbar.html<\/a><\/li>\n<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_progressbar.js\">assets\/ik_progressbar.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 progress bar by applying the highlighted code to the \/assets\/ik_progressbar.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 progress bar with ChromeVox to ensure each element described in the marking rubric below is functioning as suggested.<\/p>\n<h2>Requirements<\/h2>\n<p><span>When you have applied your changes and tested to be sure your progress bar functions as described, submit the URL to your progressbar.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> URL.<\/span><\/p>\n<h2>Grading Rubric<\/h2>\n<div>\n<table class=\"addborder\" style=\"width: 814px; border-spacing: 0px;\" title=\"\" cellpadding=\"0\">\n<thead>\n<tr>\n<th style=\"width: 708.062px;\">Criteria<\/th>\n<th style=\"width: 77.0625px;\">Points<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"width: 708.062px;\">Instructions Provided:<br \/>\nWhen the progress bar begins running, instructions are provided on how to announce progress percentage.<\/td>\n<td style=\"width: 77.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 708.062px;\">Keyboard Announce Progress:<br \/>\nThe keyboard can be used to announce progress percentage.<\/td>\n<td style=\"width: 77.0625px;\">5.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 708.062px;\">Announce Complete:<br \/>\nWhen progress finishes, Loading Complete is announced.<\/td>\n<td style=\"width: 77.0625px;\">3.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 708.062px;\">Total Points:<\/td>\n<td style=\"width: 77.0625px;\">10.0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"author":100,"menu_order":8,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-346","chapter","type-chapter","status-publish","hentry"],"part":33,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/346","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":21,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/346\/revisions"}],"predecessor-version":[{"id":2011,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/346\/revisions\/2011"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/33"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/346\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=346"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=346"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=346"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}