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

Accessible menu navigation

5 Answers 104 Views
Menu
This is a migrated thread and some comments may be shown as answers.
david
Top achievements
Rank 1
david asked on 08 Oct 2019, 08:14 PM

     We have a menu built in code-behind, the focus key works and we can move from menu item to item horizontally with arrows but there doesnt seem to be a way to access the dropdown items. WAVE for the demo (attached) shows "Tab" but WAVE on our menu does not (attached). here is the markup

     <telerik:RadMenu ID="RadMenu2" runat="server" Flow="Horizontal" BorderWidth="1px"
                    Style="z-index: 10; width: 100%; white-space: normal;" Skin="Bootstrap"
                    Font-Names="Verdana" Font-Size="X-Small" EnableRoundedCorners="false" RenderMode="Lightweight"
                    EnableAriaSupport="true" CommandKey="Alt" FocusKey="B" KeyboardNavigationSettings-FocusKey="B">
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                </telerik:RadMenu>

 

5 Answers, 1 is accepted

Sort by
0
david
Top achievements
Rank 1
answered on 10 Oct 2019, 08:03 PM
solved
0
Chris Vaughn
Top achievements
Rank 1
answered on 11 Oct 2019, 08:18 PM
Hi David - Would you please post how you solved it? - Thank you!
0
david
Top achievements
Rank 1
answered on 12 Oct 2019, 01:18 PM

Not actually sure, the wave report was a red herring, this markup works using up/down left/right

     <telerik:RadMenu ID="RadMenu2" runat="server" Flow="Horizontal" BorderWidth="1px"
                Style="z-index: 10; width: 100%; white-space: normal;" Skin="Silk"
                Font-Names="Verdana" Font-Size="X-Small" EnableRoundedCorners="true" RenderMode="Lightweight"
                EnableAriaSupport="true">
                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                <KeyboardNavigationSettings CommandKey="Alt" FocusKey="B"></KeyboardNavigationSettings>
            </telerik:RadMenu>

0
Attila Antal
Telerik team
answered on 16 Oct 2019, 03:31 PM

Hi David & Chris,

Could you share more information on the current configuration? Have you both tried implementing the scenario presented in the Menu - Keyboard Support demo?

Are there any JavaScript errors on the page if you check the Console tab of the Developer tools? Check out the "Debug JavaScript" section of the Improve Your Debugging Skills with Chrome DevTools Blog Post. More specifically the "Pro Tips" right below the gif animation.

Kind regards,
Attila Antal
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
david
Top achievements
Rank 1
answered on 16 Oct 2019, 03:42 PM
we did get it to work, as well JAWS is rendering the menu text correctly as well 
Tags
Menu
Asked by
david
Top achievements
Rank 1
Answers by
david
Top achievements
Rank 1
Chris Vaughn
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or