There are two ways to avoid this:
- Define a tab order on the entire page so all necessary controls will have their TabIndex attribute set
- Remove the attribute from the menu with JS. Here follow a couple of examples. Using RenderMode="Lightweight" also may improve the situation if you do not use the NavigateUrl of the items, so <a> elements are not rendered.
- Solution 1: Executes when the entire page has loaded
function removeMenuTabIndex() {
$telerik.$(".RadMenu[tabindex=0]").removeAttr("tabindex");
Sys.Application.remove_load(removeMenuTabIndex);
}
Sys.Application.add_load(removeMenuTabIndex);
- Solution 2: Add just after the menu so it executes while the DOM is loading, perhaps this can facilitate screen reader compatibility
<telerik:RadMenu runat="server" ID="rm1" RenderMode="Lightweight">
<Items>
<telerik:RadMenuItem Text="first"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="second"></telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
<script>
document.getElementById("<%=rm1.ClientID%>").removeAttribute("tabIndex");
</script>