WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Bryan Garaventa
Date: Nov 7, 2011 2:24PM

No worries, you have to click the "Enable sort" button to toggle editing on
and off. It's off by default.

I just noticed something curious, in JAWS if you have a button element with
a title like so
<button title="Enable sort">Sort</button>
JAWS will read the button text when arrowing but will read the title when
tabbing.
However, if you change the tag to
<button role="button" title="Enable sort">Sort</button>
JAWS will then read the title when both arrowing and tabbing.

----- Original Message -----
From: "Lucy Greco" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Monday, November 07, 2011 12:02 PM
Subject: Re: [WebAIM] How to make a sortable list box using aria-grabbedand
other ARIA attributes


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