WAI-ARIA: How can I assign access keys to PanelBar control?

16 posts, 1 answers
  1. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 15 Sep Link to this post

    Hi,

    I'm working on a legacy ASP.NET WebForms project and I am to add accessibility to the project.

    My predecessor already tried to add accessibility by manually assigning an access key to the AccessKey property of some of the PanelBar's RadPanelItemCollection elements (see attachment #1).

     

     

  2. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 15 Sep in reply to A Link to this post

    (*aarrggh* ... I accidentally hit [Post] when attaching the images and don't seem to be able to edit my question now.)

    [...] The issue with his approach is that no outline appears when hitting one of the access keys. But this is a requirement for conforming to WAI-ARIA.

    Debugging the application it looks like the CSS outline property is disabled by intention (see attachment #3).

    So I added a

    .radPanelBar .rpLink:focus { outline: thin dotted invert; }

    rule to the application's CSS file.

    However, I feel this is becoming rather a hack than a clean solution.

    So I'd like to ask if there is a suggested and supported approach on how to add access keys to a PanelBar control's collection of RadPanelItems.

    We are feeding our PanelBar by using the SiteMapDataSource.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anton
    Admin
    Anton avatar
    58 posts

    Posted 16 Sep Link to this post

    Hi,

    I have tested at my side with the latest version of the controls and WAI-ARIA works just as it should (video), using the OnDataBound server event as you do:

    protected void Page_Load(object sender, EventArgs e)
        {
            Form.Attributes.Add("role", "application");
        }
     
        protected void RadPanelBar2_DataBound(object sender, EventArgs e)
        {
            foreach (RadPanelItem item in RadPanelBar2.Items)
            {
                if (item.Text == "Andrew")
                {
                    item.Items[0].AccessKey = "N";
                    item.Items[1].AccessKey = "B";
                    item.Items[2].AccessKey = "V";
                }
            }
        }

    Would you please elaborate what else should be done to replicate the issue?

    Regards,
    Anton
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 19 Sep in reply to Anton Link to this post

    Sure,

    please have a look at this screencast. It depics that the RadPanelBar is missing an item outline when hitting the appropriate access key.

    Telerik deliberately hid the outline (see screencast). But that's not correct according to WAI-ARIA and W3C. Their statement:

    Keyboard users, in particular people with disabilities who may not be able to interact with the page in any other fashion, depend on the outline being visible on elements in the :focus state, thus authors must not make the outline invisible on such elements without making sure an alternative highlighting mechanism is provided.

  6. Anton
    Admin
    Anton avatar
    58 posts

    Posted 20 Sep Link to this post

    Hi,

    Recently we have updated the Keyboard support focusing specially on supporting WAI-ARIA. After the change we strongly suggest the use of the new properties and  to assume the PannelBar as a single object, not as different items.Thus we advise the PanelBar to be focused as it is shown in this demo and then use the Keyboard Support to navigate among the items. Using that approach WAI-ARIA requirements are fulfilled. The usage of "Access Keys" causes different behavior among the browsers and as a result of that instability we decided to use our own selectors (KeyboardNaviagationSettings) which behave the same way no matter the browser. And last, but not least, I would ask you avoiding threads duplication for an issue, which allows us to provide you with better support.

    Regards,
    Anton
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 20 Sep in reply to Anton Link to this post

    Anton said:

    We strongly suggest the use of the new properties and to assume the PannelBar as a single object, not as different items.Thus we advise the PanelBar to be focused as it is shown in this demo and then use the Keyboard Support to navigate among the items. Using that approach WAI-ARIA requirements are fulfilled.

    Did you use a screen reader to verify that WAI-ARIA is truely met by your changes? Because according to the (quite popular) screen reader JAWS it isn't, as this screencast shows.

     

    Anton said:

    The usage of "Access Keys" causes different behavior among the browsers and as a result of that instability we decided to use our own selectors (KeyboardNaviagationSettings) which behave the same way no matter the browser.

    That was my first question above all about: A suggested and supported approach.

     

    Anton said:

    And last, but not least, I would ask you avoiding threads duplication for an issue, which allows us to provide you with better support.

    Which thread do you see duplicated? This thread is about keyboard navigation (and, supposedly, a CSS issue), my other thread is about assigning WAI-ARIA landmark roles to Telerik controls.

  8. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 20 Sep in reply to A Link to this post

    To conclude my previous post: Using the screen reader I'm using no outline is displayed by the RadPanelBar when the accessibility API (MSAA) is utilized.
  9. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 22 Sep Link to this post

    Hi,

    Thank you for getting back to us and elaborating the questions. 

    In such case we recommend testing the new WAI-ARIA support demo. Here is the video of my test with JAWS where the items are correctly outlined(the video is with no sound yet it was heart correctly).

    As for you last issue - yes indeed the issues were different please excuse us for this misunderstanding.

    Please let me now if the issue is still somehow different so we could investigate it again.

    Regards,
    Plamen
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  10. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 23 Sep in reply to Plamen Link to this post

    Hi Plamen,

    this is quite an interesting observation you made.

    So it looks like the outline appears on your machine but it doesn't appear on mine.

    If you agree, I'd like to further investigate on this issue to find the reason for the outline not appearing on my machine to make sure everything is working as expected when we are applying for our corporation's Accessibility certificate for our web application.

    I noticed that you are using Internet Explorer, just as I do. Would you mind telling me which version of Internet Explorer, Windows and JAWS you are using? I am using IE11 on Windows 10/64 with JAWS 17.0.2619. (I can see from the video that you are using an older JAWS version, i.e. 17.0.1377.)

    Thanks for helping me on this!

    Cheers,
    Axel

  11. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 28 Sep Link to this post

    Hello,

    I was using IE11 (exact version 11.0.9600.18427) Windows 8.1. The version of the Jaws is same as your as it can be seen on the video. 


    Regards,
    Plamen
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  12. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 05 Oct Link to this post

    Hello, Plamen,

    I have now continued digging into the WAI-ARIA features of RadPanelBar and found a number of issues with RadPanelBar.

    Here is my observation:

    1. In the sample video that you provided no access keys have been used for selecting an item. In fact, none of the items in the Telerik sample page have access keys assigned. If you apply access keys to items in RadPanelBar, you will notice that these don't give visual feedback. This isn't in conformance to WAI-ARIA specification.
    2. The suggested KeyboardNavigationSettings property isn't waterproof, in contrast to Anton's claim.
    3. Using the TAB key on the keyboard to tab from a hyperlink or input element into the RadPanelBar doesn't give visual feedback. This isn't in conformance to WAI-ARIA specification.

    I created a new video demonstrating these issues. Below please find the ASP.NET code I used to create the sample. To reproduce the issues, create a ASP.NET WebForms project and copy below code into a WebForms web page. Then run the project using a German edition of Internet Explorer 11 (because of the [ALT]+[A] access key which is a IE menu access key, too, on the German edition of IE 11) and hit the keys depicted in the video.

     

    Here are the suggested remedies:

    1. RadPanelBar should give visual feedback (CSS: outline property) when using access keys for each of the items having access keys assigned.
    2. KeyboardNavigationSettings is redundant and confusing users who are used to standard web browser access key navigation.
    3. When a user is using the TAB key to give focus to any item in a RadPanelBar, RadPanelBar should give visual feedback (CSS: outline property).

     

    Here's the ASPX code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="MyProject.Web.Test" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <style type="text/css">
            p > a[href] { display: block; }
            p > a[href]:focus { background-color: #eee; }
        </style>
    </head>

    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server"/>
            <p><a href="#" accesskey="o">Ab<u>o</u>ve</a></p>

            <div>
                <telerik:RadPanelBar runat="server" ID="strip" EnableAriaSupport="true" AccessKey="r">
                    <Items>
                        <telerik:RadPanelItem Expanded="true" Text="Parent" AccessKey="p">
                            <Items>
                                <telerik:RadPanelItem AccessKey="1" Text="Number 1" NavigateUrl="#"/>
                                <telerik:RadPanelItem AccessKey="2" Text="Number 2" NavigateUrl="#" />
                                <telerik:RadPanelItem AccessKey="3" Text="Number 3" NavigateUrl="#" />
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="A"/>
                </telerik:RadPanelBar>
            </div>

            <p><a href="#" accesskey="b"><u>B</u>elow</a></p>
        </form>
    </body>
    </html>

  13. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 10 Oct Link to this post

    Hello,

    Thank you for elaborating the issue.

    10 I have successfully replicated the issue and here is the custom code that I added to make the items focusable in IE:
    <script>
               var $ = $telerik.$;
               var $T = Telerik.Web.UI;
     
               $T.RadPanelBar.prototype._onLinkFocus= function(e)
               {
                   if (Telerik.Web.Browser.ie) {
              
                       this._focusedItem = this._extractItemFromDomElement(e.target);
                       this.get_element().focus();
                   }
                   e.preventDefault();
                   return false;
               }
     
           </script>

    2) KeyBoardnavigation settings are designed to skip the crossbrowser navigation differences - yet they can't override the default browser shortcuts. If you don't want to use them you can just set accesskey and tabindex to the control so it become focusable.

    3) In the current implementation of the keyboard support pressing tab is moving the focus to the next focusable element of the page and it is not navigating through the items of the element. You can navigate through the items with the arrow keys as it is described in this specification.

    Please let me know if you have further questions.

    Regards,
    Plamen
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  14. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 11 Oct in reply to Plamen Link to this post

    Similar issues occur when using Firefox (as this video demonstrates).

    I strongly feel that the RadPanelBar keyboard navigation scheme needs a revision.

    Do you want me to create a support case for having the Telerik development team start an investigation on this?

  15. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 14 Oct Link to this post

    Hi,

    Yes we will create a story for updating the keyboard issues but first I would like to discuss the exact issues. I have tested the scenario same scenario with the code that I recommended in y previous reply and it worked correctly at my side in Firefox too. Here is my full code and here is my video:
    <p><a href="#" accesskey="O" tabindex="1">Ab<u>o</u>ve</a></p>
     
           <div>
               <telerik:RadPanelBar runat="server" ID="strip" EnableAriaSupport="true" TabIndex="1" >
                   <Items>
                       <telerik:RadPanelItem Expanded="true" Text="Parent" AccessKey="p">
                           <Items>
                               <telerik:RadPanelItem AccessKey="1" Text="Number 1"/>
                               <telerik:RadPanelItem AccessKey="2" Text="Number 2" />
                               <telerik:RadPanelItem AccessKey="3" Text="Number 3" />
                           </Items>
                       </telerik:RadPanelItem>
                   </Items>
                   <KeyboardNavigationSettings CommandKey="Alt" FocusKey="A"/>
               </telerik:RadPanelBar>
           </div>
     
           <p><a href="#" accesskey="b" tabindex="1"><u>B</u>elow</a></p>
           <script>
               var $ = $telerik.$;
               var $T = Telerik.Web.UI;
     
               $T.RadPanelBar.prototype._onLinkFocus= function(e)
               {
                   if (Telerik.Web.Browser.ie) {
              
                       this._focusedItem = this._extractItemFromDomElement(e.target);
                       this.get_element().focus();
                   }
                   e.preventDefault();
                   return false;
               }
     
           </script>

    Please let me know what is still not working correctly in this case

    Regards,
    Plamen
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  16. A
    A avatar
    35 posts
    Member since:
    Nov 2015

    Posted 24 Oct in reply to Plamen Link to this post

    Hello, Plamen,

    I have applied your script but to no avail.

    So I now have created a support ticket ("WAI-ARIA: poor Keyboard support of PanelBar control") where we can privately further discuss the issues I have.

    Cheers,
    Axel

  17. Answer
    Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 26 Oct Link to this post

    Hello,

    I have logged the issue about the accesskeys and you can follow it here.

    Regards,
    Plamen
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017