E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 10 (In chronological order)

From: Bryan Garaventa
Date: Tue, Oct 04 2011 12:15AM
Subject: A Module for Morphing Standard Elements into Automatically Accessible Drag and Drop Components Using CSS Selectors
No previous message | Next message →

Hi,
I thought I'd pass this on in case it's of interest. The CSS Drag and Drop Module automatically morphs standard DOM elements into automatically accessible drag and drop components using CSS Selectors.

I decided not to use ARIA in this case for several reasons. One being automatic cross-platform compatibility. Another is dynamic localization, so that action keywords and accessible text can be changed on the fly to accommodate any language. Lastly, the action words themselves can be changed to fit the UI concept of any application. E.G. Drag and Drop, Cut/Copy and Paste, Grab and Dunk, Flip and Flop, whatever fits the metaphor... Allowing such components to be useful when adding items to a shopping cart, videos to a playlist basket, documents to a desktop or shredder, job listings to a job-cart, or whatever.

The implementation automatically supports multiple draggable objects and multiple drop zones, whatever matches the CSS Selectors.

Live demo: http://whatsock.com/modules/css_drag_drop_module/demo.htm
Zip download: http://whatsock.com/modules/css_drag_drop_module.zip

Instructions:
. Activate the "Set Drag&Drop" button to morph all book images into draggable AccDC Objects.
. Using the mouse, drag and drop each book that you would like to read into the Reading List section, or visa versa to remove them from the Reading List.
. Using the keyboard, arrow or tab between each draggable book, and press the Enter or Spacebar keys to toggle dragging.
. Tab to the Reading List section, or jump to the Reading List heading using screen reader quick navigation commands, then drop each item currently being dragged by pressing the Enter or Spacebar key on relevant drop links.
. Do the same for the books in the Reading List section, then press shift+tab to navigate to the drop links at the beginning of the Bookshelf section, or use screen reader navigation commands to jump to the Bookshelf section heading where the new drop links are located.
. Alternatively, use the hotkeys associated with each of the Bookshelf and Reading List headings to jump between each section.

I set the drop animation duration to 2000ms for the demo, so keyboard users will notice a 2 second delay between the time that the drop link is activated and when the dragged item appears in the same section. This can be set to any value though, such as 0 to instantly apply the drop event handler. All drag and drop event handlers are cross-referenced so that sighted mouse users trigger the same events as screen reader and keyboard only users.

All the best,
Bryan

From: Priti
Date: Tue, Oct 04 2011 10:06AM
Subject: Re: A Module for Morphing Standard Elements into Automatically Accessible Drag and Drop Components Using CSS Selectors
← Previous message | Next message →

Hi Brian,

Brilliant demo! Thanks a ton for sharing it with the group.

I tried the demo out with JAWS & NVDA & below are my little observations, if
it is of help:
1. JAWS with IE & FF: For the list of drag/drop options, the item name is
read out twice once as image alt and then a link that can be dragged or
dropped. This happens for Book shelf as well as Reading list.
2. NVDA with IE & FF also reads the options twice and also identified the
image alt as clickable element.

Rest all was fine, the demo is great and removing the repetition will be an
icing on the cake.

Thanks & Regards,
Priti Rohra
Twitter: http://www.twitter.com/pritirohra

From: Vincent Young
Date: Tue, Oct 04 2011 10:45AM
Subject: Re: A Module for Morphing Standard Elements into Automatically Accessible Drag and Drop Components Using CSS Selectors
← Previous message | Next message →

Really good stuff here Bryan. Some feedback:

