E-mail List Archives

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


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

----- 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 -----
>> 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
>> -----Original Message-----
>> [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan
>> Garaventa
>> Sent: Sunday, September 25, 2011 3:27 PM
>> To: WebAIM Discussion List
>> Subject: [WebAIM] How to Generate an Automatically Accessible ARIA Tree
>> Control From an XML File
>> I just finished this one over the weekend; it's pretty exciting.
>> The ARIA Tree From XML Module pulls values from an external XML file to
>> dynamically generate ARIA Tree controls that are automatically accessible
>> to
>> screen reader and keyboard only users.
>> ARIA Tree functionality simulates the software browsing functionality of
>> the
>> Windows Explorer TreeView control.
>> Instructions:
>> . Using the mouse, click once to set focus on a tree item; click again to
>> expand/collapse the selected subfolder.
>> . Using a screen reader, press Tab or Arrow to the TreeView control and
>> press Enter to activate.
>> . Use the arrow keys to traverse and expand/collapse selected items and
>> folders.
>> . Press Home or End to jump to the first or last item in the tree.
>> Demo: http://whatsock.com/modules/aria_tree_from_xml_module/demo.htm
>> Download: http://whatsock.com/modules/aria_tree_from_xml_module.zip
>> How It Works
>> After the DOM finishes loading, a top level AccDC Object is opened, which
>> queries the XML file and builds the initial list markup for the top level
>> folder of the tree.
>> When a subfolder is expanded, a new AccDC Object is created to contain
>> all
>> child folder nodes, and then opened as a child of the parent AccDC
>> Object.
>> The XML node "id" attribute is used to bind each folder item with the
>> associated AccDC Object, and each expanded subfolder object is set as the
>> child of
>> the parent AccDC Object. The XML "name" attribute is used to render link
>> text for each folder item.
>> The "handlers" object can be used to assign event handlers with any
>> binding
>> type, so that custom handlers can be added to all tree items, or to
>> individual tree items using their "id" attribute.
>> The "treeTitle" variable specifies a hidden label for the tree for screen
>> reader users.
>> For this demo, the "handlers" object is used to query the Google Map
>> AccDC
>> Object with new coordinates pulled from the selected XML node.
>> The Google Map AccDC Object is registered during setup, and then
>> interfaced
>> with at runtime.
>> The cool thing about this method is that it doesn't require any HTML
>> markup
>> or ARIA knowledge to work, and a lot of data can be packed into
>> relatively
>> small chunks to increase speed and reduce overhead.
>> Also, the module can easily be modified to use JSON instead of XML if
>> desired.
>> E.G.
>> var tree = {
>> am: {
>> id: 'am',
>> name: 'America (North)',
>> us: {
>> id: 'am-us',
>> name: 'United States',
>> ca: {
>> id: 'am-us-ca',
>> name: 'California'
>> }
>> }
>> }
>> };
>> Now check this out... Since the tree control is an AccDC Object with the
>> ID
>> property set to "treeView" (which can be anything really), the tree
>> control
>> AccDC Object can be directly accessed at runtime to reopen/close, change
>> properties, and/or execute methods.
>> So, for example, if the English XML file is loaded automatically, and
>> there
>> is a language selector on the page, the tree control AccDC Object can be
>> reopened like so with the new language file:
>> // Get a reference to the tree control AccDC Object
>> var dc = $A.reg.treeView;
>> // Set a different XML file (or load one from an API call)
>> dc.ajaxOptions.url = 'files/tree.pt.xml';
>> // Then reopen the tree control with the new language
>> dc.open();
>> // Pretty awesome ey?
>> Basically, this is designed to be fast, reliable, consistent, and
>> automatically accessible. My hope is to extend the concept of ARIA to
>> (Automatically Accessible Rich Internet Applications) if possible.
>> I had to borrow some eyeballs to make sure the zoom ratios were right in
>> the
>> demo though, but hey, nobody's perfect.
>> Enjoy,
>> Bryan