E-mail List Archives

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


From: Ryan Hemphill
Date: Sep 27, 2011 1:48PM

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