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



  • 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:

    • https://www.nngroup.com/articles/hamburger-menus/ .
    • https://medium.com/decoding-digital/optimising-mobile-web-navigation-2-recent-successes-8132c715f516#29a3 .
    • https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8 .
    • Big players ditches it:
      • https://techcrunch.com/2016/05/03/spotify-ditches-the-controversial-hamburger-menu-in-ios-app-redesign/ .
      • https://www.droid-life.com/2021/01/28/updated-google-play-ui-ditches-hamburger-menu/ .
      • https://www.androidpolice.com/2015/03/15/new-youtube-interface-rolling-out-to-some-users-ditches-the-hamburger-menu/ .


  • https://www.gov.uk/government/organisations/uk-health-security-agency 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 https://www.cdc.gov/ 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




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2