Starting with the 2010 Q2 Beta release of RadControls for ASP.NET AJAX, RadTreeView adheres to the WAI-ARIA specification for Accessible Rich Internet Applications. With this feature on-board, it’s now possible for screen readers and other accessibility tools (supporting WAI-ARIA) to semantically parse the html structure of the tree.
Summary of the new feature
Making a quick peek inside the html of RadTreeView with enabled support for WAI-ARIA, one can see the “roles”, “states” and “properties” that the standard requires.
They all are represented through attributes in the html structure of the tree, decorating the elements with semantic meaning.
Having them applied, the screen reader can parse the semantics into more meaningful for the user form and present it with respect to a specific action (keypress or mouse click on the TreeView by the user).
The updates to all of these attributes are performed even if they are triggered on background. For example, if you collapse a node with the client-side API, the WAI-ARIA-specific attribute ”aria-expanded” over the node’s html element will be instantly updated. That way the updates are not performed only on user demand which is very helpful for dispersing and managing of heavy load on the tree.
Usability
Currently the user receives information through the screen reader about the following:
Combined with the default keyboard navigation, it makes RadTreeView much more accessible.
How to enable WAI-ARIA support?
What would be simpler than a single property?!
To enable the support for WAI-ARIA in your RadTreeView, you have to set the EnableAriaSupport property to “true”:
1. Declaratively, in the markup of the treeView:
<telerik:RadTreeView runat="server" ID="RadTreeView1" EnableAriaSupport="true"> </telerik:RadTreeView>
2. Or from the code-behind:
RadTreeView1.EnableAriaSupport = true;
Example
Here is an example of how the screen reader is interpreting the WAI-ARIA attributes that we have applied:
The procedure here is:
As you can see:
What screen reader should be used?
We have used the NVDA screen reader for developing and verifying our solution. But on theory all screen readers available and supporting WAI-ARIA should work just as fine!
What’s next?
This is our first control supporting the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA). But our intention is to implement it for all applicable Telerik controls.
With this work we also try to support the actual cause standing behind WAI – enable people with disabilities to fully access web applications.
We sincerely hope this is going to be a useful feature for all of you guys!
Iana Tsolova is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.