Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#3928 closed defect (bug) (fixed)

Move the mobile toggle button for the main menu to just above the menu items

Reported by: rianrietveld's profile rianrietveld Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: General Keywords:


At the moment the hamburger menu toggle button is placed in the DOM above the WordPress logo link and the search.
If you open the menu and tab further, first the WordPress logo link and the search field get focus before you can tab trough the menu.

If the button is moved, in the DOM, just before the list items in the menu, the tab order makes more sense.

So in the DOM the order will be better:

<button id="mobile-menu-button" aria-expanded="false">
    <span class="screen-reader-text">Toggle Menu</span>
<ul id="wporg-header-menu" class=" nav-menu">
   [list items ]

Attachments (1) (3.7 MB) - added by rianrietveld 6 years ago.
Mov file with a recording of the tab order of the main menu in mobile view

Change History (4)

6 years ago

Mov file with a recording of the tab order of the main menu in mobile view

#1 @coffee2code
5 years ago

  • Owner set to coffee2code
  • Status changed from new to accepted

#2 @coffee2code
5 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

Fixed in [14759-dotorg].

Thanks for the report!

#3 @coffee2code
5 years ago

In 8283:

Trac: Move main menu toggle button in header to immediately before the menu, so keyboard traversal from one to the other doesn't require tabbing past the logo and search field.

See #3928.

Note: See TracTickets for help on using tickets.