WebAIM - Web Accessibility In Mind

E-mail List Archives

How to make a sortable listbox using aria-grabbed and other ARIA attributes

for

From: Bryan Garaventa
Date: Nov 6, 2011 12:09PM

Hi,
I wanted to explore aria-grabbed in the context of a practical application, so came up with this.

The ARIA Sortable Listbox Module dynamically converts standard list markup into a keyboard accessible sortable listbox control.
Demo: http://whatsock.com/modules/aria_sortable_listbox_module/demo.htm

In addition to aria-grabbed, various other ARIA attributes are used, including role=dialog, role=listbox, role=option (plus associated listbox attributes), and unobtrusive status messages to provide additional feedback.

Hopefully this helps with the research of ARIA-based implementations.

Instructions:
. Press Enter on the edit field or activate the Add button to add a new list item;
Activate Clear to empty the list, or activate Sort to toggle sortability of the list.
. Using the mouse, click a list item to make a selection,
then click any other list item to move the selected item to that location.
. Using the keyboard, use the Up/Down/Home/End keys to navigate listed items.
. Press the Spacebar to grab the selected item for moving;
Press the Spacebar again after navigating to another location to move the grabbed item.
. Press Delete on a selected item to remove it from the list.
. Press Escape to cancel a previous grab action;
Press Escape again or press Enter to close the listbox and disable sortability.

All the best,
Bryan