WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: A Module for Morphing Standard Elements intoAutomatically Accessible Drag and Drop Components Using CSSSelectors

for

From: Bryan Garaventa
Date: Oct 4, 2011 11:18AM

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