This week I did some research to try to build a hamburger menu that opens a slide-out navigation panel, a common design pattern nowadays. But I wanted to ensure the whole thing was keyboard-friendly and as accessible as possible.
This content originally appeared on Impressive Webs and was authored by Louis Lazaris
This week I did some research to try to build a hamburger menu that opens a slide-out navigation panel, a common design pattern nowadays. But I wanted to ensure the whole thing was keyboard-friendly and as accessible as possible.
I’m not 100% sure what I’ve come up with is the most accessible solution, but I did consult a number of decent sources on building accessible navigation menus like these. I also did some rudimentary testing using the free NVDA screen reader, to ensure there are no major problems.
You can view the demo embedded below on CodePen:
See the Pen
Keyboard-friendly and Accessible Hamburger Menu by Louis Lazaris (@impressivewebs)
on CodePen.
If you want to try a non-CodePen version to do some accessibility testing on it, you can view it via the button below:
Features of the Hamburger Menu
While I did my best to make this as accessible as possible, I’m more than happy to hear any suggestions. Here are the features of the component:
- It’s keyboard-friendly, so you can use the tab key to navigate around the page including tabbing to the hamburger menu itself
- Uses the UTF-8 symbol referred to as trigram for heaven: ☰ or you can use
☰ - Uses the multiplication sign UTF-8 symbol (× or
×) for the ‘close’ button inside the navigation panel. - The hamburger menu and the close button are wrapped inside a
<button>element - Each button has an
aria-labelthat defines what each one does - The navigation menu is hidden using
width: 0andvisibility: hiddento ensure it’s not keyboard accessible when it’s closed - When you open the navigation panel, the page focus goes immediately to the close button; when the panel is closed, focus goes back to the hamburger menu
- The hamburger menu and panel are nested inside a
<nav>element, which seems to be the best option for screen reader users - When the navigation panel is opened, a semi-transparent overlay covers the main content (added via JavaScript so no extra HTML)
- The navigation panel can be closed by clicking on the close button, cllicking on the overlay, or by using the
ESCkey on the keyboard - The hamburger menu uses
aria-expanded, which changes totrueorfalsevia JavaScript when the panel is opened and closed - The
<nav>element has itsaria-labelledbyattribute set to the ID of the hamburger button, which helps catalog elements for navigation (credit Birkir for his suggestion in the comments)
Additionally, I’ve added a tabindex value to the heading and paragraphs elements in the demo so you can see more realistically how to tab around. You wouldn’t normally do this with paragraphs and headings, it’s just for the demo.
The only slightly hacky part of the code is the fact that I’m using window.setTimeout() to delay some stuff so that the JavaScript behaviour matches the transition timing that’s used in the CSS. The panel takes 400ms to open or close, so I’m using the same timing in the JavaScript to ensure certain actions occur after the transition has completed.
I’m aware that I could use the transitionend event for this, but I find that event is extremely non-intuitive and it’s just easier to hard-code the timing according to what’s in the CSS. If you can correct this, feel free to fork the CodePen and I’ll add it to the code.
I should also point out that my JavaScript and CSS are quite dependent on the HTML structure, so this wouldn’t necessarily be something you could just drop into your own project without any modifications.
Sources for Building Accessible Navigation
As I mentioned at the start, this isn’t necessarily a perfect solution. Maybe it’s satisfactory, but could use some improvement. For example, another similar menu system I found online forces keyboard navigation to stay inside the navigation panel when it’s open, using JavaScript. This doesn’t seem to be the easiest task, so I didn’t give it much of a try in my script.
Here are some of the sources I consulted for building this (though I didn’t necessarily follow all the recommendations in these sources):
- Menus & Menu Buttons by Heydon Pickering
- Accessibility for Hamburger Menu by Lilian Lin
- Let’s Focus on Slide-Out Navigation by Alicia Evans
- Invisible Content Just for Screen Reader Users by WebAIM
And once again, here are the demo links:
I’d be happy to hear any suggestions on how to improve the accessibility or anything else in the code to help make this a more complete solution.
The post Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation appeared first on Impressive Webs.
This content originally appeared on Impressive Webs and was authored by Louis Lazaris
Louis Lazaris | Sciencx (2020-06-25T10:00:00+00:00) Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation. Retrieved from https://www.scien.cx/2020/06/25/accessible-and-keyboard-friendly-hamburger-menu-slide-out-navigation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.