This is a migrated thread and some comments may be shown as answers.

Section 508 Issues for Menu and TreeView

13 Answers 285 Views

Let's talk about telerik (the good and the bad)

This is a migrated thread and some comments may be shown as answers.

rosborn asked on 28 Jan 2009, 03:40 PM

I am using the RadMenu on my DotNetNuke web site (thanks for the sample) and need to be Section 508 compliant. One of my menu items has sub-items. My government tester is saying that the sub-items are not "seen" by the reader software, and so the reader software does not properly alert the user about the existence of the sub-items.

I am also using a RadTreeView control. There are two problems with this. First, I am using a common asp.net Label control as a "header" for the tree view. Usually, you set the AssociatedControlID of the label to some other control so that the accessibility reader software can associate the label to the control. I set the AssociatedControlID to the tree view, but my tester states the tree view is "not labeled propoerly". I looked at the generated HTML source and the "for" tag for the label is there, but it does not match any id in the HTML. It looks like there is a similar div tag, but it has "_wrapper" added to the end of the id. Any ideas on that?

The other problem with the tree view is (I'm told) that the reader software does not seem to be able to interact well with the tree view. Here's wahat my tester wrote:

N/CNot enough information provided in the Attributes Grouping. Blind user would not know to press Enter onAttributes or press left arrow to expand group. Name, role, and state is not provided forobjects within the categories.

Thanks for any help you could provide.

13 Answers, 1 is accepted

answered on 28 Jan 2009, 04:30 PM

Hi rosborn,

RadMenu uses javascript to open its items hence JAWS reader cannot "see" them. We have a workaround described in this blog post however it is for a newer version of RadMenu. Anyway you can try adding the following CSS to your web page:

<style type="text/css">
        div.radmenu .slide,
        div.radmenu .slide .group
        {
            display: block !important;
            left: -999px;
        }

        div.radmenu .slide iframe
        {
           display:none;
        }
</style>

As far as I know labels are should be associated only with input controls. Why do you need to add a label for RadTreeView? Anyway you can try using the html tag instead of the Label contorl:

<label for="RadTreeView1_wrapper">

I cannot really tell what "name, role and state" are and how RadTreeView should express them to JAWS reader. Could you please elaborate?

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 28 Jan 2009, 06:53 PM

Thanks for your rapid reply.

About the menu:

I added the style you provided to my page and it does not seem to help. What seems to be happening is that when I use the tab key to move through the menu the top-level menu item is first highlighted the usual way. Then, if I hit tab again the top-level item style changes slightly. Hitting tab again 2 more times and the top-level menu item (that has sub-items) remains in the second style. One more tab and it goes to the next top-level menu item. I suppose that it does this 3 times because I have 3 sub-menu items. During all of this, the sub-menu items are never displayed. Even hoving over with a mouse does not show the sub-items. By the way, this was all with javascript turned on. I still need my non-508 users to see the menu as ususal. Did I do something wrong?

About the tree view:

You said labels are only used for input controls. Well, I am using the tree view as an input control, since I am creating a number of check box nodes that can be selected. I have 4 top-level nodes (uncheckable) and any number of checkable sub-nodes under each top node.

One problem is that when I use the keyboard to tab through the controls on the page and finally get to the treeview control the entire control gets selected, not the first node. A dashed line box is drawn around the entire control including all nodes. In order to get focus to an individual node I need to hit the down arrow key. My tester is complaining that this is not obvious to the user. What is the recommended way to alert the user that this is a tree view and the keyboard shortcuts are valid for it? It doesn't look like the treeview has a "ToolTip" property. Individual nodes do, but there doesn't seem to be one for the overall tree view control.

I think what they mean by name, role, and state is best seen using a tool from Microsoft called Inspect32.exe. This is a free tool. I have never used this tool, but apparently it is used to inspect various attributes of browser controls. Apparently, the JAWS reader uses these attributes to figure out how to handle the control. For the tree view control, the name is blank, so that might be part of the problem.

Here what else I noticed:

On another page, I have a regular check box. When I hover over that check box, the Inspect32 tool shows the name as whatever the text of the text box is (for example, if the text of the check box is "Hello", the name in Inspect32 is "Hello". It shows the role as "check box" and the state as "focused,focusable". If I check the box, the state changes to "focused,checked,focusable". This all makes sense.

Now, when I go to the page that has the tree view (which has nodes that are checkable), and I hover over one of the check boxes in one of the checkable nodes, the name is "none [false]", the role and state are the same as the normal check box and change properly when I check the box. It appears that the tree view checkable nodes are not properly reporting the name attribute, at least as far as Inspect32 is concerned.

So, the menu problem is still not solved (probably due to me doing something wrong), I need to know how to alert the user to how to the fact that a treeview is in focus and how to navigate it, and the individual checkable nodes do not seem to be reporting the name properly.

Thanks for your help.

answered on 29 Jan 2009, 10:10 AM

508.zip

Hello rosborn,

Indeed the CSS does not work with the Classic version of RadMenu. I am sending you a sample page which tries to address all issues:

Tabbing should navigate between all menu items
The "title" attribute of the treeview div is set via JavaScript
Label is associated with each treeview checkbox (via templates and javascript) so the Inspect32 tool is reporting it as a normal checkbox

I have tested in IE7 and the current official releases of RadMenu and RadTreeView. Please find attached the sample web site.

I hope this helps,
Atanas Korchev,
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 29 Jan 2009, 05:37 PM

Menu seems to work perfectly. Thank you.

I tried the title attribute for the tree view, but not sure that is working just yet. Will come back to that.

One overall question I had was this solution is using javascript. I was under the understanding that javascript was usually turned off for "508 people". Is there a .NET solution (setting these properties in .NET server code)?

I tried the javascript method and added the entire <NodeTemplate> tag exactly as you had it and added the script block just after the treeview in the ascx page (changing the name of the referenced tree view control). I am loading my nodes in .NET code, maybe that is the problem, but I am getting an error in this (Telerik) javascript function whenever I expand one of the top-level nodes:

RadTreeNode.prototype.SignOn=function(){

var _33=document.getElementById(this.ClientID+"c");

if(this.IsSet(this.SignImageExpanded)){

_33.src=this.SignImageExpanded;

}

The line that is failing is the last one. The value of _33 is null. However, the clientid it is looking for is found in the page source (viewed from the browser). rtvAttributes is the tree view control id. objFormats.List. is a DataTable.

By the way, this is the .NET code that runs to create the nodes:

Dim objTopNode As RadTreeNode

Dim objNode As RadTreeNode

objTopNode = New RadTreeNode("Formats", -2)

objTopNode.ToolTip = "Formats list. Click '+' to expand list. Use up and down arrow keys to navigate list."

objTopNode.Checkable = False

rtvAttributes.Nodes.Add(objTopNode)

For Each _row As DataRow In objFormats.List.Rows

objNode = New RadTreeNode(_row("Value"), _row("Value"))

objNode.ToolTip = _row("Value")

objNode.Checkable = True

rtvAttributes.Nodes(rtvAttributes.Nodes.Count - 1).Nodes.Add(objNode)

Is there a way to accomplish this in .NET code?

answered on 02 Feb 2009, 09:19 AM

Hi rosborn,

Unfortunately there is no way to accomplish this in .net code with the built-in checkbox capabilities of RadTreeView. Also when javascript is disabled RadTreeView will not expand and collapse because this is again done with enabled javascript. Frankly speaking screen readers (Jaws namely) plug in into internet explorer and do not require JavaScript to be disabled.

Unfortunately I couldn't understand the problem with the treeview. Could you please send more code (ideally something which I can run)?

Regards,

Atanas Korchev,

the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 27 Aug 2010, 09:24 PM

I know it has been a long time since this ticket was last worked, but I am now in need of a solution to the TreeView problem that I talked about in the first post. I am using a RadTreeView control on a page and have the TabIndex property set.

<rad:RadTreeView ID="rtvAttributes" runat="server" CheckBoxes="True"

Skin="WebBlue" TabIndex="151" Font-Size="Small">

</rad:RadTreeView>

This control is inside a table <td> section.

When using IE8, I can keyboard Tab through the controls on the page and eventually hit the RadTreeView. A dotted line is drawn around the entire RadTreeView to show it has focus. However, if I run the exact same code on IE6, the RadTreeView never gets focus at all. It skips over it and goes to the next control. I am gathering more details about the testing we did, but I think it might actually be that running the popular accessiblity reader software called "JAWS" may be changing the keyboard focus behavior. Have you heard of this before?

answered on 30 Aug 2010, 09:51 PM

Thanks for the quick response. I downloaded the latest RadControls for AJAX and the tree view can now be selected via Tabbing. Problem is, the JAWS screen reader is re-mapping many keys and the right and left arrow keys are mapped to spelling out a word instead of acting like the normal arrow keys, which would expand the node. I suppose that is a JAWS problem, not a TreeView problem. It would be helpful if you have any info on yusing the TreeVIew with JAWS.

I do have one other problem though, and I'll be glad to start a new ticket if that would help. My TreeView has four top-level nodes and anywhere from 4 to 20 sub-nodes under each top-node. All of the sub-node items have check boxes. When I use the keyboard (space bar) to check an item, the page scrolls down quite a ways, way past the TreeView control. If all of the top nodes are expanded, it does not seem to scroll as far. Have you seen this problem before?

answered on 31 Aug 2010, 02:35 PM

Hi rosborn,

About the problem you experience using the JOWS reader on RadTreeView:
- There isn't actually a clean way to achieve this functionality. Perhaps, you can map another keys (for example some readers are handling such exceptions through key combinations , e.g. instead directly using RightArrowKey => Ctrl + RightArrowKey), using the settings of the screen reader.

Also if you use the latest version of our controls, your RadTreeView supports the WAI-ARIA standard (here is a link to a blog post of mine regarding this topic: http://blogs.telerik.com/nikolaytsenkov/posts/10-06-29/radtreeview_for_asp_net_ajax_now_supports_wai-aria.aspx), which we have tested successfully on NVDA screen reader (here is a link to the home page of the reader: http://www.nvda-project.org/).

About the problem on node check:
- This is default browser behavior on space pressed. But maybe we are able to fix this using the scrollIntoView() method over the node that is being checked (handling the ClientNodeChecked event you can get the node from the arguments parameter: args.get_node();).
Here is a reference to the client-side API of the RadTreeNode: http://www.telerik.com/help/aspnet-ajax/tree_clientradtreenode.html
If the problem persist after applying the suggested, please, open a support ticket! Thanks!

Hope this is helpful for you!

Regards,
Nikolay Tsenkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 01 Sep 2010, 02:20 PM

The latest version of TreeView worked in the NVDA reader, but not in JAWS. I think and hope that this will now be considered a bug in JAWS.

Concerning the scrolling, I am waiting for our "money guys" to renew my license ofr Telerik. I'm not sure why it got dropped. When that gets renewed, I'll write a new ticket for the scrolling problem. I can tell you, though, that calling the ScrollIntoView method in the ClientNodeChecked event did not work. It still scrolls too far down the page. I confirmed it was hitting the javscript and even stepped through a bunch of the javascript code.

I'll open a new ticket in a few days.

answered on 06 Sep 2010, 11:13 AM

Hi rosborn,

Well, I think this should be considered as a bug (or for example status "needs improvement") in JAWS, too. Especially, since there is a lot cleaner solutions - for example using key modifiers, instead directly using keys.

As soon as you open a support ticket and send us some sample reproducing the problem, we will continue the work on the scrolling problem!

In the meantime, you can probably post a single page (markup and code-behind), which reproduces the problem?

Hope that soon we will resolve this issue!

Regards,
Nikolay Tsenkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Section 508 Issues for Menu and TreeView

13 Answers, 1 is accepted