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.
Source explaining the decision not to use the hamburger menu: