Magento 2.4.9 Accessibility Crisis: Main Menu Hidden from Screen Readers

As e-commerce migration experts at Shopping Mover, we constantly monitor the Magento ecosystem for critical updates and potential issues that could impact merchants. A significant accessibility bug has surfaced in Magento Open Source 2.4.9 (and confirmed in 2.4-develop), where the main navigation menu becomes completely inaccessible to screen readers. This issue, identified as GitHub Issue #41512, poses a serious compliance risk, especially with the European Accessibility Act looming.

The Hidden Menu: A Critical Accessibility Flaw

The problem manifests in the Luma theme: while the main menu (e.g., "What's New," "Women," "Men") is visually present and keyboard focusable, it is entirely missing from the browser's accessibility tree. This means screen readers cannot announce or interact with the menu items, effectively rendering the primary navigation unusable for visually impaired users.

Automated accessibility tools like Lighthouse and axe report a consistent violation: "ARIA hidden element must not be focusable or contain focusable elements." This indicates that interactive elements are incorrectly marked as hidden from assistive technologies.

Unpacking the Technical Root Cause

The issue is a regression introduced in Magento 2.4.9, stemming from changes within the

Magento_Theme::html/sections.phtml

template. The core of the problem lies in the main menu panel incorrectly receiving

aria-hidden="true"

and

style="display: none;"

attributes, which are never removed when the menu is visible.

A deep dive into the commit history by community contributor Peerapatfc revealed the sequence of events:

• Commit

  f7aa872024d

  : This commit replaced

  data-role="content"

  with

  role="tab"

  on the menu panel. This seemingly minor change had a significant ripple effect. The

  lib/web/mage/tabs.js

  (collapsible widget), which is responsible for managing the visibility and accessibility states of such panels, relies on the

  [data-role=content]

  selector. By changing this attribute, the collapsible widget could no longer find and control the menu panel.
• Commit

  89a5f7ee3d1

  (AC-15166): Following the above, this commit hardcoded

  aria-hidden="true"

  and

  style="display: none;"

  directly into the panel's template. Because the collapsible widget was no longer managing the panel, these hardcoded attributes were never dynamically switched back to

  false

  or removed when the menu became visible.

The result is a menu that is visually present but programmatically hidden, creating a critical barrier for accessibility.

Impact and Community Response

This bug is classified with a Severity S2, meaning it affects non-critical functionality but forces users to employ workarounds. However, its implications are far more severe for businesses operating in the European Union. With the European Accessibility Act coming into effect in June 2025, stores running Magento 2.4.9 will be in direct violation of accessibility standards, potentially facing legal repercussions and alienating a significant user base.

The Magento community has been swift to act. Peerapatfc not only confirmed the issue and provided a detailed root cause analysis but also proposed a concise fix. The suggested solution involves removing the static

aria-hidden

and inline

display: none

attributes from the panel in

sections.phtml

, while retaining

role="tabpanel"

. The Luma theme's CSS already handles the visual display, making these hardcoded attributes redundant and problematic.

A fix is actively being developed and will be submitted as a Pull Request, demonstrating the power of community collaboration in addressing critical platform issues.

What This Means for Magento Merchants and Developers

This incident underscores the vital importance of:

• Proactive Accessibility Testing: Regular audits with tools like Lighthouse and axe are crucial.
• Staying Updated: Keeping Magento instances updated to the latest patched versions.
• Community Engagement: Leveraging the Magento GitHub and forums for early issue detection and resolution.

For merchants on Magento 2.4.9, it's imperative to monitor the resolution of this GitHub issue closely and apply the patch as soon as it's available. For developers, understanding the intricacies of Magento's frontend widgets and their interaction with HTML attributes is key to preventing and resolving such accessibility regressions.