Was thinking about the user experience for keyboard only users primary with
motor impairments and tabbing through to the other side could be a bit of
work. The DHTML style guide (
http://dev.aol.com/dhtml_style_guide#draganddrop) has some ideas about how
to accomplish this... of course ARIA would be involved, but the SHIFT + CTRL
+ M makes sense in your case.

I feel the accessibility community should get together and standardize the
behavior for ARIA/Non-Aria, especially with the ever so common book
drag/drop example you presented.


On Mon, Oct 3, 2011 at 11:17 PM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:

> Hi,
> I thought I'd pass this on in case it's of interest. The CSS Drag and Drop
> Module automatically morphs standard DOM elements into automatically
> accessible drag and drop components using CSS Selectors.
>
> I decided not to use ARIA in this case for several reasons. One being
> automatic cross-platform compatibility. Another is dynamic localization, so
> that action keywords and accessible text can be changed on the fly to
> accommodate any language. Lastly, the action words themselves can be changed
> to fit the UI concept of any application. E.G. Drag and Drop, Cut/Copy and
> Paste, Grab and Dunk, Flip and Flop, whatever fits the metaphor... Allowing
> such components to be useful when adding items to a shopping cart, videos to
> a playlist basket, documents to a desktop or shredder, job listings to a
> job-cart, or whatever.
>
> The implementation automatically supports multiple draggable objects and
> multiple drop zones, whatever matches the CSS Selectors.
>
> Live demo: http://whatsock.com/modules/css_drag_drop_module/demo.htm
> Zip download: http://whatsock.com/modules/css_drag_drop_module.zip
>
> Instructions:
> . Activate the "Set Drag&Drop" button to morph all book images into
> draggable AccDC Objects.
> . Using the mouse, drag and drop each book that you would like to read into
> the Reading List section, or visa versa to remove them from the Reading
> List.
> . Using the keyboard, arrow or tab between each draggable book, and press
> the Enter or Spacebar keys to toggle dragging.
> . Tab to the Reading List section, or jump to the Reading List heading
> using screen reader quick navigation commands, then drop each item currently
> being dragged by pressing the Enter or Spacebar key on relevant drop links.
> . Do the same for the books in the Reading List section, then press
> shift+tab to navigate to the drop links at the beginning of the Bookshelf
> section, or use screen reader navigation commands to jump to the Bookshelf
> section heading where the new drop links are located.
> . Alternatively, use the hotkeys associated with each of the Bookshelf and
> Reading List headings to jump between each section.
>
> I set the drop animation duration to 2000ms for the demo, so keyboard users
> will notice a 2 second delay between the time that the drop link is
> activated and when the dragged item appears in the same section. This can be
> set to any value though, such as 0 to instantly apply the drop event
> handler. All drag and drop event handlers are cross-referenced so that
> sighted mouse users trigger the same events as screen reader and keyboard
> only users.
>
> All the best,
> Bryan
>

From: Bryan Garaventa
Date: Tue, Oct 04 2011 11:12AM
Subject: Re: A Module for Morphing Standard Elements into Automatically Accessible Drag and Drop Components Using CSS Selectors
← Previous message | Next message →

Excellent thanks, I'll check it out :)

----- Original Message -----
From: "Vincent Young" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, October 04, 2011 9:36 AM
Subject: Re: [WebAIM] A Module for Morphing Standard Elements into
Automatically Accessible Drag and Drop Components Using CSS Selectors


> Really good stuff here Bryan. Some feedback:
>
> Was thinking about the user experience for keyboard only users primary
> with
> motor impairments and tabbing through to the other side could be a bit of
> work. The DHTML style guide (
> http://dev.aol.com/dhtml_style_guide#draganddrop) has some ideas about how
> to accomplish this... of course ARIA would be involved, but the SHIFT +
> CTRL
> + M makes sense in your case.
>
> I feel the accessibility community should get together and standardize the
> behavior for ARIA/Non-Aria, especially with the ever so common book
> drag/drop example you presented.
>
>
> On Mon, Oct 3, 2011 at 11:17 PM, Bryan Garaventa <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi,
>> I thought I'd pass this on in case it's of interest. The CSS Drag and
>> Drop
>> Module automatically morphs standard DOM elements into automatically
>> accessible drag and drop components using CSS Selectors.
>>
>> I decided not to use ARIA in this case for several reasons. One being
>> automatic cross-platform compatibility. Another is dynamic localization,
>> so
>> that action keywords and accessible text can be changed on the fly to
>> accommodate any language. Lastly, the action words themselves can be
>> changed
>> to fit the UI concept of any application. E.G. Drag and Drop, Cut/Copy
>> and
>> Paste, Grab and Dunk, Flip and Flop, whatever fits the metaphor...
>> Allowing
>> such components to be useful when adding items to a shopping cart, videos
>> to
>> a playlist basket, documents to a desktop or shredder, job listings to a
>> job-cart, or whatever.
>>
>> The implementation automatically supports multiple draggable objects and
>> multiple drop zones, whatever matches the CSS Selectors.
>>
>> Live demo: http://whatsock.com/modules/css_drag_drop_module/demo.htm
>> Zip download: http://whatsock.com/modules/css_drag_drop_module.zip
>>
>> Instructions:
>> . Activate the "Set Drag&Drop" button to morph all book images into
>> draggable AccDC Objects.
>> . Using the mouse, drag and drop each book that you would like to read
>> into
>> the Reading List section, or visa versa to remove them from the Reading
>> List.
>> . Using the keyboard, arrow or tab between each draggable book, and press
>> the Enter or Spacebar keys to toggle dragging.
>> . Tab to the Reading List section, or jump to the Reading List heading
>> using screen reader quick navigation commands, then drop each item
>> currently
>> being dragged by pressing the Enter or Spacebar key on relevant drop
>> links.
>> . Do the same for the books in the Reading List section, then press
>> shift+tab to navigate to the drop links at the beginning of the Bookshelf
>> section, or use screen reader navigation commands to jump to the
>> Bookshelf
>> section heading where the new drop links are located.
>> . Alternatively, use the hotkeys associated with each of the Bookshelf
>> and
>> Reading List headings to jump between each section.
>>
>> I set the drop animation duration to 2000ms for the demo, so keyboard
>> users
>> will notice a 2 second delay between the time that the drop link is
>> activated and when the dragged item appears in the same section. This can
>> be
>> set to any value though, such as 0 to instantly apply the drop event
>> handler. All drag and drop event handlers are cross-referenced so that
>> sighted mouse users trigger the same events as screen reader and keyboard
>> only users.
>>
>> All the best,
>> Bryan
>>

From: Bryan Garaventa
Date: Tue, Oct 04 2011 11:18AM
Subject: Re: A Module for Morphing Standard Elements intoAutomatically Accessible Drag and Drop Components Using CSSSelectors
← Previous message | Next message →

Thanks :)
I understand what you mean about the repetition. This doesn't have anything
to do with the module, but rather the way that the demo is implemented. For
instance, this is what is happening:

When the page loads, the images are contained within unordered list markup,
and each image contains an Alt and Title attribute for cross-browser mouse
usage and to ensure accessibility for screen reader users. Other than that,
the images are nothing special, just IMG tags.

When the Set button is activated, the script loops through each IMG node
matching the CSS Selector, then, using the setName(obj) method, assigns the
textual name for that object. Otherwise the accessible links would have no
link text. What this allows users to do is to loop through each object
dynamically and pull accessible text from the object itself, thus automating
the accessibility.

So, in this case, the accessible text is being pulled from the IMG Alt
attribute of each object. You can see how by looking at the "setName" method
in the script file at
http://whatsock.com/modules/css_drag_drop_module/js/setup.js

What I could do, to prevent the redundancy, is to remove the Alt attribute
from the image after the correct Alt text is pulled from the object, but
this may reduce the visual tooltip appearance for sighted users. I would use
aria-hidden, but this doesn't work in IE that I've noticed. Either way, it
comes down to the demo, the module itself can be used for anything.

----- Original Message -----
From: "Priti" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, October 04, 2011 9:07 AM
Subject: Re: [WebAIM] A Module for Morphing Standard Elements
intoAutomatically Accessible Drag and Drop Components Using CSSSelectors


> Hi Brian,
>
> Brilliant demo! Thanks a ton for sharing it with the group.
>
> I tried the demo out with JAWS & NVDA & below are my little observations,
> if
> it is of help:
> 1. JAWS with IE & FF: For the list of drag/drop options, the item name is
> read out twice once as image alt and then a link that can be dragged or
> dropped. This happens for Book shelf as well as Reading list.
> 2. NVDA with IE & FF also reads the options twice and also identified the
> image alt as clickable element.
>
> Rest all was fine, the demo is great and removing the repetition will be
> an
> icing on the cake.
>
> Thanks & Regards,
> Priti Rohra
> Twitter: http://www.twitter.com/pritirohra
>
>
>

From: Lucy Greco
Date: Tue, Oct 04 2011 11:51AM
Subject: Re: A Module for Morphing Standard Elements into Automatically Accessible Drag and Drop Components Using CSS Selectors
← Previous message | Next message →

That was fun. I really like that I could change the order of items in the same list as well. Grate job this worked well with jaws 12 and i.e. 9 I do agree that the double verbosity after the set drag and drop is a little much but boy did it work. If you could have the lists as tables then it would not matter that the two titles are there. I would then move up and down the colim and make my choices. The other thing I liked was that once I was in the drop folder the items were there for me to drop already and they came over nicely. I did by mistake double click one and put it back in the first list by mistake but was easily fixed great job.

From: Bryan Garaventa
Date: Tue, Oct 04 2011 5:33PM
Subject: Re: A Module for Morphing Standard ElementsintoAutomatically Accessible Drag and Drop Components UsingCSSSelectors
← Previous message | Next message →

Actually fixing the redundant text issue was easy, the Alt can simply be
moved into the parentNode title attribute after the original text is copied
from the IMG node. Problem solved, took about 5 mins.

Also, the reason that NVDA is repeating each link twice when arrowing down
the page in FF is because onFocus appears to be automatically triggered by
NVDA, causing the links to jump into visibility; which NVDA announces
automatically.

Plus there appears to be a bug in JAWS when tabbing through the drag links
using FF, which shouldn't be a problem since they are just standard A tags
with no tabindex attributes; it looks like the section heading with
tabindex="-1" and accesskey="2" is confusing the screen reader. Weird.

----- Original Message -----
From: "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, October 04, 2011 10:12 AM
Subject: Re: [WebAIM] A Module for Morphing Standard
ElementsintoAutomatically Accessible Drag and Drop Components
UsingCSSSelectors


> Thanks :)
> I understand what you mean about the repetition. This doesn't have
> anything
> to do with the module, but rather the way that the demo is implemented.
> For
> instance, this is what is happening:
>
> When the page loads, the images are contained within unordered list
> markup,
> and each image contains an Alt and Title attribute for cross-browser mouse
> usage and to ensure accessibility for screen reader users. Other than
> that,
> the images are nothing special, just IMG tags.
>
> When the Set button is activated, the script loops through each IMG node
> matching the CSS Selector, then, using the setName(obj) method, assigns
> the
> textual name for that object. Otherwise the accessible links would have no
> link text. What this allows users to do is to loop through each object
> dynamically and pull accessible text from the object itself, thus
> automating
> the accessibility.
>
> So, in this case, the accessible text is being pulled from the IMG Alt
> attribute of each object. You can see how by looking at the "setName"
> method
> in the script file at
> http://whatsock.com/modules/css_drag_drop_module/js/setup.js
>
> What I could do, to prevent the redundancy, is to remove the Alt attribute
> from the image after the correct Alt text is pulled from the object, but
> this may reduce the visual tooltip appearance for sighted users. I would
> use
> aria-hidden, but this doesn't work in IE that I've noticed. Either way, it
> comes down to the demo, the module itself can be used for anything.
>
> ----- Original Message -----
> From: "Priti" < = EMAIL ADDRESS REMOVED = >
> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
> Sent: Tuesday, October 04, 2011 9:07 AM
> Subject: Re: [WebAIM] A Module for Morphing Standard Elements
> intoAutomatically Accessible Drag and Drop Components Using CSSSelectors
>
>
>> Hi Brian,
>>
>> Brilliant demo! Thanks a ton for sharing it with the group.
>>
>> I tried the demo out with JAWS & NVDA & below are my little observations,
>> if
>> it is of help:
>> 1. JAWS with IE & FF: For the list of drag/drop options, the item name is
>> read out twice once as image alt and then a link that can be dragged or
>> dropped. This happens for Book shelf as well as Reading list.
>> 2. NVDA with IE & FF also reads the options twice and also identified the
>> image alt as clickable element.
>>
>> Rest all was fine, the demo is great and removing the repetition will be
>> an
>> icing on the cake.
>>
>> Thanks & Regards,
>> Priti Rohra
>> Twitter: http://www.twitter.com/pritirohra
>>
>>
>>

