Accessibility isn’t always easy. Should I be using a button or a link? Do I need ARIA labels? A lot of these questions can be answered using W3C’s WAI-ARIA Authoring Practices. The guide explains everything from carousels to breadcrumb navigations, from tabs to alerts—always with accessibility in mind. The design patterns that the guide discusses are battle-proven and have been around forever. They are, however, also a bit boring and antiquated.
If you want to follow a relatively new design trend—such as implementing a hamburger menu—you have to look into other resources. And yes, I just called hamburger menus a new design trend.
In her article Accessibility for Hamburger Menu, Lilian Lin calls our attention to aria-hidden and aria-label. Attaching a label to your menu button allows screen readers to announce what it does. Now that we have a label, the burger icon doesn’t provide any additional value and can be hidden.
<a=”#menu” id=”menu-toggle” class=”menu-toggle” aria-label=”Open the menu”>
<i class=”fa fa-bars” aria-hidden=”true”></i>
</a>
We are off to a great start! Although I would argue that we can do a lot more. I don’t know who decided that three lines that vaguely resemble a hamburger are universally understood to represent a menu (a menu that doesn’t even have hamburgers on it) but I am certain a lot of people are not familiar with the icon and its meaning. Accessibility isn’t just for people with visual impairment, it means that the web should be accessible to everyone—including your grandma. Which is why it is important to provide visible text alternatives for cryptic burger icons.
Users with screen readers will have an easier time when a website makes use of semantic HTML. In this case that means that the button that opens our menu is actually a button. Not a link using <a> and definitely not a div container with a click handler attached.
A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
A burger menu is an interactive element. We should communicate the state of it using aria-expanded. Set it to true when your menu is open. And don’t forget to switch your aria-label from ‘Open menu’ to ‘Close menu’.
In summary, all you need to do to build an accessible hamburger menu is to follow these five guidelines.
- Use semantic HTML: A burger menu is toggled from a button—not a link or a div.
- Provide visual text alternative for burger icon. Not everyone understands what these three lines represent.
- Use aria-hidden on decorative elements that are redundant (as we provide a text alternative).
- Use aria-label to communicate what your button does to people with vision impairment. Can be omitted when you provide a text alternative.
- Use aria-expanded to communicate whether the menu is open or closed.
You can find a Svelte implementation of these guidelines on Github. You can see it in action on my personal website. Please note that the hamburger menu will only be displayed on small viewports.