0

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:

1 Answer 1

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:

gov.uk health homepage

Expanded menu:

gov.uk with top menu expanded

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

Collapsed:

gov.uk mobile home

First level expanded:

gov.uk mobile home with first level of menu expanded

Second level expanded:

gov.uk mobile home with second level of menu 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:

CDC homepage menu

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

Hamburger Hybrid

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.