http://plugins.jquery.com/project/accDND
About
accDND is a keyboard and screen reader accessible drag and drop
functionality plugin for jQuery.
Features include:
a.. Dragging selected options between unlimited Select fields by pressing
the drag key ("`"), or cancel ("Escape") to stop dragging.
b.. Optional flashing status messages to enhance user interaction.
c.. WAI-ARIA support to enable automatic announcement of status messages
for screen reader users.
d.. Dynamic screen reader accessible hidden text to ensure accessibility
for assistive technologies and browser versions that don't support ARIA.
Details
accDND was created to provide a fully accessible method for keyboard users
to drag options between unlimited Select fields on a page.
Though it is possible to create the same keyboard functionality for divs,
links, images, table cells and rows, lists, and more, accDND is restricted
to form Select fields for brevity.
Since the plugin effects keyboard usage only, you can use both accDND and a
mouse-driven drag and drop plugin on the same select fields without causing
conflicts.
WAI-ARIA has been implemented to allow supporting screen readers to announce
status messages as they appear. Moreover, you can optionally prevent status
messages from appearing visually, yet supporting screen readers will
continue to announce the status messages to ensure accessibility. (All
status messages are customizable and optional.)
Unfortunately however, screen readers still have quite a ways to go before
ARIA is considered a fully viable accessibility solution. For example,
a.. accDND status messages work well using JAWS10+> with Firefox, yet the
functionality is unreliable and spotty when using JAWS11 with IE8;
b.. accDND status messages don't work at all when using Window Eyes7.1
with either Firefox or IE8.
(Additional screen reader tests would be appreciated.)
Hopefully these assistive technologies will continue to improve their ARIA
support in the future.
To ensure backwards compatibility with assistive technologies and browser
versions that don't support ARIA, a screen reader accessible intro message
is automatically inserted into the page during the setup process. Both the
formatting and DOM positioning of the intro message is designed to ensure
accessibility for screen reader users. For example, each intro message is
surrounded by an H3 tag to allow screen reader users to quickly jump between
each of these sections using the header navigation commands. This also
conforms with the WCAG's guidelines regarding the proper ordering of section
header markup. (The screen reader accessible intro message is completely
invisible to sighted users, and has no effect on the page layout.)
Instructions
1.. Simply ensure that all dragable form Select fields share the same
class name. (class="ClassName")
Also, you can include multiple groups of dragable selects by giving each
group a unique class name.
(View the demo to see an example.)
2.. Within the head tag, include:
<script type="text/javascript" src="jquery.acc.dnd.js"></script>
(After the script instantiating jQuery.)
3.. After the page loads, call accDND like so:
$('select.ClassName').accDND();
Customization
accDND is fully configurable using the following syntax:
$('select.ClassName').accDND({
// The default drag toggle key is `
// Important: When changing this value, be sure to pick a key that has no
screen reader hotkey conflicts.
dragKey: 96,
// The default cancel key is Escape
cancelKey: 27,
// Display visual status messages.
// When set to false, status messages will be announced to screen reader
users regardless, invisibly.
smShow: true,
// Visual status messages will disappear in n milliseconds.
smTimeout: 1500,
// Status messages.
// To stop individual messages from being shown, pass a value of ""
smCanceled: 'Dragging canceled',
smDragging: 'Now dragging',
smDropped: 'Selection added',
smErSame: 'Already dragging',
smErMismatch: 'Cannot drag to this list',
smErNothing: 'Nothing selected',
smNoticeDrag: 'Dragable',
smNoticeDrop: 'Droppable',
// This message is important for screen reader users, who will encounter the
message when arrowing down the page.
// Be sure to update this text if you change any of the default hotkeys.
smIntroForScreenReaders: 'Press the %DRAG% key to drag items from one list
to another, or press Escape to cancel dragging.',
// Visual styling for the status messages.
smCSS: {
fontSize: '0.8em',
fontFamily: 'Verdana,Arial,Helvetica,sans-serif',
fontStyle: 'italic',
backgroundColor: '#C0C0FF',
border: 'solid thin black',
color: '#228b22',
position: 'absolute',
zIndex: 10
}
});
