{"id":381,"date":"2018-12-10T17:33:53","date_gmt":"2018-12-10T17:33:53","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=381"},"modified":"2022-12-16T17:19:21","modified_gmt":"2022-12-16T17:19:21","slug":"activity-14-accessible-sortable-list","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/activity-14-accessible-sortable-list\/","title":{"raw":"Activity 14: Accessible Sortable List","rendered":"Activity 14: Accessible Sortable List"},"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\" \/>Based on the\u00a0<a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/6-6-sortable-lists\/\">Sortable List details<\/a> on the previous page, apply what you have learned to the associated activity files to make the sortable list 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\/sortable.html\">sortable.html<\/a><\/li>\r\n \t<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_sortable.js\">assets\/ik_sortable.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 sortable list by applying the highlighted code to the \/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_sortable.js\">assets\/ik_sortable.js<\/a> 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 sortable list 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 sortable list functions as described, submit the URL to your sortable.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\" title=\"\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\r\n<thead>\r\n<tr>\r\n<th style=\"width: 705.062px;\">Criteria<\/th>\r\n<th style=\"width: 68.0625px;\">Points<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 705.062px;\">Instructions Provided:\r\nInstructions are announced on using the sortable list with a keyboard when it first receives focus.<\/td>\r\n<td style=\"width: 68.0625px;\">1.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 705.062px;\">Movable List Items:\r\nWhen navigating through list items, their position is announced along with an indication they can be moved.<\/td>\r\n<td style=\"width: 68.0625px;\">2.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 705.062px;\">List Items are Sortable:\r\nUsing the keyboard operation described in Adding Keyboard Operability for sortable lists, list items can be moved without using a mouse.<\/td>\r\n<td style=\"width: 68.0625px;\">3.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 705.062px;\">Moved position:\r\nWhen a list items is moved, its new position is announced.<\/td>\r\n<td style=\"width: 68.0625px;\">4.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 705.062px;\">Total Points:<\/td>\r\n<td style=\"width: 68.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\" \/>Based on the\u00a0<a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/6-6-sortable-lists\/\">Sortable List details<\/a> on the previous page, apply what you have learned to the associated activity files to make the sortable list 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\/sortable.html\">sortable.html<\/a><\/li>\n<li>\/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_sortable.js\">assets\/ik_sortable.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 sortable list by applying the highlighted code to the \/<a href=\"https:\/\/github.com\/learnaria\/learnaria.github.io\/blob\/master\/assets\/ik_sortable.js\">assets\/ik_sortable.js<\/a> 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 sortable list 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 sortable list functions as described, submit the URL to your sortable.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\" title=\"\" cellpadding=\"0\" style=\"border-spacing: 0px;\">\n<thead>\n<tr>\n<th style=\"width: 705.062px;\">Criteria<\/th>\n<th style=\"width: 68.0625px;\">Points<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"width: 705.062px;\">Instructions Provided:<br \/>\nInstructions are announced on using the sortable list with a keyboard when it first receives focus.<\/td>\n<td style=\"width: 68.0625px;\">1.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 705.062px;\">Movable List Items:<br \/>\nWhen navigating through list items, their position is announced along with an indication they can be moved.<\/td>\n<td style=\"width: 68.0625px;\">2.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 705.062px;\">List Items are Sortable:<br \/>\nUsing the keyboard operation described in Adding Keyboard Operability for sortable lists, list items can be moved without using a mouse.<\/td>\n<td style=\"width: 68.0625px;\">3.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 705.062px;\">Moved position:<br \/>\nWhen a list items is moved, its new position is announced.<\/td>\n<td style=\"width: 68.0625px;\">4.0 pts<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 705.062px;\">Total Points:<\/td>\n<td style=\"width: 68.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-381","chapter","type-chapter","status-publish","hentry"],"part":37,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/381","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":16,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/381\/revisions"}],"predecessor-version":[{"id":2032,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/381\/revisions\/2032"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/37"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/381\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=381"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=381"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=381"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}