WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: A Module for Morphing Standard ElementsintoAutomatically Accessible Drag and Drop Components UsingCSSSelectors

for

From: Bryan Garaventa
Date: Oct 4, 2011 5:33PM

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