Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation

Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation impressivewebs.com2 years ago in #Dev Love68

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: 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 element Each button has an aria-label that defines what each one does The navigation menu is hidden using width: 0 and visibility: hidden to 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 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 ESC key on the keyboard The hamburger menu uses aria-expanded, which changes to true or false via JavaScript when the panel is opened and closed 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,  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply