Subject: Accessibility: role="navigation" on menu <ul> breaks list semantics (Pro 6.9.4)

Support
#1

Hi Themeco team,

we run Pro 6.9.4 on https://www.pixelwerft.de and found an accessibility issue in the menu output.

Pro renders the menu lists with role=“navigation” directly on the

    : 
<ul class="x-menu-first-level x-menu x-menu-inline …" role="navigation" …>
<ul class="x-menu x-menu-layered x-current-layer …" role="navigation">

This affects the inline navigation in our header and footer templates as well as the layered menu inside the Off Canvas element. Since it appears on all three menu elements across two templates, it seems to be the default output.

The problem: the explicit role replaces the implicit list role of the <ul>. In the accessibility tree, the <li> children no longer have a list parent. Lighthouse reports “List items (<li>) are not contained within <ul>, <ol> or <menu> parent elements”, which lowers the Accessibility score and also fails the new Lighthouse “Agentic Browsing” category (accessibility for agents). Screen readers no longer announce the menu as a list with a number of items.

Expected behaviour: keep the <ul> as a plain list and place the navigation landmark on a wrapping element, ideally <nav aria-label="…">.

Our current workaround is a small footer script that removes the role attribute from ul.x-menu. It works, but a fix in the theme would be much cleaner – and it matters for everyone who has to meet the European Accessibility Act.

Could you fix this in an upcoming release, or let us know if there is a setting we missed?

Thanks and best regards
Christian Isachsen

#2

Hello Christian,

Thank you for reaching out, and for the detailed report. We have confirmed this behaviour in Pro 6.9.4. The Menu partial assigns role="navigation" to the menu <ul> for every menu type, including Inline, Collapsed, Modal, Layered (Off Canvas) and Dropdown. Your analysis is correct, and I have raised this with our development team so the landmark can be moved to a wrapping element in a future release. Until then, you can resolve it inside the builder without a script. Please see the steps below.

  1. Restore list semantics on each menu – Select the Menu element (Navigation Inline, Navigation Layered in your Off Canvas, and so on) and open Menu Custom Attributes in the Customize tab. Add an attribute named role with the value list. This attribute is applied after the built-in one and replaces it, so the <ul> is announced as a list again and its items keep a list parent.

  2. Move the navigation landmark to a wrapper – Place each Menu inside a Div and set the Div’s tag to <nav>. Give it a label with its own Custom Attributes (for example aria-label = Main, Footer or Mobile). Clear the Menu element’s own ARIA Label field so the name sits only on the landmark. Do the same for the Layered menu inside your Off Canvas content.

  3. Retire the footer script and re-test – Remove the script that strips the role from ul.x-menu, clear any page or server cache, and run Lighthouse again. Because this fix is in the server-rendered markup, it does not depend on JavaScript running, so crawlers and automated audits see the corrected structure.

I will be forwarding this to our developers.

#3

Hi, Ruenel! Thanks for your answer…! We did all this…

cy.