How to make an accessible RWD multi-level main navigation without hamburger menu?

Question

I am currently working on a project to redesign a website for a large government organization. Therefore, meeting WCAG Level AA criteria is essential.

I make it a point to use fewer labels on the main site navigation. Among these, I must have "Home" as the first label.

I am not experiencing any problems with the desktop format. However, in the mobile format I am stuck in an impasse: I reject the use of a hamburger menu, and a navigation banner with horizontal scrolling is not accessible (according to criterion 1.4.10 Reflow).

The hamburger menu is generally inefficient and not recommended for primary navigation (now it's used for secondary functions by big players who ditch the hamburger for primary navigation, see sources below).

Is there a solution for me?

• It can't be a hamburger menu.
• It can't have horizontal scrolling.
• It must be accessible at all points.
• It must be a responsive web design (don't suggest mobile app patterns).

I have performed usability tests on a version with a hamburger menu and on a "tabs with a more menu" version. Both versions performed poorly with our testers.

Thanks!

Source explaining the decision not to use the hamburger menu:

• Nielsen Norman Group Research.
• Door4 agency research.
• Mobile alternatives to hamburger menu.
• Big players ditches it:
  • Spotify.
  • Google.
  • YouTube.

Answer 1

gov.uk has an interesting pattern that avoids hamburger menus.

Its desktop layout has a brief top menu that expands into a "mega menu" on click (not hover), which is nice for accessibility.

Collapsed menu:

Expanded menu:

On mobile, the menu simply becomes "Menu", and expands in a similar way:

Collapsed:

First level expanded:

Second level expanded:

This pattern would be most appropriate for users who are coming to the site knowing what they need.

If your users are less task-focused, or more likely to read your content before navigating elsewhere, another option is moving the menu to the bottom of the screen, as the American CDC website does:

Hybrid menu / hamburger icons tend to test better than unlabeled hamburgers, if you would be at all open to considering that.