{"id":379,"date":"2018-12-10T17:33:19","date_gmt":"2018-12-10T17:33:19","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=379"},"modified":"2022-12-16T17:18:45","modified_gmt":"2022-12-16T17:18:45","slug":"sortable-lists","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/sortable-lists\/","title":{"raw":"Sortable Lists","rendered":"Sortable Lists"},"content":{"raw":"One of the more common types of widgets that present barriers for screen reader users are drag and drop features. These can be set up in a grid, where draggable items can be rearranged horizontally or vertically by clicking on an item and moving it to a new position in the grid. A drag and drop may also be a sortable list, where items in a list can be dragged vertically to perhaps position the more important list items near the top of the list. For drag and drop elements you may come across on the Web today, the vast majority only function with a mouse, making them inaccessible to many people who rely on a keyboard to navigate. Here, we will look at a sortable list, and the WAI-ARIA and associated keyboard operability required to make that list sortable while using only a screen reader and a keyboard.\r\n<div class=\"textbox\">\r\n\r\n<strong>Role, states, and properties used in a sortable list<\/strong>\r\n<ul>\r\n \t<li>role = \"list\"<\/li>\r\n \t<li>role = \"listitem\"<\/li>\r\n \t<li>tabindex = \"[0 | -1]\"<\/li>\r\n \t<li>aria-labelledby = \"[instruction div id]\"<\/li>\r\n \t<li>aria-hidden = \"[true | false]\"<\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading:<\/strong> <a href=\"https:\/\/medium.com\/salesforce-ux\/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09\">4 Major Patterns for Accessible Drag and Drop<\/a><\/div>\r\nThe following JSFiddle presents a typical sortable list widget. Review the JavaScript and HTML markup, and test the list presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle itself by clicking\u00a0\u00a0\u201cEdit in JSFiddle\u201d at the top, right-hand side, copying the accessibility\/WAI-ARIA code described below to fix the accessibility of the menu bar before completing <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/6-7-activity-14-accessible-sortable-list\/\">Activity 14<\/a> on the page that follows.\r\n<div style=\"height: 600px; overflow: hidden;\">[h5p id=\"104\"]<\/div>\r\n<!--https:\/\/jsfiddle.net\/greggy\/v5zLsxp1\/embedded\/-->\r\n\r\nAs usual, create instructions on using the sortable list with a keyboard. In this case, we also want to determine which modifier key to include in the instructions. For Mac, it will be the Command key, otherwise it will be the Control key. Here, the standard accesskey key commands will also work as the modifier and can potentially be described as well (e.g., Ctrl + Alt on Mac, or Ctrl on Windows).\r\n<div style=\"height: 150px; overflow: hidden;\">[h5p id=\"105\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/U3eLxJyG\/noheader-->\r\n\r\nAssign a redundant <code>role=\"list\"<\/code> to the opening <code>ul<\/code>, make the <code>ul<\/code> keyboard focusable, and attach the instruction with <code>aria-labelledby=\"[instruction div id]\"<\/code> so keyboard navigation details are announced when the list initially receives focus while using a screen reader.\r\n<div style=\"height: 165px; overflow: hidden;\">[h5p id=\"106\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/scxb6heV\/noheader-->\r\n\r\nWithin the <code>init()<\/code> function, generate the<code> &lt;div&gt;<\/code> that will contain the instructions, and add <code>aria-hidden=\"true\"<\/code> to hide it from screen readers by default.\r\n<div style=\"height: 200px; overflow: hidden;\">[h5p id=\"107\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/aLmtLnT1\/noheader-->\r\n\r\nIn the items section of the <code>init()<\/code> function, where draggable is defined for each item in the list, add a redundant <code>role=\"listitem\"<\/code>, and generate a label for each item that describes the list item\u2019s current position and that that list item is \u201cmovable.\u201d Finally, set <code>tabindex=\"0\"<\/code> on the first list item, and <code>tabindex=\"-1\"<\/code> on the other list items in order to ensure a list item is focusable by default.\r\n<div style=\"height: 175px; overflow: hidden;\">[h5p id=\"108\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/VSJd5yDb\/noheader-->\r\n\r\nWhere the draggable attributes are defined near the end of the <code>init()<\/code> function, attach a keydown reference to the <code>onKeyDown()<\/code> function to make the list draggable with a keyboard.\r\n<div style=\"height: 180px; overflow: hidden;\">[h5p id=\"109\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/DM5NK1eZ\/noheader-->\r\n\r\nIn the <code>resetNumbering()<\/code> function, update the label for moved items to reflect their new position in the list using <code>aria-label = \"[new position]\"<\/code>.\r\n<div style=\"height: 140px; overflow: hidden;\">[h5p id=\"110\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/prv8VTQc\/noheader-->\r\n<h2>Adding Keyboard Operability<\/h2>\r\nKeyboard operation for a drag and drop sortable list is relatively simple, compared to the menu bar and tree menu. Essentially, only the Up and Down arrow keys are needed. The standard operating system modifier keys, typically used with tabindex (e.g., Crtl + Alt, Alt, or Ctrl), function as the modifier keys when using them in addition to the Up and Down arrows to grab, drag, and drop a list item.\r\n\r\nThe <code>onKeyDown()<\/code> function for the sortable list presented below, defines just up and down arrow key operability, along with a roving tabindex. W3C has not yet created a best practice for authoring keyboard interaction for drag and drop elements.\r\n<div style=\"height: 1000px; overflow: hidden;\">[h5p id=\"111\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/wpDjHRpK\/noheader-->\r\n<h2>Sortable List in Action<\/h2>\r\nWatch the following video showing ChromeVox interacting with a sortable list. The Tab key is used to navigate into the list and to exit the list. The Up and Down arrows are used to move between list items. On a Mac, the Command key plus Up or Down arrow, selects a list item and moves it to a new location. On windows the Ctrl key is used instead of Command, along with the Up or Down arrow keys to move list items. Aim to have the sortable list you update in the activity on the next page operate and announce itself like the one in the video.\r\n\r\n<strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=5wKXDbuAas8\" rel=\"noopener\">Accessible Sortable List<\/a><\/strong>\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/5wKXDbuAas8[\/embed]","rendered":"<p>One of the more common types of widgets that present barriers for screen reader users are drag and drop features. These can be set up in a grid, where draggable items can be rearranged horizontally or vertically by clicking on an item and moving it to a new position in the grid. A drag and drop may also be a sortable list, where items in a list can be dragged vertically to perhaps position the more important list items near the top of the list. For drag and drop elements you may come across on the Web today, the vast majority only function with a mouse, making them inaccessible to many people who rely on a keyboard to navigate. Here, we will look at a sortable list, and the WAI-ARIA and associated keyboard operability required to make that list sortable while using only a screen reader and a keyboard.<\/p>\n<div class=\"textbox\">\n<p><strong>Role, states, and properties used in a sortable list<\/strong><\/p>\n<ul>\n<li>role = &#8220;list&#8221;<\/li>\n<li>role = &#8220;listitem&#8221;<\/li>\n<li>tabindex = &#8220;[0 | -1]&#8221;<\/li>\n<li>aria-labelledby = &#8220;[instruction div id]&#8221;<\/li>\n<li>aria-hidden = &#8220;[true | false]&#8221;<\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading:<\/strong> <a href=\"https:\/\/medium.com\/salesforce-ux\/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09\">4 Major Patterns for Accessible Drag and Drop<\/a><\/div>\n<p>The following JSFiddle presents a typical sortable list widget. Review the JavaScript and HTML markup, and test the list presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle itself by clicking\u00a0\u00a0\u201cEdit in JSFiddle\u201d at the top, right-hand side, copying the accessibility\/WAI-ARIA code described below to fix the accessibility of the menu bar before completing <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/6-7-activity-14-accessible-sortable-list\/\">Activity 14<\/a> on the page that follows.<\/p>\n<div style=\"height: 600px; overflow: hidden;\">\n<div id=\"h5p-104\">\n<div class=\"h5p-content\" data-content-id=\"104\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/jsfiddle.net\/greggy\/v5zLsxp1\/embedded\/ --><\/p>\n<p>As usual, create instructions on using the sortable list with a keyboard. In this case, we also want to determine which modifier key to include in the instructions. For Mac, it will be the Command key, otherwise it will be the Control key. Here, the standard accesskey key commands will also work as the modifier and can potentially be described as well (e.g., Ctrl + Alt on Mac, or Ctrl on Windows).<\/p>\n<div style=\"height: 150px; overflow: hidden;\">\n<div id=\"h5p-105\">\n<div class=\"h5p-content\" data-content-id=\"105\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/U3eLxJyG\/noheader --><\/p>\n<p>Assign a redundant <code>role=\"list\"<\/code> to the opening <code>ul<\/code>, make the <code>ul<\/code> keyboard focusable, and attach the instruction with <code>aria-labelledby=\"[instruction div id]\"<\/code> so keyboard navigation details are announced when the list initially receives focus while using a screen reader.<\/p>\n<div style=\"height: 165px; overflow: hidden;\">\n<div id=\"h5p-106\">\n<div class=\"h5p-content\" data-content-id=\"106\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/scxb6heV\/noheader --><\/p>\n<p>Within the <code>init()<\/code> function, generate the<code> &lt;div&gt;<\/code> that will contain the instructions, and add <code>aria-hidden=\"true\"<\/code> to hide it from screen readers by default.<\/p>\n<div style=\"height: 200px; overflow: hidden;\">\n<div id=\"h5p-107\">\n<div class=\"h5p-content\" data-content-id=\"107\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/aLmtLnT1\/noheader --><\/p>\n<p>In the items section of the <code>init()<\/code> function, where draggable is defined for each item in the list, add a redundant <code>role=\"listitem\"<\/code>, and generate a label for each item that describes the list item\u2019s current position and that that list item is \u201cmovable.\u201d Finally, set <code>tabindex=\"0\"<\/code> on the first list item, and <code>tabindex=\"-1\"<\/code> on the other list items in order to ensure a list item is focusable by default.<\/p>\n<div style=\"height: 175px; overflow: hidden;\">\n<div id=\"h5p-108\">\n<div class=\"h5p-content\" data-content-id=\"108\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/VSJd5yDb\/noheader --><\/p>\n<p>Where the draggable attributes are defined near the end of the <code>init()<\/code> function, attach a keydown reference to the <code>onKeyDown()<\/code> function to make the list draggable with a keyboard.<\/p>\n<div style=\"height: 180px; overflow: hidden;\">\n<div id=\"h5p-109\">\n<div class=\"h5p-content\" data-content-id=\"109\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/DM5NK1eZ\/noheader --><\/p>\n<p>In the <code>resetNumbering()<\/code> function, update the label for moved items to reflect their new position in the list using <code>aria-label = \"[new position]\"<\/code>.<\/p>\n<div style=\"height: 140px; overflow: hidden;\">\n<div id=\"h5p-110\">\n<div class=\"h5p-content\" data-content-id=\"110\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/prv8VTQc\/noheader --><\/p>\n<h2>Adding Keyboard Operability<\/h2>\n<p>Keyboard operation for a drag and drop sortable list is relatively simple, compared to the menu bar and tree menu. Essentially, only the Up and Down arrow keys are needed. The standard operating system modifier keys, typically used with tabindex (e.g., Crtl + Alt, Alt, or Ctrl), function as the modifier keys when using them in addition to the Up and Down arrows to grab, drag, and drop a list item.<\/p>\n<p>The <code>onKeyDown()<\/code> function for the sortable list presented below, defines just up and down arrow key operability, along with a roving tabindex. W3C has not yet created a best practice for authoring keyboard interaction for drag and drop elements.<\/p>\n<div style=\"height: 1000px; overflow: hidden;\">\n<div id=\"h5p-111\">\n<div class=\"h5p-content\" data-content-id=\"111\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/wpDjHRpK\/noheader --><\/p>\n<h2>Sortable List in Action<\/h2>\n<p>Watch the following video showing ChromeVox interacting with a sortable list. The Tab key is used to navigate into the list and to exit the list. The Up and Down arrows are used to move between list items. On a Mac, the Command key plus Up or Down arrow, selects a list item and moves it to a new location. On windows the Ctrl key is used instead of Command, along with the Up or Down arrow keys to move list items. Aim to have the sortable list you update in the activity on the next page operate and announce itself like the one in the video.<\/p>\n<p><strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=5wKXDbuAas8\" rel=\"noopener\">Accessible Sortable List<\/a><\/strong><\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Accessible Sortable List\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/5wKXDbuAas8?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"author":100,"menu_order":6,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-379","chapter","type-chapter","status-publish","hentry"],"part":37,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/379","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":39,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/379\/revisions"}],"predecessor-version":[{"id":2031,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/379\/revisions\/2031"}],"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\/379\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=379"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=379"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=379"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}