Are Hamburger Menus Bad for Accessibility?

In web design, a hamburger menu is a button — usually with three horizontal lines — that typically opens a navigation menu.  The icon vaguely resembles a hamburger (or any other sandwich), hence the name. 

Like many trends in web design, hamburger menus are controversial: They can cause accessibility issues, depending on their implementation, and they might obscure important navigational information. However, they’re extremely common — and while they pose a few potential issues for users with disabilities, sidebars can be accessible with appropriate markup.

Pros and Cons of Hamburger Menus

In 2014, Mike Stern, Apple’s user experience (UX) evangelist, called hamburger menus “tedious" and encouraged developers to avoid them: 

“Remember, the three key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can go. Hamburger menus are terrible at both of those things, because the menu is not on the screen. It’s not visible. Only the button to display the menu is.”

Of course, Apple’s own website uses a hamburger menu on its mobile view (albeit with two lines instead of the traditional three). And since 2014, hamburger menus have spread to virtually every corner of the internet — including the Bureau of Internet Accessibility’s website.  

As a design element, hamburgers have some serious advantages:

• They save space and allow websites to maintain a clean aesthetic.
• They can provide quick access to navigation on maps, web apps, and other complex content that requires more real estate. 
• Most visual users will instantly recognize hamburger icons as navigation elements.

The bottom line: Hamburger menus are useful, and they’re probably here to stay. And while they require more work than a traditional list of links, hamburger menus can be implemented without creating usability issues or accessibility barriers. 

Tips for Improving Hamburger Menu Accessibility

Hamburger menus are almost always used for mobile navigation — not as a primary navigation control for larger viewports (such as desktop browsers). That’s because the purpose of the menu is to save screen real estate. If you don’t have a shortage of real estate, a traditional menu is a better choice. 

To create an accessible hamburger menu, follow these four tips: 

1. Start with semantic HTML.

Native semantic HTML keeps your website organized in a logical way and ensures that your content works with a wide variety of user agents. That generally means using <button> or <a>, depending on the purpose and contents of the hamburger menu.

Since your hamburger menu is dynamic, you may need additional markup to define its semantics — that means using WAI-ARIA. 

Related: Plain Old Semantic HTML: A Perfect Basis for Accessibility

2. Use appropriate ARIA attributes to identify the hamburger menu.

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) provides semantic information that can’t be communicated through native HTML. Hamburger menus usually require some ARIA: 

• role=”navigation" establishes that the hamburger menu includes links for navigating the website.
• aria-label is included in the navigation role tag and identifies the menu. For example: aria-label=”Main Navigation Menu”
• aria-expanded establishes whether or not the menu is expanded (aria-expanded=”true" and aria-expanded=”false"). This attribute must be modified dynamically according to the menu’s status. 
• aria-hidden=”true" can be used to hide the menu icon from screen readers while still allowing operation.

Remember, by using ARIA, you’re making a commitment to test your work! Navigation menus are particularly important for users, so review your markup carefully. Misused ARIA can create serious accessibility barriers, so work with an accessibility expert to avoid issues.

Related: 5 Tips for Using ARIA to Improve Web Accessibility

3. Limit the number of options.

Hamburger menus allow you to hide long lists of links — and if you know that the links aren’t taking up real estate, you may be tempted to keep adding to that list. 

That’s not a great practice: Navigation menus should include links to important pages, but if you’re serving dozens of hyperlinks to your users, they might not be able to find what they need. 

Before adding a new link, consider whether it actually improves navigation or whether you could nest the link in another section of your website.

Related: The Most Common Web Accessibility Issues to Avoid

4. Check for keyboard accessibility. 

Make sure your menu can be operated with a keyboard alone (no mouse) using basic controls: 

• Enter to activate the menu.
• Esc to exit the menu. 
• Tab and Shift-Tab to move through the links.

Keyboard accessibility is fundamental, so don’t skip this step. For more detailed guidance, developer Ashley Sheridan has an excellent article about building a basic accessible hamburger menu with minimal JavaScript.

Related: What is Keyboard Accessibility?

Create a long-term strategy for digital accessibility compliance

By thinking about users with disabilities, you can create robust content that functions as intended — and when you’re thinking about adding a new feature (such as a hamburger menu), you can make important decisions with confidence.

The Bureau of Internet Accessibility can help you build the best practices of accessibility into your web development process. To get started, send us a message to connect with a subject matter expert.