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: GILLENWATER, ZOE M
Date: Sep 27, 2011 8:09AM

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>

-----Original Message-----
From: <EMAIL REMOVED> [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 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.

Enjoy,
Bryan