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:
- Is the TreeView enabled;
- Is the multi-selection enabled in the TreeView;
- What is the level of the currently selected node in the hierarchy of the tree;
- What is the position of the currently selected node with respect to its siblings (1st, 2nd, 3rd etc.);
- Is the currently clicked/”keypressed” node selected? Also:
- Is the node checked (if you check/uncheck it while selected it’s detected);
- Is the node enabled;
- Is the node expanded (if you expand/collapse it while selected it’s detected);
- If the node is being dragged;
- If the node is being dropped.
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:
- Select the first root node in the tree (“Software”);
- DoubleClick over the node “Software” (expand it);
- Press the down arrow key (select “Business & Office”);
- Press the down arrow key (select next node) until you reach the last node on this level (“Spreadsheet”).
As you can see:
- It recognizes the RadTreeView – “tree view” (here the WAI-ARIA support kicks-in);
- Reads that the currently selected (and focused) node is being expanded;
- Reads every following selection;
- For every selection it displays:
- The position of the node with respect to the hierarchy (“Database 2 of 7 level 2”);
- The position of the node with respect to its siblings (“Database 2 of 7 level 2”).
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!