Telerik Menu accessibility issue

1 Answer 23 Views
Menu
Judy
Top achievements
Rank 1
Judy asked on 17 Jun 2025, 08:11 PM

Hello Telerik Team,

 

We’ve received feedback from one of our customers regarding accessibility concerns with the RadMenu control. While we understand that the current RadMenu supports WCAG 2.1, the customer is aiming for full compliance with the WCAG 2.2 standard and has identified some gaps in that regard.

Specifically, they are requesting support for a scenario where a menu item both opens a new page and includes sub-menu items. They would like the behavior to follow the example described in this accessibility article:
https://hub.accessible360.com/kb/articles/529

Could you please advise: 

  1. If there is any workaround we can implement using the current RadMenu to meet this requirement?
  2. Whether there is an estimated timeline for when the RadMenu will support WCAG 2.2 natively?

 

We appreciate any guidance or recommendations you can provide to help us support our customer’s accessibility goals.

 

Judy Wang

Judy
Top achievements
Rank 1
commented on 18 Jun 2025, 01:51 PM

Hi Telerik Team,

I asked ChatGPT about a menu item that both opens a new page and contains sub-menu items. Here is its response for WCAG 2.1 AA

Under WCAG 2.1 AA, if a menu item is both a link and also has sub-menu items, there are specific accessibility considerations to meet the standards. Here’s a summary of the relevant success criteria and best practices:


Relevant WCAG 2.1 AA Criteria:

  1. 2.1.1 Keyboard

    All functionality must be operable through a keyboard.

    • Users should be able to navigate to the menu, open submenus, and activate the link using only the keyboard (e.g., Tab, Enter, Arrow keys).

  2. 2.4.4 Link Purpose (In Context)

    The purpose of each link can be determined from the link text alone or from the link text together with its context.

    • The menu item’s text must clearly describe its destination, especially if it leads to a page and opens a submenu.

  3. 2.4.7 Focus Visible

    A visible focus indicator must be present as the user navigates with the keyboard.

    • The focused menu item should have a clear visual indicator.

  4. 1.3.1 Info and Relationships

    Information and relationships conveyed visually must also be available to assistive technologies.

    • Use proper semantic markup (e.g., <ul>, <li>, ARIA roles) so screen readers understand the menu structure.

  5. 4.1.2 Name, Role, Value

    UI components have name, role, and value that can be programmatically determined.

    • For interactive menu items, especially if using ARIA (e.g., aria-haspopup, aria-expanded), these must reflect the current state.


⚠️ Key Design Decision: Clickable + Expandable Menu Items

If a menu item:

  • Navigates to a page (e.g., Home, Services)

  • Also opens a submenu

This dual function can be confusing for users, especially those using keyboard or screen readers.

🔧 Recommended Best Practices:

  • Option 1: Separate the actions

    • Have the top-level menu item only expand/collapse the submenu (not a link).

    • Add a submenu item inside the dropdown that links to the main page.

    • Example:

      html
      <li> <button aria-haspopup="true" aria-expanded="false">Services</button> <ul> <li><a href="/services">All Services</a></li> <li><a href="/services/consulting">Consulting</a></li> </ul> </li>
  • Option 2: Provide a clear distinction

    • If the top-level item must be both a link and expandable:

      • Ensure keyboard and screen reader users can activate the submenu separately from the link.

      • Use a split button UI:

        • One part is the link.

        • The other is a button to expand submenu.


✅ Summary of What You Need to Do:

RequirementSolution
Keyboard operabilityAllow arrow key navigation and Enter/Space to open submenu
Clear link purposeMake menu text clear and contextual
Screen reader supportUse semantic HTML or ARIA with roles like menu, menuitem, aria-haspopup, aria-expanded
Avoid dual-function confusionPrefer split actions or submenu-only top items

 

Judy
Top achievements
Rank 1
commented on 18 Jun 2025, 01:52 PM

Here's for WCAG 2.2 AA.

Under WCAG 2.2 AA, if a menu item is both a link and also has sub-menu items, the standards extend upon WCAG 2.1 AA with additional emphasis on focus visibility, timing of controls, and ease of interaction, particularly for keyboard and assistive technology users.

Here’s a breakdown of what WCAG 2.2 AA requires and recommends for this kind of menu structure:


Core Requirements from WCAG 2.2 AA (Building on 2.1 AA)

1. 2.1.1 Keyboard Accessible

  • Users must be able to:

    • Tab to the menu item

    • Activate the link (usually Enter or Space)

    • Navigate into the submenu using arrow keys or another intuitive method

2. 2.4.3 Focus Order

  • Focus should move in a logical and predictable order through the menu and submenu.

3. 2.4.7 Focus Visible

  • The menu item must show a visible focus indicator when selected via keyboard.

4. 2.4.11 Focus Not Obscured (Minimum) 🆕

  • The focused element (e.g., the menu item or a submenu item) must not be obscured by overlays, sticky headers, or animations.

5. 2.4.12 Focus Not Obscured (Enhanced) (AAA but good practice)

6. 2.4.13 Focus Appearance 🆕

  • The focus indicator must be clearly visible (e.g., solid 2px outline with sufficient contrast).

  • Default browser outlines may not be sufficient if overridden.

