Sortable Lists

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.

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  “Edit in JSFiddle” at the top, right-hand side, copying the accessibility/WAI-ARIA code described below to fix the accessibility of the menu bar before completing Activity 14 on the page that follows.

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).

Assign a redundant role="list" to the opening ul, make the ul keyboard focusable, and attach the instruction with aria-labelledby="[instruction div id]" so keyboard navigation details are announced when the list initially receives focus while using a screen reader.

Within the init() function, generate the <div> that will contain the instructions, and add aria-hidden="true" to hide it from screen readers by default.

In the items section of the init() function, where draggable is defined for each item in the list, add a redundant role="listitem", and generate a label for each item that describes the list item’s current position and that that list item is “movable.” Finally, set tabindex="0" on the first list item, and tabindex="-1" on the other list items in order to ensure a list item is focusable by default.

Where the draggable attributes are defined near the end of the init() function, attach a keydown reference to the onKeyDown() function to make the list draggable with a keyboard.

In the resetNumbering() function, update the label for moved items to reflect their new position in the list using aria-label = "[new position]".

Adding Keyboard Operability

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.

The onKeyDown() 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.

Sortable List in Action

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.

Video: Accessible Sortable List