WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: A Module for MorphingStandard ElementsintoAutomatically Accessible Drag and DropComponents UsingCSSSelectors

for

From: Bryan Garaventa
Date: Oct 5, 2011 8:12AM

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 REMOVED> >
To: "'WebAIM Discussion List'" < <EMAIL 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
>
>
> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
> Sent: Wednesday, October 05, 2011 6:03 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] A Module for Morphing Standard
> ElementsintoAutomatically Accessible Drag and Drop Components
> UsingCSSSelectors
>
> 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 REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL 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 REMOVED> >
>> To: "'WebAIM Discussion List'" < <EMAIL 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
>>>
>>>
>>> -----Original Message-----
>>> From: <EMAIL REMOVED>
>>> [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan
>>> Garaventa
>>> Sent: Tuesday, October 04, 2011 11:48 AM
>>> To: WebAIM Discussion List
>>> Subject: [WebAIM] A Module for Morphing Standard Elements into
>>> Automatically
>>> Accessible Drag and Drop Components Using CSS Selectors
>>>
>>> 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
>>>