From: Priti
Date: Wed, Oct 05 2011 2:51AM
Subject: Re: A Module for Morphing Standard ElementsintoAutomatically Accessible Drag and Drop Components UsingCSSSelectors
← Previous message | Next message →

Hi Brian,

Yes! Working fine!
Thanks, one last thing on this: forgot to include it on yesterday's findings
- <ul> is not used for the items that are available below the heading
"Reading List", any specific reason? It is available when the selected items
are dropped. Just wanted to know if is there any specific reasoning behind
doing so?

Once again great work!

Thanks & Regards,
Priti Rohra
Twitter: http://www.twitter.com/pritirohra

From: Bryan Garaventa
Date: Wed, Oct 05 2011 8:12AM
Subject: Re: A Module for MorphingStandard ElementsintoAutomatically Accessible Drag and DropComponents UsingCSSSelectors
← Previous message | Next message →

Excellent! Thanks :)

Within the Bookshelf list, I'm using a UL tag, and within the Reading List,
I'm using an OL tag. Functionally both work the same since list-style is set
to "none". I mainly did this so the two sections would be clearly
differentiated within the code for developers reading the code. Otherwise,
both could be made to use UL tags without a problem, or DIV tags, or any
other container element.


----- Original Message -----
From: "Priti" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, October 05, 2011 1:53 AM
Subject: Re: [WebAIM] A Module for MorphingStandard
ElementsintoAutomatically Accessible Drag and DropComponents
UsingCSSSelectors


> Hi Brian,
>
> Yes! Working fine!
> Thanks, one last thing on this: forgot to include it on yesterday's
> findings
> - <ul> is not used for the items that are available below the heading
> "Reading List", any specific reason? It is available when the selected
> items
> are dropped. Just wanted to know if is there any specific reasoning behind
> doing so?
>
> Once again great work!
>
> Thanks & Regards,
> Priti Rohra
> Twitter: http://www.twitter.com/pritirohra
>
>
>

From: SaravanaMoorthy.P
Date: Tue, Nov 01 2011 7:00AM
Subject: Re: A Module for Morphing Standard Elements into Automatically Accessible Drag and Drop Components Using CSS Selectors (saravana moorthy)
← Previous message | No next message

Amazing one Bryan....thanks for sharing.

Thanks and Regards,
Saravana Moorthy