WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to Generate an Automatically Accessible ARIA Tree Control From an XML File

for

From: Bryan Garaventa
Date: Sep 27, 2011 4:15PM

No problem.

When you set focus to a li tag, all that is contained within the li is
typically announced, including the contents of subfolders nested within the
same li tag, which gets pretty confusing.

I solved this by creating a separate div within the li to set focus to
instead of using the parent li tag, so that focus would ignore the content
of all nested subfolders within the same li tag.

There is one other way of doing it if you really want to set focus to the
li, which is to give the contained div a unique id, then add
aria-labelledby="uniqueID" to the parent li tag. Since this would marginally
slow the speed of my script I omitted this technique in favor of the other
though.

----- Original Message -----
From: "Ryan Hemphill" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Tuesday, September 27, 2011 12:49 PM
Subject: Re: [WebAIM] How to Generate an Automatically Accessible ARIA Tree
Control From an XML File


> Can you tell me more about the nested div within list item tags? It sounds
> important, but I am not certain I understand the problem - did any of this
> relate directly to how the screen reader read the materials? I have found
> cases where lists will read off the entire lists upon focus of one item.
> Is
> this similar or are we discussing just basic javascript event issues?
>
> On Tue, Sep 27, 2011 at 10:31 AM, Bryan Garaventa <
> <EMAIL REMOVED> > wrote:
>
>> Thanks for the info. :) Sighted mouse usage isn't one of my strong
>> points.
>>
>> All of the child subfolder objects are automatically rendered by the
>> AccDC
>> API, which includes an automatic framework to ensure accessibility; This
>> is
>> rendered using nested divs. So it wouldn't be necessary if you were
>> replicating a static tree with predetermined nodes.
>>
>> The nested div containing the label within the li tag is necessary
>> though,
>> since this is what receives focus. If you put all of the event handlers
>> on
>> the li tags, propagation when nested lists are present as subfolders
>> causes
>> multiple firing of unrelated events. I wasn't able to get this working
>> even
>> when using stopPropagation() and cancelBubble.
>>
>>
>> ----- Original Message -----
>> From: "GILLENWATER, ZOE M" < <EMAIL REMOVED> >
>> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>> Sent: Tuesday, September 27, 2011 7:07 AM
>> Subject: Re: [WebAIM] How to Generate an Automatically Accessible ARIA
>> Tree
>> Control From an XML File
>>
>>
>> Bryan,
>>
>> This is a great idea and very cool demo. Just a couple points:
>>
>> -- I only have to click once on a tree item to expand/collapse it, not
>> twice
>> as your notes seem to indicate. But frankly I think that's a good thing.
>> I
>> suspect a single click is what most users will expect, and I don't see
>> anything in the W3C guidelines
>> (http://www.w3.org/TR/wai-aria-practices/#TreeView) that dictates
>> double-click (though most ARIA tree demos do seem to use double-click for
>> some reason).
>> -- There are a lot of nested divs within the lists. Are these required in
>> order to make it automated? It would be nice if you could apply the ARIA
>> attributes to the <li> elements directly instead of nesting divs.
>>
>> Excellent work!
>> Zoe
>>
>>
>> Zoe Gillenwater
>> Technical Architect, Design Standards Accessibility
>> Creative Experience Team
>> AT&T eCommerce
>>
>> o: 919-241-4083
>> e: <EMAIL REMOVED>
>>
>>