WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to make a sortable list box using aria-grabbed and other ARIA attributes

for

From: Lucy Greco
Date: Nov 7, 2011 1:00PM

Hello:
Sorry I think you lost me on this one.
So I followed the instructions as much as I understood them. . I hit enter on the edit field then I clicked add to list then I went to the items and clicked space on a few of the items. But nothing seemed to happen. And you lose me after this I don't get what should happen and if I even did it write.

Lucy Greco
Assistive Technology Specialist
Disabled Student's Program UC Berkeley
(510) 643-7591
http://attlc.berkeley.edu
http://webaccess.berkeley.edu

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Sunday, November 06, 2011 11:10 AM
To: WebAIM Discussion List
Subject: [WebAIM] How to make a sortable listbox using aria-grabbed and other ARIA attributes

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