7. 1.3.1 Info and Relationships

  • Use semantic HTML (<nav>, <ul>, <li>, <a>) or appropriate ARIA roles to make the structure clear to assistive tech.

8. 4.1.2 Name, Role, Value

  • If using ARIA (aria-haspopup, aria-expanded), these must be correctly implemented and dynamically updated when the submenu opens/closes.


⚠️ Accessibility Risk: Dual Function Menu Items

If a menu item is:

  • A link (navigates to a page), and

  • A submenu trigger (reveals more links)

This can confuse:

  • Keyboard users (what happens on Enter?)

  • Screen reader users (is it a page link, menu, or both?)


🔧 Best Practices to Meet WCAG 2.2 AA

IssueRecommendation
Dual functionUse a split button or separate submenu from link
Keyboard navigationUse Tab to move between top-level items, arrow keys to navigate submenu
ARIAAdd aria-haspopup="true" and toggle aria-expanded="true/false" when submenu is opened/closed
Visible focusEnsure all focusable elements have a visible, high-contrast outline or indicator
Focus not obscuredSubmenus must appear below or beside the parent item without overlapping focus

✅ Split Button Example (Preferred Pattern):

html
<li class="menu-item"> <a href="/services">Services</a> <button aria-haspopup="true" aria-expanded="false" aria-controls="submenu-services"> ▼ </button> <ul id="submenu-services" hidden> <li><a href="/services/consulting">Consulting</a></li> <li><a href="/services/support">Support</a></li> </ul> </li>

OR

✅ Submenu Only with “View All” as Child Item:

html
<li> <button aria-haspopup="true" aria-expanded="false">Services</button> <ul> <li><a href="/services">View All Services</a></li> <li><a href="/services/design">Design</a></li> </ul> </li>

✅ Summary: WCAG 2.2 AA Checklist for Menus

RequirementMet?
Keyboard accessible (2.1.1)
Clear focus (2.4.7, 2.4.11, 2.4.13)
Logical focus order (2.4.3)
Clear purpose (2.4.4)
Semantic relationships (1.3.1, 4.1.2)
No hidden or obscured focus (2.4.11)

 

Judy
Top achievements
Rank 1
commented on 18 Jun 2025, 01:54 PM

Is there any way we can use Split Button pattern to solve the issue, please?

 

Split Button Example (Preferred Pattern):

html
<li class="menu-item"> <a href="/services">Services</a> <button aria-haspopup="true" aria-expanded="false" aria-controls="submenu-services"> ▼ </button> <ul id="submenu-services" hidden> <li><a href="/services/consulting">Consulting</a></li> <li><a href="/services/support">Support</a></li> </ul> </li>

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 27 Jun 2025, 11:20 AM

Hi Judy,

Thank you for highlighting this scenario, it certainly can create confusion from an accessibility perspective when a menu item both navigates to a new page and contains submenu items.

The RadMenu control currently supports expanding submenu items on hover by default (ClickToOpen="false"). This means users can see and interact with submenu items without clicking. For keyboard navigation after focusing the menu, and pressing the down arrow expands the submenu. Pressing Enter on the top-level item directly executes the navigation (NavigateUrl).

        <telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="false" EnableAriaSupport="true">
            <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
            <Items>
                <telerik:RadMenuItem Text="Services" Value="services" NavigateUrl="https://www.google.com">
                    <Items>
                        <telerik:RadMenuItem Text="All Services" NavigateUrl="https://www.google.com" />
                        <telerik:RadMenuItem Text="Consulting" NavigateUrl="https://www.google.com" />
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

If this behavior doesn't fully match your customer's accessibility goals, you can further fine-tune it using the control’s client-side API (OnClientItemClick event). This allows custom handling for item-click actions, for example, separating submenu expansion from direct navigation if needed:

<telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="false" EnableAriaSupport="true" OnClientItemClicking="onMenuItemClick">
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
    <Items>
        <telerik:RadMenuItem Text="Services" Value="services" NavigateUrl="https://www.google.com">
            <Items>
                <telerik:RadMenuItem Text="All Services" NavigateUrl="https://www.google2.com" />
                <telerik:RadMenuItem Text="Consulting" NavigateUrl="https://www.google3.com" />
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

<script>
    function onMenuItemClick(sender, args) {
        debugger
        var item = args.get_item();
        if (item.get_items().get_count() > 0) {
            args.set_cancel(true); // Prevent navigation and manually handle submenu
            item.set_expanded(!item.get_expanded());
        } else if (item.get_navigateUrl()) {
            window.location.href = item.get_navigateUrl();
        }
    }
</script>

Currently, there is no official timeline for providing full built-in WCAG 2.2 support for the RadMenu in our AJAX suite. You can track future updates and developments here:
https://www.telerik.com/support/whats-new/aspnet-ajax/roadmap. In the meantime, for customers aiming explicitly at WCAG 2.2 compliance, we recommend considering our Kendo UI menu, which fully supports WCAG 2.2 AA standards out of the box - https://www.telerik.com/kendo-jquery-ui/documentation/controls/menu/accessibility/overview.


    Regards,
    Rumen
    Progress Telerik

    Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
    Tags
    Menu
    Asked by
    Judy
    Top achievements
    Rank 1
    Answers by
    Rumen
    Telerik team
    Share this question
    or