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 8:33AM

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


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 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.
. 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
. 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
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
// 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 AARIA
(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.