Hello Bryan and all,

Thanks for that info! You're screenreader-aware... and it's great!
-- 
With best regards from Ukraine,
Andre
Skype: Francophile; Wlm&MSN: arthaelon @ yandex.ru; Jabber: arthaelon @ 
jabber.org
Yahoo! messenger: andre.polykanine; ICQ: 191749952
Twitter: m_elensule

----- Original message -----
From: Bryan Garaventa <goo...@gutterstar.net>
To: jquery-en@googlegroups.com <jquery-en@googlegroups.com>
Date: Wednesday, November 25, 2009, 10:46:57 AM
Subject: [jQuery] accDND: The Keyboard and Screen Reader Accessible Drag and  
Drop Plugin

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
}
});

Reply via email to