E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Bryan Garaventa
Date: Sun, Sep 25 2011 1:24PM
Subject: How to Generate an Automatically Accessible ARIA Tree Control From an XML File
No previous message | Next message →

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

From: GILLENWATER, ZOE M
Date: Tue, Sep 27 2011 8:09AM
Subject: Re: How to Generate an Automatically Accessible ARIA Tree Control From an XML File
← Previous message | Next message →

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 ADDRESS REMOVED =

From: Bryan Garaventa
Date: Tue, Sep 27 2011 8:33AM
Subject: Re: How to Generate an Automatically Accessible ARIA Tree Control From an XML File
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED =

From: Ryan Hemphill
Date: Tue, Sep 27 2011 1:48PM
Subject: Re: How to Generate an Automatically Accessible ARIA Tree Control From an XML File
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
>

From: Bryan Garaventa
Date: Tue, Sep 27 2011 4:15PM
Subject: Re: How to Generate an Automatically Accessible ARIA Tree Control From an XML File
← Previous message | No next message

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>
>>