Section 508 Issues for Menu and TreeView

14 posts, 0 answers
  1. rosborn
    rosborn avatar
    1 posts
    Member since:
    Apr 2007

    Posted 28 Jan 2009 Link to this post

    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.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Jan 2009 Link to this post

    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.
  3. rosborn
    rosborn avatar
    1 posts
    Member since:
    Apr 2007

    Posted 28 Jan 2009 Link to this post

    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.






  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 Jan 2009 Link to this post

    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:

    1. Tabbing should navigate between all menu items
    2. The "title" attribute of the treeview div is set via JavaScript
    3. 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.
  5. rosborn
    rosborn avatar
    1 posts
    Member since:
    Apr 2007

    Posted 29 Jan 2009 Link to this post

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

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


  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 02 Feb 2009 Link to this post

    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.
  7. rosborn
    rosborn avatar
    1 posts
    Member since:
    Apr 2007

    Posted 27 Aug 2010 Link to this post

    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?



     
  8. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 30 Aug 2010 Link to this post

    Hi rosborn,

    Can you check whether you use the latest release Q2 2010 SP1 of RadControls for ASP.NET AJAX (2010.2.826) when you encounter the tab index issue with the treeview under IE 6? Note that we made some accessibility improvements for the control for the Q2 2010 release (see details in this blog post) and you may consider migrating to the latest release if you haven't done so already.

    Best regards,
    Sebastian
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. rosborn
    rosborn avatar
    1 posts
    Member since:
    Apr 2007

    Posted 30 Aug 2010 Link to this post

    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?
  10. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 31 Aug 2010 Link to this post

    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.
  11. rosborn
    rosborn avatar
    1 posts
    Member since:
    Apr 2007

    Posted 01 Sep 2010 Link to this post

    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.
  12. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 06 Sep 2010 Link to this post

    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.
  13. Owen
    Owen avatar
    6 posts
    Member since:
    Feb 2013

    Posted 26 Oct 2015 Link to this post

    Hi,

    Does the fix for Menu still work for current version (2015.3.930.45 of Telerik?

     Thanks.

  14. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 29 Oct 2015 Link to this post

    Hello Owen,

    The fix and implementation of the RadMenu in this thread are regarding the classic controls, which are no longer supported. As for the RadTreeView - it does possess WAI-ARIA support as described below:

     http://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/accessibility-and-internationalization/wai-aria-support

    Regards,
    Nencho
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top