Accessibility for Hamburger Menu

Hamburger menu is what we use often in responsive design, like in a smaller mobile screen, where we want to hide our normal navigation bar (menu) to save space for other stuffs. So instead of hiding our normal menu bar, we put a hamburger like icon, and use this icon to trigger our menu bar.

Hamburger menu icon

The html mark-up is like this:

<a href=”#menu” class=”menu-toggle”>
<i class=”fa fa-bars”></i> /* the icon code - from font awesome */
</a>

Seems really simple, right? But how can we make it accessible for screen readers? As you know, our browser usually reads out the navigation bar. But when we hide it and replace it with an icon, screen reader will take it only as an ‘hamburger’, not a menu.

So we should add the following code to solve this problem:

<a=”#menu” id=”menu-toggle” class=”menu-toggle” aria-label=”Open the menu”>
<i class=”fa fa-bars” aria-hidden=”true”></i>
</a>

Let’s see what is happening here:

aria-label=”Open the menu”

aria-label is a text label that is not visible on the screen. So it is hidden from the screen, but will still let screen reader know that this link here is for opening/triggering the menu(what we hide before).

<i class=”fa fa-bars” aria-hidden=”true”></i>

aria-hidden=”true” is for hiding the hamburger icon for screen reader, so the browser will skip this icon. Why? Because we have the aria-label, which will tell the screen reader that this is for opening the menu! So the icon is not needed anymore.

In summary, when you want to make a hamburger menu accessible(not want to, but have to:-)), you should:

  • hide the menu icon from screen reader.
<i class=”fa fa-bars” aria-hidden=”true”></i>
  • insert the information to let screen reader know here has a menu bar, so they can click and open it up.
<a=”#menu” id=”menu-toggle” class=”menu-toggle” aria-label=”Open the menu”>
<i>Your icone goes here</i>

Easy, right? only a few codes will make your menu responsive and ACCESSIBLE!!

Front-End Web Developer in Training💻 | Toronto 🇨🇦| Guangzhou 🇨🇳

Front-End Web Developer in Training💻 | Toronto 🇨🇦| Guangzhou 🇨🇳