Keyboard accessibility of the main nav menu: focus and order

[pepelsbey]

Summary

When navigated via keyboard, the main nav’s focus order is not visual and breaks the expectations: not so bad on desktop, much worse on mobile. On mobile, the user menu is not even reachable.

URL

https://developer.mozilla.org/en-US/

Reproduction steps

1. Go to https://developer.mozilla.org/en-US/
2. Start tabbing through main navigation
3. Try to open collapsed menu items

Expected behavior

• All menu items available via keyboard
• Menu items focused in visual order

Actual behavior

• On mobile, the user menu is not reachable
• Menu items focused in random order, especially on mobile

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Android

Screenshot

In every case, I tab through the opened menu and back. On mobile, I also press space on focused elements to open them.

mobile.mov

desktop.mov

Anything else?

I’d suggest using two different markup structures for desktop and mobile views and display: none one of them depending on the viewport size. Until we have the reading-flow property, the DOM order is the king for the keyboard navigation. You can also listen to matchMedia when the viewport changes and reorder DOM but it’s not a good idea.

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.