Accessible menu navigation

[david]

     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>

 

[david]

solved

[Chris Vaughn]

Hi David - Would you please post how you solved it? - Thank you!

[david]

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>

[Attila Antal]

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

[david]

we did get it to work, as well JAWS is rendering the menu text correctly as well