Simple and Accessible SVG Menu Hamburger Animation

We could argue should we ever use so called hamburger icon as a menu toggle button. But that’s not the point of this article. Instead, I’d like to share how to create simple and accessible SVG menu hamburger with animation. By animation I mean that when you toggle to menu, hamburger icon smoothly turns into close icon.

Original idea is from Chris Wright and here is the Codepen I found from him. I just fine tuned it a little bit for my needs.

Here is the codepen demo where you can see the hamburger menu animation in action.

See the Pen Simple and accessible SVG menu hamburger animation by Sami Keijonen (@samikeijonen) on CodePen.

How to create accessible SVG menu hamburger animation

First you need SVG image that has three paths, one for each line in hamburger menu icon. Janne Ala-Äijälä was kind enough to share me the icon.

In the menu icon we group the lines (paths) inside <g> element. Did you notice that all the lines have their own class: line line-1, line line-2, and line line-3. Now we can target all the lines separately and animate them using pure CSS.

For the middle line we just fade it in and out using opacity rule. Top line rotates 45 degrees, and bottom line rotates -45 degrees. In the same time we change the transform origin so that menu icon looks more like close icon. That’s it, we’re done!

What about accessibility

There are no new tricks what comes to accessibility. I followed these basic rules:

• Use button as a toggle button. Not div, span, or any other weird stuff that don’t have accessibility API build in.
• Set aria-hidden true for the SVG image. There is no need need for the SVG icon be accessible by screen readers.
• In the same time add word “Menu” or similar wording inside button element. In my demo I have used screen-reader-class around it.
• Button also have aria-expanded ARIA rule which change it’s value from false to true depending is the menu opened or not.

Let me know if there is something we can improve in this simple and accessible SVG hamburger menu animation.