Twenty Twenty-Five Theme: Critical Menu Accessibility Issue with Screen Readers

[marcuswisecaesar]

Quick summary

The WordPress.com Twenty Twenty-Five theme's navigation menu is inaccessible to screen reader users, specifically with VoiceOver on iOS devices. The menu does not respond to touch interactions when using VoiceOver, preventing blind users from accessing site navigation.

Steps to reproduce

1. Enable VoiceOver on an iOS device (iPhone/iPad)

   • Go to Settings > Accessibility > VoiceOver
   • Turn VoiceOver on

2. Visit any site using the Twenty Twenty-Five theme with a navigation menu

   • Test site: stephswensonband.ca
   • Note: Issue exists on both home page and internal pages

3. Attempt to interact with the navigation menu

   • Navigate to the menu using VoiceOver swipe gestures
   • Menu is announced as a "menu pop-up button."
   • Attempt to activate the menu using VoiceOver tap gestures

4. Observe the failure

   • Menu does not open/expand
   • No feedback is provided to the screen reader
   • Navigation options remain inaccessible
   • No alternative method to access navigation is provided

Additional Information:

• Browser/Platform: iOS Safari with VoiceOver
• Theme: Twenty Twenty-Five (latest version)
• Error feedback: None (silent failure)
• Comparative reference: The same menu structure works correctly on the Twenty Twenty theme (see yellowdockmusic.ca)

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Major

What other impact(s) does this issue have?

No response

If a workaround is available, please outline it here.

Temporary Workaround

1. Switch to the Twenty Twenty theme
2. Use a basic navigation block configuration
3. Implement a navigation menu in the Customizer

Platform (Simple and/or Atomic)

No response

[marcuswisecaesar]

Interaction: zen-9336561

[Robertght]

I recorded a demo on how it's working on 2020 vs their website below:

ScreenRecording_02-05-2025.10-12-14_1.MP4

However, I'm not sure I see how this should work correctly.

Also, I don't see any issues raised in core: https://core.trac.wordpress.org/search?q=Twenty+Twenty-Five&noquickjump=1&ticket=on

I can see this was asked here too: p1737636524825429-slack-C0FGK24F9

I'm leaving this as Needs triage for now as I'm not sure where to ask.

[jartes]

I spent some time on this one by checking the dotorg Twenty Twenty-Five demo site: https://wp-themes.com/twentytwentyfive and it seems it's working fine, but I need more time to investigate. It could be an issue with the navigation block?

[alaczek]

I tried replicating, but I don't have enough experience using VoiceOver. Since it's a default theme it would be helpful to establish if this is happening on .com only or both .com and the self-hosted version.

[Robertght]

@frosso helped replicate the issue through their Android device, using both Chrome and Brave.(Thank you!!)

They were also able to replicate this on a twentytwentyfour and it seems like this is a navigation issue more than a theme one.

Slack thread: p1738746145777269/1738743698.156649-slack-C0FGK24F9

cc @alaczek

[Robertght]

I also pinged in #gutenberg: p1738828860790919-slack-C45SNKV4Z

[jasmussen]

Thanks for the screen recording. It led me on the trail of re-testing the theme, and confirming that this is not an issue with the Navigation Block. Twenty Twenty appears to be using a custom overlay menu implementation. From a quick testing, it does not look like the theme has a header template part where an actual Navigation block could be inserted, so beyond switching to a newer theme like Twenty Twenty-Five, it looks like this needs a core patch to the theme itself.

Edit: Apologies, looks like the issue is referring to the Twenty Twenty Five theme, not Tweny Twenty. I over-indexed on the demo video. Looking more into this now.